@keenthemes/ktui 1.2.1 → 1.2.2

package/lib/esm/components/carousel/carousel.js

@@ -0,0 +1,766 @@
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import KTData from '../../helpers/data';
+import KTComponent from '../component';
+var SELECTOR_VIEWPORT = '[data-kt-carousel-viewport]';
+var SELECTOR_ITEM = '[data-kt-carousel-item]';
+var SELECTOR_PREV = '[data-kt-carousel-prev]';
+var SELECTOR_NEXT = '[data-kt-carousel-next]';
+var SELECTOR_PAGINATION = '[data-kt-carousel-pagination]';
+var SELECTOR_PAGINATION_ITEM = '[data-kt-carousel-pagination-item]';
+var SELECTOR_THUMBS = '[data-kt-carousel-thumbnails]';
+var SELECTOR_THUMB = '[data-kt-carousel-thumbnail]';
+var SELECTOR_CURRENT = '[data-kt-carousel-current]';
+var SELECTOR_TOTAL = '[data-kt-carousel-total]';
+var KTCarousel = /** @class */ (function (_super) {
+    __extends(KTCarousel, _super);
+    function KTCarousel(element, config) {
+        if (config === void 0) { config = null; }
+        var _this = _super.call(this) || this;
+        _this._name = 'carousel';
+        _this._defaultConfig = {
+            autoplay: false,
+            autoplayInterval: 4000,
+            infiniteLoop: false,
+            rtl: false,
+            perView: 1,
+            centered: false,
+            draggable: false,
+            snap: false,
+            autoHeight: false,
+            showScrollbar: false,
+            lazy: false,
+            pauseOnHover: true,
+            changeEvent: 'kt.carousel.change',
+        };
+        _this._config = _this
+            ._defaultConfig;
+        _this._viewport = null;
+        _this._slides = [];
+        _this._index = 0;
+        _this._autoplayTimer = null;
+        _this._programmaticScroll = false;
+        _this._resizeObserver = null;
+        _this._prefersReducedMotion = false;
+        _this._onPrevClick = null;
+        _this._onNextClick = null;
+        _this._onScroll = null;
+        _this._onScrollEnd = null;
+        _this._onKeyDown = null;
+        _this._onPointerDown = null;
+        _this._onPointerMove = null;
+        _this._onPointerUp = null;
+        _this._paginationHandlers = [];
+        _this._thumbHandlers = [];
+        _this._programmaticScrollPrevIndex = null;
+        _this._programmaticScrollTargetIndex = null;
+        _this._programmaticScrollUserInitiated = false;
+        _this._programmaticScrollFallbackTimer = null;
+        _this._scrollSyncRaf = 0;
+        _this._pauseAutoplay = null;
+        _this._resumeAutoplay = null;
+        _this._dragStartX = 0;
+        _this._dragStartScroll = 0;
+        _this._dragging = false;
+        _this._dragMoved = false;
+        _this._pointerId = null;
+        _this._prevButtons = [];
+        _this._nextButtons = [];
+        _this._currentLabels = [];
+        _this._totalLabels = [];
+        if (_this._shouldSkipInit(element)) {
+            return _this;
+        }
+        var viewport = KTCarousel._resolveViewportStatic(element);
+        var slides = KTCarousel._collectSlidesStatic(viewport);
+        if (!viewport || slides.length === 0) {
+            return _this;
+        }
+        _this._init(element);
+        _this._buildConfig(config);
+        _this._syncShowScrollbarAttribute();
+        _this._viewport = viewport;
+        _this._slides = slides;
+        _this._prefersReducedMotion = _this._readPrefersReducedMotion();
+        _this._bindControls();
+        _this._bindScrollSync();
+        _this._bindKeyboard();
+        _this._bindAutoplayHoverPause();
+        _this._bindDraggable();
+        _this._bindAutoHeight();
+        _this._syncIndexFromScroll();
+        _this._updateInfo();
+        _this._updatePaginationState();
+        _this._updateThumbState(false);
+        _this._startAutoplay();
+        return _this;
+    }
+    KTCarousel.prototype._readPrefersReducedMotion = function () {
+        if (typeof window === 'undefined' || !window.matchMedia) {
+            return false;
+        }
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    };
+    KTCarousel.prototype._syncShowScrollbarAttribute = function () {
+        if (!this._element)
+            return;
+        var show = this._getOption('showScrollbar') === true;
+        if (show) {
+            this._element.setAttribute('data-kt-carousel-show-scrollbar', 'true');
+        }
+        else {
+            this._element.removeAttribute('data-kt-carousel-show-scrollbar');
+        }
+    };
+    KTCarousel._resolveViewportStatic = function (root) {
+        var explicit = root.querySelector(SELECTOR_VIEWPORT);
+        if (explicit)
+            return explicit;
+        return root;
+    };
+    KTCarousel._collectSlidesStatic = function (viewport) {
+        if (!viewport)
+            return [];
+        return Array.from(viewport.querySelectorAll(SELECTOR_ITEM));
+    };
+    KTCarousel.prototype._isRtl = function () {
+        var _a;
+        if (this._getOption('rtl') === true)
+            return true;
+        if (((_a = this._element) === null || _a === void 0 ? void 0 : _a.getAttribute('dir')) === 'rtl')
+            return true;
+        if (this._viewport &&
+            getComputedStyle(this._viewport).direction === 'rtl') {
+            return true;
+        }
+        return false;
+    };
+    KTCarousel.prototype._scrollBehavior = function () {
+        return this._prefersReducedMotion ? 'auto' : 'smooth';
+    };
+    KTCarousel.prototype._effectiveDraggable = function () {
+        if (this._getOption('snap') === true)
+            return false;
+        return this._getOption('draggable') === true;
+    };
+    KTCarousel.prototype._bindControls = function () {
+        var _this = this;
+        if (!this._element)
+            return;
+        var root = this._element;
+        this._prevButtons = Array.from(root.querySelectorAll(SELECTOR_PREV));
+        this._nextButtons = Array.from(root.querySelectorAll(SELECTOR_NEXT));
+        this._currentLabels = Array.from(root.querySelectorAll(SELECTOR_CURRENT));
+        this._totalLabels = Array.from(root.querySelectorAll(SELECTOR_TOTAL));
+        this._onPrevClick = function (e) {
+            e.preventDefault();
+            _this.prev(true);
+        };
+        this._onNextClick = function (e) {
+            e.preventDefault();
+            _this.next(true);
+        };
+        this._prevButtons.forEach(function (btn) {
+            btn.addEventListener('click', _this._onPrevClick);
+        });
+        this._nextButtons.forEach(function (btn) {
+            btn.addEventListener('click', _this._onNextClick);
+        });
+        this._bindIndexedClickStrips(SELECTOR_PAGINATION, SELECTOR_PAGINATION_ITEM, this._paginationHandlers);
+        this._bindIndexedClickStrips(SELECTOR_THUMBS, SELECTOR_THUMB, this._thumbHandlers);
+    };
+    KTCarousel.prototype._bindIndexedClickStrips = function (stripSelector, itemSelector, handlers) {
+        var _this = this;
+        if (!this._element)
+            return;
+        this._element
+            .querySelectorAll(stripSelector)
+            .forEach(function (strip) {
+            strip.querySelectorAll(itemSelector).forEach(function (item, i) {
+                var fn = function (e) {
+                    e.preventDefault();
+                    _this.goTo(i, true);
+                };
+                item.addEventListener('click', fn);
+                handlers.push({ el: item, fn: fn });
+            });
+        });
+    };
+    KTCarousel.prototype._bindScrollSync = function () {
+        var _this = this;
+        if (!this._viewport)
+            return;
+        this._onScroll = function () {
+            if (_this._scrollSyncRaf)
+                cancelAnimationFrame(_this._scrollSyncRaf);
+            _this._scrollSyncRaf = requestAnimationFrame(function () {
+                _this._scrollSyncRaf = 0;
+                var prev = _this._index;
+                _this._applyScrollDerivedIndexChange(prev, {
+                    dispatch: !_this._programmaticScroll,
+                    userInitiated: true,
+                });
+            });
+        };
+        this._viewport.addEventListener('scroll', this._onScroll, {
+            passive: true,
+        });
+        this._onScrollEnd = function () {
+            if (_this._programmaticScroll) {
+                var t = _this._programmaticScrollTargetIndex;
+                if (t !== null && _this._nearestIndex() === t) {
+                    queueMicrotask(function () { return _this._completeProgrammaticScroll(); });
+                }
+                return;
+            }
+            var prev = _this._index;
+            _this._applyScrollDerivedIndexChange(prev, {
+                dispatch: true,
+                userInitiated: true,
+            });
+        };
+        this._viewport.addEventListener('scrollend', this._onScrollEnd);
+    };
+    KTCarousel.prototype._bindKeyboard = function () {
+        var _this = this;
+        if (!this._element)
+            return;
+        this._onKeyDown = function (e) {
+            var _a;
+            if (!((_a = _this._element) === null || _a === void 0 ? void 0 : _a.contains(e.target)))
+                return;
+            var t = e.target;
+            if (t &&
+                (t.tagName === 'INPUT' ||
+                    t.tagName === 'TEXTAREA' ||
+                    t.isContentEditable)) {
+                return;
+            }
+            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')
+                return;
+            var rtl = _this._isRtl();
+            var nextKey = rtl ? 'ArrowLeft' : 'ArrowRight';
+            var prevKey = rtl ? 'ArrowRight' : 'ArrowLeft';
+            if (e.key === nextKey) {
+                e.preventDefault();
+                _this.next(true);
+            }
+            else if (e.key === prevKey) {
+                e.preventDefault();
+                _this.prev(true);
+            }
+        };
+        this._element.addEventListener('keydown', this._onKeyDown);
+    };
+    KTCarousel.prototype._bindAutoplayHoverPause = function () {
+        var _this = this;
+        if (!this._element || !this._viewport)
+            return;
+        if (this._getOption('pauseOnHover') !== true)
+            return;
+        this._pauseAutoplay = function () { return _this._stopAutoplay(); };
+        this._resumeAutoplay = function () { return _this._startAutoplay(); };
+        this._element.addEventListener('mouseenter', this._pauseAutoplay);
+        this._element.addEventListener('mouseleave', this._resumeAutoplay);
+        this._element.addEventListener('focusin', this._pauseAutoplay);
+        this._element.addEventListener('focusout', this._resumeAutoplay);
+    };
+    KTCarousel.prototype._bindDraggable = function () {
+        var _this = this;
+        if (!this._viewport || !this._effectiveDraggable())
+            return;
+        this._onPointerDown = function (e) {
+            if (e.pointerType === 'mouse' && e.button !== 0)
+                return;
+            var t = e.target;
+            if (t && t.closest('button,a,input,textarea,select'))
+                return;
+            _this._pointerId = e.pointerId;
+            _this._dragStartX = e.clientX;
+            _this._dragStartScroll = _this._viewport.scrollLeft;
+            _this._dragging = true;
+            _this._dragMoved = false;
+            _this._viewport.setPointerCapture(e.pointerId);
+        };
+        this._onPointerMove = function (e) {
+            if (!_this._dragging || e.pointerId !== _this._pointerId)
+                return;
+            var dx = e.clientX - _this._dragStartX;
+            if (Math.abs(dx) > 5)
+                _this._dragMoved = true;
+            _this._viewport.scrollLeft = _this._dragStartScroll - dx;
+        };
+        this._onPointerUp = function (e) {
+            if (e.pointerId !== _this._pointerId)
+                return;
+            _this._dragging = false;
+            _this._pointerId = null;
+            try {
+                _this._viewport.releasePointerCapture(e.pointerId);
+            }
+            catch (_a) {
+                /* ignore */
+            }
+        };
+        this._viewport.addEventListener('pointerdown', this._onPointerDown);
+        this._viewport.addEventListener('pointermove', this._onPointerMove);
+        this._viewport.addEventListener('pointerup', this._onPointerUp);
+        this._viewport.addEventListener('pointercancel', this._onPointerUp);
+    };
+    KTCarousel.prototype._bindAutoHeight = function () {
+        if (!this._viewport || this._getOption('autoHeight') !== true)
+            return;
+        this._applyAutoHeight();
+        this._observeActiveSlideForHeight();
+    };
+    KTCarousel.prototype._observeActiveSlideForHeight = function () {
+        var _this = this;
+        if (this._getOption('autoHeight') !== true)
+            return;
+        var active = this._slides[this._index];
+        if (!active || typeof ResizeObserver === 'undefined')
+            return;
+        if (!this._resizeObserver) {
+            this._resizeObserver = new ResizeObserver(function () {
+                _this._applyAutoHeight();
+            });
+        }
+        else {
+            this._resizeObserver.disconnect();
+        }
+        this._resizeObserver.observe(active);
+    };
+    KTCarousel.prototype._applyAutoHeight = function () {
+        if (!this._viewport || this._getOption('autoHeight') !== true)
+            return;
+        var slide = this._slides[this._index];
+        if (!slide)
+            return;
+        var h = slide.offsetHeight;
+        if (h > 0) {
+            this._viewport.style.height = "".concat(h, "px");
+        }
+    };
+    KTCarousel.prototype._nearestIndex = function () {
+        if (!this._viewport || this._slides.length === 0)
+            return 0;
+        var vp = this._viewport;
+        var origin = vp.scrollLeft;
+        var best = 0;
+        var bestDist = Infinity;
+        for (var i = 0; i < this._slides.length; i++) {
+            var slide = this._slides[i];
+            var dist = Math.abs(slide.offsetLeft - origin);
+            if (dist < bestDist) {
+                bestDist = dist;
+                best = i;
+            }
+        }
+        return best;
+    };
+    KTCarousel.prototype._syncIndexFromScroll = function () {
+        if (this._slides.length === 0)
+            return;
+        this._index = this._nearestIndex();
+    };
+    KTCarousel.prototype._applyScrollDerivedIndexChange = function (prevIndex, options) {
+        this._syncIndexFromScroll();
+        if (prevIndex === this._index)
+            return;
+        this._updateInfo();
+        this._updatePaginationState();
+        this._updateThumbState(false);
+        this._applyAutoHeight();
+        this._observeActiveSlideForHeight();
+        if (options.dispatch) {
+            this._dispatchChange(this._index, prevIndex, options.userInitiated);
+        }
+    };
+    KTCarousel.prototype._setStripItemsActiveState = function (handlers, activeDataAttr) {
+        var _this = this;
+        handlers.forEach(function (_a, i) {
+            var el = _a.el;
+            var active = i === _this._index;
+            if (active) {
+                el.setAttribute('aria-current', 'true');
+            }
+            else {
+                el.removeAttribute('aria-current');
+            }
+            el.toggleAttribute(activeDataAttr, active);
+        });
+    };
+    /**
+     * Scroll the viewport only. Avoid `Element.scrollIntoView`, which walks
+     * ancestor scroll containers and can pull the whole docs page to an embedded
+     * carousel (e.g. autoplay ticking on `/docs/carousel`).
+     */
+    KTCarousel.prototype._scrollToIndex = function (index, behavior) {
+        var _this = this;
+        if (!this._viewport)
+            return;
+        var slide = this._slides[index];
+        if (!slide)
+            return;
+        this._programmaticScroll = true;
+        var vp = this._viewport;
+        var centered = this._getOption('centered') === true;
+        var slideRect = slide.getBoundingClientRect();
+        var vpRect = vp.getBoundingClientRect();
+        var left = vp.scrollLeft + slideRect.left - vpRect.left;
+        if (centered) {
+            left -= (vp.clientWidth - slideRect.width) / 2;
+        }
+        var maxScroll = Math.max(0, vp.scrollWidth - vp.clientWidth);
+        left = Math.max(0, Math.min(left, maxScroll));
+        try {
+            vp.scrollTo({ left: left, top: vp.scrollTop, behavior: behavior });
+        }
+        catch (_a) {
+            vp.scrollLeft = left;
+        }
+        queueMicrotask(function () {
+            if (_this._programmaticScroll &&
+                _this._programmaticScrollTargetIndex !== null &&
+                _this._nearestIndex() === _this._programmaticScrollTargetIndex) {
+                _this._completeProgrammaticScroll();
+            }
+        });
+        this._clearProgrammaticScrollFallbackTimer();
+        var fallbackMs = behavior === 'smooth' ? 550 : 50;
+        this._programmaticScrollFallbackTimer = setTimeout(function () {
+            _this._programmaticScrollFallbackTimer = null;
+            _this._completeProgrammaticScroll();
+        }, fallbackMs);
+    };
+    KTCarousel.prototype._clearProgrammaticScrollFallbackTimer = function () {
+        if (this._programmaticScrollFallbackTimer !== null) {
+            clearTimeout(this._programmaticScrollFallbackTimer);
+            this._programmaticScrollFallbackTimer = null;
+        }
+    };
+    KTCarousel.prototype._completeProgrammaticScroll = function () {
+        if (!this._programmaticScroll)
+            return;
+        var prev = this._programmaticScrollPrevIndex;
+        var targetIdx = this._programmaticScrollTargetIndex;
+        var userInitiated = this._programmaticScrollUserInitiated;
+        if (prev === null || targetIdx === null) {
+            this._programmaticScroll = false;
+            this._programmaticScrollPrevIndex = null;
+            this._programmaticScrollTargetIndex = null;
+            return;
+        }
+        if (this._scrollSyncRaf) {
+            cancelAnimationFrame(this._scrollSyncRaf);
+            this._scrollSyncRaf = 0;
+        }
+        this._clearProgrammaticScrollFallbackTimer();
+        this._programmaticScroll = false;
+        this._programmaticScrollPrevIndex = null;
+        this._programmaticScrollTargetIndex = null;
+        this._programmaticScrollUserInitiated = false;
+        this._index = targetIdx;
+        this._updateInfo();
+        this._updatePaginationState();
+        this._updateThumbState(true);
+        this._applyAutoHeight();
+        this._observeActiveSlideForHeight();
+        this._dispatchChange(targetIdx, prev, userInitiated);
+    };
+    KTCarousel.prototype.goTo = function (index, userInitiated) {
+        if (userInitiated === void 0) { userInitiated = false; }
+        if (this._slides.length === 0)
+            return;
+        var n = this._slides.length;
+        var target = index;
+        if (target < 0)
+            target = 0;
+        if (target >= n)
+            target = n - 1;
+        var prev = this._index;
+        if (target === prev)
+            return;
+        this._clearProgrammaticScrollFallbackTimer();
+        this._programmaticScrollPrevIndex = prev;
+        this._programmaticScrollTargetIndex = target;
+        this._programmaticScrollUserInitiated = userInitiated;
+        this._scrollToIndex(target, this._scrollBehavior());
+    };
+    KTCarousel.prototype.next = function (userInitiated) {
+        if (userInitiated === void 0) { userInitiated = false; }
+        if (this._slides.length === 0)
+            return;
+        var n = this._slides.length;
+        var last = n - 1;
+        var infinite = this._getOption('infiniteLoop') === true;
+        if (this._index >= last) {
+            if (infinite) {
+                this.goTo(0, userInitiated);
+                return;
+            }
+            return;
+        }
+        this.goTo(this._index + 1, userInitiated);
+    };
+    KTCarousel.prototype.prev = function (userInitiated) {
+        if (userInitiated === void 0) { userInitiated = false; }
+        if (this._slides.length === 0)
+            return;
+        var infinite = this._getOption('infiniteLoop') === true;
+        if (this._index <= 0) {
+            if (infinite) {
+                this.goTo(this._slides.length - 1, userInitiated);
+                return;
+            }
+            return;
+        }
+        this.goTo(this._index - 1, userInitiated);
+    };
+    KTCarousel.prototype.getIndex = function () {
+        return this._index;
+    };
+    KTCarousel.prototype.getSlideCount = function () {
+        return this._slides.length;
+    };
+    KTCarousel.prototype._getChangeEventName = function () {
+        var name = this._getOption('changeEvent');
+        return typeof name === 'string' && name.length > 0
+            ? name
+            : 'kt.carousel.change';
+    };
+    KTCarousel.prototype._dispatchChange = function (index, prevIndex, userInitiated) {
+        if (!this._element)
+            return;
+        var payload = {
+            index: index,
+            prevIndex: prevIndex,
+            userInitiated: userInitiated,
+        };
+        var eventName = this._getChangeEventName();
+        this._fireEvent(eventName, payload);
+        this._dispatchEvent(eventName, payload);
+    };
+    KTCarousel.prototype._updateInfo = function () {
+        if (!this._element)
+            return;
+        var total = this._slides.length;
+        var cur = total === 0 ? 0 : this._index + 1;
+        var curStr = String(cur);
+        var totalStr = String(total);
+        this._currentLabels.forEach(function (label) {
+            label.textContent = curStr;
+        });
+        this._totalLabels.forEach(function (label) {
+            label.textContent = totalStr;
+        });
+    };
+    KTCarousel.prototype._updatePaginationState = function () {
+        this._setStripItemsActiveState(this._paginationHandlers, 'data-kt-carousel-pagination-active');
+    };
+    KTCarousel.prototype._updateThumbState = function (alignStripSmooth) {
+        this._setStripItemsActiveState(this._thumbHandlers, 'data-kt-carousel-thumbnail-active');
+        this._scrollActiveThumbnailsIntoView(alignStripSmooth ? this._scrollBehavior() : 'auto');
+    };
+    /**
+     * Keep the active thumb visible inside each thumbnail strip by scrolling
+     * that container only (no `scrollIntoView`, which can scroll ancestor pages).
+     */
+    KTCarousel.prototype._scrollActiveThumbnailsIntoView = function (behavior) {
+        var _this = this;
+        if (!this._element)
+            return;
+        var pad = 6;
+        this._element
+            .querySelectorAll(SELECTOR_THUMBS)
+            .forEach(function (strip) {
+            var items = strip.querySelectorAll(SELECTOR_THUMB);
+            var thumb = items[_this._index];
+            if (!thumb)
+                return;
+            _this._alignElementInScrollContainer(thumb, strip, pad, behavior);
+        });
+    };
+    KTCarousel.prototype._alignElementInScrollContainer = function (el, container, pad, behavior) {
+        var c = container.getBoundingClientRect();
+        var r = el.getBoundingClientRect();
+        var left = container.scrollLeft;
+        var top = container.scrollTop;
+        if (container.scrollWidth > container.clientWidth + 1) {
+            if (r.left < c.left + pad) {
+                left += r.left - c.left - pad;
+            }
+            else if (r.right > c.right - pad) {
+                left += r.right - c.right + pad;
+            }
+            var maxL = Math.max(0, container.scrollWidth - container.clientWidth);
+            left = Math.max(0, Math.min(left, maxL));
+        }
+        if (container.scrollHeight > container.clientHeight + 1) {
+            if (r.top < c.top + pad) {
+                top += r.top - c.top - pad;
+            }
+            else if (r.bottom > c.bottom - pad) {
+                top += r.bottom - c.bottom + pad;
+            }
+            var maxT = Math.max(0, container.scrollHeight - container.clientHeight);
+            top = Math.max(0, Math.min(top, maxT));
+        }
+        try {
+            container.scrollTo({ left: left, top: top, behavior: behavior });
+        }
+        catch (_a) {
+            container.scrollLeft = left;
+            container.scrollTop = top;
+        }
+    };
+    KTCarousel.prototype._startAutoplay = function () {
+        var _this = this;
+        this._stopAutoplay();
+        if (this._getOption('autoplay') !== true)
+            return;
+        if (this._prefersReducedMotion)
+            return;
+        if (this._slides.length <= 1)
+            return;
+        var raw = this._getOption('autoplayInterval');
+        var interval = typeof raw === 'number' && raw >= 200 ? raw : 4000;
+        this._autoplayTimer = setInterval(function () {
+            _this.next(false);
+        }, interval);
+    };
+    KTCarousel.prototype._stopAutoplay = function () {
+        if (this._autoplayTimer !== null) {
+            clearInterval(this._autoplayTimer);
+            this._autoplayTimer = null;
+        }
+    };
+    KTCarousel.prototype.dispose = function () {
+        var _this = this;
+        this._stopAutoplay();
+        this._clearProgrammaticScrollFallbackTimer();
+        if (this._scrollSyncRaf) {
+            cancelAnimationFrame(this._scrollSyncRaf);
+            this._scrollSyncRaf = 0;
+        }
+        this._programmaticScroll = false;
+        this._programmaticScrollPrevIndex = null;
+        this._programmaticScrollTargetIndex = null;
+        if (this._resizeObserver) {
+            this._resizeObserver.disconnect();
+            this._resizeObserver = null;
+        }
+        if (this._element) {
+            if (this._onPrevClick) {
+                this._prevButtons.forEach(function (btn) {
+                    return btn.removeEventListener('click', _this._onPrevClick);
+                });
+            }
+            if (this._onNextClick) {
+                this._nextButtons.forEach(function (btn) {
+                    return btn.removeEventListener('click', _this._onNextClick);
+                });
+            }
+            this._paginationHandlers.forEach(function (_a) {
+                var el = _a.el, fn = _a.fn;
+                el.removeEventListener('click', fn);
+            });
+            this._paginationHandlers = [];
+            this._thumbHandlers.forEach(function (_a) {
+                var el = _a.el, fn = _a.fn;
+                el.removeEventListener('click', fn);
+            });
+            this._thumbHandlers = [];
+            if (this._onKeyDown) {
+                this._element.removeEventListener('keydown', this._onKeyDown);
+            }
+            if (this._pauseAutoplay && this._resumeAutoplay) {
+                this._element.removeEventListener('mouseenter', this._pauseAutoplay);
+                this._element.removeEventListener('mouseleave', this._resumeAutoplay);
+                this._element.removeEventListener('focusin', this._pauseAutoplay);
+                this._element.removeEventListener('focusout', this._resumeAutoplay);
+            }
+            this._pauseAutoplay = null;
+            this._resumeAutoplay = null;
+        }
+        if (this._viewport && this._onScroll) {
+            this._viewport.removeEventListener('scroll', this._onScroll);
+        }
+        if (this._viewport && this._onScrollEnd) {
+            this._viewport.removeEventListener('scrollend', this._onScrollEnd);
+        }
+        if (this._viewport && this._onPointerDown) {
+            this._viewport.removeEventListener('pointerdown', this._onPointerDown);
+            this._viewport.removeEventListener('pointermove', this._onPointerMove);
+            this._viewport.removeEventListener('pointerup', this._onPointerUp);
+            this._viewport.removeEventListener('pointercancel', this._onPointerUp);
+        }
+        if (this._viewport && this._getOption('autoHeight') === true) {
+            this._viewport.style.height = '';
+        }
+        this._onPrevClick = null;
+        this._onNextClick = null;
+        this._onScroll = null;
+        this._onScrollEnd = null;
+        this._onKeyDown = null;
+        this._onPointerDown = null;
+        this._onPointerMove = null;
+        this._onPointerUp = null;
+        this._prevButtons = [];
+        this._nextButtons = [];
+        this._currentLabels = [];
+        this._totalLabels = [];
+        _super.prototype.dispose.call(this);
+    };
+    KTCarousel.getInstance = function (element) {
+        if (!element)
+            return null;
+        if (KTData.has(element, 'carousel')) {
+            return KTData.get(element, 'carousel');
+        }
+        return null;
+    };
+    KTCarousel.getOrCreateInstance = function (element, config) {
+        var existing = this.getInstance(element);
+        if (existing)
+            return existing;
+        new KTCarousel(element, config !== null && config !== void 0 ? config : undefined);
+        return this.getInstance(element);
+    };
+    KTCarousel.createInstances = function () {
+        document
+            .querySelectorAll('[data-kt-carousel]')
+            .forEach(function (el) {
+            if (el.getAttribute('data-kt-carousel-lazy') === 'true') {
+                return;
+            }
+            new KTCarousel(el);
+        });
+    };
+    KTCarousel.init = function () {
+        KTCarousel.createInstances();
+    };
+    return KTCarousel;
+}(KTComponent));
+export { KTCarousel };
+if (typeof window !== 'undefined') {
+    window.KTCarousel = KTCarousel;
+}
+//# sourceMappingURL=carousel.js.map