@liquidcommercedev/rmn-sdk 1.4.6-beta.2 → 1.4.6-beta.4

package/dist/index.esm.js

@@ -42,6 +42,7 @@ var RMN_SPOT_TYPE;
 var RMN_FILTER_PROPERTIES;
 (function (RMN_FILTER_PROPERTIES) {
     RMN_FILTER_PROPERTIES["KEYWORDS"] = "keywords";
+    RMN_FILTER_PROPERTIES["PAGE_LOCATION"] = "pageLocation";
     RMN_FILTER_PROPERTIES["PARENTCO"] = "parentCo";
     RMN_FILTER_PROPERTIES["BRAND"] = "brand";
     RMN_FILTER_PROPERTIES["CATEGORY"] = "category";
@@ -15148,7 +15149,8 @@ class AuthService extends BaseApi {
     }
 }
 
-const ELEMENT_TAG = 'spot-element';
+const SPOT_ELEMENT_TAG = 'spot-element';
+const CAROUSEL_ELEMENT_TAG = 'spot-carousel-element';
 const GFONT_PRECONNECT = `
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -15161,7 +15163,7 @@ const GFONT_CORMORANT = `
 `;
 
 class ResizeObserverService {
-    constructor({ element, maxSize, minScale = 0.275 }) {
+    constructor({ element, maxSize, minScale }) {
         this.element = element;
         if (!element.parentElement) {
             throw new Error('RmnSdk: Spot element must have a parent container.');
@@ -15228,6 +15230,431 @@ class ResizeObserverService {
     }
 }
 
+const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
+    :host {
+        position: relative;
+        display: inline-block;
+        margin: 0;
+        overflow: hidden;
+        width: ${fluid ? '100%' : `${width}px`};
+        height: ${fluid ? '100%' : `${height}px`};
+    }
+
+    .slides {
+        position: relative;
+        height: 100%;
+        width: 100%;
+    }
+
+    .slide {
+        display: none;
+
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+    }
+
+    .slide.active {
+        display: flex;
+    }
+
+    .dots {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .dots .dot {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        cursor: pointer;
+        transition: all 0.3s ease;
+    }
+
+    .dots.top-left,
+    .dots.bottom-left {
+        left: 10px;
+    }
+
+    .dots.top-center,
+    .dots.bottom-center {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .dots.top-right,
+    .dots.bottom-right {
+        right: 10px;
+    }
+
+    .dots.top-left,
+    .dots.top-center,
+    .dots.top-right {
+        top: 10px;
+    }
+
+    .dots.bottom-left,
+    .dots.bottom-center,
+    .dots.bottom-right {
+        bottom: 10px;
+    }
+
+    .dots.middle-left {
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        flex-direction: column;
+    }
+
+    .dots.middle-right {
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        flex-direction: column;
+    }
+
+    .buttons button {
+        background-color: #00000080;
+        color: #fff;
+        border: none;
+        padding: 10px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+    }
+
+    .buttons button:hover {
+        background-color: #000000b3;
+    }
+
+    .buttons.buttons-separate button {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
+    .buttons.buttons-separate .prev-button {
+        left: 10px;
+    }
+
+    .buttons.buttons-separate .next-button {
+        right: 10px;
+    }
+
+    .buttons.buttons-together {
+        position: absolute;
+        display: flex;
+        gap: 10px;
+    }
+
+    .buttons.buttons-together.top-left,
+    .buttons.buttons-together.bottom-left {
+        left: 10px;
+    }
+
+    .buttons.buttons-together.top-center,
+    .buttons.buttons-together.bottom-center {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    .buttons.buttons-together.top-right,
+    .buttons.buttons-together.bottom-right {
+        right: 10px;
+    }
+
+    .buttons.buttons-together.top-left,
+    .buttons.buttons-together.top-center,
+    .buttons.buttons-together.top-right {
+        top: 10px;
+    }
+
+    .buttons.buttons-together.bottom-left,
+    .buttons.buttons-together.bottom-center,
+    .buttons.buttons-together.bottom-right {
+        bottom: 10px;
+    }
+
+    .buttons.buttons-together.middle-left,
+    .buttons.buttons-together.middle-right {
+        top: 50%;
+        transform: translateY(-50%);
+        flex-direction: column;
+    }
+
+    .buttons.buttons-together.middle-left {
+        left: 10px;
+    }
+
+    .buttons.buttons-together.middle-right {
+        right: 10px;
+    }
+
+    @media (max-width: 768px) {
+        .buttons button {
+            padding: 8px 12px;
+            font-size: 14px;
+        }
+
+        .dots .dot {
+            width: 8px;
+            height: 8px;
+        }
+    }
+`;
+
+let CarouselElement;
+if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
+    class CustomCarouselElement extends HTMLElement {
+        constructor() {
+            super();
+            this.currentSlide = 0;
+            this.dotElements = [];
+            this.prevButton = null;
+            this.nextButton = null;
+            this.autoplayInterval = null;
+            this.useDots = false;
+            this.useButtons = false;
+            this.attachShadow({ mode: 'open' });
+        }
+        connectedCallback() {
+            this.initializeOptions();
+            this.setupResizeObserver();
+            this.render();
+            this.setupCarousel();
+        }
+        disconnectedCallback() {
+            var _a;
+            this.stopAutoplay();
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        }
+        initializeOptions() {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+            this.useDots = ((_a = this.data) === null || _a === void 0 ? void 0 : _a.useDots) === true || typeof ((_b = this.data) === null || _b === void 0 ? void 0 : _b.useDots) === 'object';
+            this.useButtons = ((_c = this.data) === null || _c === void 0 ? void 0 : _c.useButtons) === true || typeof ((_d = this.data) === null || _d === void 0 ? void 0 : _d.useButtons) === 'object';
+            this.autoplay = (_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.autoplay) !== null && _f !== void 0 ? _f : true;
+            this.interval = (_h = (_g = this.data) === null || _g === void 0 ? void 0 : _g.interval) !== null && _h !== void 0 ? _h : CustomCarouselElement.defaultInterval;
+            this.dotsOptions = {
+                position: 'bottom-center',
+                color: '#d9d9d9',
+                activeColor: '#b5914a',
+                ...(typeof ((_j = this.data) === null || _j === void 0 ? void 0 : _j.useDots) === 'object' ? this.data.useDots : {}),
+            };
+            this.buttonsOptions = {
+                together: false,
+                position: 'middle-sides',
+                textColor: '#000000',
+                backgroundColor: '#ffffff',
+                borderRadius: '50%',
+                prev: 'Prev',
+                next: 'Next',
+                ...(typeof ((_k = this.data) === null || _k === void 0 ? void 0 : _k.useButtons) === 'object' ? this.data.useButtons : {}),
+            };
+            this.validateOptions();
+        }
+        setupResizeObserver() {
+            if (this.data) {
+                this.resizeObserver = new ResizeObserverService({
+                    element: this,
+                    maxSize: {
+                        width: this.data.width,
+                        height: this.data.height,
+                    },
+                    minScale: this.data.minScale,
+                });
+                this.addEventListener('spotSizeChanged', this.handleCarouselSizeChanged.bind(this));
+            }
+        }
+        handleCarouselSizeChanged(event) {
+            console.info('Carousel Size Changed', event);
+        }
+        render() {
+            var _a;
+            if (!this.shadowRoot)
+                return;
+            const style = document.createElement('style');
+            style.textContent = CAROUSEL_COMPONENT_STYLE(this.data);
+            this.shadowRoot.appendChild(style);
+            const slides = this.renderSlides();
+            this.shadowRoot.appendChild(slides);
+            this.slidesContainer = (_a = this.shadowRoot.querySelector('.slides')) !== null && _a !== void 0 ? _a : undefined;
+            if (this.useDots) {
+                const dots = this.renderDots();
+                if (dots)
+                    this.shadowRoot.appendChild(dots);
+            }
+            if (this.useButtons) {
+                const buttons = this.renderButtons();
+                if (buttons)
+                    this.shadowRoot.appendChild(buttons);
+            }
+        }
+        setupCarousel() {
+            this.setupDots();
+            this.setupButtons();
+            if (this.autoplay) {
+                this.startAutoplay();
+            }
+            this.updateCarousel();
+        }
+        renderSlides() {
+            const slidesContainer = document.createElement('div');
+            slidesContainer.className = 'slides';
+            this.slides.forEach((slide, index) => {
+                const slideElement = document.createElement('div');
+                slideElement.className = `slide ${index === this.currentSlide ? 'active' : ''}`;
+                if (slide instanceof HTMLElement) {
+                    slideElement.appendChild(slide);
+                }
+                slidesContainer.appendChild(slideElement);
+            });
+            return slidesContainer;
+        }
+        renderDots() {
+            const dotsContainer = document.createElement('div');
+            dotsContainer.className = `dots ${this.dotsOptions.position}`;
+            this.slides.forEach((_, index) => {
+                const dot = document.createElement('span');
+                dot.className = `dot ${index === this.currentSlide ? 'active' : ''}`;
+                dot.style.backgroundColor = this.dotsOptions.color;
+                dotsContainer.appendChild(dot);
+            });
+            return dotsContainer;
+        }
+        renderButtons() {
+            const buttonsContainer = document.createElement('div');
+            const buttonsClass = this.buttonsOptions.together
+                ? `buttons-together ${this.buttonsOptions.position}`
+                : 'buttons-separate';
+            buttonsContainer.className = `buttons ${buttonsClass}`;
+            this.prevButton = this.createButton('prev-button', this.buttonsOptions.prev);
+            this.nextButton = this.createButton('next-button', this.buttonsOptions.next);
+            buttonsContainer.appendChild(this.prevButton);
+            buttonsContainer.appendChild(this.nextButton);
+            return buttonsContainer;
+        }
+        createButton(className, text) {
+            const button = document.createElement('button');
+            button.className = className;
+            button.textContent = text;
+            button.style.color = this.buttonsOptions.textColor;
+            button.style.backgroundColor = this.buttonsOptions.backgroundColor;
+            button.style.borderRadius = this.buttonsOptions.borderRadius;
+            return button;
+        }
+        setupDots() {
+            if (!this.shadowRoot || !this.useDots)
+                return;
+            this.dotElements = Array.from(this.shadowRoot.querySelectorAll('.dot'));
+            this.dotElements.forEach((dot, index) => {
+                dot.addEventListener('click', () => {
+                    this.goToSlide(index);
+                    this.resetAutoplay();
+                });
+            });
+        }
+        setupButtons() {
+            var _a, _b;
+            if (!this.useButtons)
+                return;
+            (_a = this.prevButton) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
+                this.prevSlide();
+                this.resetAutoplay();
+            });
+            (_b = this.nextButton) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => {
+                this.nextSlide();
+                this.resetAutoplay();
+            });
+        }
+        nextSlide() {
+            this.goToSlide((this.currentSlide + 1) % this.slides.length);
+        }
+        prevSlide() {
+            this.goToSlide((this.currentSlide - 1 + this.slides.length) % this.slides.length);
+        }
+        goToSlide(index) {
+            this.currentSlide = index;
+            this.updateCarousel();
+        }
+        updateCarousel() {
+            if (!this.slidesContainer)
+                return;
+            const slides = Array.from(this.slidesContainer.children);
+            slides.forEach((slide, index) => {
+                slide.classList.toggle('active', index === this.currentSlide);
+            });
+            this.updateDots();
+        }
+        updateDots() {
+            if (!this.useDots)
+                return;
+            this.dotElements.forEach((dot, index) => {
+                const isActive = index === this.currentSlide;
+                dot.classList.toggle('active', isActive);
+                dot.style.backgroundColor = isActive
+                    ? this.dotsOptions.activeColor
+                    : this.dotsOptions.color;
+            });
+        }
+        startAutoplay() {
+            this.autoplayInterval = window.setInterval(() => this.nextSlide(), this.interval);
+        }
+        stopAutoplay() {
+            if (this.autoplayInterval !== null) {
+                window.clearInterval(this.autoplayInterval);
+                this.autoplayInterval = null;
+            }
+        }
+        resetAutoplay() {
+            if (this.autoplay) {
+                this.stopAutoplay();
+                this.startAutoplay();
+            }
+        }
+        validateOptions() {
+            this.validatePosition(this.dotsOptions.position, 'dotsPosition', 'bottom-center');
+            this.validateButtonsPosition();
+        }
+        validatePosition(position, optionName, defaultValue) {
+            if (!CustomCarouselElement.validPositions.includes(position)) {
+                console.warn(`Invalid ${optionName}: ${position}. Defaulting to '${defaultValue}'.`);
+                if (optionName === 'dotsPosition') {
+                    this.dotsOptions.position = defaultValue;
+                }
+                else if (optionName === 'buttonsPosition') {
+                    this.buttonsOptions.position = defaultValue;
+                }
+            }
+        }
+        validateButtonsPosition() {
+            if (this.useButtons) {
+                if (this.buttonsOptions.together) {
+                    this.validatePosition(this.buttonsOptions.position, 'buttonsPosition', 'bottom-center');
+                }
+                else if (this.buttonsOptions.position !== 'middle-sides') {
+                    console.warn(`Invalid buttonsPosition: ${this.buttonsOptions.position}. When buttons are not together, only 'middle-sides' is allowed. Defaulting to 'middle-sides'.`);
+                    this.buttonsOptions.position = 'middle-sides';
+                }
+            }
+        }
+    }
+    CustomCarouselElement.defaultInterval = 5000;
+    CustomCarouselElement.validPositions = [
+        'top-left',
+        'top-center',
+        'top-right',
+        'bottom-left',
+        'bottom-center',
+        'bottom-right',
+        'middle-left',
+        'middle-right',
+        'middle-sides',
+    ];
+    CarouselElement = CustomCarouselElement;
+}
+
 let SpotElement;
 if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
     class CustomSpotElement extends HTMLElement {
@@ -15267,6 +15694,7 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
          * #########################################################
          */
         handleSpotSizeChanged(event) {
+            console.info('Spot Size Changed', event);
             // Adjust text elements font size based on the scale factor
             this.adjustFontSize(event.detail.scale);
         }
@@ -15309,8 +15737,8 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             const scaleFactor = 1 + (baseFactor - 1) * dampening;
             // Step 3: Define the allowed range for the scale factor
             // This ensures that the font size never changes too drastically
-            const minScale = 0.9; // Font will never be smaller than 90% of original
-            const maxScale = 1.1; // Font will never be larger than 110% of original
+            const minScale = 0.5; // Font will never be smaller than 90% of original
+            const maxScale = 1.5; // Font will never be larger than 110% of original
             // Step 4: Clamp the scale factor to the defined range
             // Math.min ensures the value doesn't exceed maxScale
             // Math.max ensures the value isn't less than minScale
@@ -15324,15 +15752,9 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             if (!this.shadowRoot || !this.data || !this.content)
                 return;
             const style = this.getTemplateStyle(this.data.width, this.data.height);
-            const spot = document.createElement('div');
-            spot.className = 'spot';
-            if (typeof this.content === 'string') {
-                spot.innerHTML = this.content;
-            }
             if (this.content instanceof HTMLElement) {
-                spot.replaceChildren(this.content);
+                this.shadowRoot.replaceChildren(style, this.content);
             }
-            this.shadowRoot.replaceChildren(style, spot);
         }
         getTemplateStyle(width, height) {
             const style = document.createElement('style');
@@ -15345,12 +15767,6 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
           width: ${this.data.fluid ? '100%' : `${width}px`};
           height: ${this.data.fluid ? '100%' : `${height}px`};
         }
