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

package/dist/index.cjs

@@ -17,6 +17,7 @@ exports.RMN_SPOT_TYPE = void 0;
     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";
     // IAB Standard Spot Types
     RMN_SPOT_TYPE["BILLBOARD"] = "billboard";
     RMN_SPOT_TYPE["LARGE_RECTANGLE"] = "largeRectangle";
@@ -16971,6 +16972,7 @@ const SPOT_DIMENSIONS = {
     [exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER]: { width: 440, height: 220 },
     [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.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 },
@@ -17947,6 +17949,248 @@ 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 = exports.ENUM_TEXT_BLOCK_POSITION.LEFT, mobileTextBlockPosition = exports.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 = '#e8e6de', 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-weight: 700;
+        font-size: 8px;
+        line-height: normal;
+        letter-spacing: 0.8px;
+      }
+
+      .${prefix}__header {
+        margin: 0;
+        color: ${headerColor};
+        font-family: "Cormorant", system-ui;
+        font-weight: bold;
+        font-size: 16px;
+        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: 10px;
+        font-weight: 700;
+        font-family: "Source Sans 3", system-ui;
+        letter-spacing: 1.4px;
+        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--${exports.ENUM_TEXT_BLOCK_POSITION.LEFT} {
+          flex-direction: row;
+        }
+
+        .${prefix}__text-block--${exports.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;
+        }
+        
+        .${prefix}__cta-button {
+          font-size: 13px;
+        }
+      }
+
+      @container (min-width: 1280px) {
+        .${prefix}__header {
+          font-size: 24px;
+        }
+      
+        .${prefix}__cta-button {
+          font-size: 14px;
+        }
+      }
+    `;
+    }
+    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 RbCollectionBannerWithoutTextBlockSE extends BaseSpotComponent {
     constructor() {
         super();
@@ -20267,6 +20511,9 @@ class SpotTemplateService {
             [exports.RMN_SPOT_TYPE.RB_VIDEO_PLAYER]: {
                 rbVideoPlayer: RbVideoPlayerSE,
             },
+            [exports.RMN_SPOT_TYPE.RB_CAROUSEL_HORIZONTAL_INFO_CARD]: {
+                rbCarouselHorizontalInfoCard: RbCarouselHorizontalInfoCardSE,
+            },
         };
     }
     initializeIabTemplates() {

package/dist/index.esm.js

@@ -15,6 +15,7 @@ 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";
     // IAB Standard Spot Types
     RMN_SPOT_TYPE["BILLBOARD"] = "billboard";
     RMN_SPOT_TYPE["LARGE_RECTANGLE"] = "largeRectangle";
@@ -16969,6 +16970,7 @@ 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.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 +17947,248 @@ 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 = '#e8e6de', 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-weight: 700;
+        font-size: 8px;
+        line-height: normal;
+        letter-spacing: 0.8px;
+      }
+
+      .${prefix}__header {
+        margin: 0;
+        color: ${headerColor};
+        font-family: "Cormorant", system-ui;
+        font-weight: bold;
+        font-size: 16px;
+        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: 10px;
+        font-weight: 700;
+        font-family: "Source Sans 3", system-ui;
+        letter-spacing: 1.4px;
+        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;
+        }
+        
+        .${prefix}__cta-button {
+          font-size: 13px;
+        }
+      }
+
+      @container (min-width: 1280px) {
+        .${prefix}__header {
+          font-size: 24px;
+        }
+      
+        .${prefix}__cta-button {
+          font-size: 14px;
+        }
+      }
+    `;
+    }
+    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 RbCollectionBannerWithoutTextBlockSE extends BaseSpotComponent {
     constructor() {
         super();
@@ -20265,6 +20509,9 @@ class SpotTemplateService {
             [RMN_SPOT_TYPE.RB_VIDEO_PLAYER]: {
                 rbVideoPlayer: RbVideoPlayerSE,
             },
+            [RMN_SPOT_TYPE.RB_CAROUSEL_HORIZONTAL_INFO_CARD]: {
+                rbCarouselHorizontalInfoCard: RbCarouselHorizontalInfoCardSE,
+            },
         };
     }
     initializeIabTemplates() {

package/dist/types/enums.d.ts

@@ -13,6 +13,7 @@ export declare enum RMN_SPOT_TYPE {
     RB_NAVIGATION_BANNER = "rbNavigationBanner",
     RB_VIDEO_PLAYER = "rbVideoPlayer",
     RB_IN_TEXT = "rbInText",
+    RB_CAROUSEL_HORIZONTAL_INFO_CARD = "rbCarouselHorizontalInfoCard",
     BILLBOARD = "billboard",
     LARGE_RECTANGLE = "largeRectangle",
     VERTICAL_RECTANGLE = "verticalRectangle",

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

@@ -152,3 +152,21 @@ export interface IVideoPlayerRbSpot extends ISpotTemplateBaseData {
         aspectRatio?: '16:9' | '4:3' | '1:1' | '3:4' | '9:16';
     };
 }
+export interface ICarouselHorizontalInfoCardRbSpot extends ISpotTemplateBaseData {
+    preHeader?: string;
+    header?: string;
+    description?: string;
+    ctaText?: string;
+    mobilePreHeader?: string;
+    mobileHeader?: string;
+    mobileDescription?: string;
+    mobileCtaText?: string;
+    headerColor?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    ctaTextColor?: string;
+    primaryImage: string;
+    mobilePrimaryImage?: string;
+    textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT;
+    mobileTextBlockPosition?: ENUM_TEXT_BLOCK_POSITION.TOP | ENUM_TEXT_BLOCK_POSITION.BOTTOM;
+}

package/dist/types/modules/spot-template/reservebar/carousel-horizontal-info-card.template.d.ts

@@ -0,0 +1,9 @@
+import { BaseSpotComponent } from 'modules/element/component/spot';
+import type { ICarouselHorizontalInfoCardRbSpot } from '../rb-template.interface';
+export declare class RbCarouselHorizontalInfoCardSE extends BaseSpotComponent<ICarouselHorizontalInfoCardRbSpot> {
+    protected reRenderOnDeviceChange: boolean;
+    constructor();
+    protected template(): string;
+    protected styles(): string;
+    private get hasContent();
+}

package/dist/types/modules/spot-template/reservebar/index.d.ts

@@ -1,3 +1,4 @@
+export * from './carousel-horizontal-info-card.template';
 export * from './collection-banner-without-text-block.template';
 export * from './homepage-hero-full-image.template';
 export * from './homepage-hero-three-tile.template';

package/package.json

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