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

package/dist/index.esm.js

@@ -16,6 +16,8 @@ var RMN_SPOT_TYPE;
     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";
@@ -90,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";
@@ -16971,6 +16974,8 @@ const SPOT_DIMENSIONS = {
     [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 },
@@ -17988,7 +17993,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} {
@@ -18040,8 +18045,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;
       }
@@ -18051,7 +18055,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;
@@ -18078,10 +18082,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;
@@ -18157,19 +18160,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;
-        }
       }
     `;
     }
@@ -18179,7 +18175,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 = 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,
@@ -19000,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};
       }
@@ -19017,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;
@@ -20512,6 +20911,12 @@ class SpotTemplateService {
             [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() {

package/dist/types/enums.d.ts

@@ -14,6 +14,8 @@ export declare enum RMN_SPOT_TYPE {
     RB_VIDEO_PLAYER = "rbVideoPlayer",
     RB_IN_TEXT = "rbInText",
     RB_CAROUSEL_HORIZONTAL_INFO_CARD = "rbCarouselHorizontalInfoCard",
+    RB_CAROUSEL_VERTICAL_SMALL_IMAGE_INFO_CARD = "rbCarouselVerticalSmallImageInfoCard",
+    RB_CAROUSEL_HORIZONTAL_SHORT_INFO_CARD = "rbCarouselHorizontalShortInfoCard",
     BILLBOARD = "billboard",
     LARGE_RECTANGLE = "largeRectangle",
     VERTICAL_RECTANGLE = "verticalRectangle",
@@ -82,6 +84,7 @@ export declare enum ENUM_TEXT_BLOCK_POSITION {
     TOP = "top",
     BOTTOM = "bottom",
     MIDDLE = "middle",
+    CENTER = "center",
     TOP_LEFT = "top-left",
     TOP_RIGHT = "top-right",
     BOTTOM_LEFT = "bottom-left",

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

@@ -58,6 +58,7 @@ export interface IInTextRbSpot extends ISpotTemplateBaseData {
     mobileHeader?: string;
     textColor?: string;
     backgroundColor?: string;
+    textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.LEFT | ENUM_TEXT_BLOCK_POSITION.CENTER | ENUM_TEXT_BLOCK_POSITION.RIGHT;
 }
 export interface ILargeCategoryImageToutRbSpot extends ISpotTemplateBaseData {
     header?: string;
@@ -170,3 +171,37 @@ export interface ICarouselHorizontalInfoCardRbSpot extends ISpotTemplateBaseData
     textBlockPosition?: ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT | ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT;
     mobileTextBlockPosition?: ENUM_TEXT_BLOCK_POSITION.TOP | ENUM_TEXT_BLOCK_POSITION.BOTTOM;
 }
+export interface ICarouselVerticalSmallImageInfoCardRbSpot 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.TOP | ENUM_TEXT_BLOCK_POSITION.BOTTOM;
+}
+export interface ICarouselHorizontalShortInfoCardRbSpot 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.TOP | ENUM_TEXT_BLOCK_POSITION.BOTTOM;
+}

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

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

package/dist/types/modules/spot-template/reservebar/carousel-vertical-small-image-info-card.template.d.ts

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

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

@@ -1,4 +1,6 @@
 export * from './carousel-horizontal-info-card.template';
+export * from './carousel-horizontal-short-info-card.template';
+export * from './carousel-vertical-small-image-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.47",
+  "version": "1.5.0-beta.48",
   "homepage": "https://docs.liquidcommerce.co/rmn-sdk",
   "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",