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

package/dist/index.cjs

@@ -83,6 +83,17 @@ exports.RMN_ENV = void 0;
     RMN_ENV["STAGING"] = "staging";
     RMN_ENV["PRODUCTION"] = "production";
 })(exports.RMN_ENV || (exports.RMN_ENV = {}));
+exports.ENUM_TEXT_BLOCK_POSITION = void 0;
+(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";
+})(exports.ENUM_TEXT_BLOCK_POSITION || (exports.ENUM_TEXT_BLOCK_POSITION = {}));
 
 const REQUEST_CLOUD_PARTNER_SITE = 'X-Liquid-Partner-Site';
 const REQUEST_CLOUD_PROTECTED_KEY = 'X-Liquid-Protected';
@@ -17949,36 +17960,51 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
     constructor() {
         super();
     }
+    getGradientDirection(position) {
+        switch (position) {
+            case exports.ENUM_TEXT_BLOCK_POSITION.TOP_LEFT:
+            case exports.ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT:
+                return 'to bottom';
+            case exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT:
+                return 'to right';
+            case exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT:
+                return 'to left';
+            case exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT:
+            case exports.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 = exports.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 = exports.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;
@@ -17986,6 +18012,7 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
             box-sizing: border-box;
             color: ${textColor};
             cursor: pointer;
+            position: relative;
         }
 
         .${prefix}__text {
@@ -17996,6 +18023,45 @@ class RbHomepageHeroFullImageSE extends BaseSpotComponent {
             width: 100%;
             height: fit-content;
             gap: 8px;
+            position: absolute;
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
+            top: 3%;
+            left: 3%;
+        }
+
+        .${prefix}text-block--${exports.ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
+            top: 3%;
+            right: 3%;
+            align-items: flex-end;
+            text-align: right;
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
+            top: 50%;
+            left: 3%;
+            transform: translateY(-50%);
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
+            top: 50%;
+            right: 3%;
+            transform: translateY(-50%);
+            align-items: flex-end;
+            text-align: right;
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
+            bottom: 3%;
+            left: 3%;
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
+            bottom: 3%;
+            right: 3%;
+            align-items: flex-end;
+            text-align: right;
         }
 
         .${prefix}__pre-header {
@@ -18045,7 +18111,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 {
@@ -18054,22 +18120,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;
             }
@@ -18116,14 +18166,13 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
     }
     template() {
         const prefix = this._config.prefix;
-        const { header, description, ctaText } = this._data;
+        const { header, description, ctaText, textBlockPosition = exports.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">
@@ -18132,6 +18181,7 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
                         ${ctaText ? `<span class="${prefix}__cta-button">${ctaText}</span>` : ''}
                     </div>
                 </div>
+                <div class="${prefix}__primary-image"></div>
             </div>
         </div>
     `;
@@ -18172,7 +18222,7 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
         height: 40%;
         display: flex;
         flex-direction: row;
-         gap: 6px;
+        gap: 6px;
     }
 
     .${prefix}__secondary-image {
@@ -18253,6 +18303,10 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
             flex-direction: row;
         }
 
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.RIGHT} {
+            flex-direction: row-reverse;
+        }
+
         .${prefix}__primary-image {
             width: 66.66666%;
             height: 100%;
@@ -18264,6 +18318,10 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
             width: 33.33333%;
         }
 
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.RIGHT} .${prefix}__main {
+            flex-direction: column;
+        }
+
         .${prefix}__secondary-image {
             width: 100%;
             height: 50%;
@@ -18273,12 +18331,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;
         }
@@ -18317,13 +18378,13 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
     }
     template() {
         const prefix = this._config.prefix;
-        const { header, description, ctaText } = this._data;
+        const { header, description, ctaText, textBlockPosition = exports.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>` : ''}
@@ -18428,20 +18489,29 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
         .${prefix}__content {
             flex-direction: row;
         }
+
+        .${prefix}__text-block--${exports.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;
         }
@@ -18455,7 +18525,7 @@ class RbHomepageHeroTwoTileSE extends BaseSpotComponent {
             font-size: 13px;
         }
         .${prefix}__cta-button {
-          font-size: 13px;
+            font-size: 13px;
         }
     }
 
@@ -18519,13 +18589,13 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
     }
     template() {
         const prefix = this._config.prefix;
-        const { header, description, ctaText } = this._data;
+        const { header, description, ctaText, textBlockPosition = exports.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>` : ''}
@@ -18552,6 +18622,7 @@ class RbLargeCategoryImageToutSE extends BaseSpotComponent {
         overflow: hidden;
         cursor: pointer;
         color: ${textColor};
+        position: relative;
       }
 
       .${prefix}__text {
@@ -18561,6 +18632,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--${exports.ENUM_TEXT_BLOCK_POSITION.LEFT} {
+        left: 0;
+        text-align: left;
+        align-items: flex-start;
+      }
+
+      .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.RIGHT} {
+        right: 0;
+        text-align: right;
+        align-items: flex-end;
       }
 
       .${prefix}__header {
@@ -18821,15 +18908,31 @@ class RbLongToutTallSE extends BaseSpotComponent {
     constructor() {
         super();
     }
+    getGradientDirection(position) {
+        switch (position) {
+            case exports.ENUM_TEXT_BLOCK_POSITION.TOP_LEFT:
+            case exports.ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT:
+                return 'to bottom';
+            case exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT:
+                return 'to right';
+            case exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT:
+                return 'to left';
+            case exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT:
+            case exports.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 = exports.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>` : ''}
@@ -18839,17 +18942,17 @@ class RbLongToutTallSE extends BaseSpotComponent {
 `;
     }
     styles() {
+        const { textBlockPosition = exports.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;
@@ -18857,6 +18960,7 @@ class RbLongToutTallSE extends BaseSpotComponent {
           box-sizing: border-box;
           color: ${textColor};
           cursor: pointer;
+          position: relative;
       }
 
       .${prefix}__text {
@@ -18867,6 +18971,51 @@ class RbLongToutTallSE extends BaseSpotComponent {
           width: 100%;
           height: fit-content;
           gap: 8px;
+          position: absolute;
+      }
+
+      .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
+          top: 3%;
+          left: 3%;
+          align-items: flex-start;
+          text-align: left;
+      }
+
+      .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
+          top: 3%;
+          right: 3%;
+          align-items: flex-end;
+          text-align: right;
+      }
+
+      .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
+          top: 50%;
+          left: 3%;
+          transform: translateY(-50%);
+          align-items: flex-start;
+          text-align: left;
+      }
+
+      .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
+          top: 50%;
+          right: 3%;
+          transform: translateY(-50%);
+          align-items: flex-end;
+          text-align: right;
+      }
+
+      .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
+          bottom: 3%;
+          left: 3%;
+          align-items: flex-start;
+          text-align: left;
+      }
+
+      .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
+          bottom: 3%;
+          right: 3%;
+          align-items: flex-end;
+          text-align: right;
       }
 
       .${prefix}__pre-header {
@@ -18916,7 +19065,7 @@ class RbLongToutTallSE extends BaseSpotComponent {
 
       @container (min-width: 640px) {
           .${prefix} {
-              background-image: url("${primaryImage}");
+              background-image: linear-gradient(${gradientDirection}, ${linearGradient}), url("${primaryImage}");
           }
 
           .${prefix}__text {
@@ -18925,22 +19074,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;
           }