@liquidcommercedev/rmn-sdk 1.5.0-beta.24 → 1.5.0-beta.25

package/dist/index.cjs

@@ -13,6 +13,8 @@ exports.RMN_SPOT_TYPE = void 0;
     RMN_SPOT_TYPE["RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK"] = "rbCollectionBannerWithoutTextBlock";
     RMN_SPOT_TYPE["RB_PRODUCT_UPCS"] = "rbProductUpcs";
     RMN_SPOT_TYPE["RB_NAVIGATION_BANNER"] = "rbNavigationBanner";
+    RMN_SPOT_TYPE["RB_VIDEO_PLAYER"] = "rbVideoPlayer";
+    RMN_SPOT_TYPE["RB_IN_TEXT"] = "rbInText";
     // IAB Standard Spot Types
     RMN_SPOT_TYPE["BILLBOARD"] = "billboard";
     RMN_SPOT_TYPE["LARGE_RECTANGLE"] = "largeRectangle";
@@ -6159,7 +6161,7 @@ const extractorConfig = {
         'article_number',
         'reference',
         'salsifyGrouping',
-        'grouping'
+        'grouping',
     ],
     price: [
         'price',
@@ -15821,6 +15823,8 @@ const SPOT_DIMENSIONS = {
     [exports.RMN_SPOT_TYPE.RB_COLLECTION_BANNER_WITHOUT_TEXT_BLOCK]: { width: 887, height: 344 },
     [exports.RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: { width: 1, height: 1 },
     [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.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 },
@@ -16670,8 +16674,15 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 const clonedSlide = this.slides[index].cloneNode(true);
                 // Map clone to original for event handling
                 this.cloneToOriginalMap.set(clonedSlide, this.slides[index]);
+                let isDragging = false;
+                slideElement.addEventListener('mousedown', () => isDragging = false);
+                slideElement.addEventListener('mousemove', () => isDragging = true);
                 // Add event delegation to the slide container
                 slideElement.addEventListener('click', (e) => {
+                    if (isDragging) {
+                        e.stopPropagation();
+                        return;
+                    }
                     const original = this.slides[index];
                     // Dispatch a new event on the original element
                     const cloneEvent = new Event(e.type, { bubbles: true, cancelable: true });
@@ -17554,7 +17565,7 @@ function spotHtmlStringToElement(htmlString, spotType) {
     return spot;
 }
 
-const STYLES$i = ({ primaryImage, secondaryImage }) => `
+const STYLES$j = ({ primaryImage, secondaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -17652,7 +17663,7 @@ function billboardV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$i(spot)}
+        ${STYLES$j(spot)}
         <div class="content">
             <div class="big-image"></div>
             <div class="main">
@@ -17667,7 +17678,7 @@ function billboardV1Template(spot) {
     `;
 }
 
-const STYLES$h = ({ primaryImage }) => `
+const STYLES$i = ({ primaryImage }) => `
     <style>
         .content {
             display: flex;
@@ -17741,7 +17752,7 @@ function billboardV2Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$h(spot)}
+        ${STYLES$i(spot)}
         <div class="content">
             <div class="text-container">
                 <h2 class="header">${spot.header}</h2>
@@ -17752,7 +17763,7 @@ function billboardV2Template(spot) {
     `;
 }
 
-const STYLES$g = ({ primaryImage }) => `
+const STYLES$h = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -17842,7 +17853,7 @@ function billboardV3Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$g(spot)}
+        ${STYLES$h(spot)}
         <div class="content">
             <div class="text">
                 <h2 class="header">${spot.header}</h2>
@@ -17854,7 +17865,7 @@ function billboardV3Template(spot) {
     `;
 }
 
-const STYLES$f = () => `
+const STYLES$g = () => `
     <style>
         .content {
             display: inline-block;
@@ -17886,7 +17897,7 @@ function inTextV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$f()}
+        ${STYLES$g()}
         <div class="content">
             <span class="header">${spot.header}</span>
             <span class="description">${spot.description}</span>
@@ -17894,7 +17905,7 @@ function inTextV1Template(spot) {
     `;
 }
 
-const STYLES$e = ({ primaryImage }) => `
+const STYLES$f = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -17976,7 +17987,7 @@ function largeLeaderboardV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$e(spot)}
+        ${STYLES$f(spot)}
         <div class="content">
             <div class="text">
                 <h2 class="header">${spot.header}</h2>
@@ -17987,7 +17998,7 @@ function largeLeaderboardV1Template(spot) {
     `;
 }
 
-const STYLES$d = ({ primaryImage }) => `
+const STYLES$e = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18063,7 +18074,7 @@ function largeLeaderboardV2Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$d(spot)}
+        ${STYLES$e(spot)}
         <div class="content">
             <div class="text">
                 <h2 class="header">${spot.header}</h2>
@@ -18074,7 +18085,7 @@ function largeLeaderboardV2Template(spot) {
     `;
 }
 
-const STYLES$c = ({ primaryImage }) => `
+const STYLES$d = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18122,7 +18133,7 @@ function largeRectangleV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$c(spot)}
+        ${STYLES$d(spot)}
          <div class="content">
             <div class="image"></div>
             <div class="text">
@@ -18133,7 +18144,7 @@ function largeRectangleV1Template(spot) {
     `;
 }
 
-const STYLES$b = ({ primaryImage }) => `
+const STYLES$c = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18220,7 +18231,7 @@ function squareV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$b(spot)}
+        ${STYLES$c(spot)}
         <div class="content">
             <div class="text">
                 <h2 class="header">${spot.header}</h2>
@@ -18231,7 +18242,7 @@ function squareV1Template(spot) {
     `;
 }
 
