@liquidcommercedev/rmn-sdk 1.5.0-beta.36 → 1.5.0-beta.38

package/dist/index.esm.js

@@ -81,6 +81,17 @@ var RMN_ENV;
     RMN_ENV["STAGING"] = "staging";
     RMN_ENV["PRODUCTION"] = "production";
 })(RMN_ENV || (RMN_ENV = {}));
+var ENUM_TEXT_BLOCK_POSITION;
+(function (ENUM_TEXT_BLOCK_POSITION) {
+    ENUM_TEXT_BLOCK_POSITION["LEFT"] = "left";
+    ENUM_TEXT_BLOCK_POSITION["RIGHT"] = "right";
+    ENUM_TEXT_BLOCK_POSITION["TOP_LEFT"] = "top-left";
+    ENUM_TEXT_BLOCK_POSITION["TOP_RIGHT"] = "top-right";
+    ENUM_TEXT_BLOCK_POSITION["BOTTOM_LEFT"] = "bottom-left";
+    ENUM_TEXT_BLOCK_POSITION["BOTTOM_RIGHT"] = "bottom-right";
+    ENUM_TEXT_BLOCK_POSITION["MIDDLE_LEFT"] = "middle-left";
+    ENUM_TEXT_BLOCK_POSITION["MIDDLE_RIGHT"] = "middle-right";
+})(ENUM_TEXT_BLOCK_POSITION || (ENUM_TEXT_BLOCK_POSITION = {}));
 
 const REQUEST_CLOUD_PARTNER_SITE = 'X-Liquid-Partner-Site';
 const REQUEST_CLOUD_PROTECTED_KEY = 'X-Liquid-Protected';
@@ -17399,6 +17410,7 @@ class ProximityObserver {
         this.mutationObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'childList') {
+                    // Handle added nodes
                     mutation.addedNodes.forEach((node) => {
                         if (node instanceof HTMLElement) {
                             this.checkElement(node);
@@ -17409,14 +17421,33 @@ class ProximityObserver {
                             });
                         }
                     });
+                    // Handle removed nodes
+                    mutation.removedNodes.forEach((node) => {
+                        if (node instanceof HTMLElement) {
+                            this.handleRemovedElement(node);
+                            node.querySelectorAll('*').forEach((el) => {
+                                if (el instanceof HTMLElement) {
+                                    this.handleRemovedElement(el);
+                                }
+                            });
+                        }
+                    });
                 }
             });
         });
         // Start observing DOM changes
