@liquidcommercedev/rmn-sdk 1.5.0-beta.6 → 1.5.0-beta.8

package/dist/index.esm.js

@@ -15558,11 +15558,13 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
         position: relative;
         height: 100%;
         width: 100%;
+        display: flex;
+        transition: transform 0.5s ease-in-out;
     }
 
     .slide {
-        display: none;
-
+        flex: 0 0 100%;
+        display: flex;
         justify-content: center;
         align-items: center;
         height: 100%;
@@ -15867,9 +15869,9 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         renderSlides() {
             const slidesContainer = document.createElement('div');
             slidesContainer.className = 'slides';
-            this.slides.forEach((slide, index) => {
+            this.slides.forEach((slide) => {
                 const slideElement = document.createElement('div');
-                slideElement.className = `slide ${index === this.currentSlide ? 'active' : ''}`;
+                slideElement.className = 'slide';
                 if (slide instanceof HTMLElement) {
                     slideElement.appendChild(slide);
                 }
@@ -15948,10 +15950,9 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         updateCarousel() {
             if (!this.slidesContainer)
                 return;
-            const slides = Array.from(this.slidesContainer.children);
-            slides.forEach((slide, index) => {
-                slide.classList.toggle('active', index === this.currentSlide);
-            });
+            // Calculate the translation distance based on current slide
+            const translateX = -this.currentSlide * 100;
+            this.slidesContainer.style.transform = `translateX(${translateX}%)`;
             this.updateDots();
         }
         updateDots() {
@@ -16375,12 +16376,13 @@ function spotHtmlStringToElement(htmlString) {
     spot.className = 'spot';
     spot.innerHTML = htmlString;
     Object.assign(spot.style, {
-        position: 'relative',
         display: 'block',
         width: '100%',
         height: '100%',
         margin: '0',
         padding: '0',
+        containerType: 'inline-size',
+        position: 'relative',
     });
     return spot;
 }
@@ -17250,7 +17252,6 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 box-sizing: border-box;
                 color: ${textColor};
                 cursor: pointer;
-                container-type: inline-size;
             }
 
             .${prefix}__text {
@@ -17266,7 +17267,7 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
             .${prefix}__header {
                 font-size: 24px;
                 margin: 0;
-                font-family: "Cormorant";
+                font-family: "Cormorant", system-ui;
                 font-style: normal;
                 font-weight: 300;
                 line-height: normal;
@@ -17385,7 +17386,6 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         height: 100%;
         display: block;
         position: relative;
-        container-type: inline-size;
     }
 
     .${prefix}__content {
@@ -17576,15 +17576,20 @@ function rbHomepageHeroThreeTileTemplate(spot, config) {
 const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextColor = textColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix }) => `
   <style>
     .${prefix} {
+        width: 100%;
+        height: 100%;
+        background-color: transparent;
+        cursor: pointer;
+        position: relative;
+    }
+
+    .${prefix}__content {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column-reverse;
         background-color: transparent;
         gap: 6px;
-        cursor: pointer;
-        container-type: inline-size;
-        position: relative;
     }
 
     .${prefix}__image {
@@ -17615,7 +17620,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         font-size: 18px;
         margin: 0;
         color: inherit;
-        font-family: "Cormorant";
+        font-family: "Cormorant", system-ui;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
@@ -17657,7 +17662,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
     }
 
     @container (min-width: 768px) {
-        .${prefix} {
+        .${prefix}__content {
             flex-direction: row;
         }
         .${prefix}__image {
@@ -17712,12 +17717,14 @@ function rbHomepageHeroTwoTileTemplate(spot, config) {
     ${GFONT_CORMORANT}
     ${STYLES$4(spot, config)}
     <div class="${prefix}">
-        <div class="${prefix}__text">
-            ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-            ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
-            ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
-        </div>
-        <div class="${prefix}__image"></div>
+      <div class="${prefix}__content">
+          <div class="${prefix}__text">
+              ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
+              ${spot.description ? `<p class="${prefix}__description">${spot.description}</p>` : ''}
+              ${spot.ctaText ? `<span class="${prefix}__cta-button">${spot.ctaText}</span>` : ''}
+          </div>
+          <div class="${prefix}__image"></div>
+      </div>
     </div>
   `;
 }
@@ -17740,12 +17747,10 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         overflow: hidden;
         cursor: pointer;
         color: ${textColor};
-        container-type: inline-size;
       }
 
       .${prefix}__text {
         padding: 20px;
-        width: 70%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -17757,7 +17762,7 @@ const STYLES$3 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
         color: inherit;
         margin: 0;
         font-size: 20px;
-        font-family: "Cormorant";
+        font-family: "Cormorant", system-ui;
         font-style: normal;
         font-weight: 300;
         line-height: normal;
@@ -17876,7 +17881,6 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
-      container-type: inline-size;
       position: relative;
     }
 
@@ -17946,12 +17950,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         border-radius: 5px;
         overflow: hidden;
         cursor: pointer;
-        container-type: inline-size;
-      }
-
-      .${prefix}__text {
-        padding: 10px;
-        width: 70%;
+        position: relative;
       }
 
       .${prefix}__header {
@@ -17962,6 +17961,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         font-style: normal;
         font-weight: 400;
         margin: 0;
+        padding: 10px;
       }
 
       @container (min-width: 640px) {
@@ -17979,9 +17979,7 @@ function rbSmallCategoryImageToutTemplate(spot, config) {
     ${GFONT_CORMORANT}
     ${STYLES$1(spot, config)}
     <div class="${prefix}">
-      <div class="${prefix}__text">
-        ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
-      </div>
+      ${spot.header ? `<h2 class="${prefix}__header">${spot.header}</h2>` : ''}
     </div>
   `;
 }
@@ -17996,7 +17994,6 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       display: flex;
       flex-direction: column;
       border-radius: 5px;
-      container-type: inline-size;
     }
 
     .${prefix}__image {
@@ -18386,11 +18383,38 @@ class EventService {
                 },
             };
         }
-        this.spotStates.set(placementId, { ...currentState, ...updates });
+        const merged = this.deepMerge(currentState, updates);
+        this.spotStates.set(placementId, merged);
         if (publish) {
             this.pubSub.publish(RMN_SPOT_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
         }
     }
+    deepMerge(current, updates) {
+        return {
+            identifier: {
+                ...current.identifier,
+                ...updates.identifier,
+            },
+            dom: updates.dom
+                ? {
+                    ...current.dom,
+                    ...updates.dom,
+                }
+                : current.dom,
+            state: updates.state
+                ? {
+                    ...current.state,
+                    ...updates.state,
+                }
+                : current.state,
+            displayConfig: updates.displayConfig
+                ? {
+                    ...current.displayConfig,
+                    ...updates.displayConfig,
+                }
+                : current.displayConfig,
+        };
+    }
     async handleClick({ placementId, spot, spotElement, }) {
         var _a, _b, _c;
         // Publish click event
@@ -18745,10 +18769,12 @@ class LiquidCommerceRmnClient {
         const config = params.config;
         let inject = params.inject;
         if (!inject.length) {
+            // Handle no spots error state
             this.eventService.handleSpotState('all', {
                 state: {
                     error: 'No spot elements provided for injection.',
                     loading: false,
+                    mounted: false,
                 },
             });
             return;
@@ -18767,9 +18793,12 @@ class LiquidCommerceRmnClient {
         // const response = await this.useSpotSelectionExample(inject);
         // Handle the response
         if (typeof response === 'object' && 'error' in response) {
+            // Handle request error state
             this.eventService.handleSpotState('all', {
                 state: {
                     error: response.error,
+                    mounted: false,
+                    loading: false,
                 },
             });
             return;
@@ -18778,9 +18807,11 @@ class LiquidCommerceRmnClient {
             const itemConfig = (_a = item.config) !== null && _a !== void 0 ? _a : config;
             const spots = response[item.placementId];
             if (!(spots === null || spots === void 0 ? void 0 : spots.length)) {
+                // Handle no spots found error state
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `No spots found for type "${item.spotType}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18789,9 +18820,11 @@ class LiquidCommerceRmnClient {
             const placementId = item.placementId.replace('#', '');
             const placement = document.getElementById(placementId);
             if (!placement) {
+                // Handle placement not found error state
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Placement not found for id "${placementId}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18806,12 +18839,14 @@ class LiquidCommerceRmnClient {
                 display: 'flex',
                 justifyContent: 'center',
             });
+            // Handle single spot
             if (spots.length === 1) {
                 const isInjected = this.injectOneSpotElement(item, placement, spots[0], itemConfig);
                 if (!isInjected) {
                     continue;
                 }
             }
+            // Handle multiple spots (carousel)
             if (spots.length > 1) {
                 const isInjected = this.injectCarouselSpotElement(placement, spots, itemConfig);
                 if (!isInjected) {
@@ -18855,18 +18890,24 @@ class LiquidCommerceRmnClient {
         const carouselSlides = [];
         for (const spotItem of spots) {
             this.eventService.handleSpotState(placement.id, {
+                identifier: {
+                    placementId: placement.id,
+                    spotType: spotItem.spot,
+                    spotId: spotItem.id,
+                },
                 displayConfig: {
+                    isSingleItem: false,
                     isCarousel: true,
                     isCarouselItem: true,
-                    isSingleItem: false,
                 },
-            }, false);
+            });
             const spot = this.elementService.overrideSpotColors(spotItem, config === null || config === void 0 ? void 0 : config.colors);
             const content = SPOT_TEMPLATE_HTML_ELEMENT(spot, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
             if (!content) {
                 this.eventService.handleSpotState(placement.id, {
                     state: {
                         error: `Failed to inject carousel spot item element. Could not create element for type "${spot.spot}".`,
+                        mounted: false,
                         loading: false,
                     },
                 });
@@ -18899,6 +18940,7 @@ class LiquidCommerceRmnClient {
             this.eventService.handleSpotState(placement.id, {
                 state: {
                     error: `Failed to inject spot carousel element. Could not create spot carousel element.`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18908,10 +18950,12 @@ class LiquidCommerceRmnClient {
         this.eventService.handleSpotState(placement.id, {
             dom: {
                 spotElement: carouselElement,
+                visibleOnViewport: false,
             },
             state: {
                 mounted: true,
                 loading: false,
+                error: undefined,
             },
         });
         return true;
@@ -18928,18 +18972,25 @@ class LiquidCommerceRmnClient {
      */
     injectOneSpotElement(injectItem, placement, spot, config) {
         var _a;
-        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
         this.eventService.handleSpotState(injectItem.placementId, {
+            identifier: {
+                placementId: injectItem.placementId,
+                spotType: injectItem.spotType,
+                spotId: spot.id,
+            },
             displayConfig: {
                 isSingleItem: true,
+                isCarousel: false,
+                isCarouselItem: false,
             },
-        }, false);
-        // Create the spot template element
+        });
+        const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
         const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
         if (!content) {
             this.eventService.handleSpotState(injectItem.placementId, {
                 state: {
                     error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18960,6 +19011,7 @@ class LiquidCommerceRmnClient {
             this.eventService.handleSpotState(injectItem.placementId, {
                 state: {
                     error: `Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`,
+                    mounted: false,
                     loading: false,
                 },
             });
@@ -18974,10 +19026,12 @@ class LiquidCommerceRmnClient {
         this.eventService.handleSpotState(injectItem.placementId, {
             dom: {
                 spotElement,
+                visibleOnViewport: false,
             },
             state: {
                 mounted: true,
                 loading: false,
+                error: undefined,
             },
         });
         return true;
@@ -18998,6 +19052,8 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`,
+                        mounted: false,
+                        loading: false,
                     },
                 });
                 return false;
@@ -19013,6 +19069,8 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Invalid spot type (${item.spotType}) found. Please provide a valid spot type for each spot element.`,
+                        mounted: false,
+                        loading: false,
                     },
                 });
                 continue;
@@ -19021,6 +19079,7 @@ class LiquidCommerceRmnClient {
         }
         return newInject;
     }
+    // Initialize spots with loading state and identifiers
     updateSpotsState(inject) {
         for (const item of inject) {
             this.eventService.handleSpotState(item.placementId, {
@@ -19030,6 +19089,8 @@ class LiquidCommerceRmnClient {
                 },
                 state: {
                     loading: true,
+                    mounted: false,
+                    error: undefined,
                 },
             });
         }

package/dist/types/modules/event/event.service.d.ts

@@ -23,6 +23,7 @@ export declare class EventService {
      * @returns {void}
      */
     handleSpotState(placementId: string, updates: Partial<ILifecycleState>, publish?: boolean): void;
+    private deepMerge;
     private handleClick;
     private handleIntersectionObserver;
     private fireImpressionEvent;

package/package.json

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