@liquidcommercedev/rmn-sdk 1.5.0-beta.47 → 1.5.0-beta.48

package/dist/index.cjs

@@ -18,6 +18,8 @@ exports.RMN_SPOT_TYPE = void 0;
     RMN_SPOT_TYPE["RB_VIDEO_PLAYER"] = "rbVideoPlayer";
     RMN_SPOT_TYPE["RB_IN_TEXT"] = "rbInText";
     RMN_SPOT_TYPE["RB_CAROUSEL_HORIZONTAL_INFO_CARD"] = "rbCarouselHorizontalInfoCard";
+    RMN_SPOT_TYPE["RB_CAROUSEL_VERTICAL_SMALL_IMAGE_INFO_CARD"] = "rbCarouselVerticalSmallImageInfoCard";
+    RMN_SPOT_TYPE["RB_CAROUSEL_HORIZONTAL_SHORT_INFO_CARD"] = "rbCarouselHorizontalShortInfoCard";
     // IAB Standard Spot Types
     RMN_SPOT_TYPE["BILLBOARD"] = "billboard";
     RMN_SPOT_TYPE["LARGE_RECTANGLE"] = "largeRectangle";
@@ -92,6 +94,7 @@ exports.ENUM_TEXT_BLOCK_POSITION = void 0;
     ENUM_TEXT_BLOCK_POSITION["TOP"] = "top";
     ENUM_TEXT_BLOCK_POSITION["BOTTOM"] = "bottom";
     ENUM_TEXT_BLOCK_POSITION["MIDDLE"] = "middle";
+    ENUM_TEXT_BLOCK_POSITION["CENTER"] = "center";
     ENUM_TEXT_BLOCK_POSITION["TOP_LEFT"] = "top-left";
     ENUM_TEXT_BLOCK_POSITION["TOP_RIGHT"] = "top-right";
     ENUM_TEXT_BLOCK_POSITION["BOTTOM_LEFT"] = "bottom-left";