-const STYLES$a = ({ primaryImage }) => `
+const STYLES$b = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18275,14 +18286,14 @@ function squareV2Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$a(spot)}
+        ${STYLES$b(spot)}
         <div class="content">
             <span class="header">${spot.header}</span>
         </div>
     `;
 }
 
-const STYLES$9 = ({ primaryImage }) => `
+const STYLES$a = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18340,7 +18351,7 @@ function verticalRectangleV1Template(spot) {
         ${GFONT_PRECONNECT}
         ${GFONT_SOURCE_SANS_3}
         ${GFONT_CORMORANT}
-        ${STYLES$9(spot)}
+        ${STYLES$a(spot)}
         <div class="content">
             <div class="text">
                 <h2 class="header">${spot.header}</h2>
@@ -18351,7 +18362,7 @@ function verticalRectangleV1Template(spot) {
     `;
 }
 
-const STYLES$8 = ({ primaryImage }) => `
+const STYLES$9 = ({ primaryImage }) => `
     <style>
         .content {
             width: 100%;
@@ -18366,12 +18377,12 @@ const STYLES$8 = ({ primaryImage }) => `
 `;
 function wideSkyscraperV1Template(spot) {
     return `
-        ${STYLES$8(spot)}
+        ${STYLES$9(spot)}
         <div class="content"></div>
     `;
 }
 
-const STYLES$7 = ({ primaryImage, mobilePrimaryImage = primaryImage }, { prefix }) => `
+const STYLES$8 = ({ primaryImage, mobilePrimaryImage = primaryImage }, { prefix }) => `
 <style>
   .${prefix} {
     display: block;
@@ -18395,12 +18406,12 @@ const STYLES$7 = ({ primaryImage, mobilePrimaryImage = primaryImage }, { prefix
 function rbCollectionBannerWithoutTextBlockTemplate(spot, config) {
     const { prefix = '' } = config;
     return `
-    ${STYLES$7(spot, config)}
+    ${STYLES$8(spot, config)}
     <div class="${prefix}"></div>
   `;
 }
 
-const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
+const STYLES$7 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
     const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
     return `
         <style>
@@ -18539,7 +18550,7 @@ function rbHomepageHeroFullImageTemplate(spot, config) {
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$6(spot, config)}
+    ${STYLES$7(spot, config)}
     <div class="${prefix}">
       <div class="${prefix}__text">
         ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
@@ -18550,7 +18561,7 @@ function rbHomepageHeroFullImageTemplate(spot, config) {
 `;
 }
 
-const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, secondaryImage, mobileSecondaryImage = secondaryImage, }, { prefix }) => `
+const STYLES$6 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, secondaryImage, mobileSecondaryImage = secondaryImage, }, { prefix }) => `
 <style>
     .${prefix} {
         width: 100%;
@@ -18615,7 +18626,7 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         color: inherit;
         margin: 0;
         font-size: 18px;
-        font-family: "Cormorant";
+        font-family: "Cormorant", system-ui;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
@@ -18727,7 +18738,7 @@ function rbHomepageHeroThreeTileTemplate(spot, config) {
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$5(spot, config)}
+    ${STYLES$6(spot, config)}
     <div class="${prefix}">
         <div class="${prefix}__content">
             <div class="${prefix}__primary-image"></div>
@@ -18744,7 +18755,7 @@ function rbHomepageHeroThreeTileTemplate(spot, config) {
   `;
 }
 
-const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
+const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
   <style>
     .${prefix} {
         width: 100%;
@@ -18886,7 +18897,7 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
     ${GFONT_PRECONNECT}
     ${GFONT_SOURCE_SANS_3}
     ${GFONT_CORMORANT}
-    ${STYLES$4(spot, config)}
+    ${STYLES$5(spot, config)}
     <div class="${prefix}">
       <div class="${prefix}__content">
           <div class="${prefix}__text">
@@ -18900,6 +18911,37 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
   `;
 }
 
+const STYLES$4 = ({ textColor = '#ffffff', backgroundColor = 'transparent' }, { prefix }) => `
+    <style>
+        .${prefix} {
+            display: block;
+            cursor: pointer;
+            max-width: fit-content;
+            padding: 0;
+            background-color: ${backgroundColor};
+        }
+        .${prefix}__header {
+            font-size: 0.875rem;
+            line-height: 1.25rem;
+            font-weight: 500;
+            color: ${textColor};
+            font-family: "Source Sans 3", system-ui;
+            margin: 0;
+        }
+    </style>
+`;
+function rbInTextTemplate(spot, config) {
+    const { prefix = '' } = config;
+    return `
+        ${GFONT_PRECONNECT}
+        ${GFONT_SOURCE_SANS_3}
+        ${STYLES$4(spot, config)}
+        <div class="${prefix}">
+          ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+        </div>
+    `;
+}
+
 const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
     const linearGradient = generateGradientColor(overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
     return `
@@ -19256,6 +19298,13 @@ const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
         [exports.RMN_SPOT_TYPE.RB_NAVIGATION_BANNER]: {
             rbNavigationBanner: rbNavigationBannerTemplate,
         },
+        [exports.RMN_SPOT_TYPE.RB_IN_TEXT]: {
+            rbInText: rbInTextTemplate,
+        },
+        [exports.RMN_SPOT_TYPE.RB_VIDEO_PLAYER]: {
+            // rbVideoPlayer: rbVideoPlayerTemplate,
+            rbVideoPlayer: () => '', // TODO: Implement this template.
+        },
         [exports.RMN_SPOT_TYPE.RB_PRODUCT_UPCS]: {
             rbProductUpcs: () => '', // No template for this spot type, it will be handled by ReserveBar App.
         },
@@ -20191,6 +20240,39 @@ const SPOT_EVENTS_EXAMPLE = [
             productIds: [107, 108, 109, 110, 111],
         },
     ],
+    rbInText: [
+        {
+            id: 'mxo259',
+            spot: exports.RMN_SPOT_TYPE.RB_IN_TEXT,
+            variant: exports.RMN_SPOT_TYPE.RB_IN_TEXT,
+            width: 1,
+            height: 1,
+            header: 'Premium Vodka',
+            textColor: '#ffffff',
+            backgroundColor: '#000000',
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [107, 108, 109, 110, 111],
+        },
+    ],
+    rbVideoPlayer: [
+        {
+            id: 'mxo259',
+            spot: exports.RMN_SPOT_TYPE.RB_VIDEO_PLAYER,
+            variant: exports.RMN_SPOT_TYPE.RB_VIDEO_PLAYER,
+            width: 1280,
+            height: 720,
+            videoUrl: 'https://www.youtube.com/watch?v=9bZkp7q19f0',
+            videoOverlayImage: 'https://placehold.co/1280x720/png?text=Video+Overlay',
+            videoOverlayHeader: 'Watch Our Story',
+            videoOverlayDescription: 'Discover the history of our distillery',
+            videoControls: true,
+            videoAutoPlay: true,
+            videoMute: true,
+            videoLoop: true,
+            events: SPOT_EVENTS_EXAMPLE,
+            productIds: [107, 108, 109, 110, 111],
+        },
+    ],
 });
 ({
     banner: [],
@@ -20551,7 +20633,7 @@ class LiquidCommerceRmnClient {
         const spotElement = this.elementService.createSpotElement({
             content,
             config: {
-                fluid: config === null || config === void 0 ? void 0 : config.fluid,
+                fluid: spot.spot === exports.RMN_SPOT_TYPE.RB_IN_TEXT ? true : config === null || config === void 0 ? void 0 : config.fluid,
                 spot: spot.spot,
                 width: spot.width,
                 height: spot.height,