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

package/dist/index.cjs

@@ -15560,11 +15560,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%;
@@ -15869,9 +15871,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);
                 }
@@ -15950,10 +15952,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() {
@@ -16377,12 +16378,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;
 }
@@ -17252,7 +17254,6 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 box-sizing: border-box;
                 color: ${textColor};
                 cursor: pointer;
-                container-type: inline-size;
             }
 
             .${prefix}__text {
@@ -17268,7 +17269,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;
@@ -17387,7 +17388,6 @@ const STYLES$5 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
         height: 100%;
         display: block;
         position: relative;
-        container-type: inline-size;
     }
 
     .${prefix}__content {
@@ -17578,15 +17578,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 {
@@ -17617,7 +17622,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;
@@ -17659,7 +17664,7 @@ const STYLES$4 = ({ textColor = '#212121', backgroundColor = '#e8e6de', ctaTextC
     }
 
     @container (min-width: 768px) {
-        .${prefix} {
+        .${prefix}__content {
             flex-direction: row;
         }
         .${prefix}__image {
@@ -17714,12 +17719,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>
   `;
 }
@@ -17742,12 +17749,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;
@@ -17759,7 +17764,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;
@@ -17878,7 +17883,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;
     }
 
@@ -17948,12 +17952,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 {
@@ -17964,6 +17963,7 @@ const STYLES$1 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
         font-style: normal;
         font-weight: 400;
         margin: 0;
+        padding: 10px;
       }
 
       @container (min-width: 640px) {
@@ -17981,9 +17981,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>
   `;
 }
@@ -17998,7 +17996,6 @@ const STYLES = ({ textColor = '#000000', backgroundColor = 'transparent', primar
       display: flex;
       flex-direction: column;
       border-radius: 5px;
-      container-type: inline-size;
     }
 
     .${prefix}__image {

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 {

package/package.json

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