@@ -16973,6 +16976,8 @@ const SPOT_DIMENSIONS = {
     [exports.RMN_SPOT_TYPE.RB_VIDEO_PLAYER]: { width: 1280, height: 720 },
     [exports.RMN_SPOT_TYPE.RB_IN_TEXT]: { width: 1, height: 1 },
     [exports.RMN_SPOT_TYPE.RB_CAROUSEL_HORIZONTAL_INFO_CARD]: { width: 592, height: 386 },
+    [exports.RMN_SPOT_TYPE.RB_CAROUSEL_VERTICAL_SMALL_IMAGE_INFO_CARD]: { width: 285, height: 386 },
+    [exports.RMN_SPOT_TYPE.RB_CAROUSEL_HORIZONTAL_SHORT_INFO_CARD]: { width: 285, height: 416 },
     [exports.RMN_SPOT_TYPE.SMALL_RECTANGLE]: { width: 180, height: 150 },
     [exports.RMN_SPOT_TYPE.MEDIUM_RECTANGLE]: { width: 300, height: 250 },
     [exports.RMN_SPOT_TYPE.LARGE_RECTANGLE]: { width: 336, height: 280 },
@@ -17990,7 +17995,7 @@ class RbCarouselHorizontalInfoCardSE extends BaseSpotComponent {
     `;
     }
     styles() {
-        const { headerColor = '#212121', textColor = '#616161', backgroundColor = '#e8e6de', ctaTextColor = '#b5914a', primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
+        const { headerColor = '#212121', textColor = '#616161', backgroundColor = '#f7f5f3', ctaTextColor = '#b5914a', primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
         const prefix = this._config.prefix;
         return `
       .${prefix} {
@@ -18042,8 +18047,7 @@ class RbCarouselHorizontalInfoCardSE extends BaseSpotComponent {
         margin: 0;
         color:${headerColor};
         font-family: "Cormorant", system-ui;
-        font-weight: 700;
-        font-size: 8px;
+        font-size: ${this._isMobileDevice ? '8px' : '9px'};
         line-height: normal;
         letter-spacing: 0.8px;
       }
@@ -18053,7 +18057,7 @@ class RbCarouselHorizontalInfoCardSE extends BaseSpotComponent {
         color: ${headerColor};
         font-family: "Cormorant", system-ui;
         font-weight: bold;
-        font-size: 16px;
+        font-size: ${this._isMobileDevice ? '16px' : '18px'};
         line-height: 24px;
         position: relative;
         padding-bottom: 10px;
@@ -18080,10 +18084,9 @@ class RbCarouselHorizontalInfoCardSE extends BaseSpotComponent {
 
       .${prefix}__cta-button {
         color: ${ctaTextColor};
-        font-size: 10px;
+        font-size: ${this._isMobileDevice ? '10px' : '12px'};
         font-weight: 700;
         font-family: "Source Sans 3", system-ui;
-        letter-spacing: 1.4px;
         border: none;
         cursor: pointer;
         padding: 10px 0;
@@ -18159,19 +18162,12 @@ class RbCarouselHorizontalInfoCardSE extends BaseSpotComponent {
           font-size: 14px;
         }
         
-        .${prefix}__cta-button {
-          font-size: 13px;
-        }
       }
 
       @container (min-width: 1280px) {
         .${prefix}__header {
           font-size: 24px;
         }
-      
-        .${prefix}__cta-button {
-          font-size: 14px;
-        }
       }
     `;
     }
@@ -18181,7 +18177,409 @@ class RbCarouselHorizontalInfoCardSE extends BaseSpotComponent {
         enableMobileTexts = true, } = this._data;
         const content = this._isMobileDevice && enableMobileTexts
             ? {
-                preheader: mobilePreHeader,
+                preHeader: mobilePreHeader,
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { preHeader, header, description, ctaText };
+        return Object.values(content).some(Boolean);
+    }
+}
+
+class RbCarouselHorizontalShortInfoCardSE extends BaseSpotComponent {
+    constructor() {
+        super();
+        this.reRenderOnDeviceChange = true;
+    }
+    template() {
+        const prefix = this._config.prefix;
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, textBlockPosition = exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = true, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                preHeader: mobilePreHeader,
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { preHeader, header, description, ctaText };
+        const elements = this.hasContent
+            ? [
+                renderElement('p', `${prefix}__preHeader`, content.preHeader),
+                renderElement('h2', `${prefix}__header`, content.header),
+                renderElement('p', `${prefix}__description`, content.description),
+                renderElement('span', `${prefix}__cta-button`, content.ctaText),
+            ]
+            : [];
+        return `
+      ${importFonts()}
+      <div class="${prefix}">
+        <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${textBlockPosition}">
+        <div class="${prefix}__image"></div>
+            <div class="${prefix}__text">
+              <div class="${prefix}__text-container">
+                ${elements.join('')}
+              </div>
+            </div>
+        </div>
+      </div>
+    `;
+    }
+    styles() {
+        const { headerColor = '#212121', textColor = '#616161', backgroundColor = '#f7f5f3', ctaTextColor = '#b5914a', primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
+        const prefix = this._config.prefix;
+        return `
+    .${prefix} {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      border-radius: 5px;
+    }
+
+    .${prefix}__content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      border-radius: 5px;
+    }
+
+    .${prefix}__image {
+      width: 100%;
+      height: 62.5%;
+      background-image: url("${this._isMobileDevice ? mobilePrimaryImage : primaryImage}");
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      min-width: 100px;
+      overflow: hidden;
+    }
+
+    .${prefix}__text {
+      background-color: ${backgroundColor};
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+      height: 37.5%;
+      padding: 15px;
+      box-sizing: border-box;
+    }
+
+    .${prefix}__text-container {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    .${prefix}__preHeader {
+      margin: 0;
+      color:${headerColor};
+      font-family: "Cormorant", system-ui;
+      font-size: ${this._isMobileDevice ? '8px' : '9px'};
+      line-height: normal;
+      letter-spacing: 0.8px;
+    }
+
+    .${prefix}__header {
+      margin: 0;
+      color: ${headerColor};
+      font-family: "Cormorant", system-ui;
+      font-weight: bold;
+      font-size: ${this._isMobileDevice ? '16px' : '18px'};
+      line-height: 24px;
+      position: relative;
+      padding-bottom: 10px;
+      margin-bottom: 5px;
+    }
+    
+    .${prefix}__header::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 76px;
+      height: 1px;
+      background-color: ${ctaTextColor};
+    }
+
+    .${prefix}__description {
+      color: ${textColor};
+      margin: 0;
+      font-size: 10px;
+      font-family: "Source Sans 3", system-ui;
+      font-weight: 400;
+    }
+
+    .${prefix}__cta-button {
+      color: ${ctaTextColor};
+      font-size: ${this._isMobileDevice ? '10px' : '12px'};
+      font-weight: 700;
+      font-family: "Source Sans 3", system-ui;
+      border: none;
+      cursor: pointer;
+      transition: opacity 0.3s ease;
+      display: inline-block;
+      align-self: flex-end;
+      text-decoration: none;
+      margin-top: auto;
+    }
+
+    .${prefix}__content:hover .${prefix}__cta-button {
+      opacity: 0.8;
+    }
+
+    @container (min-width: 768px) {
+      .${prefix}__preHeader {
+        font-size: 9px;
+      }
+
+      .${prefix}__cta-button {
+        font-size: 12px;
+      }
+    }
+
+    @container (min-width: 1024px) {
+      .${prefix}__text {
+        padding: 20px;
+      }
+      
+      .${prefix}__text-container {
+        padding-right: 20px;
+      }
+      
+      .${prefix}__preHeader {
+        font-size: 10px;
+      }
+      
+      .${prefix}__header {
+        font-size: 18px;
+      }
+      
+      .${prefix}__description {
+        font-size: 14px;
+      }
+    }
+
+    @container (min-width: 1280px) {
+      .${prefix}__header {
+        font-size: 24px;
+      }
+    }
+  `;
+    }
+    get hasContent() {
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = true, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                preHeader: mobilePreHeader,
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { preHeader, header, description, ctaText };
+        return Object.values(content).some(Boolean);
+    }
+}
+
+class RbCarouselVerticalSmallImageInfoCardSE extends BaseSpotComponent {
+    constructor() {
+        super();
+        this.reRenderOnDeviceChange = true;
+    }
+    template() {
+        const prefix = this._config.prefix;
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, textBlockPosition = exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = true, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                preHeader: mobilePreHeader,
+                header: mobileHeader,
+                description: mobileDescription,
+                ctaText: mobileCtaText,
+            }
+            : { preHeader, header, description, ctaText };
+        const elements = this.hasContent
+            ? [
+                renderElement('p', `${prefix}__preHeader`, content.preHeader),
+                renderElement('h2', `${prefix}__header`, content.header),
+                renderElement('p', `${prefix}__description`, content.description),
+                renderElement('span', `${prefix}__cta-button`, content.ctaText),
+            ]
+            : [];
+        return `
+      ${importFonts()}
+      <div class="${prefix}">
+        <div class="${prefix}__content ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${textBlockPosition}">
+        <div class="${prefix}__image"></div>
+            <div class="${prefix}__text">
+              <div class="${prefix}__text-container">
+                ${elements.join('')}
+              </div>
+            </div>
+        </div>
+      </div>
+    `;
+    }
+    styles() {
+        const { headerColor = '#212121', textColor = '#616161', backgroundColor = '#f7f5f3', ctaTextColor = '#b5914a', primaryImage, mobilePrimaryImage = primaryImage, } = this._data;
+        const prefix = this._config.prefix;
+        return `
+    .${prefix} {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      border-radius: 5px;
+    }
+
+    .${prefix}__content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      border-radius: 5px;
+    }
+
+    .${prefix}__image {
+      width: 100%;
+      height: 50%;
+      background-image: url("${this._isMobileDevice ? mobilePrimaryImage : primaryImage}");
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      min-width: 100px;
+      overflow: hidden;
+    }
+
+    .${prefix}__text {
+      background-color: ${backgroundColor};
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      width: 100%;
+      height: 50%;
+      padding: 16px;
+      box-sizing: border-box;
+    }
+
+    .${prefix}__text-container {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+      height: 100%;
+      justify-content: space-between;
+    }
+
+    .${prefix}__preHeader {
+      margin: 0;
+      color:${headerColor};
+      font-family: "Cormorant", system-ui;
+      font-size: ${this._isMobileDevice ? '8px' : '9px'};
+      line-height: normal;
+      letter-spacing: 0.8px;
+    }
+
+    .${prefix}__header {
+      margin: 0;
+      color: ${headerColor};
+      font-family: "Cormorant", system-ui;
+      font-weight: bold;
+      font-size: ${this._isMobileDevice ? '16px' : '18px'};
+      line-height: 24px;
+      position: relative;
+      padding-bottom: 10px;
+      margin-bottom: 5px;
+    }
+    
+    .${prefix}__header::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 76px;
+      height: 1px;
+      background-color: ${ctaTextColor};
+    }
+
+    .${prefix}__description {
+      color: ${textColor};
+      margin: 0;
+      font-size: 10px;
+      font-family: "Source Sans 3", system-ui;
+      font-weight: 400;
+    }
+
+    .${prefix}__cta-button {
+      color: ${ctaTextColor};
+      font-size: ${this._isMobileDevice ? '10px' : '12px'};
+      font-weight: 700;
+      font-family: "Source Sans 3", system-ui;
+      border: none;
+      cursor: pointer;
+      transition: opacity 0.3s ease;
+      display: inline-block;
+      align-self: flex-end;
+      text-decoration: none;
+      margin-top: auto;
+    }
+
+    .${prefix}__content:hover .${prefix}__cta-button {
+      opacity: 0.8;
+    }
+
+    @container (min-width: 768px) {
+      .${prefix}__preHeader {
+        font-size: 9px;
+      }
+
+      .${prefix}__cta-button {
+        font-size: 12px;
+      }
+    }
+
+    @container (min-width: 1024px) {
+      .${prefix}__text {
+        padding: 20px;
+      }
+      
+      .${prefix}__text-container {
+        padding-right: 20px;
+      }
+      
+      .${prefix}__preHeader {
+        font-size: 10px;
+      }
+      
+      .${prefix}__header {
+        font-size: 18px;
+      }
+      
+      .${prefix}__description {
+        font-size: 14px;
+      }
+    }
+
+    @container (min-width: 1280px) {
+      .${prefix}__header {
+        font-size: 24px;
+      }
+    }
+  `;
+    }
+    get hasContent() {
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = true, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                preHeader: mobilePreHeader,
                 header: mobileHeader,
                 description: mobileDescription,
                 ctaText: mobileCtaText,
@@ -19002,13 +19400,13 @@ class RbInTextSE extends BaseSpotComponent {
     `;
     }
     styles() {
-        const { textColor = '#212121', backgroundColor = 'transparent' } = this._data;
+        const { textColor = '#212121', backgroundColor = 'transparent', textBlockPosition = exports.ENUM_TEXT_BLOCK_POSITION.LEFT, } = this._data;
         const prefix = this._config.prefix;
         return `
       .${prefix} {
           display: block;
           cursor: pointer;
-          max-width: fit-content;
+          width: 100%;
           padding: 0;
           background-color: ${backgroundColor};
       }
@@ -19019,6 +19417,7 @@ class RbInTextSE extends BaseSpotComponent {
           color: ${textColor};
           font-family: "Source Sans 3", system-ui;
           margin: 0;
+          text-align: ${textBlockPosition};
       }
       .${prefix}__header:hover {
         color: #b5914a;
@@ -20514,6 +20913,12 @@ class SpotTemplateService {
             [exports.RMN_SPOT_TYPE.RB_CAROUSEL_HORIZONTAL_INFO_CARD]: {
                 rbCarouselHorizontalInfoCard: RbCarouselHorizontalInfoCardSE,
             },
+            [exports.RMN_SPOT_TYPE.RB_CAROUSEL_VERTICAL_SMALL_IMAGE_INFO_CARD]: {
+                rbCarouselVerticalSmallImageInfoCard: RbCarouselVerticalSmallImageInfoCardSE,
+            },
+            [exports.RMN_SPOT_TYPE.RB_CAROUSEL_HORIZONTAL_SHORT_INFO_CARD]: {
+                rbCarouselHorizontalShortInfoCard: RbCarouselHorizontalShortInfoCardSE,
+            },
         };
     }
     initializeIabTemplates() {