@liquidcommercedev/rmn-sdk 1.5.0-beta.17 → 1.5.0-beta.19

package/dist/index.cjs

@@ -15947,7 +15947,7 @@ class LocalStorageService {
 LocalStorageService.localStorageKeyPrefix = 'lc_rmn';
 LocalStorageService.localStorageKey = '';
 LocalStorageService.spotExpirationTime = 1000 * 60 * 60 * 24 * 7; // 7 days
-LocalStorageService.encryptData = true;
+LocalStorageService.encryptData = false;
 
 /**
  * PubsubService class
@@ -16108,6 +16108,12 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
         height: ${fluid ? '100%' : `${height}px`};
     }
 
+    .container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
     .slides {
         position: relative;
         height: 100%;
@@ -16303,57 +16309,74 @@ const CAROUSEL_COMPONENT_STYLE = ({ width, height, fluid }) => `
 let CarouselElement;
 if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined') {
     class CustomCarouselElement extends HTMLElement {
+        /**
+         * Initializes the web component and attaches shadow DOM
+         * Binds all event handlers to maintain proper 'this' context
+         */
         constructor() {
             super();
-            this.currentSlide = 0;
-            this.dotElements = [];
-            this.prevButton = null;
-            this.nextButton = null;
-            this.autoplayInterval = null;
-            this.useDots = false;
-            this.useButtons = false;
+            this.state = {
+                currentSlide: 0,
+                autoplayInterval: null,
+                isAutoplayPaused: false,
+                useDots: false,
+                useButtons: false,
+                autoplay: true,
+                interval: CustomCarouselElement.defaultConfigs.interval,
+                dots: { ...CustomCarouselElement.defaultConfigs.dots },
+                buttons: { ...CustomCarouselElement.defaultConfigs.buttons },
+                isDragging: false,
+                startX: 0,
+                currentX: 0,
+                dragStartTime: 0,
+                dragDistance: 0,
+                containerWidth: 0,
+                isTransitioning: false,
+                realIndex: 0, // Track the actual slide index
+                virtualIndex: 1, // Track the virtual slide position (start at 1 to show clone)
+                isVirtualizing: false, // Flag for handling virtual slide transitions
+            };
+            this.elements = {
+                slidesContainer: null,
+                dots: [],
+                prevButton: null,
+                nextButton: null,
+            };
             this.originalFontSizes = new Map();
+            this.cloneToOriginalMap = new WeakMap();
             this.attachShadow({ mode: 'open' });
+            this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+            this.handleTouchStart = this.handleTouchStart.bind(this);
+            this.handleTouchMove = this.handleTouchMove.bind(this);
+            this.handleTouchEnd = this.handleTouchEnd.bind(this);
+            this.handleDragStart = this.handleDragStart.bind(this);
+            this.handleDrag = this.handleDrag.bind(this);
+            this.handleDragEnd = this.handleDragEnd.bind(this);
+            this.updateContainerWidth = this.updateContainerWidth.bind(this);
         }
+        /**
+         * Web component lifecycle method called when element is added to DOM
+         * Initializes state, renders UI, sets up events and starts autoplay
+         */
         connectedCallback() {
-            this.initializeOptions();
-            this.setupResizeObserver();
+            this.initializeState();
             this.render();
             this.setupCarousel();
+            this.setupTouchEvents();
+            this.startAutoplayIfEnabled();
+            this.updateContainerWidth();
+            window.addEventListener('resize', this.updateContainerWidth.bind(this));
+            this.setupResizeObserver();
         }
+        /**
+         * Web component lifecycle method called when element is removed from DOM
+         * Cleans up all event listeners and intervals
+         */
         disconnectedCallback() {
             var _a;
-            this.stopAutoplay();
+            this.cleanupEventListeners();
             (_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',
-                size: 'base',
-                opacity: 1,
-                ...(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',
-                size: 'base',
-                opacity: 1,
-                ...(typeof ((_k = this.data) === null || _k === void 0 ? void 0 : _k.useButtons) === 'object' ? this.data.useButtons : {}),
-            };
-            this.validateOptions();
-        }
         setupResizeObserver() {
             if (this.data && !this.data.fluid) {
                 this.resizeObserver = new ResizeObserverService({
@@ -16368,18 +16391,20 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
             }
         }
         handleCarouselSizeChanged(event) {
-            const isRBSpot = 'rbHeroadaksda'.startsWith('rb');
-            if (!isRBSpot) {
-                // Adjust text elements font size based on the scale factor
-                this.adjustFontSize(event.detail.scale);
-            }
+            // Adjust text elements font size based on the scale factor
+            this.adjustFontSize(event.detail.scale);
         }
         adjustFontSize(elementScale) {
             var _a;
-            const scaleFactor = calculateScaleFactor(elementScale);
             // Find all text elements within the shadow root
-            const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h1, h2, h3, h4, p, span');
-            elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
+            const selectors = ['h1', 'h2', 'h3', 'h4', 'p', 'span']
+                .map((tag) => `[data-spot="iab"] ${tag}`)
+                .join(', ');
+            const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors);
+            if (!elements)
+                return;
+            const scaleFactor = calculateScaleFactor(elementScale);
+            elements.forEach((element) => {
                 if (element instanceof HTMLElement) {
                     if (!this.originalFontSizes.has(element)) {
                         const originalSize = parseFloat(window.getComputedStyle(element).fontSize);
@@ -16391,179 +16416,610 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
                 }
             });
         }
+        /** State and Configuration Management */
+        /**
+         * Initializes all state values from provided configuration
+         * Sets up dots, buttons, autoplay and other feature flags
+         */
+        initializeState() {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            this.state.useDots = Boolean((_a = this.data) === null || _a === void 0 ? void 0 : _a.useDots);
+            this.state.useButtons = Boolean((_b = this.data) === null || _b === void 0 ? void 0 : _b.useButtons);
+            this.state.autoplay = (_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c.autoplay) !== null && _d !== void 0 ? _d : true;
+            this.state.interval = (_f = (_e = this.data) === null || _e === void 0 ? void 0 : _e.interval) !== null && _f !== void 0 ? _f : CustomCarouselElement.defaultConfigs.interval;
+            if (typeof ((_g = this.data) === null || _g === void 0 ? void 0 : _g.useDots) === 'object') {
+                this.state.dots = { ...this.state.dots, ...this.data.useDots };
+            }
+            if (typeof ((_h = this.data) === null || _h === void 0 ? void 0 : _h.useButtons) === 'object') {
+                this.state.buttons = { ...this.state.buttons, ...this.data.useButtons };
+            }
+            this.validateConfiguration();
+        }
+        /**
+         * Validates all configuration options
+         * Ensures positions and other settings are valid
+         */
+        validateConfiguration() {
+            this.validatePosition(this.state.dots.position, 'dotsPosition', 'bottom-center');
+            this.validateButtonsPosition();
+        }
+        /**
+         * Validates navigation element positions
+         * Ensures dots and buttons are placed in valid locations
+         */
+        validatePosition(position, optionName, defaultValue) {
+            if (!CustomCarouselElement.validPositions.has(position)) {
+                console.warn(`Invalid ${optionName}: ${position}. Defaulting to '${defaultValue}'.`);
+                if (optionName === 'dotsPosition') {
+                    this.state.dots.position = defaultValue;
+                }
+                else if (optionName === 'buttonsPosition') {
+                    this.state.buttons.position = defaultValue;
+                }
+            }
+        }
+        /** Rendering and DOM Management */
+        /**
+         * Main rendering function that builds the carousel structure
+         * Creates slides, dots, and navigation buttons
+         */
         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);
+            const carouselContainer = document.createElement('div');
+            carouselContainer.className = 'container';
+            const slides = this.createSlides();
+            carouselContainer.appendChild(slides);
+            if (this.state.useDots) {
+                const dots = this.createDots();
+                carouselContainer.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();
+            if (this.state.useButtons) {
+                const buttons = this.createButtons();
+                carouselContainer.appendChild(buttons);
             }
-            this.updateCarousel();
+            this.shadowRoot.appendChild(carouselContainer);
+            this.cacheElements();
         }
-        renderSlides() {
+        /**
+         * Creates the slides container with infinite scroll support
+         * Adds cloned slides at start and end for seamless scrolling
+         */
+        createSlides() {
             const slidesContainer = document.createElement('div');
             slidesContainer.className = 'slides';
-            this.slides.forEach((slide) => {
-                const slideElement = document.createElement('div');
-                slideElement.className = 'slide';
-                if (slide instanceof HTMLElement) {
-                    slideElement.appendChild(slide);
-                }
-                slidesContainer.appendChild(slideElement);
+            // Add the last slide at the beginning for seamless backward transition
+            this.appendSlide(slidesContainer, this.slides.length - 1);
+            // Add all slides
+            this.slides.forEach((_, index) => {
+                this.appendSlide(slidesContainer, index);
             });
+            // Add the first slide at the end for seamless forward transition
+            this.appendSlide(slidesContainer, 0);
+            // Set initial position to show first real slide
+            slidesContainer.style.transform = 'translateX(-100%)';
             return slidesContainer;
         }
-        renderDots() {
+        /**
+         * Appends a single slide to the container
+         * Handles cloning of slide elements
+         */
+        appendSlide(container, index) {
+            const slideElement = document.createElement('div');
+            slideElement.className = 'slide';
+            if (this.slides[index] instanceof HTMLElement) {
+                // Clone the slide
+                const clonedSlide = this.slides[index].cloneNode(true);
+                // Map clone to original for event handling
+                this.cloneToOriginalMap.set(clonedSlide, this.slides[index]);
+                // Add event delegation to the slide container
+                slideElement.addEventListener('click', (e) => {
+                    const original = this.slides[index];
+                    // Dispatch a new event on the original element
+                    const cloneEvent = new Event(e.type, { bubbles: true, cancelable: true });
+                    original.dispatchEvent(cloneEvent);
+                });
+                slideElement.appendChild(clonedSlide);
+            }
+            container.appendChild(slideElement);
+        }
+        /**
+         * Creates navigation dots based on number of slides
+         * Sets up initial active state and styling
+         */
+        createDots() {
+            const { position, size, opacity, color } = this.state.dots;
             const dotsContainer = document.createElement('div');
-            dotsContainer.className = `dots ${this.dotsOptions.position} ${this.dotsOptions.size}`;
-            dotsContainer.style.cssText = `--opacity: ${this.dotsOptions.opacity}`;
+            dotsContainer.className = `dots ${position} ${size}`;
+            dotsContainer.style.setProperty('--opacity', opacity.toString());
             this.slides.forEach((_, index) => {
                 const dot = document.createElement('span');
-                dot.className = `dot ${index === this.currentSlide ? 'active' : ''}`;
-                dot.style.backgroundColor = this.dotsOptions.color;
+                dot.className = `dot ${index === this.state.currentSlide ? 'active' : ''}`;
+                dot.style.backgroundColor = color;
                 dotsContainer.appendChild(dot);
             });
             return dotsContainer;
         }
-        renderButtons() {
+        /**
+         * Creates navigation buttons (prev/next)
+         * Applies styling and position configuration
+         */
+        createButtons() {
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const { together, position, size, opacity } = this.state.buttons;
             const buttonsContainer = document.createElement('div');
-            const buttonsClass = this.buttonsOptions.together
-                ? `buttons-together ${this.buttonsOptions.position}`
-                : 'buttons-separate';
-            buttonsContainer.className = `buttons ${buttonsClass} ${this.buttonsOptions.size}`;
-            buttonsContainer.style.cssText = `--opacity: ${this.buttonsOptions.opacity}`;
-            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);
+            const buttonsClass = together ? `buttons-together ${position}` : 'buttons-separate';
+            buttonsContainer.className = `buttons ${buttonsClass} ${size}`;
+            buttonsContainer.style.setProperty('--opacity', opacity.toString());
+            this.elements.prevButton = this.createButton('prev-button', this.state.buttons.prev);
+            this.elements.nextButton = this.createButton('next-button', this.state.buttons.next);
+            buttonsContainer.appendChild(this.elements.prevButton);
+            buttonsContainer.appendChild(this.elements.nextButton);
             return buttonsContainer;
         }
+        /**
+         * Creates a single button element with specified properties
+         * Used for both prev and next buttons
+         */
         createButton(className, text) {
+            const { textColor, backgroundColor, borderRadius } = this.state.buttons;
             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;
+            button.style.color = textColor;
+            button.style.backgroundColor = backgroundColor;
+            button.style.borderRadius = borderRadius;
             return button;
         }
-        setupDots() {
-            if (!this.shadowRoot || !this.useDots)
+        /**
+         * Caches references to important DOM elements
+         * Stores references to slides container, dots, and buttons
+         */
+        cacheElements() {
+            if (!this.shadowRoot)
                 return;
-            this.dotElements = Array.from(this.shadowRoot.querySelectorAll('.dot'));
-            this.dotElements.forEach((dot, index) => {
-                dot.addEventListener('click', () => {
-                    this.goToSlide(index);
-                    this.resetAutoplay();
-                });
-            });
+            this.elements.slidesContainer = this.shadowRoot.querySelector('.slides');
+            this.elements.dots = Array.from(this.shadowRoot.querySelectorAll('.dot'));
+            this.elements.prevButton = this.shadowRoot.querySelector('.prev-button');
+            this.elements.nextButton = this.shadowRoot.querySelector('.next-button');
         }
-        setupButtons() {
-            var _a, _b;
-            if (!this.useButtons)
+        /** Event Management */
+        /**
+         * Sets up all carousel event listeners
+         * Includes dots, buttons, and transition events
+         */
+        setupCarousel() {
+            this.setupEventListeners();
+            // Add transition event listener with bound method
+            if (this.elements.slidesContainer) {
+                this.elements.slidesContainer.addEventListener('transitionend', this.handleTransitionEnd);
+            }
+            this.updateCarousel(false);
+        }
+        /**
+         * Sets up touch and drag event listeners
+         * Handles both mobile touch and desktop mouse events
+         */
+        setupTouchEvents() {
+            if (!this.elements.slidesContainer)
                 return;
-            (_a = this.prevButton) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
-                this.prevSlide();
-                this.resetAutoplay();
+            // Touch events
+            this.elements.slidesContainer.addEventListener('touchstart', this.handleTouchStart, {
+                passive: true,
+            });
+            this.elements.slidesContainer.addEventListener('touchmove', this.handleTouchMove, {
+                passive: false,
             });
-            (_b = this.nextButton) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => {
-                this.nextSlide();
-                this.resetAutoplay();
+            this.elements.slidesContainer.addEventListener('touchend', this.handleTouchEnd);
+            // Mouse drag events
+            this.elements.slidesContainer.addEventListener('mousedown', this.handleDragStart);
+            document.addEventListener('mousemove', this.handleDrag);
+            document.addEventListener('mouseup', this.handleDragEnd);
+        }
+        /**
+         * Removes all event listeners
+         * Called during cleanup and before re-adding listeners
+         */
+        removeEventListeners() {
+            this.elements.dots.forEach((dot) => {
+                dot.replaceWith(dot.cloneNode(true));
             });
+            if (this.elements.prevButton) {
+                this.elements.prevButton.replaceWith(this.elements.prevButton.cloneNode(true));
+            }
+            if (this.elements.nextButton) {
+                this.elements.nextButton.replaceWith(this.elements.nextButton.cloneNode(true));
+            }
+        }
+        /**
+         * Removes touch and drag event listeners
+         * Separate from other event listeners for better management
+         */
+        removeTouchEvents() {
+            if (!this.elements.slidesContainer)
+                return;
+            this.elements.slidesContainer.removeEventListener('touchstart', this.handleTouchStart);
+            this.elements.slidesContainer.removeEventListener('touchmove', this.handleTouchMove);
+            this.elements.slidesContainer.removeEventListener('touchend', this.handleTouchEnd);
+            this.elements.slidesContainer.removeEventListener('mousedown', this.handleDragStart);
+            document.removeEventListener('mousemove', this.handleDrag);
+            document.removeEventListener('mouseup', this.handleDragEnd);
+        }
+        /** Touch and Drag Event Handlers */
+        /**
+         * Handles start of touch interaction
+         * Initializes drag tracking and pauses autoplay
+         */
+        handleTouchStart(e) {
+            if (this.state.isTransitioning)
+                return;
+            this.pauseAutoplay();
+            this.state.startX = e.touches[0].clientX;
+            this.state.dragStartTime = Date.now();
+            this.state.isDragging = true;
+            this.state.dragDistance = 0;
         }
-        nextSlide() {
-            this.goToSlide((this.currentSlide + 1) % this.slides.length);
+        /**
+         * Handles touch movement
+         * Calculates drag distance and updates carousel position
+         */
+        handleTouchMove(e) {
+            if (!this.state.isDragging || this.state.isTransitioning)
+                return;
+            e.preventDefault();
+            const currentX = e.touches[0].clientX;
+            this.state.dragDistance = this.state.startX - currentX;
+            this.updateDragPosition();
         }
-        prevSlide() {
-            this.goToSlide((this.currentSlide - 1 + this.slides.length) % this.slides.length);
+        /**
+         * Handles end of touch interaction
+         * Determines if slide should change based on drag distance
+         */
+        handleTouchEnd() {
+            if (!this.state.isDragging)
+                return;
+            const dragDuration = Date.now() - this.state.dragStartTime;
+            const velocity = Math.abs(this.state.dragDistance) / dragDuration;
+            const isQuickSwipe = velocity > 0.5;
+            this.handleDragComplete(isQuickSwipe);
+            setTimeout(() => this.resumeAutoplay(), 100);
+        }
+        /**
+         * Handles start of mouse drag
+         * Similar to touch start but for desktop interaction
+         */
+        handleDragStart(e) {
+            if (this.state.isTransitioning)
+                return;
+            this.pauseAutoplay();
+            this.state.startX = e.clientX;
+            this.state.dragStartTime = Date.now();
+            this.state.isDragging = true;
+            this.state.dragDistance = 0;
+            e.preventDefault();
         }
+        /**
+         * Handles mouse movement during drag
+         * Updates carousel position during drag
+         */
+        handleDrag(e) {
+            if (!this.state.isDragging || this.state.isTransitioning)
+                return;
+            const currentX = e.clientX;
+            this.state.dragDistance = this.state.startX - currentX;
+            this.updateDragPosition();
+        }
+        /**
+         * Handles end of mouse drag
+         * Determines final slide position based on drag
+         */
+        handleDragEnd() {
+            if (!this.state.isDragging)
+                return;
+            const dragDuration = Date.now() - this.state.dragStartTime;
+            const velocity = Math.abs(this.state.dragDistance) / dragDuration;
+            const isQuickSwipe = velocity > 0.5;
+            this.handleDragComplete(isQuickSwipe);
+            setTimeout(() => this.resumeAutoplay(), 100);
+        }
+        /** Navigation and Position Management */
+        /**
+         * Handles navigation button clicks and programmatic navigation
+         * Updates both real and virtual indices
+         */
+        handleNavigation(direction) {
+            if (this.state.isTransitioning)
+                return;
+            const totalSlides = this.slides.length;
+            if (direction === 'next') {
+                this.state.realIndex = (this.state.realIndex + 1) % totalSlides;
+                this.state.virtualIndex++;
+            }
+            else {
+                this.state.realIndex = (this.state.realIndex - 1 + totalSlides) % totalSlides;
+                this.state.virtualIndex--;
+            }
+            this.updateCarousel(true);
+        }
+        /**
+         * Handles dot navigation clicks
+         * Calculates shortest path to target slide
+         */
+        handleDotClick(index) {
+            const currentRealIndex = this.state.realIndex;
+            const totalSlides = this.slides.length;
+            // Calculate the shortest path to the target slide
+            let diff = index - currentRealIndex;
+            // Adjust for shortest path when crossing the boundary
+            if (Math.abs(diff) > totalSlides / 2) {
+                diff = diff > 0 ? diff - totalSlides : diff + totalSlides;
+            }
+            // Update both real and virtual indices
+            this.state.realIndex = index;
+            this.state.virtualIndex += diff;
+            this.updateCarousel(true);
+            this.resetAutoplay();
+        }
+        /**
+         * Completes a drag interaction
+         * Determines whether to change slides based on drag distance
+         */
+        handleDragComplete(isQuickSwipe) {
+            this.state.isDragging = false;
+            if (!this.elements.slidesContainer)
+                return;
+            const dragPercentage = this.state.dragDistance / this.state.containerWidth;
+            const threshold = isQuickSwipe ? 0.1 : CustomCarouselElement.defaultConfigs.dragThreshold;
+            if (Math.abs(dragPercentage) > threshold) {
+                if (this.state.dragDistance > 0) {
+                    this.handleNavigation('next');
+                }
+                else {
+                    this.handleNavigation('prev');
+                }
+            }
+            else {
+                this.updateCarousel(true);
+            }
+            this.state.dragDistance = 0;
+        }
+        /**
+         * Updates carousel position during drag
+         * Applies transform without transition
+         */
+        updateDragPosition() {
+            if (!this.elements.slidesContainer || this.state.isTransitioning)
+                return;
+            const translateX = -this.state.virtualIndex * 100 -
+                (this.state.dragDistance / this.state.containerWidth) * 100;
+            this.elements.slidesContainer.style.transform = `translateX(${translateX}%)`;
+            this.elements.slidesContainer.style.transition = 'none';
+        }
+        /**
+         * Navigates to a specific slide
+         * Used primarily by dot navigation
+         */
         goToSlide(index) {
-            this.currentSlide = index;
-            this.updateCarousel();
+            if (this.state.isTransitioning)
+                return;
+            this.state.currentSlide = index;
+            this.updateCarousel(true);
         }
-        updateCarousel() {
-            if (!this.slidesContainer)
+        /** Transition and Animation Management */
+        /**
+         * Updates carousel position and state
+         * Handles both animated and immediate updates
+         */
+        updateCarousel(animated = true) {
+            if (!this.elements.slidesContainer)
                 return;
-            // Calculate the translation distance based on current slide
-            const translateX = -this.currentSlide * 100;
-            this.slidesContainer.style.transform = `translateX(${translateX}%)`;
+            const totalSlides = this.slides.length;
+            // Calculate the translation for the current virtual position
+            const translateX = -this.state.virtualIndex * 100;
+            if (animated) {
+                this.state.isTransitioning = true;
+                this.elements.slidesContainer.style.transition = 'transform 0.3s ease-out';
+            }
+            else {
+                this.elements.slidesContainer.style.transition = 'none';
+            }
+            this.elements.slidesContainer.style.transform = `translateX(${translateX}%)`;
             this.updateDots();
+            // Check if we need to reset virtual position
+            if (this.state.virtualIndex <= 0 || this.state.virtualIndex >= totalSlides + 1) {
+                this.state.isVirtualizing = true;
+            }
+        }
+        /**
+         * Handles the end of slide transitions
+         * Manages infinite scroll position reset
+         */
+        handleTransitionEnd(event) {
+            if (event.target !== this.elements.slidesContainer || event.propertyName !== 'transform')
+                return;
+            this.state.isTransitioning = false;
+            if (this.state.isVirtualizing) {
+                this.resetVirtualPosition();
+            }
+            if (this.elements.slidesContainer) {
+                this.elements.slidesContainer.style.transition = 'none';
+            }
+        }
+        /**
+         * Resets virtual position for infinite scroll
+         * Called after hitting first or last clone
+         */
+        resetVirtualPosition() {
+            var _a;
+            const totalSlides = this.slides.length;
+            if (this.state.virtualIndex <= 0) {
+                // If we've moved before the first clone, jump to the last real slide
+                this.state.virtualIndex = totalSlides;
+            }
+            else if (this.state.virtualIndex >= totalSlides + 1) {
+                // If we've moved after the last clone, jump to the first real slide
+                this.state.virtualIndex = 1;
+            }
+            if (this.elements.slidesContainer) {
+                this.elements.slidesContainer.style.transition = 'none';
+                this.elements.slidesContainer.style.transform = `translateX(${-this.state.virtualIndex * 100}%)`;
+            }
+            this.state.isVirtualizing = false;
+            // Force reflow to ensure the style change takes effect immediately
+            void ((_a = this.elements.slidesContainer) === null || _a === void 0 ? void 0 : _a.offsetHeight);
         }
+        /**
+         * Updates dot active states
+         * Reflects current slide position in navigation
+         */
         updateDots() {
-            if (!this.useDots)
+            if (!this.state.useDots)
                 return;
-            this.dotElements.forEach((dot, index) => {
-                const isActive = index === this.currentSlide;
+            this.elements.dots.forEach((dot, index) => {
+                const isActive = index === this.state.realIndex;
                 dot.classList.toggle('active', isActive);
-                dot.style.backgroundColor = isActive
-                    ? this.dotsOptions.activeColor
-                    : this.dotsOptions.color;
+                dot.style.backgroundColor = isActive ? this.state.dots.activeColor : this.state.dots.color;
             });
         }
+        /** Autoplay Management */
+        /**
+         * Starts autoplay if enabled
+         * Called during initialization
+         */
+        startAutoplayIfEnabled() {
+            if (this.state.autoplay && !this.state.isAutoplayPaused) {
+                this.startAutoplay();
+            }
+        }
+        /**
+         * Starts the autoplay interval
+         * Ensures only one interval is running
+         */
         startAutoplay() {
-            this.autoplayInterval = window.setInterval(() => this.nextSlide(), this.interval);
+            this.stopAutoplay(); // Ensure any existing interval is cleared first
+            if (!this.state.isAutoplayPaused && this.state.autoplay) {
+                this.state.autoplayInterval = window.setInterval(() => this.handleNavigation('next'), this.state.interval);
+            }
         }
+        /**
+         * Pauses autoplay
+         * Used during user interaction
+         */
+        pauseAutoplay() {
+            this.state.isAutoplayPaused = true;
+            this.stopAutoplay();
+        }
+        /**
+         * Resumes autoplay after pause
+         * Used after user interaction ends
+         */
+        resumeAutoplay() {
+            this.state.isAutoplayPaused = false;
+            if (this.state.autoplay) {
+                this.startAutoplay();
+            }
+        }
+        /**
+         * Stops autoplay completely
+         * Cleans up interval
+         */
         stopAutoplay() {
-            if (this.autoplayInterval !== null) {
-                window.clearInterval(this.autoplayInterval);
-                this.autoplayInterval = null;
+            if (this.state.autoplayInterval !== null) {
+                window.clearInterval(this.state.autoplayInterval);
+                this.state.autoplayInterval = null;
             }
         }
+        /**
+         * Resets autoplay interval
+         * Used after user interactions
+         */
         resetAutoplay() {
-            if (this.autoplay) {
+            if (!this.state.isDragging && this.state.autoplay) {
                 this.stopAutoplay();
                 this.startAutoplay();
             }
         }
-        validateOptions() {
-            this.validatePosition(this.dotsOptions.position, 'dotsPosition', 'bottom-center');
-            this.validateButtonsPosition();
+        /** Utility Methods */
+        /**
+         * Updates container width on resize
+         * Used for drag distance calculations
+         */
+        updateContainerWidth() {
+            if (this.elements.slidesContainer) {
+                this.state.containerWidth = this.elements.slidesContainer.offsetWidth;
+            }
         }
-        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;
-                }
+        /**
+         * Cleans up all event listeners
+         * Called during component cleanup
+         */
+        cleanupEventListeners() {
+            this.stopAutoplay();
+            this.removeEventListeners();
+            this.removeTouchEvents();
+            // Remove transition listener
+            if (this.elements.slidesContainer) {
+                this.elements.slidesContainer.removeEventListener('transitionend', this.handleTransitionEnd);
+            }
+            window.removeEventListener('resize', this.updateContainerWidth);
+        }
+        /**
+         * Sets up all event listeners
+         * Includes dots, buttons, and transition events
+         */
+        setupEventListeners() {
+            var _a, _b;
+            if (this.state.useDots) {
+                this.elements.dots.forEach((dot, index) => {
+                    dot.addEventListener('click', () => this.handleDotClick(index));
+                });
+            }
+            if (this.state.useButtons) {
+                (_a = this.elements.prevButton) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => this.handleNavigation('prev'));
+                (_b = this.elements.nextButton) === null || _b === void 0 ? void 0 : _b.addEventListener('click', () => this.handleNavigation('next'));
             }
         }
+        /**
+         * Validates button position configuration
+         * Ensures only valid positions are used
+         */
         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';
-                }
+            if (this.state.useButtons &&
+                !this.state.buttons.together &&
+                this.state.buttons.position !== 'middle-sides') {
+                console.warn('When buttons are not together, only "middle-sides" is allowed. Defaulting to "middle-sides".');
+                this.state.buttons.position = 'middle-sides';
             }
         }
     }
-    CustomCarouselElement.defaultInterval = 5000;
-    CustomCarouselElement.validPositions = [
+    /** Core initialization and lifecycle methods */
+    CustomCarouselElement.defaultConfigs = {
+        interval: 5000,
+        touchThreshold: 50, // minimum swipe distance in pixels
+        dragThreshold: 0.2, // minimum drag percentage of carousel width
+        dots: {
+            position: 'bottom-center',
+            color: '#d9d9d9',
+            activeColor: '#b5914a',
+            size: 'base',
+            opacity: 1,
+        },
+        buttons: {
+            together: false,
+            position: 'middle-sides',
+            textColor: '#000000',
+            backgroundColor: '#ffffff',
+            borderRadius: '50%',
+            prev: 'Prev',
+            next: 'Next',
+            size: 'base',
+            opacity: 1,
+        },
+    };
+    CustomCarouselElement.validPositions = new Set([
         'top-left',
         'top-center',
         'top-right',
@@ -16573,7 +17029,7 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
         'middle-left',
         'middle-right',
         'middle-sides',
-    ];
+    ]);
     CarouselElement = CustomCarouselElement;
 }
 
@@ -16728,19 +17184,20 @@ if (typeof window !== 'undefined' && typeof window.customElements !== 'undefined
          * #########################################################
          */
         handleSpotSizeChanged(event) {
-            var _a, _b, _c;
-            const isRBSpot = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.spot) === null || _b === void 0 ? void 0 : _b.startsWith('rb')) !== null && _c !== void 0 ? _c : false;
-            if (!isRBSpot) {
-                // Adjust text elements font size based on the scale factor
-                this.adjustFontSize(event.detail.scale);
-            }
+            // Adjust text elements font size based on the scale factor
+            this.adjustFontSize(event.detail.scale);
         }
         adjustFontSize(elementScale) {
             var _a;
-            const scaleFactor = calculateScaleFactor(elementScale);
             // Find all text elements within the shadow root
-            const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('h1, h2, h3, h4, p, span');
-            elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
+            const selectors = ['h1', 'h2', 'h3', 'h4', 'p', 'span']
+                .map((tag) => `[data-spot="iab"] ${tag}`)
+                .join(', ');
+            const elements = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors);
+            if (!elements)
+                return;
+            const scaleFactor = calculateScaleFactor(elementScale);
+            elements.forEach((element) => {
                 if (element instanceof HTMLElement) {
                     if (!this.originalFontSizes.has(element)) {
                         const originalSize = parseFloat(window.getComputedStyle(element).fontSize);
@@ -16925,8 +17382,9 @@ function generateGradientColor(overlay, fallback = '') {
     const gradientColor = convertHexToRgba(color, overlayOpacity);
     return `${fullColor} 0%, ${gradientColor} ${goTo}%, ${transparentColor} 100%`;
 }
-function spotHtmlStringToElement(htmlString) {
+function spotHtmlStringToElement(htmlString, spotType) {
     const spot = document.createElement('div');
+    spot.setAttribute('data-spot', spotType.startsWith('rb') ? 'rb' : 'iab');
     spot.className = 'spot';
     spot.innerHTML = htmlString;
     Object.assign(spot.style, {
@@ -17858,6 +18316,10 @@ const STYLES$6 = ({ textColor = '#ffffff', ctaTextColor = textColor, ctaBorderCo
                 .${prefix} {
                     background-image: linear-gradient(to top, ${linearGradient}), url("${primaryImage}");
                 }
+
+                .${prefix}__text {
+                    width: 70%;
+                }
             }
 
             @container (min-width: 768px) {
@@ -18680,7 +19142,7 @@ const SPOT_TEMPLATE_HTML_ELEMENT = (spot, config) => {
     // Generate a highly unique prefix to avoid conflicts with other elements.
     const prefix = 's' + UniqueIdGenerator.generate().toLowerCase();
     const spotHtmlString = variantTemplate(spot, { ...config, prefix });
-    return spotHtmlStringToElement(spotHtmlString);
+    return spotHtmlStringToElement(spotHtmlString, spot.spot);
 };
 
 // For the moment, we will only focus on sites that use Google Analytics,
@@ -18875,18 +19337,21 @@ class EventService {
     }
     registerSpot(params) {
         const { placementId, spot, spotElement } = params;
-        this.activeSpots.set(placementId, { spotElement });
-        // Fire impression event
-        this.fireImpressionEvent(placementId, spot);
-        // Handle intersection observer
-        this.handleIntersectionObserver(placementId, spot, spotElement);
-        // Attach click event listener
-        spotElement.addEventListener('click', async () => await this.handleClick(params));
+        this.activeSpots.set(spot.id, { placementId, spotElement });
+        // Handle Impression Event
+        this.handleImpressionEvent(placementId, spot);
+        // Handle Click Event
+        spotElement.addEventListener('click', async () => {
+            await this.handleClickEvent(params);
+        });
+        // Handle Intersection Observer
+        this.handleIntersectionObserver(placementId, spotElement);
     }
     unregisterSpot(placementId) {
         const placementIdClean = placementId.replace('#', '');
-        const spotData = this.activeSpots.get(placementIdClean);
-        if (!spotData) {
+        const spotId = this.getSpotIdByPlacementId(this.activeSpots, placementIdClean);
+        const data = this.activeSpots.get(placementIdClean !== null && placementIdClean !== void 0 ? placementIdClean : '');
+        if (!spotId || !data) {
             this.handleSpotState(placementIdClean, {
                 state: {
                     error: `Active spot with placementId ${placementIdClean} not found.`,
@@ -18894,7 +19359,7 @@ class EventService {
             });
             return;
         }
-        this.intersectionObserver.unobserve(spotData.spotElement);
+        this.intersectionObserver.unobserve(data.spotElement);
         this.handleSpotState(placementIdClean, {
             dom: {
                 spotElement: undefined,
@@ -18903,9 +19368,10 @@ class EventService {
             state: {
                 unmounted: true,
                 mounted: false,
+                loading: false,
             },
         });
-        this.activeSpots.delete(placementIdClean);
+        this.activeSpots.delete(spotId);
         const placementElement = document.getElementById(placementIdClean);
         if (!placementElement) {
             this.handleSpotState(placementIdClean, {
@@ -18958,19 +19424,7 @@ class EventService {
             this.pubSubService.publish(exports.RMN_EVENT.LIFECYCLE_STATE, this.spotStates.get(placementId));
         }
     }
-    deepMerge(current, updates) {
-        return {
-            identifier: updates.identifier
-                ? { ...current.identifier, ...updates.identifier }
-                : current.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 }) {
+    async handleClickEvent({ placementId, spot }) {
         var _a, _b, _c;
         this.pubSubService.publish(exports.RMN_EVENT.SPOT_EVENT, {
             eventType: exports.RMN_SPOT_EVENT.CLICK,
@@ -18987,22 +19441,10 @@ class EventService {
             spotId: spot.id,
             spotType: spot.spot,
             events: spot.events,
-            productIds: (_c = spot.productIds) !== null && _c !== void 0 ? _c : [1, 2, 3],
+            productIds: (_c = spot.productIds) !== null && _c !== void 0 ? _c : [],
         });
     }
-    handleIntersectionObserver(placementId, _spot, spotElement) {
-        const spotIsVisibleCallback = async () => {
-            this.intersectionObserver.unobserve(spotElement);
-            this.handleSpotState(placementId, {
-                dom: {
-                    spotElement,
-                    visibleOnViewport: true,
-                },
-            });
-        };
-        this.intersectionObserver.observe(spotElement, spotIsVisibleCallback);
-    }
-    fireImpressionEvent(placementId, spot) {
+    handleImpressionEvent(placementId, spot) {
         this.pubSubService.publish(exports.RMN_EVENT.SPOT_EVENT, {
             eventType: exports.RMN_SPOT_EVENT.IMPRESSION,
             placementId,
@@ -19016,6 +19458,38 @@ class EventService {
             });
         })();
     }
+    getSpotIdByPlacementId(activeSpots, searchPlacementId) {
+        for (const [spotId, spotData] of activeSpots) {
+            if (spotData.placementId === searchPlacementId) {
+                return spotId;
+            }
+        }
+        return null;
+    }
+    deepMerge(current, updates) {
+        return {
+            identifier: updates.identifier
+                ? { ...current.identifier, ...updates.identifier }
+                : current.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,
+        };
+    }
+    handleIntersectionObserver(placementId, spotElement) {
+        const spotIsVisibleCallback = async () => {
+            this.intersectionObserver.unobserve(spotElement);
+            this.handleSpotState(placementId, {
+                dom: {
+                    spotElement,
+                    visibleOnViewport: true,
+                },
+            });
+        };
+        this.intersectionObserver.observe(spotElement, spotIsVisibleCallback);
+    }
 }
 
 const SELECTION_API_PATH = '/spots/selection';
@@ -19733,6 +20207,7 @@ function setUserId() {
 
 /**
  * LiquidCommerce Rmn Client
+ *
  * @class
  */
 class LiquidCommerceRmnClient {
@@ -19791,6 +20266,8 @@ class LiquidCommerceRmnClient {
                 this.eventService.handleSpotState(item.placementId, {
                     state: {
                         error: `Placement not found for id "${item.placementId}".`,
+                        mounted: false,
+                        loading: false,
                     },
                 });
                 continue;