-        this.mutationObserver.observe(document.body, {
-            childList: true,
-            subtree: true,
-        });
+        if (document.body) {
+            this.mutationObserver.observe(document.body, {
+                childList: true,
+                subtree: true,
+            });
+        }
+    }
+    handleRemovedElement(element) {
+        if (element.id && this.processedIds.has(element.id)) {
+            this.processedIds.delete(element.id);
+            this.intersectionObserver.unobserve(element);
+        }
     }
     checkElement(element) {
         if (element.id && this.targetIds.has(element.id) && !this.processedIds.has(element.id)) {
@@ -17470,10 +17501,6 @@ class ProximityObserver {
             });
             // Trigger callback with the group
             this.callback(groupIdsToProcess);
-            // Cleanup if all elements have been processed
-            if (this.targetIds.size === this.processedIds.size) {
-                this.cleanup();
-            }
         });
     }
     /**
@@ -17500,12 +17527,6 @@ class ProximityObserver {
             }
         });
     }
-    cleanup() {
-        this.intersectionObserver.disconnect();
-        this.mutationObserver.disconnect();
-        this.processedIds.clear();
-        this.targetIds.clear();
-    }
 }
 
 /**
@@ -17947,36 +17968,51 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
     constructor() {
         super();
     }
+    getGradientDirection(position) {
+        switch (position) {
+            case ENUM_TEXT_BLOCK_POSITION.TOP_LEFT:
+            case ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT:
+                return 'to bottom';
+            case ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT:
+                return 'to right';
+            case ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT:
+                return 'to left';
+            case ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT:
+            case ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT:
+                return 'to top';
+            default:
+                return 'to top';
+        }
+    }
     template() {
         const prefix = this._config.prefix;
-        const { preHeader, header, description, ctaText } = this._data;
+        const { preHeader, header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT, } = this._data;
         return `
-    ${GFONT_PRECONNECT}
-    ${GFONT_SOURCE_SANS_3}
-    ${GFONT_CORMORANT}
-    <div class="${prefix}">
-      <div class="${prefix}__text">
-        ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
-        ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
-        ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
-        ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
+      ${GFONT_PRECONNECT}
+      ${GFONT_SOURCE_SANS_3}
+      ${GFONT_CORMORANT}
+      <div class="${prefix}">
+        <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition}">
+          ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
+          ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
+          ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
+          ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
+        </div>
       </div>
-    </div>
-`;
+    `;
     }
     styles() {
+        const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT } = this._data;
+        const gradientDirection = this.getGradientDirection(textBlockPosition);
         const linearGradient = generateGradientColor(this._config.overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
         const { textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
         const prefix = this._config.prefix;
         return `
         .${prefix} {
             display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            align-items: flex-start;
             width: 100%;
             height: 100%;
-            background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
+            background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");
             background-size: cover;
             background-repeat: no-repeat;
             background-position: center;
@@ -17984,6 +18020,7 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
             box-sizing: border-box;
             color: ${textColor};
             cursor: pointer;
+            position: relative;
         }
 
         .${prefix}__text {
@@ -17994,6 +18031,45 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
             width: 100%;
             height: fit-content;
             gap: 8px;
+            position: absolute;
+        }
+
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
+            top: 3%;
+            left: 3%;
+        }
+
+        .${prefix}text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
+            top: 3%;
+            right: 3%;
+            align-items: flex-end;
+            text-align: right;
+        }
+
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
+            top: 50%;
+            left: 3%;
+            transform: translateY(-50%);
+        }
+
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
+            top: 50%;
+            right: 3%;
+            transform: translateY(-50%);
+            align-items: flex-end;
+            text-align: right;
+        }
+
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
+            bottom: 3%;
+            left: 3%;
+        }
+
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
+            bottom: 3%;
+            right: 3%;
+            align-items: flex-end;
+            text-align: right;
         }
 
         .${prefix}__pre-header {
@@ -18043,7 +18119,7 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
 
         @container (min-width: 640px) {
             .${prefix} {
-                background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
+                background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${primaryImage}");
             }
 
             .${prefix}__text {
@@ -18052,22 +18128,6 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
         }
 
         @container (min-width: 768px) {
-            .${prefix}__primary-image {
-                width: 66.66666%;
-                height: 100%;
-            }
-
-            .${prefix}__main {
-                flex-direction: column;
-                height: 100%;
-                width: 33.33333%;
-            }
-
-            .${prefix}__secondary-image {
-                width: 100%;
-                height: 50%;
-            }
-
             .${prefix}__description {
                 font-size: 12px;
             }
@@ -18114,14 +18174,13 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
     }
     template() {
         const prefix = this._config.prefix;
-        const { header, description, ctaText } = this._data;
+        const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
         return `
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
         <div class="${prefix}">
-            <div class="${prefix}__content">
-                <div class="${prefix}__primary-image"></div>
+            <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition}">
                 <div class="${prefix}__main">
                     <div class="${prefix}__secondary-image"></div>
                     <div class="${prefix}__text">
@@ -18130,6 +18189,7 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
                         ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
                     </div>
                 </div>
+                <div class="${prefix}__primary-image"></div>
             </div>
         </div>
     `;
@@ -18170,7 +18230,7 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
         height: 40%;
         display: flex;
         flex-direction: row;
-         gap: 6px;
+        gap: 6px;
     }
 
     .${prefix}__secondary-image {
@@ -18251,6 +18311,10 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
             flex-direction: row;
         }
 
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
+            flex-direction: row-reverse;
+        }
+
         .${prefix}__primary-image {
             width: 66.66666%;
             height: 100%;
@@ -18262,6 +18326,10 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
             width: 33.33333%;
         }
 
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} .${prefix}__main {
+            flex-direction: column;
+        }
+
         .${prefix}__secondary-image {
             width: 100%;
             height: 50%;
@@ -18271,12 +18339,15 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
             width: 100%;
             height: 50%;
         }
+
         .${prefix}__header {
             font-size: 22px;
         }
+
         .${prefix}__description {
             font-size: 12px;
         }
+
         .${prefix}__cta-button {
             font-size: 12px;
         }
@@ -18315,13 +18386,13 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
     }
     template() {
         const prefix = this._config.prefix;
-        const { header, description, ctaText } = this._data;
+        const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
         return `
       ${GFONT_PRECONNECT}
       ${GFONT_SOURCE_SANS_3}
       ${GFONT_CORMORANT}
       <div class="${prefix}">
-        <div class="${prefix}__content">
+        <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition}">
             <div class="${prefix}__text">
                 ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
                 ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
@@ -18426,20 +18497,29 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
         .${prefix}__content {
             flex-direction: row;
         }
+
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
+            flex-direction: row-reverse;
+        }
+
         .${prefix}__image {
             width: 66.66666%;
             height: 100%;
         }
+
         .${prefix}__text {
             width: 33.33333%;
             height: 100%;
         }
+
         .${prefix}__header {
             font-size: 22px;
         }
+
         .${prefix}__description {
             font-size: 12px;
         }
+
         .${prefix}__cta-button {
             font-size: 12px;
         }
@@ -18453,7 +18533,7 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
             font-size: 13px;
         }
         .${prefix}__cta-button {
-          font-size: 13px;
+            font-size: 13px;
         }
     }
 
@@ -18517,13 +18597,13 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
     }
     template() {
         const prefix = this._config.prefix;
-        const { header, description, ctaText } = this._data;
+        const { header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
         return `
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
     <div class="${prefix}">
-      <div class="${prefix}__text">
+      <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition}">
         ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
         ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
         ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
@@ -18550,6 +18630,7 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
         overflow: hidden;
         cursor: pointer;
         color: ${textColor};
+        position: relative;
       }
 
       .${prefix}__text {
@@ -18559,6 +18640,22 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
         justify-content: center;
         align-items: flex-start;
         gap: 10px;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        max-width: 50%;
+      }
+
+      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.LEFT} {
+        left: 0;
+        text-align: left;
+        align-items: flex-start;
+      }
+
+      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
+        right: 0;
+        text-align: right;
+        align-items: flex-end;
       }
 
       .${prefix}__header {
@@ -18819,15 +18916,31 @@ class RbLongToutTallSE extends BaseSpotComponent {
     constructor() {
         super();
     }
+    getGradientDirection(position) {
+        switch (position) {
+            case ENUM_TEXT_BLOCK_POSITION.TOP_LEFT:
+            case ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT:
+                return 'to bottom';
+            case ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT:
+                return 'to right';
+            case ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT:
+                return 'to left';
+            case ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT:
+            case ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT:
+                return 'to top';
+            default:
+                return 'to top';
+        }
+    }
     template() {
         const prefix = this._config.prefix;
-        const { preHeader, header, description, ctaText } = this._data;
+        const { preHeader, header, description, ctaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT, } = this._data;
         return `
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
     <div class="${prefix}">
-      <div class="${prefix}__text">
+      <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition.toLowerCase().replace('_', '-')}">
         ${preHeader ? `<h2 class="${prefix}__pre-header">${preHeader}</h2>` : ''}
         ${header ? `<h2 class="${prefix}__header">${header}</h2>` : ''}
         ${description ? `<p class="${prefix}__description">${description}</p>` : ''}
@@ -18837,17 +18950,17 @@ class RbLongToutTallSE extends BaseSpotComponent {
 `;
     }
     styles() {
+        const { textBlockPosition = ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT } = this._data;
+        const gradientDirection = this.getGradientDirection(textBlockPosition);
+        const linearGradient = generateGradientColor(this._config.overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
         const { textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
         const prefix = this._config.prefix;
         return `
       .${prefix} {
           display: flex;
-          flex-direction: column;
-          justify-content: space-around;
-          align-items: flex-start;
           width: 100%;
           height: 100%;
-          background-image: url("${mobilePrimaryImage}");
+          background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${mobilePrimaryImage}");
           background-size: cover;
           background-repeat: no-repeat;
           background-position: center;
@@ -18855,6 +18968,7 @@ class RbLongToutTallSE extends BaseSpotComponent {
           box-sizing: border-box;
           color: ${textColor};
           cursor: pointer;
+          position: relative;
       }
 
       .${prefix}__text {
@@ -18865,6 +18979,51 @@ class RbLongToutTallSE extends BaseSpotComponent {
           width: 100%;
           height: fit-content;
           gap: 8px;
+          position: absolute;
+      }
+
+      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
+          top: 3%;
+          left: 3%;
+          align-items: flex-start;
+          text-align: left;
+      }
+
+      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
+          top: 3%;
+          right: 3%;
+          align-items: flex-end;
+          text-align: right;
+      }
+
+      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
+          top: 50%;
+          left: 3%;
+          transform: translateY(-50%);
+          align-items: flex-start;
+          text-align: left;
+      }
+
+      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
+          top: 50%;
+          right: 3%;
+          transform: translateY(-50%);
+          align-items: flex-end;
+          text-align: right;
+      }
+
+      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
+          bottom: 3%;
+          left: 3%;
+          align-items: flex-start;
+          text-align: left;
+      }
+
+      .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
+          bottom: 3%;
+          right: 3%;
+          align-items: flex-end;
+          text-align: right;
       }
 
       .${prefix}__pre-header {
@@ -18914,7 +19073,7 @@ class RbLongToutTallSE extends BaseSpotComponent {
 
       @container (min-width: 640px) {
           .${prefix} {
-              background-image: url("${primaryImage}");
+              background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${primaryImage}");
           }
 
           .${prefix}__text {
@@ -18923,22 +19082,6 @@ class RbLongToutTallSE extends BaseSpotComponent {
       }
 
       @container (min-width: 768px) {
-          .${prefix}__primary-image {
-              width: 66.66666%;
-              height: 100%;
-          }
-
-          .${prefix}__main {
-              flex-direction: column;
-              height: 100%;
-              width: 33.33333%;
-          }
-
-          .${prefix}__secondary-image {
-              width: 100%;
-              height: 50%;
-          }
-
           .${prefix}__description {
               font-size: 12px;
           }
@@ -21564,4 +21707,4 @@ function RmnEventManager() {
     };
 }
 
-export { BrowserRmnClient, RMN_ENV, RMN_EVENT, RMN_FILTER_PROPERTIES, RMN_SPOT_EVENT, RMN_SPOT_TYPE, RmnClient, RmnEventManager, ServerRmnClient };
+export { BrowserRmnClient, ENUM_TEXT_BLOCK_POSITION, RMN_ENV, RMN_EVENT, RMN_FILTER_PROPERTIES, RMN_SPOT_EVENT, RMN_SPOT_TYPE, RmnClient, RmnEventManager, ServerRmnClient };

package/dist/types/enums.d.ts

@@ -74,3 +74,13 @@ export declare enum RMN_ENV {
     STAGING = "staging",
     PRODUCTION = "production"
 }
+export declare enum ENUM_TEXT_BLOCK_POSITION {
+    LEFT = "left",
+    RIGHT = "right",
+    TOP_LEFT = "top-left",
+    TOP_RIGHT = "top-right",
+    BOTTOM_LEFT = "bottom-left",
+    BOTTOM_RIGHT = "bottom-right",
+    MIDDLE_LEFT = "middle-left",
+    MIDDLE_RIGHT = "middle-right"
+}

package/dist/types/modules/helper-service/proximity-observer.service.d.ts

@@ -13,6 +13,7 @@ export declare class ProximityObserver {
     private readonly maxGroupSize;
     constructor(elementIds: string[], callback: (intersectingIds: string[]) => void, options?: IProximityObserverOptions);
     private initializeObservers;
+    private handleRemovedElement;
     private checkElement;
     private findNearbyTargetIds;
     private handleIntersection;
@@ -25,6 +26,5 @@ export declare class ProximityObserver {
      */
     private calculateDistance;
     private observeExistingElements;
