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

package/dist/index.esm.js

@@ -15,6 +15,9 @@ var RMN_SPOT_TYPE;
     RMN_SPOT_TYPE["RB_NAVIGATION_BANNER"] = "rbNavigationBanner";
     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";
@@ -89,6 +92,7 @@ var ENUM_TEXT_BLOCK_POSITION;
     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";
@@ -16969,6 +16973,9 @@ const SPOT_DIMENSIONS = {
     [RMN_SPOT_TYPE.RB_NAVIGATION_BANNER]: { width: 440, height: 220 },
     [RMN_SPOT_TYPE.RB_VIDEO_PLAYER]: { width: 1280, height: 720 },
     [RMN_SPOT_TYPE.RB_IN_TEXT]: { width: 1, height: 1 },
+    [RMN_SPOT_TYPE.RB_CAROUSEL_HORIZONTAL_INFO_CARD]: { width: 592, height: 386 },
+    [RMN_SPOT_TYPE.RB_CAROUSEL_VERTICAL_SMALL_IMAGE_INFO_CARD]: { width: 285, height: 386 },
+    [RMN_SPOT_TYPE.RB_CAROUSEL_HORIZONTAL_SHORT_INFO_CARD]: { width: 285, height: 416 },
     [RMN_SPOT_TYPE.SMALL_RECTANGLE]: { width: 180, height: 150 },
     [RMN_SPOT_TYPE.MEDIUM_RECTANGLE]: { width: 300, height: 250 },
     [RMN_SPOT_TYPE.LARGE_RECTANGLE]: { width: 336, height: 280 },
@@ -17945,6 +17952,641 @@ class BillboardV1SE extends BaseSpotComponent {
     }
 }
 
+class RbCarouselHorizontalInfoCardSE extends BaseSpotComponent {
+    constructor() {
+        super();
+        this.reRenderOnDeviceChange = true;
+    }
+    template() {
+        const prefix = this._config.prefix;
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, textBlockPosition = ENUM_TEXT_BLOCK_POSITION.LEFT, mobileTextBlockPosition = ENUM_TEXT_BLOCK_POSITION.TOP, 
+        // 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--${mobileTextBlockPosition}">
+        <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: ${this._isMobileDevice ? 'column' : 'row'};
+        overflow: hidden;
+        border-radius: 5px;
+      }
+
+      .${prefix}__image {
+        width: 100%;
+        height: 100%;
+        background-image: url("${mobilePrimaryImage}");
+        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: 100%;
+        padding: 10px;
+        box-sizing: border-box;
+      }
+
+      .${prefix}__text-container {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        padding: 0 20px;
+      }
+
+      .${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;
+        padding: 10px 0;
+        transition: opacity 0.3s ease;
+        display: inline-block;
+        align-self: flex-end;
+        text-decoration: none;
+      }
+
+      .${prefix}__content:hover .${prefix}__cta-button {
+        opacity: 0.8;
+      }
+
+      @container (max-width: 639px) {
+        .${prefix}__text-container {
+          padding: 0 10px;
+        }
+      }
+
+      @container (min-width: 640px) {
+        .${prefix}__image {
+          background-image: url("${primaryImage}");
+        }
+
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.LEFT} {
+          flex-direction: row;
+        }
+
+        .${prefix}__text-block--${ENUM_TEXT_BLOCK_POSITION.RIGHT} {
+          flex-direction: row-reverse;
+        }
+      }
+
+      @container (min-width: 768px) {
+
+        .${prefix}__image {
+          width: 50%;
+          height: auto;
+        }
+
+        .${prefix}__text {
+          width: 50%;
+          align-self: center;
+        }
+
+        .${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, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, mobilePreHeader, 
+        // 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 RbCarouselHorizontalShortInfoCardSE extends BaseSpotComponent {
+    constructor() {
+        super();
+        this.reRenderOnDeviceChange = true;
+    }
+    template() {
+        const prefix = this._config.prefix;
+        const { preHeader, mobilePreHeader, header, mobileHeader, description, mobileDescription, ctaText, mobileCtaText, textBlockPosition = 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 = 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,
+            }
+            : { preHeader, header, description, ctaText };
+        return Object.values(content).some(Boolean);
+    }
+}
+
 class RbCollectionBannerWithoutTextBlockSE extends BaseSpotComponent {
     constructor() {
         super();
@@ -18756,13 +19398,13 @@ class RbInTextSE extends BaseSpotComponent {
     `;
     }
     styles() {
-        const { textColor = '#212121', backgroundColor = 'transparent' } = this._data;
+        const { textColor = '#212121', backgroundColor = 'transparent', textBlockPosition = 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};
       }
@@ -18773,6 +19415,7 @@ class RbInTextSE extends BaseSpotComponent {
           color: ${textColor};
           font-family: "Source Sans 3", system-ui;
           margin: 0;
+          text-align: ${textBlockPosition};
       }
       .${prefix}__header:hover {
         color: #b5914a;
@@ -20265,6 +20908,15 @@ class SpotTemplateService {
             [RMN_SPOT_TYPE.RB_VIDEO_PLAYER]: {
                 rbVideoPlayer: RbVideoPlayerSE,
             },
+            [RMN_SPOT_TYPE.RB_CAROUSEL_HORIZONTAL_INFO_CARD]: {
+                rbCarouselHorizontalInfoCard: RbCarouselHorizontalInfoCardSE,
+            },
+            [RMN_SPOT_TYPE.RB_CAROUSEL_VERTICAL_SMALL_IMAGE_INFO_CARD]: {
+                rbCarouselVerticalSmallImageInfoCard: RbCarouselVerticalSmallImageInfoCardSE,
+            },
+            [RMN_SPOT_TYPE.RB_CAROUSEL_HORIZONTAL_SHORT_INFO_CARD]: {
+                rbCarouselHorizontalShortInfoCard: RbCarouselHorizontalShortInfoCardSE,
+            },
         };
     }
     initializeIabTemplates() {