-
-        :host .spot {
-          width: 100%;
-          height: 100%;
-          display: block;
-        }
       `;
             return style;
         }
@@ -15367,24 +15783,43 @@ class ElementService {
      *
      * This method is only available in browser environments.
      *
-     * @param {ICreateFinalElementParams} params - The parameters to create the final element.
+     * @param {ICreateSpotElementParams} params - The parameters to create the final element.
      *
      * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
      */
-    createFinalElement({ content, config }) {
+    createSpotElement({ content, config }) {
         var _a;
         if (!this.ensureBrowserEnvironmentAndDefineElement()) {
             return null;
         }
-        const element = document.createElement(ELEMENT_TAG);
-        element.data = {
-            width: config.width,
-            height: config.height,
-            minScale: config === null || config === void 0 ? void 0 : config.minScale,
+        const spot = document.createElement(SPOT_ELEMENT_TAG);
+        spot.data = {
             fluid: (_a = config === null || config === void 0 ? void 0 : config.fluid) !== null && _a !== void 0 ? _a : false,
+            ...config,
         };
-        element.content = content;
-        return element;
+        spot.content = content;
+        return spot;
+    }
+    /**
+     * Creates the carousel html element based on the provided slides and configs using shadow dom.
+     *
+     * This method is only available in browser environments.
+     *
+     * @param {ICreateCarouselElementParams} params - The parameters to create the final element.
+     *
+     * @return {HTMLElement | null} - The html element or null if the browser environment is not available.
+     */
+    createCarouselElement({ slides, config, }) {
+        if (!this.ensureBrowserEnvironmentAndDefineElement()) {
+            return null;
+        }
+        const carousel = document.createElement(CAROUSEL_ELEMENT_TAG);
+        carousel.data = {
+            fluid: false,
+            ...config,
+        };
+        carousel.slides = slides;
+        return carousel;
     }
     /**
      * Overrides the spot colors with the provided colors.
@@ -15414,428 +15849,35 @@ class ElementService {
             console.warn('LiquidCommerce Rmn Sdk: Methods which create elements are only available in browser environments.');
             return false;
         }
-        if (!window.customElements.get(ELEMENT_TAG)) {
-            window.customElements.define(ELEMENT_TAG, SpotElement);
+        if (!window.customElements.get(SPOT_ELEMENT_TAG)) {
+            window.customElements.define(SPOT_ELEMENT_TAG, SpotElement);
+        }
+        if (!window.customElements.get(CAROUSEL_ELEMENT_TAG)) {
+            window.customElements.define(CAROUSEL_ELEMENT_TAG, CarouselElement);
         }
         return true;
     }
 }
 
-const CAROUSEL_COMPONENT_STYLE = `
-    :host {
-        position: relative;
-        display: inline-block;
-        margin: 0;
-        overflow: hidden;
-        height: 100%;
-        width: 100%;
-    }
-
-    .carousel-slides {
-        position: relative;
-        height: 100%;
-        width: 100%;
-    }
-
-    .carousel-slide {
-        display: none;
-
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        width: 100%;
-    }
-
-    .carousel-slide.active {
-        display: flex;
-    }
-
-    .carousel-dots {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    .carousel-dots .dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 50%;
-        cursor: pointer;
-        transition: all 0.3s ease;
-    }
-
-    .carousel-dots.top-left,
-    .carousel-dots.bottom-left {
-        left: 10px;
-    }
-
-    .carousel-dots.top-center,
-    .carousel-dots.bottom-center {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    .carousel-dots.top-right,
-    .carousel-dots.bottom-right {
-        right: 10px;
-    }
-
-    .carousel-dots.top-left,
-    .carousel-dots.top-center,
-    .carousel-dots.top-right {
-        top: 10px;
-    }
-
-    .carousel-dots.bottom-left,
-    .carousel-dots.bottom-center,
-    .carousel-dots.bottom-right {
-        bottom: 10px;
-    }
-
-    .carousel-dots.middle-left {
-        left: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        flex-direction: column;
-    }
-
-    .carousel-dots.middle-right {
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        flex-direction: column;
-    }
-
-    .carousel-buttons button {
-        background-color: #00000080;
-        color: #fff;
-        border: none;
-        padding: 10px;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-    }
-
-    .carousel-buttons button:hover {
-        background-color: #000000b3;
-    }
-
-    .carousel-buttons.buttons-separate button {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-    }
-
-    .carousel-buttons.buttons-separate .prev-button {
-        left: 10px;
-    }
-
-    .carousel-buttons.buttons-separate .next-button {
-        right: 10px;
-    }
-
-    .carousel-buttons.buttons-together {
-        position: absolute;
-        display: flex;
-        gap: 10px;
-    }
-
-    .carousel-buttons.buttons-together.top-left,
-    .carousel-buttons.buttons-together.bottom-left {
-        left: 10px;
-    }
-
-    .carousel-buttons.buttons-together.top-center,
-    .carousel-buttons.buttons-together.bottom-center {
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-    .carousel-buttons.buttons-together.top-right,
-    .carousel-buttons.buttons-together.bottom-right {
-        right: 10px;
-    }
-
-    .carousel-buttons.buttons-together.top-left,
-    .carousel-buttons.buttons-together.top-center,
-    .carousel-buttons.buttons-together.top-right {
-        top: 10px;
-    }
-
-    .carousel-buttons.buttons-together.bottom-left,
-    .carousel-buttons.buttons-together.bottom-center,
-    .carousel-buttons.buttons-together.bottom-right {
-        bottom: 10px;
-    }
-
-    .carousel-buttons.buttons-together.middle-left,
-    .carousel-buttons.buttons-together.middle-right {
-        top: 50%;
-        transform: translateY(-50%);
-        flex-direction: column;
-    }
-
-    .carousel-buttons.buttons-together.middle-left {
-        left: 10px;
-    }
-
-    .carousel-buttons.buttons-together.middle-right {
-        right: 10px;
-    }
-
-    @media (max-width: 768px) {
-        .carousel-buttons button {
-            padding: 8px 12px;
-            font-size: 14px;
-        }
-
-        .carousel-dots .dot {
-            width: 8px;
-            height: 8px;
-        }
-    }
-`;
-
-class CarouselComponent {
-    constructor(slides, options = {}) {
-        var _a, _b;
-        this.currentSlide = 0;
-        this.dotElements = [];
-        this.prevButton = null;
-        this.nextButton = null;
-        this.autoplayInterval = null;
-        this.slides = slides;
-        this.autoplay = (_a = options.autoplay) !== null && _a !== void 0 ? _a : true;
-        this.interval = (_b = options.interval) !== null && _b !== void 0 ? _b : 10000;
-        this.dotsOptions = this.initializeDotOptions(options.useDots);
-        this.buttonsOptions = this.initializeButtonOptions(options.useButtons);
-        this.validateOptions();
-        this.carousel = document.createElement('div');
-        this.carousel.className = 'carousel';
-        this.shadowRoot = this.carousel.attachShadow({ mode: 'open' });
-        this.render();
-        this.slidesContainer = this.shadowRoot.querySelector('.carousel-slides');
-        this.setupCarousel();
-    }
-    // Public method to get the carousel element
-    getElement() {
-        return this.carousel;
-    }
-    // Main setup methods
-    render() {
-        const style = document.createElement('style');
-        style.textContent = CAROUSEL_COMPONENT_STYLE;
-        this.shadowRoot.appendChild(style);
-        this.shadowRoot.appendChild(this.renderSlides());
-        if (this.dotsOptions) {
-            const dots = this.renderDots();
-            if (dots)
-                this.shadowRoot.appendChild(dots);
-        }
-        if (this.buttonsOptions) {
-            const buttons = this.renderButtons();
-            if (buttons)
-                this.shadowRoot.appendChild(buttons);
-        }
-    }
-    setupCarousel() {
-        this.setupDots();
-        this.setupButtons();
-        if (this.autoplay) {
-            this.startAutoplay();
-        }
-        this.updateCarousel();
-    }
-    // Rendering methods
-    renderSlides() {
-        const slidesContainer = document.createElement('div');
-        slidesContainer.className = 'carousel-slides';
-        this.slides.forEach((slide, index) => {
-            const slideElement = document.createElement('div');
-            slideElement.className = `carousel-slide ${index === this.currentSlide ? 'active' : ''}`;
-            if (typeof slide === 'string') {
-                slideElement.innerHTML = slide;
-            }
-            else if (slide instanceof HTMLElement) {
-                slideElement.appendChild(slide);
-            }
-            slidesContainer.appendChild(slideElement);
-        });
-        return slidesContainer;
-    }
-    renderDots() {
-        if (!this.dotsOptions)
-            return null;
-        const dotsContainer = document.createElement('div');
-        dotsContainer.className = `carousel-dots ${this.dotsOptions.position}`;
-        this.slides.forEach((_, index) => {
-            if (!this.dotsOptions)
-                return;
-            const dot = document.createElement('span');
-            dot.className = `dot ${index === this.currentSlide ? 'active' : ''}`;
-            dot.style.backgroundColor = this.dotsOptions.color;
-            dotsContainer.appendChild(dot);
-        });
-        return dotsContainer;
-    }
-    renderButtons() {
-        if (!this.buttonsOptions)
-            return null;
-        const buttonsContainer = document.createElement('div');
-        const buttonsClass = this.buttonsOptions.together
-            ? `buttons-together ${this.buttonsOptions.position}`
-            : 'buttons-separate';
-        buttonsContainer.className = `carousel-buttons ${buttonsClass}`;
-        this.prevButton = document.createElement('button');
-        this.prevButton.className = 'prev-button';
-        this.prevButton.textContent = this.buttonsOptions.prev;
-        this.prevButton.style.color = this.buttonsOptions.textColor;
-        this.prevButton.style.backgroundColor = this.buttonsOptions.backgroundColor;
-        this.prevButton.style.borderRadius = this.buttonsOptions.borderRadius;
-        buttonsContainer.appendChild(this.prevButton);
-        this.nextButton = document.createElement('button');
-        this.nextButton.className = 'next-button';
-        this.nextButton.textContent = this.buttonsOptions.next;
-        this.nextButton.style.color = this.buttonsOptions.textColor;
-        this.nextButton.style.backgroundColor = this.buttonsOptions.backgroundColor;
-        this.nextButton.style.borderRadius = this.buttonsOptions.borderRadius;
-        buttonsContainer.appendChild(this.nextButton);
-        return buttonsContainer;
-    }
-    // Setup methods
-    setupDots() {
-        if (this.dotsOptions) {
-            this.dotElements = Array.from(this.shadowRoot.querySelectorAll('.dot'));
-            this.dotElements.forEach((dot, index) => {
-                dot.addEventListener('click', () => {
-                    this.goToSlide(index);
-                    this.resetAutoplay();
-                });
-            });
-        }
-    }
-    setupButtons() {
-        var _a, _b;
-        if (this.buttonsOptions) {
-            (_a = this.prevButton) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
-                this.prevSlide();
-                this.resetAutoplay();
-            });
-            (_b = this.nextButton) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => {
-                this.nextSlide();
-                this.resetAutoplay();
-            });
-        }
-    }
-    // Navigation methods
-    nextSlide() {
-        this.goToSlide((this.currentSlide + 1) % this.slides.length);
-    }
-    prevSlide() {
-        this.goToSlide((this.currentSlide - 1 + this.slides.length) % this.slides.length);
-    }
-    goToSlide(index) {
-        this.currentSlide = index;
-        this.updateCarousel();
-    }
-    // Update methods
-    updateCarousel() {
-        const slides = Array.from(this.slidesContainer.children);
-        slides.forEach((slide, index) => {
-            if (index === this.currentSlide) {
-                slide.classList.add('active');
-            }
-            else {
-                slide.classList.remove('active');
-            }
-        });
-        this.updateDots();
-    }
-    updateDots() {
-        this.dotElements.forEach((dot, index) => {
-            const isActive = index === this.currentSlide;
-            dot.classList.toggle('active', isActive);
-            if (!this.dotsOptions)
-                return;
-            dot.style.backgroundColor = isActive ? this.dotsOptions.activeColor : this.dotsOptions.color;
-        });
-    }
-    // Autoplay methods
-    startAutoplay() {
-        this.autoplayInterval = window.setInterval(() => this.nextSlide(), this.interval);
-    }
-    stopAutoplay() {
-        if (this.autoplayInterval !== null) {
-            window.clearInterval(this.autoplayInterval);
-            this.autoplayInterval = null;
-        }
-    }
-    resetAutoplay() {
-        if (this.autoplay) {
-            this.stopAutoplay();
-            this.startAutoplay();
-        }
-    }
-    // Initialization and validation methods
-    initializeDotOptions(useDots) {
-        var _a, _b, _c;
-        return !useDots
-            ? false
-            : {
-                position: (_a = useDots === null || useDots === void 0 ? void 0 : useDots.position) !== null && _a !== void 0 ? _a : 'bottom-center',
-                color: (_b = useDots === null || useDots === void 0 ? void 0 : useDots.color) !== null && _b !== void 0 ? _b : '#d9d9d9',
-                activeColor: (_c = useDots === null || useDots === void 0 ? void 0 : useDots.activeColor) !== null && _c !== void 0 ? _c : '#b5914a',
-            };
-    }
-    initializeButtonOptions(useButtons) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return !useButtons
-            ? false
-            : {
-                position: (_a = useButtons === null || useButtons === void 0 ? void 0 : useButtons.position) !== null && _a !== void 0 ? _a : 'middle-sides',
-                together: (_b = useButtons === null || useButtons === void 0 ? void 0 : useButtons.together) !== null && _b !== void 0 ? _b : false,
-                textColor: (_c = useButtons === null || useButtons === void 0 ? void 0 : useButtons.textColor) !== null && _c !== void 0 ? _c : '#000000',
-                backgroundColor: (_d = useButtons === null || useButtons === void 0 ? void 0 : useButtons.backgroundColor) !== null && _d !== void 0 ? _d : '#ffffff',
-                borderRadius: (_e = useButtons === null || useButtons === void 0 ? void 0 : useButtons.borderRadius) !== null && _e !== void 0 ? _e : '50%',
-                prev: (_f = useButtons === null || useButtons === void 0 ? void 0 : useButtons.prev) !== null && _f !== void 0 ? _f : 'Prev',
-                next: (_g = useButtons === null || useButtons === void 0 ? void 0 : useButtons.next) !== null && _g !== void 0 ? _g : 'Next',
-            };
-    }
-    validateOptions() {
-        const validPositions = [
-            'top-left',
-            'top-center',
-            'top-right',
-            'bottom-left',
-            'bottom-center',
-            'bottom-right',
-            'middle-left',
-            'middle-right',
-            'middle-sides',
-        ];
-        this.validateDotsPosition(validPositions);
-        this.validateButtonsPosition(validPositions);
-    }
-    validateDotsPosition(validPositions) {
-        if (this.dotsOptions && !validPositions.includes(this.dotsOptions.position)) {
-            console.warn(`Invalid dotsPosition: ${this.dotsOptions.position}. Defaulting to 'bottom-center'.`);
-            this.dotsOptions.position = 'bottom-center';
-        }
-    }
-    validateButtonsPosition(validPositions) {
-        if (this.buttonsOptions) {
-            if (this.buttonsOptions.together) {
-                if (!validPositions.includes(this.buttonsOptions.position)) {
-                    console.warn(`Invalid buttonsPosition: ${this.buttonsOptions.position}. Defaulting to 'bottom-center'.`);
-                    this.buttonsOptions.position = 'bottom-center';
-                }
-            }
-            else if (this.buttonsOptions.position !== 'middle-sides') {
-                console.warn(`Invalid buttonsPosition: ${this.buttonsOptions.position}. When buttons are not together, only 'middle-sides' is allowed. Defaulting to 'middle-sides'.`);
-                this.buttonsOptions.position = 'middle-sides';
-            }
-        }
+function linearGradientColorStop(overlay, fallback) {
+    if (!overlay || overlay.length === 0) {
+        return fallback;
     }
+    return overlay.map(({ color, colorStop }) => `${color} ${colorStop}`).join(', ');
+}
+function spotHtmlStringToElement(htmlString) {
+    const spot = document.createElement('div');
+    spot.className = 'spot';
+    spot.innerHTML = htmlString;
+    Object.assign(spot.style, {
+        position: 'relative',
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        margin: '0',
+        padding: '0',
+    });
+    return spot;
 }
 
 const STYLES$i = ({ primaryImage, secondaryImage }) => `
@@ -16688,13 +16730,6 @@ function rbCollectionBannerWithoutTextBlockTemplate(spot, config) {
   `;
 }
 
-function linearGradientColorStop(overlay, fallback) {
-    if (!overlay || overlay.length === 0) {
-        return fallback;
-    }
-    return overlay.map(({ color, colorStop }) => `${color} ${colorStop}`).join(', ');
-}
-
 const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderColor = ctaTextColor, primaryImage, mobilePrimaryImage = primaryImage, }, { prefix, overlay }) => {
     const linearGradient = linearGradientColorStop(overlay || [], 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
     return `
@@ -17289,7 +17324,9 @@ function rbLargeCategoryImageToutTemplate(spot, config) {
   `;
 }
 
-const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix }) => `
+const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = primaryImage }, { prefix, overlay }) => {
+    const linearGradient = linearGradientColorStop(overlay || [], 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 30%');
+    return `
   <style>
     :host {
       min-width: 320px;
@@ -17305,10 +17342,9 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
       border-radius: 5px;
       overflow: hidden;
       cursor: pointer;
-      background-image: url("${mobilePrimaryImage}");
+      background-image: linear-gradient(to top, ${linearGradient}), url("${mobilePrimaryImage}");
       background-size: cover;
       background-position: center;
-      background-blend-mode: overlay;
       background-repeat: no-repeat;
     }
 
@@ -17329,7 +17365,7 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
 
     @media (min-width: 640px) {
       .${prefix}__content {
-        background-image: url("${primaryImage}");
+        background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
       }
     }
 
@@ -17352,6 +17388,7 @@ const STYLES$2 = ({ textColor = '#ffffff', primaryImage, mobilePrimaryImage = pr
     }
   </style>
 `;
+};
 function rbNavigationBannerTemplate(spot, config) {
     const { prefix = '' } = config;
     return `
@@ -17507,7 +17544,7 @@ function rbSmallDiscoverToutTemplate(spot, config) {
  *
  * @return {string} - The spot html string.
  */
-const GET_SPOT_TEMPLATE_HTML_STRING = (spot, config) => {
+const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     const templates = {
         // Reserve Bar Spot Templates
         [RMN_SPOT_TYPE.RB_HOMEPAGE_HERO_THREE_TILE]: {
@@ -17566,15 +17603,16 @@ const GET_SPOT_TEMPLATE_HTML_STRING = (spot, config) => {
     };
     const spotVariants = templates[spot.spot];
     if (!spotVariants) {
-        return '';
+        return null;
     }
     const variantTemplate = spotVariants[spot.variant];
     if (!variantTemplate) {
-        return '';
+        return null;
     }
     // Generate a random prefix to avoid conflicts with other elements.
     const prefix = 's' + Math.random().toString(36).substring(6);
-    return variantTemplate(spot, { ...config, prefix });
+    const spotHtmlString = variantTemplate(spot, { ...config, prefix });
+    return spotHtmlStringToElement(spotHtmlString);
 };
 
 const SELECTION_API_PATH = '/spots/selection';
@@ -17617,37 +17655,32 @@ class LiquidCommerceRmnClient {
      *
      * To create a spot html element, use the RmnCreateSpotElement function.
      *
-     * @param {ISpotSelectionParams} data - Spots selection parameters.
+     * @param {ISpotSelectionParams} params - Spots selection parameters.
      *
      * @return {Promise<ISpots>} - The spots response object.
      */
-    async spotSelection(data) {
-        return this.selectionService.spotSelection(data);
+    async spotSelection(params) {
+        return this.selectionService.spotSelection(params);
     }
     /**
      * Injects the spot elements into their provided placement.
      *
-     * @param {IInjectSpotElement[]} data - The spot elements data.
-     * @param {IInjectSpotsConfig} config - The configuration object.
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
      *
      * @return {Promise<void>} - A promise that resolves when the spot elements are injected.
      */
-    async injectSpotElement(data, config) {
-        if (!data.length) {
-            console.warn('RmnSdk: Failed to request spot selection. No spot elements provided.');
+    async injectSpotElement(params) {
+        var _a;
+        const { inject, config } = params;
+        if (!inject.length) {
+            console.warn('RmnSdk: Failed to inject spot element. Please provide at least one spot element to inject.');
             return;
         }
-        const spotSelectionRequest = data.map((item) => {
-            var _a;
-            return ({
-                spot: item.spotType,
-                count: (_a = item === null || item === void 0 ? void 0 : item.count) !== null && _a !== void 0 ? _a : 1,
-            });
-        });
-        const response = await this.spotSelection({ spots: spotSelectionRequest });
-        const normalizedData = this.normalizeDataSpotType(data);
-        for (const item of normalizedData) {
-            const spots = response[item.spotType];
+        this.preventDuplicateSpotPlacementIds(inject);
+        const response = await this.spotSelectionRequest(params);
+        for (const item of inject) {
+            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)) {
                 console.warn(`RmnSdk: Failed to inject spot element. No spots found for type "${item.spotType}".`);
                 continue;
@@ -17659,32 +17692,73 @@ class LiquidCommerceRmnClient {
                 continue;
             }
             if (spots.length === 1) {
-                this.injectOneSpotElement(item, placement, spots[0], config);
+                this.injectOneSpotElement(item, placement, spots[0], itemConfig);
             }
             if (spots.length > 1) {
-                this.injectCarouselSpotElement(placement, spots, config);
+                this.injectCarouselSpotElement(placement, spots, itemConfig);
             }
         }
     }
+    /**
+     * Makes a selection request on our server based on the provided data.
+     *
+     * @param {IInjectSpotElementParams} params - Parameters for injecting spot elements.
+     *
+     * @return {Promise<ISpots>} - The spots response object.
+     */
+    async spotSelectionRequest(params) {
+        const { inject, filter, config } = params;
+        const request = {
+            url: config === null || config === void 0 ? void 0 : config.url,
+            filter,
+            spots: inject.map((item) => ({
+                placementId: item.placementId,
+                spot: item.spotType,
+                count: item === null || item === void 0 ? void 0 : item.count,
+                ...item === null || item === void 0 ? void 0 : item.filter,
+            })),
+        };
+        return this.spotSelection(request);
+    }
     /**
      * Injects a carousel element with the provided spots into the placement.
      *
      * @param {HTMLElement} placement - The placement element.
      * @param {ISpot[]} spots - The spot data.
-     * @param {IInjectSpotsConfig} config - The configuration object.
+     * @param {IInjectSpotElementConfig} config - The configuration object.
      *
      * @return {void}
      */
     injectCarouselSpotElement(placement, spots, config) {
+        var _a;
         const carouselSlides = [];
         for (const spotItem of spots) {
             const spot = this.elementService.overrideSpotColors(spotItem, config === null || config === void 0 ? void 0 : config.colors);
-            const content = GET_SPOT_TEMPLATE_HTML_STRING(spot, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
+            const content = SPOT_TEMPLATE_HTML_ELEMENT(spot, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
+            if (!content) {
+                console.warn(`RmnSdk: Failed to inject carousel spot element. Could not create element for type "${spot.spot}".`);
+                return;
+            }
             carouselSlides.push(content);
         }
-        const carousel = new CarouselComponent(carouselSlides, config === null || config === void 0 ? void 0 : config.carousel);
-        const carouselElement = carousel.getElement();
-        placement.appendChild(carouselElement);
+        const { maxWidth, maxHeight } = spots.reduce((max, spot) => ({
+            maxWidth: Math.max(max.maxWidth, spot.width),
+            maxHeight: Math.max(max.maxHeight, spot.height),
+        }), { maxWidth: 0, maxHeight: 0 });
+        const carouselElement = this.elementService.createCarouselElement({
+            slides: carouselSlides,
+            config: {
+                width: maxWidth,
+                height: maxHeight,
+                minScale: (_a = config === null || config === void 0 ? void 0 : config.minScale) !== null && _a !== void 0 ? _a : 0.25, // Scale down to 25% of the original size
+                ...config === null || config === void 0 ? void 0 : config.carousel,
+            },
+        });
+        if (!carouselElement) {
+            console.warn(`RmnSdk: Failed to inject spot carousel element. Could not create spot carousel element.`);
+            return;
+        }
+        placement.replaceChildren(carouselElement);
     }
     /**
      * Injects a single spot element into the provided placement.
@@ -17692,48 +17766,49 @@ class LiquidCommerceRmnClient {
      * @param {IInjectSpotElement} injectItem - The inject item data.
      * @param {HTMLElement} placement - The placement element.
      * @param {ISpot} spot - The spot data.
-     * @param {IInjectSpotsConfig} config - The configuration object.
+     * @param {IInjectSpotElementConfig} config - The configuration object.
      *
      * @return {void}
      */
     injectOneSpotElement(injectItem, placement, spot, config) {
+        var _a;
         const spotData = this.elementService.overrideSpotColors(spot, config === null || config === void 0 ? void 0 : config.colors);
-        const content = GET_SPOT_TEMPLATE_HTML_STRING(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
-        const spotElement = this.elementService.createFinalElement({
+        const content = SPOT_TEMPLATE_HTML_ELEMENT(spotData, { overlay: config === null || config === void 0 ? void 0 : config.overlay });
+        if (!content) {
+            console.warn(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`);
+            return;
+        }
+        const spotElement = this.elementService.createSpotElement({
             content,
             config: {
-                fluid: true,
                 width: spot.width,
                 height: spot.height,
-                minScale: config === null || config === void 0 ? void 0 : config.minScale,
+                minScale: (_a = config === null || config === void 0 ? void 0 : config.minScale) !== null && _a !== void 0 ? _a : 0.25, // Scale down to 25% of the original size
             },
         });
         if (!spotElement) {
             console.warn(`RmnSdk: Failed to inject spot element. Could not create element for type "${injectItem.spotType}".`);
             return;
         }
-        placement.appendChild(spotElement);
+        placement.replaceChildren(spotElement);
     }
     /**
-     * Normalizes the spot type data by adding a number suffix to the spot type.
+     * Prevents duplicate placement ids in the inject data.
+     *
+     * @param {IInjectSpotElement[]} inject - The inject data.
      *
-     * @param {IInjectSpotElement[]} spots - The spot type data.
+     * @throws {Error} - If a duplicate placement id is found.
      *
-     * @return {IInjectSpotElement[]} - The normalized spot type data.
+     * @return {void}
      */
-    normalizeDataSpotType(spots) {
-        const spotTypeCounts = {};
-        return spots.map((spot) => {
-            const { spotType } = spot;
-            spotTypeCounts[spotType] = (spotTypeCounts[spotType] || 0) + 1;
-            if (spotTypeCounts[spotType] === 1) {
-                return spot;
+    preventDuplicateSpotPlacementIds(inject) {
+        const placementIds = new Set();
+        for (const item of inject) {
+            if (placementIds.has(item.placementId)) {
+                throw new Error(`RmnSdk: Duplicate placement id (${item.placementId}) found. Please provide a unique placement id for each spot element.`);
             }
-            return {
-                ...spot,
-                spotType: `${spotType}${spotTypeCounts[spotType]}`,
-            };
-        });
+            placementIds.add(item.placementId);
+        }
     }
 }
 /**
@@ -17749,5 +17824,36 @@ async function RmnClient(apiKey, config) {
     const credentials = await authService.initialize();
     return new LiquidCommerceRmnClient(credentials);
 }
+/**
+ * Creates the spot html element based on the provided data using shadow dom.
+ *
+ * This method is useful when you are initializing the client in a non-browser environment.
+ * When you request a spot selection, you will receive the spot data in server-side and return them to the client.
+ * Then you can use this function to create the spot html element based on the provided data without the need of the RmnClient instance.
+ *
+ * @param {ISpot} spot - The spot data.
+ * @param {IRmnCreateSpotElementConfig} config - The configuration object.
+ *
+ * @return {HTMLElement | null} - The spot html element or null if the browser environment is not available.
+ */
+function RmnCreateSpotElement(spot, config) {
+    var _a;
+    const elementService = ElementService.getInstance();
+    const spotData = 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) {
+        console.warn(`RmnSdk: Failed to create spot element for type "${spotData.spot}".`);
+        return null;
+    }
+    return elementService.createSpotElement({
+        content,
+        config: {
+            fluid: true,
+            width: spot.width,
+            height: spot.height,
+            minScale: (_a = config === null || config === void 0 ? void 0 : config.minScale) !== null && _a !== void 0 ? _a : 0.25, // Scale down to 25% of the original size
+        },
+    });
+}
 
-export { LiquidCommerceRmnClient, RMN_ENV, RMN_FILTER_PROPERTIES, RMN_SPOT_EVENT, RMN_SPOT_TYPE, RmnClient };
+export { LiquidCommerceRmnClient, RMN_ENV, RMN_FILTER_PROPERTIES, RMN_SPOT_EVENT, RMN_SPOT_TYPE, RmnClient, RmnCreateSpotElement };