-    private cleanup;
 }
 export {};

package/dist/types/modules/selection/selection.interface.d.ts

@@ -1,4 +1,4 @@
-import type { RMN_SPOT_EVENT, RMN_SPOT_TYPE } from 'enums';
+import type { ENUM_TEXT_BLOCK_POSITION, RMN_SPOT_EVENT, RMN_SPOT_TYPE } from 'enums';
 import type { PlacementIdType, SpotVariantType } from 'modules/selection';
 import type { RmnFilterType, RmnSpotType } from 'types';
 export interface ISpotSelectionParams {
@@ -27,6 +27,7 @@ export interface ISpot {
     header?: string;
     description?: string;
     ctaText?: string;
+    textBlockPosition?: ENUM_TEXT_BLOCK_POSITION;
     textColor?: string;
     backgroundColor?: string;
     ctaTextColor?: string;

package/dist/types/modules/spot-template/rb-template.interface.d.ts

@@ -1,3 +1,4 @@
+import type { ENUM_TEXT_BLOCK_POSITION } from 'enums';
 import type { ISpotTemplateBaseData } from './spot-template.interface';
 export interface ICollectionBannerWithoutTextBlockRbSpot extends ISpotTemplateBaseData {
     primaryImage: string;
@@ -13,6 +14,7 @@ export interface IHomepageHeroFullImageRbSpot extends ISpotTemplateBaseData {
     ctaBorderColor: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
+    textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.TOP_LEFT | ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT;
 }
 export interface IHomepageHeroThreeTileRbSpot extends ISpotTemplateBaseData {
     header: string;
@@ -25,6 +27,7 @@ export interface IHomepageHeroThreeTileRbSpot extends ISpotTemplateBaseData {
     mobilePrimaryImage?: string;
     secondaryImage: string;
     mobileSecondaryImage?: string;
+    textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.RIGHT;
 }
 export interface IHomepageHeroTwoTileRbSpot extends ISpotTemplateBaseData {
     header: string;
@@ -35,6 +38,7 @@ export interface IHomepageHeroTwoTileRbSpot extends ISpotTemplateBaseData {
     ctaTextColor: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
+    textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.RIGHT;
 }
 export interface IInTextRbSpot extends ISpotTemplateBaseData {
     header: string;
@@ -50,6 +54,7 @@ export interface ILargeCategoryImageToutRbSpot extends ISpotTemplateBaseData {
     ctaBorderColor: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
+    textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.RIGHT;
 }
 export interface INavigationBannerRbSpot extends ISpotTemplateBaseData {
     header: string;
@@ -91,6 +96,7 @@ export interface ILongToutTallRbSpot extends ISpotTemplateBaseData {
     ctaBorderColor: string;
     primaryImage: string;
     mobilePrimaryImage?: string;
+    textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.TOP_LEFT | ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT | ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT;
 }
 export interface IVideoPlayerRbSpot extends ISpotTemplateBaseData {
     video: {

package/dist/types/modules/spot-template/reservebar/homepage-hero-full-image.template.d.ts

@@ -2,6 +2,7 @@ import { BaseSpotComponent } from 'modules/element/component/spot';
 import type { IHomepageHeroFullImageRbSpot } from '../rb-template.interface';
 export declare class RbHomepageHeroFullImageSE extends BaseSpotComponent<IHomepageHeroFullImageRbSpot> {
     constructor();
+    private getGradientDirection;
     protected template(): string;
     protected styles(): string;
 }

package/dist/types/modules/spot-template/reservebar/long-tout-tall.template.d.ts

@@ -2,6 +2,7 @@ import { BaseSpotComponent } from 'modules/element/component/spot';
 import type { ILongToutTallRbSpot } from '../rb-template.interface';
 export declare class RbLongToutTallSE extends BaseSpotComponent<ILongToutTallRbSpot> {
     constructor();
+    private getGradientDirection;
     protected template(): string;
     protected styles(): string;
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@liquidcommercedev/rmn-sdk",
   "description": "LiquidCommerce RMN SDK",
   "author": "LiquidCommerce Tech",
-  "version": "1.5.0-beta.36",
+  "version": "1.5.0-beta.38",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",