@keenthemes/ktui 1.2.1 → 1.2.3

package/dist/ktui.js

@@ -3147,10 +3147,10 @@ Object.defineProperty(exports, "KTAccordion", ({ enumerable: true, get: function
 
 /***/ }),
 
-/***/ "./src/components/clipboard/clipboard.ts":
-/*!***********************************************!*\
-  !*** ./src/components/clipboard/clipboard.ts ***!
-  \***********************************************/
+/***/ "./src/components/carousel/carousel.ts":
+/*!*********************************************!*\
+  !*** ./src/components/carousel/carousel.ts ***!
+  \*********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -3173,184 +3173,981 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.KTClipboard = void 0;
-var component_1 = __webpack_require__(/*! ../component */ "./src/components/component.ts");
+exports.KTCarousel = void 0;
 var data_1 = __webpack_require__(/*! ../../helpers/data */ "./src/helpers/data.ts");
-var dom_1 = __webpack_require__(/*! ../../helpers/dom */ "./src/helpers/dom.ts");
-var KTClipboard = /** @class */ (function (_super) {
-    __extends(KTClipboard, _super);
-    function KTClipboard(element, config) {
+var component_1 = __webpack_require__(/*! ../component */ "./src/components/component.ts");
+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 = 'clipboard';
+        _this._name = 'carousel';
         _this._defaultConfig = {
-            target: '',
-            text: '',
-            action: 'copy',
-            copiedClass: '',
-            successEvent: 'kt.clipboard.success',
-            errorEvent: 'kt.clipboard.error',
+            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._activateHandler = null;
-        // Ensure we don't double bind handlers on the same trigger.
+        _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);
-        if (!_this._element)
-            return _this;
-        _this._activateHandler = _this._handleActivate.bind(_this);
-        _this._element.addEventListener('click', _this._activateHandler);
+        _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;
     }
-    KTClipboard.prototype._getSuccessEventName = function () {
-        var eventName = this._getOption('successEvent');
-        return typeof eventName === 'string' && eventName.length > 0
-            ? eventName
-            : 'kt.clipboard.success';
+    KTCarousel.prototype._readPrefersReducedMotion = function () {
+        if (typeof window === 'undefined' || !window.matchMedia) {
+            return false;
+        }
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     };
-    KTClipboard.prototype._getErrorEventName = function () {
-        var eventName = this._getOption('errorEvent');
-        return typeof eventName === 'string' && eventName.length > 0
-            ? eventName
-            : 'kt.clipboard.error';
+    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');
+        }
     };
-    KTClipboard.prototype._getAction = function () {
-        var action = this._getOption('action');
-        return action === 'cut' ? 'cut' : 'copy';
+    KTCarousel._resolveViewportStatic = function (root) {
+        var explicit = root.querySelector(SELECTOR_VIEWPORT);
+        if (explicit)
+            return explicit;
+        return root;
     };
-    KTClipboard.prototype._getTrimmedString = function (optionValue) {
-        return typeof optionValue === 'string' ? optionValue.trim() : '';
+    KTCarousel._collectSlidesStatic = function (viewport) {
+        if (!viewport)
+            return [];
+        return Array.from(viewport.querySelectorAll(SELECTOR_ITEM));
     };
-    KTClipboard.prototype._getPredefinedText = function () {
-        var text = this._getOption('text');
-        return this._getTrimmedString(text);
+    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;
     };
-    KTClipboard.prototype._getTargetSelector = function () {
-        var target = this._getOption('target');
-        return this._getTrimmedString(target);
+    KTCarousel.prototype._scrollBehavior = function () {
+        return this._prefersReducedMotion ? 'auto' : 'smooth';
     };
-    KTClipboard.prototype._getCopiedClass = function () {
-        var copiedClass = this._getOption('copiedClass');
-        return this._getTrimmedString(copiedClass);
+    KTCarousel.prototype._effectiveDraggable = function () {
+        if (this._getOption('snap') === true)
+            return false;
+        return this._getOption('draggable') === true;
     };
-    KTClipboard.prototype._setCopiedClass = function (shouldSet) {
-        var copiedClass = this._getCopiedClass();
-        if (!copiedClass || !this._element)
+    KTCarousel.prototype._bindControls = function () {
+        var _this = this;
+        if (!this._element)
             return;
-        // Keep deterministic behavior: remove any previous state before toggling.
-        dom_1.default.removeClass(this._element, copiedClass);
-        if (shouldSet) {
-            dom_1.default.addClass(this._element, copiedClass);
+        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);
     };
-    KTClipboard.prototype._isInputLike = function (element) {
-        return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
+    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");
+        }
     };
-    KTClipboard.prototype._readTargetValue = function (target) {
-        var _a, _b;
-        if (this._isInputLike(target)) {
-            return (_a = target.value) !== null && _a !== void 0 ? _a : '';
+    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 (_b = target.textContent) !== null && _b !== void 0 ? _b : '';
+        return best;
     };
-    KTClipboard.prototype._execCommandCopy = function (text) {
-        var textarea = document.createElement('textarea');
-        textarea.value = text;
-        // Avoid scrolling to bottom on iOS/Safari and keep it out of layout.
-        textarea.style.position = 'fixed';
-        textarea.style.top = '0';
-        textarea.style.left = '0';
-        textarea.style.opacity = '0';
-        textarea.style.pointerEvents = 'none';
-        document.body.appendChild(textarea);
-        textarea.focus();
-        textarea.select();
-        // Some browsers require explicit range selection.
-        textarea.setSelectionRange(0, textarea.value.length);
+    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 {
-            return document.execCommand('copy');
+            vp.scrollTo({ left: left, top: vp.scrollTop, behavior: behavior });
         }
         catch (_a) {
-            return false;
+            vp.scrollLeft = left;
         }
-        finally {
-            textarea.remove();
-        }
-    };
-    KTClipboard.prototype._writeText = function (text) {
-        return __awaiter(this, void 0, void 0, function () {
-            var clipboard, writeText, ok;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        clipboard = typeof navigator !== 'undefined' ? navigator.clipboard : null;
-                        writeText = clipboard && typeof clipboard.writeText === 'function'
-                            ? clipboard.writeText.bind(clipboard)
-                            : null;
-                        if (!writeText) return [3 /*break*/, 2];
-                        return [4 /*yield*/, writeText(text)];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/, true];
-                    case 2:
-                        ok = this._execCommandCopy(text);
-                        if (!ok) {
-                            throw new Error('Clipboard copy failed.');
-                        }
-                        return [2 /*return*/, true];
-                }
-            });
+        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);
     };
-    KTClipboard.prototype._handleActivate = function (event) {
-        return __awaiter(this, void 0, void 0, function () {
-            var action, successEventName, errorEventName, textFromConfig, targetSelector, hasPredefinedText, targetElForCut, payload, payload, payload, payload, error_1, payload, payload, targetEl, payload, value, payload, payload, payload, error_2, payload;
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0:
-                        event.preventDefault();
+    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 (data_1.default.has(element, 'carousel')) {
+            return data_1.default.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;
+}(component_1.default));
+exports.KTCarousel = KTCarousel;
+if (typeof window !== 'undefined') {
+    window.KTCarousel = KTCarousel;
+}
+
+
+/***/ }),
+
+/***/ "./src/components/carousel/index.ts":
+/*!******************************************!*\
+  !*** ./src/components/carousel/index.ts ***!
+  \******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTCarousel = void 0;
+var carousel_1 = __webpack_require__(/*! ./carousel */ "./src/components/carousel/carousel.ts");
+Object.defineProperty(exports, "KTCarousel", ({ enumerable: true, get: function () { return carousel_1.KTCarousel; } }));
+
+
+/***/ }),
+
+/***/ "./src/components/clipboard/clipboard.ts":
+/*!***********************************************!*\
+  !*** ./src/components/clipboard/clipboard.ts ***!
+  \***********************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * 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 __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTClipboard = void 0;
+var component_1 = __webpack_require__(/*! ../component */ "./src/components/component.ts");
+var data_1 = __webpack_require__(/*! ../../helpers/data */ "./src/helpers/data.ts");
+var dom_1 = __webpack_require__(/*! ../../helpers/dom */ "./src/helpers/dom.ts");
+var KTClipboard = /** @class */ (function (_super) {
+    __extends(KTClipboard, _super);
+    function KTClipboard(element, config) {
+        if (config === void 0) { config = null; }
+        var _this = _super.call(this) || this;
+        _this._name = 'clipboard';
+        _this._defaultConfig = {
+            target: '',
+            text: '',
+            action: 'copy',
+            copiedClass: '',
+            successEvent: 'kt.clipboard.success',
+            errorEvent: 'kt.clipboard.error',
+        };
+        _this._config = _this
+            ._defaultConfig;
+        _this._activateHandler = null;
+        // Ensure we don't double bind handlers on the same trigger.
+        if (_this._shouldSkipInit(element)) {
+            return _this;
+        }
+        _this._init(element);
+        _this._buildConfig(config);
+        if (!_this._element)
+            return _this;
+        _this._activateHandler = _this._handleActivate.bind(_this);
+        _this._element.addEventListener('click', _this._activateHandler);
+        return _this;
+    }
+    KTClipboard.prototype._getSuccessEventName = function () {
+        var eventName = this._getOption('successEvent');
+        return typeof eventName === 'string' && eventName.length > 0
+            ? eventName
+            : 'kt.clipboard.success';
+    };
+    KTClipboard.prototype._getErrorEventName = function () {
+        var eventName = this._getOption('errorEvent');
+        return typeof eventName === 'string' && eventName.length > 0
+            ? eventName
+            : 'kt.clipboard.error';
+    };
+    KTClipboard.prototype._getAction = function () {
+        var action = this._getOption('action');
+        return action === 'cut' ? 'cut' : 'copy';
+    };
+    KTClipboard.prototype._getTrimmedString = function (optionValue) {
+        return typeof optionValue === 'string' ? optionValue.trim() : '';
+    };
+    KTClipboard.prototype._getPredefinedText = function () {
+        var text = this._getOption('text');
+        return this._getTrimmedString(text);
+    };
+    KTClipboard.prototype._getTargetSelector = function () {
+        var target = this._getOption('target');
+        return this._getTrimmedString(target);
+    };
+    KTClipboard.prototype._getCopiedClass = function () {
+        var copiedClass = this._getOption('copiedClass');
+        return this._getTrimmedString(copiedClass);
+    };
+    KTClipboard.prototype._setCopiedClass = function (shouldSet) {
+        var copiedClass = this._getCopiedClass();
+        if (!copiedClass || !this._element)
+            return;
+        // Keep deterministic behavior: remove any previous state before toggling.
+        dom_1.default.removeClass(this._element, copiedClass);
+        if (shouldSet) {
+            dom_1.default.addClass(this._element, copiedClass);
+        }
+    };
+    KTClipboard.prototype._isInputLike = function (element) {
+        return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
+    };
+    KTClipboard.prototype._readTargetValue = function (target) {
+        var _a, _b;
+        if (this._isInputLike(target)) {
+            return (_a = target.value) !== null && _a !== void 0 ? _a : '';
+        }
+        return (_b = target.textContent) !== null && _b !== void 0 ? _b : '';
+    };
+    KTClipboard.prototype._execCommandCopy = function (text) {
+        var textarea = document.createElement('textarea');
+        textarea.value = text;
+        // Avoid scrolling to bottom on iOS/Safari and keep it out of layout.
+        textarea.style.position = 'fixed';
+        textarea.style.top = '0';
+        textarea.style.left = '0';
+        textarea.style.opacity = '0';
+        textarea.style.pointerEvents = 'none';
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        // Some browsers require explicit range selection.
+        textarea.setSelectionRange(0, textarea.value.length);
+        try {
+            return document.execCommand('copy');
+        }
+        catch (_a) {
+            return false;
+        }
+        finally {
+            textarea.remove();
+        }
+    };
+    KTClipboard.prototype._writeText = function (text) {
+        return __awaiter(this, void 0, void 0, function () {
+            var clipboard, writeText, ok;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        clipboard = typeof navigator !== 'undefined' ? navigator.clipboard : null;
+                        writeText = clipboard && typeof clipboard.writeText === 'function'
+                            ? clipboard.writeText.bind(clipboard)
+                            : null;
+                        if (!writeText) return [3 /*break*/, 2];
+                        return [4 /*yield*/, writeText(text)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/, true];
+                    case 2:
+                        ok = this._execCommandCopy(text);
+                        if (!ok) {
+                            throw new Error('Clipboard copy failed.');
+                        }
+                        return [2 /*return*/, true];
+                }
+            });
+        });
+    };
+    KTClipboard.prototype._handleActivate = function (event) {
+        return __awaiter(this, void 0, void 0, function () {
+            var action, successEventName, errorEventName, textFromConfig, targetSelector, hasPredefinedText, targetElForCut, payload, payload, payload, payload, error_1, payload, payload, targetEl, payload, value, payload, payload, payload, error_2, payload;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        event.preventDefault();
                         action = this._getAction();
                         successEventName = this._getSuccessEventName();
                         errorEventName = this._getErrorEventName();
@@ -3839,6 +4636,7 @@ var utils_1 = __webpack_require__(/*! ../helpers/utils */ "./src/helpers/utils.t
 var KTComponent = /** @class */ (function () {
     function KTComponent() {
         this._dataOptionPrefix = 'kt-';
+        this._events = new Map();
         this._uid = null;
         this._element = null;
     }
@@ -3914,6 +4712,9 @@ var KTComponent = /** @class */ (function () {
     };
     KTComponent.prototype._getOption = function (name) {
         var value = this._config[name];
+        if (!this._element) {
+            return value;
+        }
         var reponsiveValue = dom_1.default.getCssProp(this._element, "--kt-".concat(this._name, "-").concat(utils_1.default.camelReverseCase(name)));
         return reponsiveValue || value;
     };
@@ -3954,7 +4755,11 @@ var KTComponent = /** @class */ (function () {
         if (!this._events.get(eventType)) {
             this._events.set(eventType, new Map());
         }
-        this._events.get(eventType).set(eventId, callback);
+        var eventMap = this._events.get(eventType);
+        if (!eventMap) {
+            return eventId;
+        }
+        eventMap.set(eventId, callback);
         return eventId;
     };
     KTComponent.prototype.off = function (eventType, eventId) {
@@ -4081,7 +4886,7 @@ function createCheckboxHandler(element, config, fireEvent) {
         fireEvent('changed');
     }
     // When the header checkbox is toggled
-    function checkboxToggle(event) {
+    function checkboxToggle(_event) {
         var checked = !isChecked();
         // Update state first, then fire events
         change(checked);
@@ -4533,7 +5338,7 @@ var KTDataTable = /** @class */ (function (_super) {
         _this._init(element);
         _this._buildConfig();
         // Store the instance directly on the element
-        element.instance = _this;
+        KTDataTable.asElementWithInstance(element).instance = _this;
         _this._initElements();
         // Initialize checkbox handler
         _this._checkbox = (0, datatable_checkbox_1.createCheckboxHandler)(_this._element, _this._config, function (eventName, eventData) {
@@ -4560,6 +5365,12 @@ var KTDataTable = /** @class */ (function (_super) {
         _this._dispatchEvent('init');
         return _this;
     }
+    KTDataTable.asElementWithInstance = function (element) {
+        return element;
+    };
+    KTDataTable.asSearchElementWithDebounce = function (element) {
+        return element;
+    };
     /**
      * Initialize default configuration for the datatable
      * @param config User-provided configuration options
@@ -4700,7 +5511,7 @@ var KTDataTable = /** @class */ (function (_super) {
                                 return false;
                             }
                             var valueText = String(value)
-                                .replace(/<[^>]*>|&nbsp;/g, '')
+                                .replace(/<|>|&nbsp;/g, '')
                                 .toLowerCase();
                             return valueText.includes(search.toLowerCase());
                         });
@@ -4906,16 +5717,17 @@ var KTDataTable = /** @class */ (function (_super) {
         }
         if (searchElement) {
             // Check if a debounced search function already exists
-            if (searchElement._debouncedSearch) {
+            var searchWithDebounce = KTDataTable.asSearchElementWithDebounce(searchElement);
+            if (searchWithDebounce._debouncedSearch) {
                 // Remove the existing debounced event listener
-                searchElement.removeEventListener('keyup', searchElement._debouncedSearch);
+                searchElement.removeEventListener('keyup', searchWithDebounce._debouncedSearch);
             }
             // Create a new debounced search function
             var debouncedSearch = this._debounce(function () {
                 _this.search(searchElement.value);
             }, this._config.search.delay);
             // Store the new debounced function as a property of the element
-            searchElement._debouncedSearch = debouncedSearch;
+            searchWithDebounce._debouncedSearch = debouncedSearch;
             // Add the new debounced event listener
             searchElement.addEventListener('keyup', debouncedSearch);
         }
@@ -4927,7 +5739,7 @@ var KTDataTable = /** @class */ (function (_super) {
      */
     KTDataTable.prototype._fetchDataFromLocal = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var _a, sortField, sortOrder, page, pageSize, search, originalData, _b, originalData_1, originalDataAttributes, _temp, startIndex, endIndex;
+            var _a, sortField, sortOrder, page, pageSize, search, originalData, _b, originalData_1, originalDataAttributes, _temp, searchTerm, startIndex, endIndex;
             var _c;
             return __generator(this, function (_d) {
                 switch (_d.label) {
@@ -4951,7 +5763,8 @@ var KTDataTable = /** @class */ (function (_super) {
                         originalData = this.getState().originalData;
                         _temp = (this._data = __spreadArray([], originalData, true));
                         if (search) {
-                            _temp = this._data = this._config.search.callback.call(this, this._data, search);
+                            searchTerm = typeof search === 'string' ? search : '';
+                            _temp = this._data = this._config.search.callback.call(this, this._data, searchTerm);
                         }
                         // If sorting is defined, sort the data
                         if (sortField !== undefined &&
@@ -4998,7 +5811,7 @@ var KTDataTable = /** @class */ (function (_super) {
     };
     KTDataTable.prototype._tableConfigInvalidate = function () {
         // Remove _data and _state from config
-        var _a = this._config, _data = _a._data, _state = _a._state, restConfig = __rest(_a, ["_data", "_state"]);
+        var _a = this._config, _state = _a._state, restConfig = __rest(_a, ["_state"]);
         var checksum = utils_1.default.checksum(JSON.stringify(restConfig));
         if (_state._configChecksum !== checksum) {
             this._config._state._configChecksum = checksum;
@@ -5719,9 +6532,13 @@ var KTDataTable = /** @class */ (function (_super) {
         // --- 1. Remove search input event listener (debounced) ---
         var tableId = this._tableId();
         var searchElement = document.querySelector("[data-kt-datatable-search=\"#".concat(tableId, "\"]"));
-        if (searchElement && searchElement._debouncedSearch) {
-            searchElement.removeEventListener('keyup', searchElement._debouncedSearch);
-            delete searchElement._debouncedSearch;
+        if (searchElement) {
+            var searchWithDebounce = KTDataTable.asSearchElementWithDebounce(searchElement);
+            if (!searchWithDebounce._debouncedSearch) {
+                return;
+            }
+            searchElement.removeEventListener('keyup', searchWithDebounce._debouncedSearch);
+            delete searchWithDebounce._debouncedSearch;
         }
         // --- 2. Remove page size dropdown event listener ---
         if (this._sizeElement && this._sizeElement.onchange) {
@@ -5736,9 +6553,9 @@ var KTDataTable = /** @class */ (function (_super) {
         }
         // --- 4. Dispose of handler objects (checkbox, sort) ---
         // KTDataTableCheckboxAPI does not have a dispose method, but we can remove header checkbox listener
-        if (this._checkbox &&
-            typeof this._checkbox.dispose === 'function') {
-            this._checkbox.dispose();
+        var checkboxWithDispose = this._checkbox;
+        if (this._checkbox && typeof checkboxWithDispose.dispose === 'function') {
+            checkboxWithDispose.dispose();
         }
         else {
             // Remove header checkbox event listener if possible
@@ -5761,8 +6578,9 @@ var KTDataTable = /** @class */ (function (_super) {
         }
         this._element.classList.remove(this._config.loadingClass);
         // --- 6. Remove instance reference from the DOM element ---
-        if (this._element.instance) {
-            delete this._element.instance;
+        var elementWithInstance = KTDataTable.asElementWithInstance(this._element);
+        if (elementWithInstance.instance) {
+            delete elementWithInstance.instance;
         }
         // --- 7. (Optional) Clear localStorage state ---
         // Uncomment the following line if you want to clear state on dispose:
@@ -5936,7 +6754,7 @@ var KTDataTable = /** @class */ (function (_super) {
             return instanceFromMap;
         }
         // Fallback to element's instance property (for manually created instances)
-        return element.instance;
+        return KTDataTable.asElementWithInstance(element).instance;
     };
     /**
      * Initializes all KTDataTable instances on the page.
@@ -6648,8 +7466,6 @@ var KTDrawer = /** @class */ (function (_super) {
         if (!drawerElement) {
             // If element is a toggle button and drawer element wasn't found, return null
             // The handleToggle() will handle waiting for the element to appear
-            if (element.hasAttribute('data-kt-drawer-toggle')) {
-            }
             return null;
         }
         if (data_1.default.has(drawerElement, 'drawer')) {
@@ -6674,8 +7490,7 @@ var KTDrawer = /** @class */ (function (_super) {
     };
     KTDrawer.handleResize = function () {
         window.addEventListener('resize', function () {
-            var timer;
-            utils_1.default.throttle(timer, function () {
+            utils_1.default.throttle(undefined, function () {
                 document
                     .querySelectorAll('[data-kt-drawer-initialized]')
                     .forEach(function (element) {
@@ -6692,11 +7507,9 @@ var KTDrawer = /** @class */ (function (_super) {
         // Add raw click listener to document.body to track all clicks
         document.body.addEventListener('click', function (rawEvent) {
             var target = rawEvent.target;
-            if (target && target.hasAttribute('data-kt-drawer-toggle')) {
-            }
+            void (target && target.hasAttribute('data-kt-drawer-toggle'));
         }, true); // Use capture phase to catch before any stopPropagation
         event_handler_1.default.on(document.body, '[data-kt-drawer-toggle]', 'click', function (event, target) {
-            var _a;
             event.stopPropagation();
             var selector = target.getAttribute('data-kt-drawer-toggle');
             if (!selector)
@@ -6707,13 +7520,6 @@ var KTDrawer = /** @class */ (function (_super) {
                 drawer.toggle(target);
             }
             else {
-                // Drawer element not found - wait for it to appear (handles persisted Livewire components)
-                // Check if drawer exists in persisted components (might be in header that's persisted)
-                var persistedHeader = ((_a = document.querySelector('[wire\\:id]')) === null || _a === void 0 ? void 0 : _a.closest('[wire\\:id]')) ||
-                    document.querySelector('header#header');
-                var drawerInPersisted = persistedHeader
-                    ? persistedHeader.querySelector(selector)
-                    : null;
                 // Wait longer for persisted components that may take time to render
                 // Also check if drawer exists in persisted header component
                 KTDrawer.waitForElement(selector, 5000).then(function (drawerElement) {
@@ -6842,12 +7648,11 @@ var KTDrawer = /** @class */ (function (_super) {
                     instance.hide(); // This will clean up backdrop and state
                 }
                 // Clear KTData entries
-                var hadDrawer = data_1.default.has(element, 'drawer');
                 data_1.default.remove(element, 'drawer');
                 // Remove initialization attribute to allow fresh initialization
                 element.removeAttribute('data-kt-drawer-initialized');
             }
-            catch (e) {
+            catch (_a) {
                 // Ignore errors for individual elements
             }
         });
@@ -7002,7 +7807,7 @@ var KTDropdown = /** @class */ (function (_super) {
         }
         this._toggle();
     };
-    KTDropdown.prototype._mouseover = function (event) {
+    KTDropdown.prototype._mouseover = function (_event) {
         if (this._disabled)
             return;
         if (this._getOption('trigger') !== 'hover')
@@ -7106,7 +7911,6 @@ var KTDropdown = /** @class */ (function (_super) {
         });
     };
     KTDropdown.prototype._initPopper = function () {
-        var isRtl = dom_1.default.isRTL();
         var reference;
         var attach = this._getOption('attach');
         if (attach) {
@@ -7301,108 +8105,337 @@ var KTDropdown = /** @class */ (function (_super) {
                 !(event.ctrlKey || event.altKey || event.shiftKey)) {
                 dropdown.hide();
             }
-        });
-    };
-    KTDropdown.handleMouseover = function () {
-        event_handler_1.default.on(document.body, '[data-kt-dropdown-toggle], [data-kt-dropdown-menu]', 'mouseover', function (event, target) {
-            var dropdown = KTDropdown.getInstance(target);
-            if (dropdown && dropdown._getOption('trigger') === 'hover') {
-                dropdown.mouseover(event);
+        });
+    };
+    KTDropdown.handleMouseover = function () {
+        event_handler_1.default.on(document.body, '[data-kt-dropdown-toggle], [data-kt-dropdown-menu]', 'mouseover', function (event, target) {
+            var dropdown = KTDropdown.getInstance(target);
+            if (dropdown && dropdown._getOption('trigger') === 'hover') {
+                dropdown.mouseover(event);
+            }
+        });
+    };
+    KTDropdown.handleMouseout = function () {
+        event_handler_1.default.on(document.body, '[data-kt-dropdown-toggle], [data-kt-dropdown-menu]', 'mouseout', function (event, target) {
+            var dropdown = KTDropdown.getInstance(target);
+            if (dropdown && dropdown._getOption('trigger') === 'hover') {
+                dropdown.mouseout(event);
+            }
+        });
+    };
+    KTDropdown.handleClick = function () {
+        event_handler_1.default.on(document.body, '[data-kt-dropdown-toggle]', 'click', function (event, target) {
+            var dropdown = KTDropdown.getInstance(target);
+            if (dropdown) {
+                dropdown.click(event);
+            }
+        });
+    };
+    KTDropdown.handleDismiss = function () {
+        event_handler_1.default.on(document.body, '[data-kt-dropdown-dismiss]', 'click', function (event, target) {
+            var dropdown = KTDropdown.getInstance(target);
+            if (dropdown) {
+                dropdown.hide();
+            }
+        });
+    };
+    KTDropdown.initHandlers = function () {
+        this.handleClickAway();
+        this.handleKeyboard();
+        this.handleMouseover();
+        this.handleMouseout();
+        this.handleClick();
+        this.handleDismiss();
+    };
+    KTDropdown.createInstances = function () {
+        var elements = document.querySelectorAll('[data-kt-dropdown]');
+        elements.forEach(function (element) {
+            new KTDropdown(element);
+        });
+    };
+    KTDropdown.init = function () {
+        KTDropdown.createInstances();
+        if (window.KT_DROPDOWN_INITIALIZED !== true) {
+            KTDropdown.initHandlers();
+            window.KT_DROPDOWN_INITIALIZED = true;
+        }
+    };
+    /**
+     * Force reinitialization of dropdowns by clearing KTData entries.
+     * Useful for Livewire wire:navigate where persisted elements need reinitialization.
+     */
+    KTDropdown.reinit = function () {
+        var elements = document.querySelectorAll('[data-kt-dropdown]');
+        elements.forEach(function (element) {
+            try {
+                // Get existing instance to clean up Popper
+                var instance = KTDropdown.getInstance(element);
+                if (instance && typeof instance.hide === 'function') {
+                    instance.hide(); // This will destroy Popper
+                }
+                // Clear KTData entries
+                data_1.default.remove(element, 'dropdown');
+                data_1.default.remove(element, 'popper');
+                // Remove initialization attribute to allow fresh initialization
+                element.removeAttribute('data-kt-dropdown-initialized');
+                var menu = element.querySelector('[data-kt-dropdown-menu]');
+                if (menu) {
+                    data_1.default.remove(menu, 'dropdownElement');
+                }
+            }
+            catch (_a) {
+                // Ignore errors for individual elements
+            }
+        });
+        // Now create fresh instances
+        KTDropdown.createInstances();
+        // Always ensure handlers are set up (similar to KTMenu.init() behavior)
+        // Event handlers use delegation so they persist, but we ensure they're attached
+        KTDropdown.initHandlers();
+    };
+    return KTDropdown;
+}(component_1.default));
+exports.KTDropdown = KTDropdown;
+if (typeof window !== 'undefined') {
+    window.KTDropdown = KTDropdown;
+}
+
+
+/***/ }),
+
+/***/ "./src/components/dropdown/index.ts":
+/*!******************************************!*\
+  !*** ./src/components/dropdown/index.ts ***!
+  \******************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTDropdown = void 0;
+var dropdown_1 = __webpack_require__(/*! ./dropdown */ "./src/components/dropdown/dropdown.ts");
+Object.defineProperty(exports, "KTDropdown", ({ enumerable: true, get: function () { return dropdown_1.KTDropdown; } }));
+
+
+/***/ }),
+
+/***/ "./src/components/image-input/image-input.ts":
+/*!***************************************************!*\
+  !*** ./src/components/image-input/image-input.ts ***!
+  \***************************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * 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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTImageInput = void 0;
+var data_1 = __webpack_require__(/*! ../../helpers/data */ "./src/helpers/data.ts");
+var event_handler_1 = __webpack_require__(/*! ../../helpers/event-handler */ "./src/helpers/event-handler.ts");
+var component_1 = __webpack_require__(/*! ../component */ "./src/components/component.ts");
+var KTImageInput = /** @class */ (function (_super) {
+    __extends(KTImageInput, _super);
+    function KTImageInput(element, config) {
+        var _this = _super.call(this) || this;
+        _this._name = 'image-input';
+        _this._defaultConfig = {
+            hiddenClass: 'hidden',
+        };
+        _this._previewUrl = '';
+        _this._selectedFile = null;
+        if (data_1.default.has(element, _this._name))
+            return _this;
+        _this._init(element);
+        _this._buildConfig(config);
+        _this._inputElement = _this._element.querySelector('input[type="file"]');
+        _this._hiddenElement = _this._element.querySelector('input[type="hidden"]');
+        _this._removeElement = _this._element.querySelector('[data-kt-image-input-remove]');
+        _this._previewElement = _this._element.querySelector('[data-kt-image-input-preview]');
+        _this._update();
+        _this._handlers();
+        return _this;
+    }
+    KTImageInput.prototype._handlers = function () {
+        var _this = this;
+        event_handler_1.default.on(this._element, '[data-kt-image-input-placeholder]', 'click', function (event) {
+            event.preventDefault();
+            _this._inputElement.click();
+        });
+        this._inputElement.addEventListener('change', function () {
+            _this._change();
+        });
+        this._removeElement.addEventListener('click', function () {
+            _this._remove();
+        });
+    };
+    KTImageInput.prototype._change = function () {
+        var _this = this;
+        var payload = { cancel: false };
+        this._fireEvent('change', payload);
+        this._dispatchEvent('change', payload);
+        if (payload.cancel === true) {
+            return;
+        }
+        var reader = new FileReader();
+        reader.onload = function () {
+            _this._previewElement.style.backgroundImage = "url(".concat(reader.result, ")");
+        };
+        reader.readAsDataURL(this._inputElement.files[0]);
+        this._selectedFile = this._inputElement.files[0];
+        this._lastMode = 'new';
+        this._element.classList.add('changed');
+        this._removeElement.classList.remove('hidden');
+        this._element.classList.remove('empty');
+        this._fireEvent('changed');
+        this._dispatchEvent('changed');
+    };
+    KTImageInput.prototype._remove = function () {
+        var payload = { cancel: false };
+        this._fireEvent('remove', payload);
+        this._dispatchEvent('remove', payload);
+        if (payload.cancel === true) {
+            return;
+        }
+        this._element.classList.remove('empty');
+        this._element.classList.remove('changed');
+        if (this._lastMode == 'new') {
+            if (this._previewUrl == '')
+                this._removeElement.classList.add(this._getOption('hiddenClass'));
+            if (this._previewUrl) {
+                this._previewElement.style.backgroundImage = "url(".concat(this._previewUrl, ")");
+            }
+            else {
+                this._previewElement.style.backgroundImage = 'none';
+                this._element.classList.add('empty');
+            }
+            this._inputElement.value = '';
+            this._hiddenElement.value = '';
+            this._selectedFile = null;
+            this._lastMode = 'saved';
+        }
+        else if (this._lastMode == 'saved') {
+            if (this._previewUrl == '')
+                this._removeElement.classList.add(this._getOption('hiddenClass'));
+            this._previewElement.style.backgroundImage = 'none';
+            this._element.classList.add('empty');
+            this._hiddenElement.value = '1';
+            this._inputElement.value = '';
+            this._selectedFile = null;
+            this._lastMode = 'placeholder';
+        }
+        else if (this._lastMode == 'placeholder') {
+            if (this._previewUrl == '')
+                this._removeElement.classList.add(this._getOption('hiddenClass'));
+            if (this._previewUrl) {
+                this._previewElement.style.backgroundImage = "url(".concat(this._previewUrl, ")");
+            }
+            else {
+                this._element.classList.add('empty');
             }
-        });
+            this._inputElement.value = '';
+            this._hiddenElement.value = '';
+            this._selectedFile = null;
+            this._lastMode = 'saved';
+        }
+        this._fireEvent('remove');
+        this._dispatchEvent('remove');
     };
-    KTDropdown.handleMouseout = function () {
-        event_handler_1.default.on(document.body, '[data-kt-dropdown-toggle], [data-kt-dropdown-menu]', 'mouseout', function (event, target) {
-            var dropdown = KTDropdown.getInstance(target);
-            if (dropdown && dropdown._getOption('trigger') === 'hover') {
-                dropdown.mouseout(event);
-            }
-        });
+    KTImageInput.prototype._update = function () {
+        if (this._previewElement.style.backgroundImage) {
+            this._setPreviewUrl(this._previewElement.style.backgroundImage);
+            this._removeElement.classList.remove(this._getOption('hiddenClass'));
+            this._lastMode = 'saved';
+        }
+        else {
+            this._removeElement.classList.add(this._getOption('hiddenClass'));
+            this._element.classList.add('empty');
+            this._lastMode = 'placeholder';
+        }
     };
-    KTDropdown.handleClick = function () {
-        event_handler_1.default.on(document.body, '[data-kt-dropdown-toggle]', 'click', function (event, target) {
-            var dropdown = KTDropdown.getInstance(target);
-            if (dropdown) {
-                dropdown.click(event);
-            }
-        });
+    KTImageInput.prototype._getPreviewUrl = function () {
+        return this._previewUrl;
     };
-    KTDropdown.handleDismiss = function () {
-        event_handler_1.default.on(document.body, '[data-kt-dropdown-dismiss]', 'click', function (event, target) {
-            var dropdown = KTDropdown.getInstance(target);
-            if (dropdown) {
-                dropdown.hide();
-            }
-        });
+    KTImageInput.prototype._setPreviewUrl = function (url) {
+        this._previewUrl = url.replace(/(url\(|\)|")/g, '');
     };
-    KTDropdown.initHandlers = function () {
-        this.handleClickAway();
-        this.handleKeyboard();
-        this.handleMouseover();
-        this.handleMouseout();
-        this.handleClick();
-        this.handleDismiss();
+    KTImageInput.prototype.isEmpty = function () {
+        return this._selectedFile === null;
     };
-    KTDropdown.createInstances = function () {
-        var elements = document.querySelectorAll('[data-kt-dropdown]');
-        elements.forEach(function (element) {
-            new KTDropdown(element);
-        });
+    KTImageInput.prototype.isChanged = function () {
+        return this._selectedFile !== null;
     };
-    KTDropdown.init = function () {
-        KTDropdown.createInstances();
-        if (window.KT_DROPDOWN_INITIALIZED !== true) {
-            KTDropdown.initHandlers();
-            window.KT_DROPDOWN_INITIALIZED = true;
+    KTImageInput.prototype.remove = function () {
+        this._remove();
+    };
+    KTImageInput.prototype.update = function () {
+        this._update();
+    };
+    KTImageInput.prototype.setPreviewUrl = function (url) {
+        this._setPreviewUrl(url);
+    };
+    KTImageInput.prototype.getPreviewUrl = function () {
+        return this._getPreviewUrl();
+    };
+    KTImageInput.prototype.getSelectedFile = function () {
+        return this._selectedFile;
+    };
+    KTImageInput.getInstance = function (element) {
+        if (!element)
+            return null;
+        if (data_1.default.has(element, 'image-input')) {
+            return data_1.default.get(element, 'image-input');
+        }
+        if (element.getAttribute('data-kt-image-input')) {
+            return new KTImageInput(element);
         }
+        return null;
     };
-    /**
-     * Force reinitialization of dropdowns by clearing KTData entries.
-     * Useful for Livewire wire:navigate where persisted elements need reinitialization.
-     */
-    KTDropdown.reinit = function () {
-        var elements = document.querySelectorAll('[data-kt-dropdown]');
+    KTImageInput.getOrCreateInstance = function (element, config) {
+        return this.getInstance(element) || new KTImageInput(element, config);
+    };
+    KTImageInput.createInstances = function () {
+        var elements = document.querySelectorAll('[data-kt-image-input]');
         elements.forEach(function (element) {
-            try {
-                // Get existing instance to clean up Popper
-                var instance = KTDropdown.getInstance(element);
-                if (instance && typeof instance.hide === 'function') {
-                    instance.hide(); // This will destroy Popper
-                }
-                // Clear KTData entries
-                data_1.default.remove(element, 'dropdown');
-                data_1.default.remove(element, 'popper');
-                // Remove initialization attribute to allow fresh initialization
-                element.removeAttribute('data-kt-dropdown-initialized');
-                var menu = element.querySelector('[data-kt-dropdown-menu]');
-                if (menu) {
-                    data_1.default.remove(menu, 'dropdownElement');
-                }
-            }
-            catch (e) {
-                // Ignore errors for individual elements
-            }
+            new KTImageInput(element);
         });
-        // Now create fresh instances
-        KTDropdown.createInstances();
-        // Always ensure handlers are set up (similar to KTMenu.init() behavior)
-        // Event handlers use delegation so they persist, but we ensure they're attached
-        KTDropdown.initHandlers();
     };
-    return KTDropdown;
+    KTImageInput.init = function () {
+        KTImageInput.createInstances();
+    };
+    return KTImageInput;
 }(component_1.default));
-exports.KTDropdown = KTDropdown;
+exports.KTImageInput = KTImageInput;
 if (typeof window !== 'undefined') {
-    window.KTDropdown = KTDropdown;
+    window.KTImageInput = KTImageInput;
 }
 
 
 /***/ }),
 
-/***/ "./src/components/dropdown/index.ts":
-/*!******************************************!*\
-  !*** ./src/components/dropdown/index.ts ***!
-  \******************************************/
+/***/ "./src/components/image-input/index.ts":
+/*!*********************************************!*\
+  !*** ./src/components/image-input/index.ts ***!
+  \*********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -7411,17 +8444,36 @@ if (typeof window !== 'undefined') {
  * Copyright 2025 by Keenthemes Inc
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.KTDropdown = void 0;
-var dropdown_1 = __webpack_require__(/*! ./dropdown */ "./src/components/dropdown/dropdown.ts");
-Object.defineProperty(exports, "KTDropdown", ({ enumerable: true, get: function () { return dropdown_1.KTDropdown; } }));
+exports.KTImageInput = void 0;
+var image_input_1 = __webpack_require__(/*! ./image-input */ "./src/components/image-input/image-input.ts");
+Object.defineProperty(exports, "KTImageInput", ({ enumerable: true, get: function () { return image_input_1.KTImageInput; } }));
 
 
 /***/ }),
 
-/***/ "./src/components/image-input/image-input.ts":
-/*!***************************************************!*\
-  !*** ./src/components/image-input/image-input.ts ***!
-  \***************************************************/
+/***/ "./src/components/modal/index.ts":
+/*!***************************************!*\
+  !*** ./src/components/modal/index.ts ***!
+  \***************************************/
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+
+/**
+ * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * Copyright 2025 by Keenthemes Inc
+ */
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+exports.KTModal = void 0;
+var modal_1 = __webpack_require__(/*! ./modal */ "./src/components/modal/modal.ts");
+Object.defineProperty(exports, "KTModal", ({ enumerable: true, get: function () { return modal_1.KTModal; } }));
+
+
+/***/ }),
+
+/***/ "./src/components/modal/modal.ts":
+/*!***************************************!*\
+  !*** ./src/components/modal/modal.ts ***!
+  \***************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
@@ -7445,236 +8497,351 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.KTImageInput = void 0;
+exports.KTModal = void 0;
 var data_1 = __webpack_require__(/*! ../../helpers/data */ "./src/helpers/data.ts");
+var dom_1 = __webpack_require__(/*! ../../helpers/dom */ "./src/helpers/dom.ts");
 var event_handler_1 = __webpack_require__(/*! ../../helpers/event-handler */ "./src/helpers/event-handler.ts");
+var utils_1 = __webpack_require__(/*! ../../helpers/utils */ "./src/helpers/utils.ts");
 var component_1 = __webpack_require__(/*! ../component */ "./src/components/component.ts");
-var KTImageInput = /** @class */ (function (_super) {
-    __extends(KTImageInput, _super);
-    function KTImageInput(element, config) {
+var KTModal = /** @class */ (function (_super) {
+    __extends(KTModal, _super);
+    function KTModal(element, config) {
         var _this = _super.call(this) || this;
-        _this._name = 'image-input';
+        _this._name = 'modal';
         _this._defaultConfig = {
+            zindex: '90',
+            backdrop: true,
+            backdropClass: 'kt-modal-backdrop',
+            backdropStatic: false,
+            keyboard: true,
+            disableScroll: true,
+            persistent: false,
+            focus: true,
             hiddenClass: 'hidden',
         };
-        _this._previewUrl = '';
-        _this._selectedFile = null;
+        _this._config = _this._defaultConfig;
+        _this._isOpen = false;
+        _this._isTransitioning = false;
+        _this._backdropElement = null;
+        _this._targetElement = null;
         if (data_1.default.has(element, _this._name))
             return _this;
         _this._init(element);
         _this._buildConfig(config);
-        _this._inputElement = _this._element.querySelector('input[type="file"]');
-        _this._hiddenElement = _this._element.querySelector('input[type="hidden"]');
-        _this._removeElement = _this._element.querySelector('[data-kt-image-input-remove]');
-        _this._previewElement = _this._element.querySelector('[data-kt-image-input-preview]');
-        _this._update();
         _this._handlers();
         return _this;
     }
-    KTImageInput.prototype._handlers = function () {
+    KTModal.prototype._handlers = function () {
         var _this = this;
-        event_handler_1.default.on(this._element, '[data-kt-image-input-placeholder]', 'click', function (event) {
-            event.preventDefault();
-            _this._inputElement.click();
-        });
-        this._inputElement.addEventListener('change', function () {
-            _this._change();
-        });
-        this._removeElement.addEventListener('click', function () {
-            _this._remove();
+        this._element.addEventListener('click', function (event) {
+            var target = event.target;
+            var modalContent = _this._element.querySelector('.kt-modal-content');
+            // Stop propagation for clicks inside dropdowns rendered within modal content.
+            var dropdownElement = target.closest('[data-kt-select-dropdown]');
+            if (dropdownElement) {
+                event.stopPropagation();
+                return;
+            }
+            // Dismiss when clicking anywhere outside modal content.
+            if (modalContent && modalContent.contains(target)) {
+                return;
+            }
+            // Only hide if both backdropStatic is false AND persistent is false
+            if (_this._getOption('backdropStatic') === false &&
+                utils_1.default.stringToBoolean(_this._getOption('persistent')) === false) {
+                _this._hide();
+            }
         });
     };
-    KTImageInput.prototype._change = function () {
+    KTModal.prototype._toggle = function (targetElement) {
+        var payload = { cancel: false };
+        this._fireEvent('toggle', payload);
+        this._dispatchEvent('toggle', payload);
+        if (payload.cancel === true) {
+            return;
+        }
+        if (this._isOpen === true) {
+            this._hide();
+        }
+        else {
+            this._show(targetElement);
+        }
+    };
+    KTModal.prototype._show = function (targetElement) {
         var _this = this;
+        if (this._isOpen || this._isTransitioning) {
+            return;
+        }
+        if (targetElement)
+            this._targetElement = targetElement;
         var payload = { cancel: false };
-        this._fireEvent('change', payload);
-        this._dispatchEvent('change', payload);
+        this._fireEvent('show', payload);
+        this._dispatchEvent('show', payload);
         if (payload.cancel === true) {
             return;
         }
-        var reader = new FileReader();
-        reader.onload = function () {
-            _this._previewElement.style.backgroundImage = "url(".concat(reader.result, ")");
-        };
-        reader.readAsDataURL(this._inputElement.files[0]);
-        this._selectedFile = this._inputElement.files[0];
-        this._lastMode = 'new';
-        this._element.classList.add('changed');
-        this._removeElement.classList.remove('hidden');
-        this._element.classList.remove('empty');
-        this._fireEvent('changed');
-        this._dispatchEvent('changed');
+        KTModal.hide();
+        if (!this._element)
+            return;
+        this._isTransitioning = true;
+        this._element.setAttribute('role', 'dialog');
+        this._element.setAttribute('aria-modal', 'true');
+        this._element.setAttribute('tabindex', '-1');
+        this._setZindex();
+        if (this._getOption('backdrop') === true)
+            this._createBackdrop();
+        if (this._getOption('disableScroll')) {
+            document.body.style.overflow = 'hidden';
+        }
+        this._element.style.display = 'block';
+        dom_1.default.reflow(this._element);
+        this._element.classList.add('open');
+        this._element.classList.remove(this._getOption('hiddenClass'));
+        dom_1.default.transitionEnd(this._element, function () {
+            _this._isTransitioning = false;
+            _this._isOpen = true;
+            if (_this._getOption('focus') === true) {
+                _this._autoFocus();
+            }
+            _this._fireEvent('shown');
+            _this._dispatchEvent('shown');
+        });
     };
-    KTImageInput.prototype._remove = function () {
+    KTModal.prototype._hide = function () {
+        var _this = this;
+        if (!this._element)
+            return;
+        if (this._isOpen === false || this._isTransitioning) {
+            return;
+        }
         var payload = { cancel: false };
-        this._fireEvent('remove', payload);
-        this._dispatchEvent('remove', payload);
+        this._fireEvent('hide', payload);
+        this._dispatchEvent('hide', payload);
         if (payload.cancel === true) {
             return;
         }
-        this._element.classList.remove('empty');
-        this._element.classList.remove('changed');
-        if (this._lastMode == 'new') {
-            if (this._previewUrl == '')
-                this._removeElement.classList.add(this._getOption('hiddenClass'));
-            if (this._previewUrl) {
-                this._previewElement.style.backgroundImage = "url(".concat(this._previewUrl, ")");
-            }
-            else {
-                this._previewElement.style.backgroundImage = 'none';
-                this._element.classList.add('empty');
-            }
-            this._inputElement.value = '';
-            this._hiddenElement.value = '';
-            this._selectedFile = null;
-            this._lastMode = 'saved';
-        }
-        else if (this._lastMode == 'saved') {
-            if (this._previewUrl == '')
-                this._removeElement.classList.add(this._getOption('hiddenClass'));
-            this._previewElement.style.backgroundImage = 'none';
-            this._element.classList.add('empty');
-            this._hiddenElement.value = '1';
-            this._inputElement.value = '';
-            this._selectedFile = null;
-            this._lastMode = 'placeholder';
+        this._isTransitioning = true;
+        this._element.removeAttribute('role');
+        this._element.removeAttribute('aria-modal');
+        this._element.removeAttribute('tabindex');
+        if (this._getOption('disableScroll')) {
+            document.body.style.overflow = '';
         }
-        else if (this._lastMode == 'placeholder') {
-            if (this._previewUrl == '')
-                this._removeElement.classList.add(this._getOption('hiddenClass'));
-            if (this._previewUrl) {
-                this._previewElement.style.backgroundImage = "url(".concat(this._previewUrl, ")");
-            }
-            else {
-                this._element.classList.add('empty');
-            }
-            this._inputElement.value = '';
-            this._hiddenElement.value = '';
-            this._selectedFile = null;
-            this._lastMode = 'saved';
+        dom_1.default.reflow(this._element);
+        this._element.classList.remove('open');
+        if (this._getOption('backdrop') === true) {
+            this._deleteBackdrop();
         }
-        this._fireEvent('remove');
-        this._dispatchEvent('remove');
+        dom_1.default.transitionEnd(this._element, function () {
+            if (!_this._element)
+                return;
+            _this._isTransitioning = false;
+            _this._isOpen = false;
+            _this._element.style.display = '';
+            _this._element.classList.add(_this._getOption('hiddenClass'));
+            _this._fireEvent('hidden');
+            _this._dispatchEvent('hidden');
+        });
     };
-    KTImageInput.prototype._update = function () {
-        if (this._previewElement.style.backgroundImage) {
-            this._setPreviewUrl(this._previewElement.style.backgroundImage);
-            this._removeElement.classList.remove(this._getOption('hiddenClass'));
-            this._lastMode = 'saved';
+    KTModal.prototype._setZindex = function () {
+        var zindex = parseInt(this._getOption('zindex'));
+        if (parseInt(dom_1.default.getCssProp(this._element, 'z-index')) > zindex) {
+            zindex = parseInt(dom_1.default.getCssProp(this._element, 'z-index'));
         }
-        else {
-            this._removeElement.classList.add(this._getOption('hiddenClass'));
-            this._element.classList.add('empty');
-            this._lastMode = 'placeholder';
+        if (dom_1.default.getHighestZindex(this._element) > zindex) {
+            zindex = dom_1.default.getHighestZindex(this._element) + 1;
         }
+        this._element.style.zIndex = String(zindex);
     };
-    KTImageInput.prototype._getPreviewUrl = function () {
-        return this._previewUrl;
-    };
-    KTImageInput.prototype._setPreviewUrl = function (url) {
-        this._previewUrl = url.replace(/(url\(|\)|")/g, '');
+    KTModal.prototype._autoFocus = function () {
+        if (!this._element)
+            return;
+        var input = this._element.querySelector('[data-kt-modal-input-focus]');
+        if (!input)
+            return;
+        else
+            input.focus();
     };
-    KTImageInput.prototype.isEmpty = function () {
-        return this._selectedFile === null;
+    KTModal.prototype._createBackdrop = function () {
+        var _this = this;
+        if (!this._element)
+            return;
+        var zindex = parseInt(dom_1.default.getCssProp(this._element, 'z-index'));
+        this._backdropElement = document.createElement('DIV');
+        this._backdropElement.setAttribute('data-kt-modal-backdrop', 'true');
+        this._backdropElement.addEventListener('click', function () {
+            if (_this._getOption('backdropStatic') === false &&
+                utils_1.default.stringToBoolean(_this._getOption('persistent')) === false) {
+                _this._hide();
+            }
+        });
+        this._backdropElement.style.zIndex = (zindex - 1).toString();
+        document.body.append(this._backdropElement);
+        dom_1.default.reflow(this._backdropElement);
+        dom_1.default.addClass(this._backdropElement, this._getOption('backdropClass'));
     };
-    KTImageInput.prototype.isChanged = function () {
-        return this._selectedFile !== null;
+    KTModal.prototype._deleteBackdrop = function () {
+        var _this = this;
+        if (!this._backdropElement)
+            return;
+        dom_1.default.reflow(this._backdropElement);
+        this._backdropElement.style.opacity = '0';
+        dom_1.default.transitionEnd(this._backdropElement, function () {
+            if (!_this._backdropElement)
+                return;
+            dom_1.default.remove(_this._backdropElement);
+        });
     };
-    KTImageInput.prototype.remove = function () {
-        this._remove();
+    KTModal.prototype.toggle = function (targetElement) {
+        return this._toggle(targetElement);
     };
-    KTImageInput.prototype.update = function () {
-        this._update();
+    KTModal.prototype.show = function (targetElement) {
+        return this._show(targetElement);
     };
-    KTImageInput.prototype.setPreviewUrl = function (url) {
-        this._setPreviewUrl(url);
+    KTModal.prototype.hide = function () {
+        return this._hide();
     };
-    KTImageInput.prototype.getPreviewUrl = function () {
-        return this._getPreviewUrl();
+    KTModal.prototype.getTargetElement = function () {
+        return this._targetElement;
     };
-    KTImageInput.prototype.getSelectedFile = function () {
-        return this._selectedFile;
+    KTModal.prototype.isOpen = function () {
+        return this._isOpen;
     };
-    KTImageInput.getInstance = function (element) {
+    KTModal.getInstance = function (element) {
         if (!element)
             return null;
-        if (data_1.default.has(element, 'image-input')) {
-            return data_1.default.get(element, 'image-input');
+        if (data_1.default.has(element, 'modal')) {
+            return data_1.default.get(element, 'modal');
         }
-        if (element.getAttribute('data-kt-image-input')) {
-            return new KTImageInput(element);
+        if (element.getAttribute('data-kt-modal')) {
+            return new KTModal(element);
         }
         return null;
     };
-    KTImageInput.getOrCreateInstance = function (element, config) {
-        return this.getInstance(element) || new KTImageInput(element, config);
+    KTModal.getOrCreateInstance = function (element, config) {
+        return this.getInstance(element) || new KTModal(element, config);
+    };
+    KTModal.hide = function () {
+        var elements = document.querySelectorAll('[data-kt-modal-initialized]');
+        elements.forEach(function (element) {
+            var modal = KTModal.getInstance(element);
+            if (modal && modal.isOpen()) {
+                modal.hide();
+            }
+        });
+    };
+    KTModal.handleToggle = function () {
+        // wire:navigate / morph can replace document.body; <html> stays stable.
+        event_handler_1.default.on(document.documentElement, '[data-kt-modal-toggle]', 'click', function (event, target) {
+            event.stopPropagation();
+            var selector = target.getAttribute('data-kt-modal-toggle');
+            if (!selector)
+                return;
+            var modalElement = document.querySelector(selector);
+            var modal = KTModal.getInstance(modalElement);
+            if (modal) {
+                modal.toggle(target);
+            }
+        });
+    };
+    KTModal.handleDismiss = function () {
+        event_handler_1.default.on(document.documentElement, '[data-kt-modal-dismiss]', 'click', function (event, target) {
+            event.stopPropagation();
+            var modalElement = target.closest('[data-kt-modal-initialized]');
+            if (modalElement) {
+                var modal = KTModal.getInstance(modalElement);
+                if (modal) {
+                    modal.hide();
+                }
+            }
+        });
+    };
+    KTModal.handleClickAway = function () {
+        document.addEventListener('click', function (event) {
+            var modalElement = document.querySelector('.open[data-kt-modal-initialized]');
+            if (!modalElement)
+                return;
+            var modal = KTModal.getInstance(modalElement);
+            if (!modal)
+                return;
+            if (utils_1.default.stringToBoolean(modal.getOption('persistent')) === true)
+                return;
+            if (utils_1.default.stringToBoolean(modal.getOption('backdrop')) === true)
+                return;
+            if (modalElement !== event.target &&
+                modal.getTargetElement() !== event.target &&
+                modalElement.contains(event.target) === false) {
+                modal.hide();
+            }
+        });
+    };
+    KTModal.handleKeyword = function () {
+        document.addEventListener('keydown', function (event) {
+            var modalElement = document.querySelector('.open[data-kt-modal-initialized]');
+            var modal = KTModal.getInstance(modalElement);
+            if (!modal) {
+                return;
+            }
+            // if esc key was not pressed in combination with ctrl or alt or shift
+            if (event.key === 'Escape' &&
+                !(event.ctrlKey || event.altKey || event.shiftKey)) {
+                modal.hide();
+            }
+            if (event.code === 'Tab' && !event.metaKey) {
+                return;
+            }
+        });
     };
-    KTImageInput.createInstances = function () {
-        var elements = document.querySelectorAll('[data-kt-image-input]');
+    KTModal.createInstances = function () {
+        var elements = document.querySelectorAll('[data-kt-modal]');
         elements.forEach(function (element) {
-            new KTImageInput(element);
+            new KTModal(element);
         });
     };
-    KTImageInput.init = function () {
-        KTImageInput.createInstances();
+    KTModal.init = function () {
+        KTModal.createInstances();
+        if (window.KT_MODAL_INITIALIZED !== true) {
+            KTModal.handleToggle();
+            KTModal.handleDismiss();
+            KTModal.handleClickAway();
+            KTModal.handleKeyword();
+            window.KT_MODAL_INITIALIZED = true;
+        }
     };
-    return KTImageInput;
+    return KTModal;
 }(component_1.default));
-exports.KTImageInput = KTImageInput;
+exports.KTModal = KTModal;
 if (typeof window !== 'undefined') {
-    window.KTImageInput = KTImageInput;
+    window.KTModal = KTModal;
 }
 
 
 /***/ }),
 
-/***/ "./src/components/image-input/index.ts":
-/*!*********************************************!*\
-  !*** ./src/components/image-input/index.ts ***!
-  \*********************************************/
-/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
-
-
-/**
- * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
- * Copyright 2025 by Keenthemes Inc
- */
-Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.KTImageInput = void 0;
-var image_input_1 = __webpack_require__(/*! ./image-input */ "./src/components/image-input/image-input.ts");
-Object.defineProperty(exports, "KTImageInput", ({ enumerable: true, get: function () { return image_input_1.KTImageInput; } }));
-
-
-/***/ }),
-
-/***/ "./src/components/modal/index.ts":
-/*!***************************************!*\
-  !*** ./src/components/modal/index.ts ***!
-  \***************************************/
+/***/ "./src/components/pin-input/index.ts":
+/*!*******************************************!*\
+  !*** ./src/components/pin-input/index.ts ***!
+  \*******************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
-/**
- * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
- * Copyright 2025 by Keenthemes Inc
- */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.KTModal = void 0;
-var modal_1 = __webpack_require__(/*! ./modal */ "./src/components/modal/modal.ts");
-Object.defineProperty(exports, "KTModal", ({ enumerable: true, get: function () { return modal_1.KTModal; } }));
+exports.KTPinInput = void 0;
+var pin_input_1 = __webpack_require__(/*! ./pin-input */ "./src/components/pin-input/pin-input.ts");
+Object.defineProperty(exports, "KTPinInput", ({ enumerable: true, get: function () { return pin_input_1.KTPinInput; } }));
 
 
 /***/ }),
 
-/***/ "./src/components/modal/modal.ts":
-/*!***************************************!*\
-  !*** ./src/components/modal/modal.ts ***!
-  \***************************************/
+/***/ "./src/components/pin-input/pin-input.ts":
+/*!***********************************************!*\
+  !*** ./src/components/pin-input/pin-input.ts ***!
+  \***********************************************/
 /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
 
 
 /**
- * KTUI - Free & Open-Source Tailwind UI Components by Keenthemes
+ * KTUI - PIN / OTP multi-field input
  * Copyright 2025 by Keenthemes Inc
  */
 var __extends = (this && this.__extends) || (function () {
@@ -7692,317 +8859,439 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.KTModal = void 0;
+exports.KTPinInput = void 0;
 var data_1 = __webpack_require__(/*! ../../helpers/data */ "./src/helpers/data.ts");
-var dom_1 = __webpack_require__(/*! ../../helpers/dom */ "./src/helpers/dom.ts");
-var event_handler_1 = __webpack_require__(/*! ../../helpers/event-handler */ "./src/helpers/event-handler.ts");
-var utils_1 = __webpack_require__(/*! ../../helpers/utils */ "./src/helpers/utils.ts");
 var component_1 = __webpack_require__(/*! ../component */ "./src/components/component.ts");
-var KTModal = /** @class */ (function (_super) {
-    __extends(KTModal, _super);
-    function KTModal(element, config) {
+var ITEM_SELECTOR = '[data-kt-pin-input-item]';
+var KTPinInput = /** @class */ (function (_super) {
+    __extends(KTPinInput, _super);
+    function KTPinInput(element, config) {
+        if (config === void 0) { config = null; }
         var _this = _super.call(this) || this;
-        _this._name = 'modal';
+        _this._name = 'pin-input';
         _this._defaultConfig = {
-            zindex: '90',
-            backdrop: true,
-            backdropClass: 'kt-modal-backdrop',
-            backdropStatic: false,
-            keyboard: true,
-            disableScroll: true,
-            persistent: false,
-            focus: true,
-            hiddenClass: 'hidden',
+            lazy: false,
+            availableChars: '[0-9]',
+            name: '',
         };
-        _this._config = _this._defaultConfig;
-        _this._isOpen = false;
-        _this._isTransitioning = false;
-        _this._backdropElement = null;
-        _this._targetElement = null;
-        if (data_1.default.has(element, _this._name))
+        _this._config = _this
+            ._defaultConfig;
+        _this._cells = [];
+        _this._hiddenInput = null;
+        _this._charRegex = null;
+        _this._wasComplete = false;
+        _this._onKeydownBound = function (e) { return _this._onKeydown(e); };
+        _this._onBeforeInputBound = function (e) { return _this._onBeforeInput(e); };
+        _this._onInputBound = function (e) { return _this._onInput(e); };
+        _this._onPasteBound = function (e) { return _this._onPaste(e); };
+        var cells = KTPinInput.collectItems(element);
+        if (cells.length === 0) {
+            return _this;
+        }
+        if (_this._shouldSkipInit(element)) {
             return _this;
+        }
+        _this._cells = cells;
         _this._init(element);
         _this._buildConfig(config);
-        _this._handlers();
+        _this._compileRegex();
+        _this._ensureHiddenInput();
+        _this._prepareCells();
+        var el = _this._element;
+        if (el) {
+            el.addEventListener('keydown', _this._onKeydownBound, true);
+            el.addEventListener('beforeinput', _this._onBeforeInputBound, true);
+            el.addEventListener('input', _this._onInputBound, true);
+            el.addEventListener('paste', _this._onPasteBound, true);
+        }
+        _this._syncFromDom(undefined, { silent: true });
         return _this;
     }
-    KTModal.prototype._handlers = function () {
-        var _this = this;
-        this._element.addEventListener('click', function (event) {
-            var target = event.target;
-            var currentTarget = event.currentTarget;
-            // Only proceed if clicking directly on the backdrop (modal element itself)
-            // This prevents closing when clicking inside modal content or any child elements
-            // (including dropdowns rendered via dropdownContainer pointing to modal)
-            if (target !== currentTarget) {
-                // Stop propagation for clicks inside dropdowns to prevent dropdown from closing
-                // Check if click is inside a dropdown element (KT Select dropdown)
-                var dropdownElement = target.closest('[data-kt-select-dropdown]');
-                if (dropdownElement) {
-                    event.stopPropagation();
-                }
-                return;
-            }
-            // Only hide if both backdropStatic is false AND persistent is false
-            if (_this._getOption('backdropStatic') === false &&
-                utils_1.default.stringToBoolean(_this._getOption('persistent')) === false) {
-                _this._hide();
+    KTPinInput.collectItems = function (root) {
+        return Array.from(root.querySelectorAll(ITEM_SELECTOR)).filter(function (el) { return root.contains(el); });
+    };
+    KTPinInput.prototype._compileRegex = function () {
+        var raw = this._getOption('availableChars');
+        var pattern = typeof raw === 'string' && raw.trim() !== '' ? raw.trim() : '[0-9]';
+        try {
+            this._charRegex = new RegExp(pattern);
+        }
+        catch (_a) {
+            this._charRegex = /[0-9]/;
+        }
+    };
+    KTPinInput.prototype._isValidChar = function (char) {
+        var _a;
+        return Boolean(char && ((_a = this._charRegex) === null || _a === void 0 ? void 0 : _a.test(char)));
+    };
+    KTPinInput.prototype._enabledCells = function () {
+        return this._cells.filter(function (c) { return !c.disabled; });
+    };
+    KTPinInput.prototype._prepareCells = function () {
+        for (var _i = 0, _a = this._cells; _i < _a.length; _i++) {
+            var cell = _a[_i];
+            cell.maxLength = 1;
+            cell.setAttribute('maxlength', '1');
+        }
+    };
+    KTPinInput.prototype._activeCell = function (target) {
+        if (!(target instanceof HTMLInputElement)) {
+            return null;
+        }
+        if (!this._cells.includes(target) || target.disabled) {
+            return null;
+        }
+        return target;
+    };
+    KTPinInput.prototype._cellIndex = function (cell) {
+        return this._cells.indexOf(cell);
+    };
+    KTPinInput.prototype._focusNextEnabled = function (afterCell) {
+        var enabled = this._enabledCells();
+        var idx = enabled.indexOf(afterCell);
+        if (idx < 0 || idx >= enabled.length - 1) {
+            return;
+        }
+        var next = enabled[idx + 1];
+        next.focus();
+        next.select();
+    };
+    KTPinInput.prototype._fillCellAndAdvance = function (cell, char) {
+        cell.value = char;
+        this._syncFromDom(this._cellIndex(cell));
+        this._focusNextEnabled(cell);
+    };
+    KTPinInput.prototype._routeCharFromCell = function (target, char) {
+        var _a, _b;
+        var start = (_a = target.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        var end = (_b = target.selectionEnd) !== null && _b !== void 0 ? _b : 0;
+        var v = target.value;
+        var replacing = end > start;
+        var atEnd = start === end && start === v.length;
+        if (v.length >= 1 && !replacing && atEnd) {
+            var enabled = this._enabledCells();
+            var idx = enabled.indexOf(target);
+            if (idx >= 0 && idx < enabled.length - 1) {
+                this._fillCellAndAdvance(enabled[idx + 1], char);
             }
-        });
+            return;
+        }
+        this._fillCellAndAdvance(target, char);
     };
-    KTModal.prototype._toggle = function (targetElement) {
-        var payload = { cancel: false };
-        this._fireEvent('toggle', payload);
-        this._dispatchEvent('toggle', payload);
-        if (payload.cancel === true) {
+    KTPinInput.prototype._ensureHiddenInput = function () {
+        var raw = this._getOption('name');
+        var name = typeof raw === 'string' ? raw.trim() : '';
+        if (!name || !this._element) {
+            this._hiddenInput = null;
             return;
         }
-        if (this._isOpen === true) {
-            this._hide();
+        var h = this._element.querySelector('input[type="hidden"][data-kt-pin-input-hidden]');
+        if (!h) {
+            h = document.createElement('input');
+            h.type = 'hidden';
+            h.name = name;
+            h.setAttribute('data-kt-pin-input-hidden', 'true');
+            this._element.appendChild(h);
+        }
+        this._hiddenInput = h;
+    };
+    KTPinInput.prototype._focusCell = function (index, select) {
+        if (select === void 0) { select = true; }
+        var enabled = this._enabledCells();
+        var target = enabled[index];
+        if (!target) {
+            return;
         }
-        else {
-            this._show(targetElement);
+        target.focus();
+        if (select) {
+            target.select();
         }
     };
-    KTModal.prototype._show = function (targetElement) {
-        var _this = this;
-        if (this._isOpen || this._isTransitioning) {
+    KTPinInput.prototype._focusRelative = function (cell, delta) {
+        var enabled = this._enabledCells();
+        var idx = enabled.indexOf(cell);
+        if (idx < 0) {
             return;
         }
-        if (targetElement)
-            this._targetElement = targetElement;
-        var payload = { cancel: false };
-        this._fireEvent('show', payload);
-        this._dispatchEvent('show', payload);
-        if (payload.cancel === true) {
+        var next = idx + delta;
+        if (next >= 0 && next < enabled.length) {
+            enabled[next].focus();
+            enabled[next].select();
+        }
+    };
+    KTPinInput.prototype._filterString = function (str) {
+        var out = '';
+        for (var i = 0; i < str.length; i++) {
+            var ch = str[i];
+            if (this._isValidChar(ch)) {
+                out += ch;
+            }
+        }
+        return out;
+    };
+    KTPinInput.prototype._buildPayload = function (cellIndex) {
+        var value = this.getValue();
+        var enabled = this._enabledCells();
+        var filled = enabled.filter(function (c) { return Boolean(c.value); }).length;
+        var complete = enabled.length > 0 && filled === enabled.length;
+        return __assign({ value: value, complete: complete, cellCount: enabled.length, filledCount: filled }, (cellIndex !== undefined ? { cellIndex: cellIndex } : {}));
+    };
+    KTPinInput.prototype._emit = function (payload) {
+        this._fireEvent('input', payload);
+        this._dispatchEvent('kt.pin-input.input', payload);
+        this._dispatchEvent('kt.pin-input.change', payload);
+        if (payload.complete && !this._wasComplete) {
+            this._dispatchEvent('kt.pin-input.complete', payload);
+        }
+        this._wasComplete = payload.complete;
+    };
+    KTPinInput.prototype._syncHidden = function (value) {
+        if (this._hiddenInput) {
+            this._hiddenInput.value = value;
+        }
+    };
+    KTPinInput.prototype._syncFromDom = function (cellIndex, opts) {
+        var payload = this._buildPayload(cellIndex);
+        this._syncHidden(payload.value);
+        if (opts === null || opts === void 0 ? void 0 : opts.silent) {
+            this._wasComplete = payload.complete;
             return;
         }
-        KTModal.hide();
-        if (!this._element)
+        this._emit(payload);
+    };
+    KTPinInput.prototype._onKeydown = function (e) {
+        var target = this._activeCell(e.target);
+        if (!target) {
             return;
-        this._isTransitioning = true;
-        this._element.setAttribute('role', 'dialog');
-        this._element.setAttribute('aria-modal', 'true');
-        this._element.setAttribute('tabindex', '-1');
-        this._setZindex();
-        if (this._getOption('backdrop') === true)
-            this._createBackdrop();
-        if (this._getOption('disableScroll')) {
-            document.body.style.overflow = 'hidden';
         }
-        this._element.style.display = 'block';
-        dom_1.default.reflow(this._element);
-        this._element.classList.add('open');
-        this._element.classList.remove(this._getOption('hiddenClass'));
-        dom_1.default.transitionEnd(this._element, function () {
-            _this._isTransitioning = false;
-            _this._isOpen = true;
-            if (_this._getOption('focus') === true) {
-                _this._autoFocus();
+        if (e.key === 'Backspace') {
+            e.preventDefault();
+            if (target.value) {
+                target.value = '';
+                this._syncFromDom(this._cellIndex(target));
             }
-            _this._fireEvent('shown');
-            _this._dispatchEvent('shown');
-        });
+            else {
+                this._focusRelative(target, -1);
+            }
+            return;
+        }
+        if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            this._focusRelative(target, -1);
+            return;
+        }
+        if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            this._focusRelative(target, 1);
+            return;
+        }
+        if (e.key === 'Home') {
+            e.preventDefault();
+            this._focusCell(0);
+            return;
+        }
+        if (e.key === 'End') {
+            e.preventDefault();
+            this._focusCell(this._enabledCells().length - 1);
+            return;
+        }
+        if (e.ctrlKey || e.metaKey || e.altKey) {
+            return;
+        }
+        if (e.key.length === 1) {
+            if (!this._isValidChar(e.key)) {
+                e.preventDefault();
+                return;
+            }
+            e.preventDefault();
+            this._routeCharFromCell(target, e.key);
+        }
     };
-    KTModal.prototype._hide = function () {
-        var _this = this;
-        if (!this._element)
+    KTPinInput.prototype._onBeforeInput = function (e) {
+        var _a, _b;
+        if (!('inputType' in e)) {
             return;
-        if (this._isOpen === false || this._isTransitioning) {
+        }
+        var ie = e;
+        if (ie.isComposing) {
             return;
         }
-        var payload = { cancel: false };
-        this._fireEvent('hide', payload);
-        this._dispatchEvent('hide', payload);
-        if (payload.cancel === true) {
+        var target = this._activeCell(ie.target);
+        if (!target) {
             return;
         }
-        this._isTransitioning = true;
-        this._element.removeAttribute('role');
-        this._element.removeAttribute('aria-modal');
-        this._element.removeAttribute('tabindex');
-        if (this._getOption('disableScroll')) {
-            document.body.style.overflow = '';
+        if (ie.inputType === 'insertFromPaste' ||
+            ie.inputType === 'insertFromYank') {
+            e.preventDefault();
+            return;
+        }
+        if (ie.inputType !== 'insertText' || ie.data == null) {
+            return;
         }
-        dom_1.default.reflow(this._element);
-        this._element.classList.remove('open');
-        if (this._getOption('backdrop') === true) {
-            this._deleteBackdrop();
+        var data = ie.data;
+        if (data.length > 1) {
+            e.preventDefault();
+            var filtered = this._filterString(data);
+            if (filtered.length) {
+                this._distributeFromIndex(this._cellIndex(target), filtered);
+            }
+            return;
         }
-        dom_1.default.transitionEnd(this._element, function () {
-            if (!_this._element)
-                return;
-            _this._isTransitioning = false;
-            _this._isOpen = false;
-            _this._element.style.display = '';
-            _this._element.classList.add(_this._getOption('hiddenClass'));
-            _this._fireEvent('hidden');
-            _this._dispatchEvent('hidden');
-        });
-    };
-    KTModal.prototype._setZindex = function () {
-        var zindex = parseInt(this._getOption('zindex'));
-        if (parseInt(dom_1.default.getCssProp(this._element, 'z-index')) > zindex) {
-            zindex = parseInt(dom_1.default.getCssProp(this._element, 'z-index'));
+        if (data.length !== 1) {
+            return;
         }
-        if (dom_1.default.getHighestZindex(this._element) > zindex) {
-            zindex = dom_1.default.getHighestZindex(this._element) + 1;
+        if (!this._isValidChar(data)) {
+            e.preventDefault();
+            return;
+        }
+        var start = (_a = target.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        var end = (_b = target.selectionEnd) !== null && _b !== void 0 ? _b : 0;
+        var v = target.value;
+        var replacing = end > start;
+        var nextLen = replacing ? v.length - (end - start) + 1 : v.length + 1;
+        if (nextLen > 1 && !replacing) {
+            e.preventDefault();
+            this._routeCharFromCell(target, data);
         }
-        this._element.style.zIndex = String(zindex);
     };
-    KTModal.prototype._autoFocus = function () {
-        if (!this._element)
+    KTPinInput.prototype._onInput = function (e) {
+        var target = this._activeCell(e.target);
+        if (!target) {
             return;
-        var input = this._element.querySelector('[data-kt-modal-input-focus]');
-        if (!input)
+        }
+        var v = target.value;
+        if (v.length > 1) {
+            var filtered = this._filterString(v);
+            target.value = '';
+            if (filtered.length) {
+                this._distributeFromIndex(this._cellIndex(target), filtered);
+            }
+            else {
+                this._syncFromDom(this._cellIndex(target));
+            }
             return;
-        else
-            input.focus();
-    };
-    KTModal.prototype._createBackdrop = function () {
-        if (!this._element)
+        }
+        if (v.length === 1 && !this._isValidChar(v)) {
+            target.value = '';
+            this._syncFromDom(this._cellIndex(target));
             return;
-        var zindex = parseInt(dom_1.default.getCssProp(this._element, 'z-index'));
-        this._backdropElement = document.createElement('DIV');
-        this._backdropElement.setAttribute('data-kt-modal-backdrop', 'true');
-        this._backdropElement.style.zIndex = (zindex - 1).toString();
-        document.body.append(this._backdropElement);
-        dom_1.default.reflow(this._backdropElement);
-        dom_1.default.addClass(this._backdropElement, this._getOption('backdropClass'));
+        }
+        this._syncFromDom(this._cellIndex(target));
+        if (v.length === 1) {
+            this._focusNextEnabled(target);
+        }
     };
-    KTModal.prototype._deleteBackdrop = function () {
-        var _this = this;
-        if (!this._backdropElement)
+    KTPinInput.prototype._onPaste = function (e) {
+        var _a;
+        var target = this._activeCell(e.target);
+        if (!target) {
             return;
-        dom_1.default.reflow(this._backdropElement);
-        this._backdropElement.style.opacity = '0';
-        dom_1.default.transitionEnd(this._backdropElement, function () {
-            if (!_this._backdropElement)
-                return;
-            dom_1.default.remove(_this._backdropElement);
-        });
-    };
-    KTModal.prototype.toggle = function (targetElement) {
-        return this._toggle(targetElement);
-    };
-    KTModal.prototype.show = function (targetElement) {
-        return this._show(targetElement);
+        }
+        e.preventDefault();
+        var text = ((_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) || '';
+        var filtered = this._filterString(text);
+        this._distributeFromIndex(this._cellIndex(target), filtered);
     };
-    KTModal.prototype.hide = function () {
-        return this._hide();
+    KTPinInput.prototype._distributeFromIndex = function (startCellIndex, chars) {
+        if (chars.length === 0) {
+            return;
+        }
+        var startCell = this._cells[startCellIndex];
+        if (!startCell || startCell.disabled) {
+            return;
+        }
+        var enabled = this._enabledCells();
+        var startIdx = enabled.indexOf(startCell);
+        if (startIdx < 0) {
+            return;
+        }
+        var charPos = 0;
+        for (var i = startIdx; i < enabled.length && charPos < chars.length; i++) {
+            enabled[i].value = chars[charPos];
+            charPos++;
+        }
+        if (charPos > 0) {
+            var lastIdx = Math.min(startIdx + charPos - 1, enabled.length - 1);
+            enabled[lastIdx].focus();
+            enabled[lastIdx].select();
+        }
+        this._syncFromDom(startCellIndex);
     };
-    KTModal.prototype.getTargetElement = function () {
-        return this._targetElement;
+    KTPinInput.prototype.getValue = function () {
+        return this._cells.map(function (c) { return (c.disabled ? '' : c.value || ''); }).join('');
     };
-    KTModal.prototype.isOpen = function () {
-        return this._isOpen;
+    KTPinInput.prototype.setValue = function (value) {
+        var _a;
+        var enabled = this._enabledCells();
+        var filtered = this._filterString(typeof value === 'string' ? value : '');
+        for (var i = 0; i < enabled.length; i++) {
+            enabled[i].value = (_a = filtered[i]) !== null && _a !== void 0 ? _a : '';
+        }
+        this._syncFromDom(0);
+    };
+    KTPinInput.prototype.dispose = function () {
+        var el = this._element;
+        if (el) {
+            el.removeEventListener('keydown', this._onKeydownBound, true);
+            el.removeEventListener('beforeinput', this._onBeforeInputBound, true);
+            el.removeEventListener('input', this._onInputBound, true);
+            el.removeEventListener('paste', this._onPasteBound, true);
+        }
+        this._cells = [];
+        this._hiddenInput = null;
+        this._charRegex = null;
+        _super.prototype.dispose.call(this);
     };
-    KTModal.getInstance = function (element) {
-        if (!element)
+    KTPinInput.getInstance = function (element) {
+        if (!element) {
             return null;
-        if (data_1.default.has(element, 'modal')) {
-            return data_1.default.get(element, 'modal');
         }
-        if (element.getAttribute('data-kt-modal')) {
-            return new KTModal(element);
+        if (data_1.default.has(element, 'pin-input')) {
+            return data_1.default.get(element, 'pin-input');
         }
         return null;
     };
-    KTModal.getOrCreateInstance = function (element, config) {
-        return this.getInstance(element) || new KTModal(element, config);
-    };
-    KTModal.hide = function () {
-        var elements = document.querySelectorAll('[data-kt-modal-initialized]');
-        elements.forEach(function (element) {
-            var modal = KTModal.getInstance(element);
-            if (modal && modal.isOpen()) {
-                modal.hide();
-            }
-        });
-    };
-    KTModal.handleToggle = function () {
-        event_handler_1.default.on(document.body, '[data-kt-modal-toggle]', 'click', function (event, target) {
-            event.stopPropagation();
-            var selector = target.getAttribute('data-kt-modal-toggle');
-            if (!selector)
-                return;
-            var modalElement = document.querySelector(selector);
-            var modal = KTModal.getInstance(modalElement);
-            if (modal) {
-                modal.toggle(target);
-            }
-        });
-    };
-    KTModal.handleDismiss = function () {
-        event_handler_1.default.on(document.body, '[data-kt-modal-dismiss]', 'click', function (event, target) {
-            event.stopPropagation();
-            var modalElement = target.closest('[data-kt-modal-initialized]');
-            if (modalElement) {
-                var modal = KTModal.getInstance(modalElement);
-                if (modal) {
-                    modal.hide();
-                }
-            }
-        });
-    };
-    KTModal.handleClickAway = function () {
-        document.addEventListener('click', function (event) {
-            var modalElement = document.querySelector('.open[data-kt-modal-initialized]');
-            if (!modalElement)
-                return;
-            var modal = KTModal.getInstance(modalElement);
-            if (!modal)
-                return;
-            if (utils_1.default.stringToBoolean(modal.getOption('persistent')) === true)
-                return;
-            if (utils_1.default.stringToBoolean(modal.getOption('backdrop')) === true)
-                return;
-            if (modalElement !== event.target &&
-                modal.getTargetElement() !== event.target &&
-                modalElement.contains(event.target) === false) {
-                modal.hide();
-            }
-        });
+    KTPinInput.getOrCreateInstance = function (element, config) {
+        var existing = this.getInstance(element);
+        if (existing) {
+            return existing;
+        }
+        if (this.collectItems(element).length === 0) {
+            return null;
+        }
+        new KTPinInput(element, config !== null && config !== void 0 ? config : undefined);
+        return this.getInstance(element);
     };
-    KTModal.handleKeyword = function () {
-        document.addEventListener('keydown', function (event) {
-            var modalElement = document.querySelector('.open[data-kt-modal-initialized]');
-            var modal = KTModal.getInstance(modalElement);
-            if (!modal) {
-                return;
-            }
-            // if esc key was not pressed in combination with ctrl or alt or shift
-            if (event.key === 'Escape' &&
-                !(event.ctrlKey || event.altKey || event.shiftKey)) {
-                modal.hide();
-            }
-            if (event.code === 'Tab' && !event.metaKey) {
+    KTPinInput.createInstances = function () {
+        document
+            .querySelectorAll('[data-kt-pin-input]')
+            .forEach(function (el) {
+            if (el.getAttribute('data-kt-pin-input-lazy') === 'true') {
                 return;
             }
+            new KTPinInput(el);
         });
     };
-    KTModal.createInstances = function () {
-        var elements = document.querySelectorAll('[data-kt-modal]');
-        elements.forEach(function (element) {
-            new KTModal(element);
-        });
-    };
-    KTModal.init = function () {
-        KTModal.createInstances();
-        if (window.KT_MODAL_INITIALIZED !== true) {
-            KTModal.handleToggle();
-            KTModal.handleDismiss();
-            KTModal.handleClickAway();
-            KTModal.handleKeyword();
-            window.KT_MODAL_INITIALIZED = true;
-        }
+    KTPinInput.init = function () {
+        KTPinInput.createInstances();
     };
-    return KTModal;
+    return KTPinInput;
 }(component_1.default));
-exports.KTModal = KTModal;
+exports.KTPinInput = KTPinInput;
 if (typeof window !== 'undefined') {
-    window.KTModal = KTModal;
+    window.KTPinInput = KTPinInput;
 }
 
 
@@ -9556,6 +10845,7 @@ var templates_1 = __webpack_require__(/*! ./templates */ "./src/components/selec
 var KTSelectCombobox = /** @class */ (function () {
     function KTSelectCombobox(select) {
         var _this = this;
+        var _a;
         this._select = select;
         this._config = select.getConfig();
         var displayElement = select.getDisplayElement(); // KTSelect's main display element for combobox
@@ -9565,7 +10855,8 @@ var KTSelectCombobox = /** @class */ (function () {
         this._boundInputHandler = this._handleComboboxInput.bind(this);
         this._boundClearHandler = this._handleClearButtonClick.bind(this);
         this._attachEventListeners();
-        this._select.getElement().addEventListener('dropdown.close', function () {
+        (_a = this._select.getElement()) === null || _a === void 0 ? void 0 : _a.addEventListener('dropdown.close', function () {
+            var _a, _b;
             // When dropdown closes, if not multi-select and not using displayTemplate,
             // ensure input shows the selected value or placeholder.
             if (!_this._config.multiple && !_this._config.displayTemplate) {
@@ -9573,9 +10864,11 @@ var KTSelectCombobox = /** @class */ (function () {
             }
             else {
                 // For tags or displayTemplate, the input should be clear for typing.
-                _this._searchInputElement.value = '';
+                if (_this._searchInputElement) {
+                    _this._searchInputElement.value = '';
+                }
             }
-            _this._toggleClearButtonVisibility(_this._searchInputElement.value);
+            _this._toggleClearButtonVisibility((_b = (_a = _this._searchInputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '');
             // this._select.showAllOptions(); // showAllOptions might be too broad, filtering is managed by typing.
         });
     }
@@ -9630,8 +10923,11 @@ var KTSelectCombobox = /** @class */ (function () {
      * Handle clear button click
      */
     KTSelectCombobox.prototype._handleClearButtonClick = function (event) {
+        var _a;
         event.preventDefault();
         event.stopPropagation();
+        if (!this._searchInputElement)
+            return;
         this._searchInputElement.value = '';
         this._toggleClearButtonVisibility('');
         if (this._valuesContainerElement) {
@@ -9640,7 +10936,7 @@ var KTSelectCombobox = /** @class */ (function () {
         this._select.clearSelection(); // This will also trigger updateSelectedOptionDisplay
         this._select.showAllOptions(); // Show all options after clearing
         this._select.openDropdown();
-        this._searchInputElement.focus();
+        (_a = this._searchInputElement) === null || _a === void 0 ? void 0 : _a.focus();
     };
     /**
      * Toggle clear button visibility based on input value and selection state.
@@ -9671,13 +10967,15 @@ var KTSelectCombobox = /** @class */ (function () {
         // or the main FocusManager should adjust focus if needed.
         // For combobox, this filtering is the primary search mechanism.
         // We might need to tell select's focus manager to focus first option.
-        this._select._focusManager.focusFirst(); // Consider if this is always right
+        var focusManager = this._select._focusManager;
+        focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusFirst();
     };
     /**
      * Updates the combobox display (input field or values container) based on selection.
      */
     KTSelectCombobox.prototype.updateDisplay = function (selectedOptions) {
         var _this = this;
+        var _a;
         if (!this._searchInputElement)
             return;
         // Always clear the values container first if it exists
@@ -9685,15 +10983,17 @@ var KTSelectCombobox = /** @class */ (function () {
             this._valuesContainerElement.innerHTML = '';
         }
         if (this._config.tags && this._valuesContainerElement) {
+            var valuesContainer_1 = this._valuesContainerElement;
+            var selectElement_1 = this._select.getElement();
+            if (!selectElement_1)
+                return;
             // Combobox + Tags
             selectedOptions.forEach(function (value) {
                 // Ensure value is properly escaped for querySelector
-                var optionElement = _this._select
-                    .getElement()
-                    .querySelector("option[value=\"".concat(CSS.escape(value), "\"]"));
+                var optionElement = selectElement_1.querySelector("option[value=\"".concat(CSS.escape(value), "\"]"));
                 if (optionElement) {
                     var tagElement = templates_1.defaultTemplates.tag(optionElement, _this._config);
-                    _this._valuesContainerElement.appendChild(tagElement);
+                    valuesContainer_1.appendChild(tagElement);
                 }
             });
             this._searchInputElement.value = ''; // Input field is for typing new searches
@@ -9717,9 +11017,9 @@ var KTSelectCombobox = /** @class */ (function () {
             // For simplicity, join text. A proper tag implementation would be more complex here.
             this._valuesContainerElement.innerHTML = selectedOptions
                 .map(function (value) {
-                var optionEl = _this._select
-                    .getElement()
-                    .querySelector("option[value=\"".concat(CSS.escape(value), "\"]"));
+                var _a;
+                var optionEl = (_a = _this._select
+                    .getElement()) === null || _a === void 0 ? void 0 : _a.querySelector("option[value=\"".concat(CSS.escape(value), "\"]"));
                 return optionEl ? optionEl.textContent : '';
             })
                 .join(', '); // Basic comma separation
@@ -9732,9 +11032,8 @@ var KTSelectCombobox = /** @class */ (function () {
         else if (!this._config.multiple && selectedOptions.length > 0) {
             // Single select combobox: display selected option's text in the input
             var selectedValue = selectedOptions[0];
-            var optionElement = this._select
-                .getElement()
-                .querySelector("option[value=\"".concat(CSS.escape(selectedValue), "\"]"));
+            var optionElement = (_a = this._select
+                .getElement()) === null || _a === void 0 ? void 0 : _a.querySelector("option[value=\"".concat(CSS.escape(selectedValue), "\"]"));
             this._searchInputElement.value = optionElement
                 ? optionElement.textContent || ''
                 : '';
@@ -9804,15 +11103,15 @@ exports.DefaultConfig = {
     // Data Handling
     items: [], // Static list of options
     isLoading: false, // Indicates if options are being loaded asynchronously
-    onFetch: null, // Callback function to fetch options asynchronously
+    onFetch: undefined, // Callback function to fetch options asynchronously
     // Remote Data Configuration
     remote: false, // Enable/disable remote data fetching
-    dataUrl: null, // URL to fetch options from
-    apiDataProperty: null, // Property in the response object that contains the options
+    dataUrl: undefined, // URL to fetch options from
+    apiDataProperty: undefined, // Property in the response object that contains the options
     remoteErrorMessage: 'Failed to load data', // Error message to display if remote data fetch fails
     // Field Mapping
-    dataValueField: null, // Property in the option object that contains the value (default: 'id')
-    dataFieldText: null, // Property in the option object that contains the text (default: 'title')
+    dataValueField: undefined, // Property in the option object that contains the value (default: 'id')
+    dataFieldText: undefined, // Property in the option object that contains the text (default: 'title')
     // Search Configuration
     searchParam: '', // Query parameter for API search requests
     searchDebounce: 300, // Debounce delay for search (in ms)
@@ -9842,17 +11141,17 @@ exports.DefaultConfig = {
     clearAllText: 'Clear all', // Text for the "Clear All" option (if implemented)
     enableSelectAll: false, // Enable/disable "Select All" button for multi-select
     showSelectedCount: true, // Show the number of selected options in multi-select mode
-    renderSelected: null, // Custom function to render the selected value(s) in the display area
+    renderSelected: undefined, // Custom function to render the selected value(s) in the display area
     // Accessibility & Usability
     label: 'Select an option', // Label for the select component (for screen readers)
     height: 250, // Maximum height of the dropdown menu in pixels (if exceeded, a scrollbar will appear)
     // Dropdown Configuration
     dropdownZindex: 105, // Initial z-index value for the dropdown
     dropdownContainer: null, // Container element for the dropdown
-    dropdownPlacement: null,
+    dropdownPlacement: undefined,
     dropdownFlip: false,
     dropdownPreventOverflow: false,
-    dropdownStrategy: null,
+    dropdownStrategy: undefined,
     dropdownWidth: null, // Custom width for dropdown (e.g., '300px'), null to match toggle element width
     closeOnOtherOpen: true, // Close other open dropdowns when this one opens
     dispatchGlobalEvents: true, // Dispatch events on document for global listeners (jQuery compatibility)
@@ -9865,7 +11164,8 @@ var KTSelectState = /** @class */ (function () {
         this._config = this._initDefaultConfig(config);
     }
     KTSelectState.prototype._initDefaultConfig = function (config) {
-        return __assign(__assign(__assign({}, exports.DefaultConfig), config), config.config);
+        var resolvedConfig = config !== null && config !== void 0 ? config : {};
+        return __assign(__assign(__assign({}, exports.DefaultConfig), resolvedConfig), resolvedConfig.config);
     };
     KTSelectState.prototype.setItems = function (items, query) {
         var _this = this;
@@ -10482,10 +11782,13 @@ var KTSelectOption = /** @class */ (function (_super) {
         _this._dataOptionPrefix = 'kt-'; // Use 'kt-' prefix to support data-kt-select-option attributes
         // Always initialize a new option instance
         _this._init(element);
-        _this._globalConfig = config;
+        _this._globalConfig = (config !== null && config !== void 0 ? config : {});
         _this._buildConfig();
         // Clean the config
-        _this._config = _this._config[''] || {};
+        var configRecord = _this._config;
+        _this._config =
+            configRecord[''] ||
+                {};
         // Add the option config to the global config
         // Ensure optionsConfig is initialized
         if (_this._globalConfig) {
@@ -10502,9 +11805,12 @@ var KTSelectOption = /** @class */ (function (_super) {
         }
         // Don't store in KTData to avoid Singleton pattern issues
         // Each option should be a unique instance
-        element.instance = _this;
+        _this._elementWithInstance().instance = _this;
         return _this;
     }
+    KTSelectOption.prototype._elementWithInstance = function () {
+        return this._element;
+    };
     Object.defineProperty(KTSelectOption.prototype, "id", {
         get: function () {
             return this.getHTMLOptionElement().value;
@@ -10582,6 +11888,9 @@ var KTSelectRemote = /** @class */ (function () {
         this._config = config;
         this._element = element || null;
     }
+    KTSelectRemote.prototype._isRecord = function (value) {
+        return typeof value === 'object' && value !== null;
+    };
     /**
      * Fetch data from remote URL
      * @param query Optional search query
@@ -10684,18 +11993,21 @@ var KTSelectRemote = /** @class */ (function () {
         var _this = this;
         try {
             var processedData = data;
+            var dataRecord = this._isRecord(data) ? data : null;
             // Extract data from the API property if specified
-            if (this._config.apiDataProperty && data[this._config.apiDataProperty]) {
+            if (this._config.apiDataProperty &&
+                dataRecord &&
+                this._config.apiDataProperty in dataRecord) {
                 // If pagination metadata is available, extract it
                 if (this._config.pagination) {
-                    if (data.total_pages) {
-                        this._totalPages = data.total_pages;
+                    if (typeof dataRecord.total_pages === 'number') {
+                        this._totalPages = dataRecord.total_pages;
                     }
-                    if (data.total) {
-                        this._totalPages = Math.ceil(data.total / (this._config.paginationLimit || 10));
+                    if (typeof dataRecord.total === 'number') {
+                        this._totalPages = Math.ceil(dataRecord.total / (this._config.paginationLimit || 10));
                     }
                 }
-                processedData = data[this._config.apiDataProperty];
+                processedData = dataRecord[this._config.apiDataProperty];
             }
             // Ensure data is an array
             if (!Array.isArray(processedData)) {
@@ -10778,13 +12090,14 @@ var KTSelectRemote = /** @class */ (function () {
         };
         // Get ID and ensure it's a string
         var id = getValue(item, valueField);
+        var itemRecord = this._isRecord(item) ? item : {};
         if (id === null || id === undefined) {
             // Try common fallback fields for ID
             var fallbackFields = ['id', 'value', 'key', 'pk'];
             for (var _i = 0, fallbackFields_1 = fallbackFields; _i < fallbackFields_1.length; _i++) {
                 var field = fallbackFields_1[_i];
-                if (item[field] !== null && item[field] !== undefined) {
-                    id = String(item[field]);
+                if (itemRecord[field] !== null && itemRecord[field] !== undefined) {
+                    id = String(itemRecord[field]);
                     break;
                 }
             }
@@ -10810,8 +12123,8 @@ var KTSelectRemote = /** @class */ (function () {
             ];
             for (var _a = 0, fallbackFields_2 = fallbackFields; _a < fallbackFields_2.length; _a++) {
                 var field = fallbackFields_2[_a];
-                if (item[field] !== null && item[field] !== undefined) {
-                    title = String(item[field]);
+                if (itemRecord[field] !== null && itemRecord[field] !== undefined) {
+                    title = String(itemRecord[field]);
                     break;
                 }
             }
@@ -10825,10 +12138,10 @@ var KTSelectRemote = /** @class */ (function () {
         }
         // Create the option object with consistent structure
         var result = {
-            id: id,
-            title: title,
-            selected: Boolean(item.selected),
-            disabled: Boolean(item.disabled),
+            id: String(id),
+            title: String(title),
+            selected: Boolean(itemRecord.selected),
+            disabled: Boolean(itemRecord.disabled),
         };
         return result;
     };
@@ -10924,6 +12237,7 @@ var KTSelectSearch = /** @class */ (function () {
     }
     KTSelectSearch.prototype.init = function () {
         var _this = this;
+        var _a, _b, _c, _d, _e;
         if (this._select.getConfig().enableSearch) {
             this._searchInput = this._select.getSearchInput();
             if (this._searchInput) {
@@ -10937,7 +12251,8 @@ var KTSelectSearch = /** @class */ (function () {
                 this._eventManager.addListener(this._searchInput, 'blur', function () {
                     // Small delay to prevent race conditions with selection
                     setTimeout(function () {
-                        if (!_this._searchInput.value) {
+                        var _a;
+                        if (!((_a = _this._searchInput) === null || _a === void 0 ? void 0 : _a.value)) {
                             _this._resetAllOptions();
                             _this.clearSearch();
                         }
@@ -10946,21 +12261,19 @@ var KTSelectSearch = /** @class */ (function () {
                 // Listen for remote search events to coordinate with remote search functionality
                 if (this._select.getConfig().remote &&
                     this._select.getConfig().searchParam) {
-                    this._select
-                        .getElement()
-                        .addEventListener('remoteSearchStart', function () {
+                    (_a = this._select
+                        .getElement()) === null || _a === void 0 ? void 0 : _a.addEventListener('remoteSearchStart', function () {
                         // Reset focused option when remote search starts
                         _this._focusManager.resetFocus();
                     });
-                    this._select.getElement().addEventListener('remoteSearchEnd', function () {
+                    (_b = this._select.getElement()) === null || _b === void 0 ? void 0 : _b.addEventListener('remoteSearchEnd', function () {
                         // After remote search completes, refresh our option cache
                         _this.refreshOptionCache();
                     });
                 }
                 // Listen for dropdown close to reset options - ATTACH TO WRAPPER
-                this._select
-                    .getWrapperElement()
-                    .addEventListener('dropdown.close', function () {
+                (_c = this._select
+                    .getWrapperElement()) === null || _c === void 0 ? void 0 : _c.addEventListener('dropdown.close', function () {
                     _this._focusManager.resetFocus();
                     var config = _this._select.getConfig();
                     // Clear highlights from current options (always do this)
@@ -10968,7 +12281,9 @@ var KTSelectSearch = /** @class */ (function () {
                     // Respect clearSearchOnClose config option
                     if (config.clearSearchOnClose) {
                         // Clear the search input field
-                        _this._searchInput.value = '';
+                        if (_this._searchInput) {
+                            _this._searchInput.value = '';
+                        }
                         // Reset all options to their original state
                         _this._resetAllOptions();
                         // Clear any "no results" message
@@ -10986,7 +12301,7 @@ var KTSelectSearch = /** @class */ (function () {
                     }
                 });
                 // Clear highlights when an option is selected - ATTACH TO ORIGINAL SELECT (standard 'change' event)
-                this._select.getElement().addEventListener('change', function () {
+                (_d = this._select.getElement()) === null || _d === void 0 ? void 0 : _d.addEventListener('change', function () {
                     _this.clearSearch();
                     // Close dropdown only for single select mode, and only if closeOnEnter is not false
                     // Keep dropdown open for multiple select mode to allow additional selections
@@ -10997,9 +12312,8 @@ var KTSelectSearch = /** @class */ (function () {
                     }
                 });
                 // Consolidated 'dropdown.show' event listener - ATTACH TO WRAPPER
-                this._select
-                    .getWrapperElement()
-                    .addEventListener('dropdown.show', function () {
+                (_e = this._select
+                    .getWrapperElement()) === null || _e === void 0 ? void 0 : _e.addEventListener('dropdown.show', function () {
                     var _a;
                     _this._focusManager.resetFocus(); // Always clear previous focus state
                     if ((_a = _this._searchInput) === null || _a === void 0 ? void 0 : _a.value) {
@@ -11067,7 +12381,7 @@ var KTSelectSearch = /** @class */ (function () {
                     _this._focusSearchInputWithRetry(attempt + 1);
                 }
             }
-            catch (error) {
+            catch (_b) {
                 // Focus failed with error, retry if we haven't exceeded max attempts
                 if (attempt < maxAttempts) {
                     _this._focusSearchInputWithRetry(attempt + 1);
@@ -11087,23 +12401,24 @@ var KTSelectSearch = /** @class */ (function () {
     KTSelectSearch.prototype._handleSearchKeyDown = function (event) {
         var _this = this;
         var _a;
-        var key = event.key;
+        var keyEvent = event;
+        var key = keyEvent.key;
         switch (key) {
             case ' ': // Spacebar
                 // Do nothing, allow space to be typed into the input
                 // Stop propagation to prevent parent handlers from processing this event
-                event.stopPropagation();
+                keyEvent.stopPropagation();
                 break;
             case 'ArrowDown':
-                event.preventDefault();
+                keyEvent.preventDefault();
                 this._focusManager.focusNext();
                 break;
             case 'ArrowUp':
-                event.preventDefault();
+                keyEvent.preventDefault();
                 this._focusManager.focusPrevious();
                 break;
-            case 'Enter':
-                event.preventDefault();
+            case 'Enter': {
+                keyEvent.preventDefault();
                 // Use currently focused option (from arrow keys); only fall back to first if none focused
                 var optionToSelect = (_a = this._focusManager.getFocusedOption()) !== null && _a !== void 0 ? _a : this._focusManager.focusFirst();
                 if (optionToSelect) {
@@ -11129,9 +12444,12 @@ var KTSelectSearch = /** @class */ (function () {
                     }
                 }
                 break;
+            }
             case 'Escape':
-                event.preventDefault();
-                this._searchInput.value = '';
+                keyEvent.preventDefault();
+                if (this._searchInput) {
+                    this._searchInput.value = '';
+                }
                 this.clearSearch();
                 this._resetAllOptions();
                 this._clearNoResultsMessage();
@@ -11179,6 +12497,7 @@ var KTSelectSearch = /** @class */ (function () {
         });
     };
     KTSelectSearch.prototype._handleSearchInput = function (event) {
+        var _a;
         var query = event.target.value;
         var config = this._select.getConfig();
         // Reset focused option when search changes
@@ -11192,8 +12511,9 @@ var KTSelectSearch = /** @class */ (function () {
         }
         // For remote search, KTSelect component handles it.
         // KTSelect will call refreshAfterSearch on this module when remote data is updated.
+        var minLength = (_a = config.searchMinLength) !== null && _a !== void 0 ? _a : 0;
         if (config.remote && config.searchParam) {
-            if (query.length < config.searchMinLength) {
+            if (query.length < minLength) {
                 this._resetAllOptions();
                 this._clearNoResultsMessage();
                 this._focusManager.focusFirst(); // Focus first if query too short
@@ -11201,7 +12521,7 @@ var KTSelectSearch = /** @class */ (function () {
             return;
         }
         // For local search
-        if (query.length >= config.searchMinLength) {
+        if (query.length >= minLength) {
             this._filterOptions(query);
             this._focusManager.focusFirst(); // Focus first visible option after local filtering
         }
@@ -11222,7 +12542,9 @@ var KTSelectSearch = /** @class */ (function () {
         }
         // Restore original content before filtering, so highlighting is applied fresh.
         this._restoreOptionContentsBeforeFilter();
-        var visibleCount = (0, utils_1.filterOptions)(options, query, config, dropdownElement, function (count) { return _this._handleNoResults(count); });
+        (0, utils_1.filterOptions)(options, query, config, dropdownElement, function (count) {
+            return _this._handleNoResults(count);
+        });
         this._select.updateSelectAllButtonState();
     };
     /**
@@ -11444,7 +12766,7 @@ var KTSelect = /** @class */ (function (_super) {
         _this._buildConfig(config);
         _this._state = new config_1.KTSelectState(_this._config);
         _this._config = _this._state.getConfig();
-        element.instance = _this;
+        _this._element.instance = _this;
         // Initialize event manager
         _this._eventManager = new utils_1.EventManager();
         // Initialize remote module if remote data is enabled
@@ -11487,7 +12809,6 @@ var KTSelect = /** @class */ (function (_super) {
         if (config === void 0) { config = {}; }
         if (!this._element)
             return;
-        // Cast to writable to allow assignment (config is readonly but needs initialization)
         this._config = __assign(__assign(__assign(__assign(__assign({}, this._defaultConfig), KTSelect.globalConfig), this._getGlobalConfig()), dom_1.default.getDataAttributes(this._element, this._dataOptionPrefix + this._name)), config);
     };
     /**
@@ -11525,6 +12846,9 @@ var KTSelect = /** @class */ (function (_super) {
             document.dispatchEvent(namespacedEvent);
         }
     };
+    KTSelect.prototype.getElement = function () {
+        return this._element;
+    };
     /**
      * Initialize remote data fetching
      */
@@ -11723,6 +13047,7 @@ var KTSelect = /** @class */ (function (_super) {
      * Helper to show a dropdown message (error, loading, noResults)
      */
     KTSelect.prototype._showDropdownMessage = function (type, message) {
+        var _a;
         if (!this._dropdownContentElement)
             return;
         var optionsContainer = this._dropdownContentElement.querySelector('[data-kt-select-options]');
@@ -11732,7 +13057,7 @@ var KTSelect = /** @class */ (function (_super) {
         optionsContainer.innerHTML = '';
         switch (type) {
             case 'error':
-                optionsContainer.appendChild(templates_1.defaultTemplates.error(__assign(__assign({}, this._config), { errorMessage: message })));
+                optionsContainer.appendChild(templates_1.defaultTemplates.error(__assign(__assign({}, this._config), { errorMessage: (_a = message !== null && message !== void 0 ? message : this._config.remoteErrorMessage) !== null && _a !== void 0 ? _a : 'Failed to load data' })));
                 break;
             case 'loading':
                 optionsContainer.appendChild(templates_1.defaultTemplates.loading(this._config, message || 'Loading...'));
@@ -11927,6 +13252,7 @@ var KTSelect = /** @class */ (function (_super) {
     KTSelect.prototype._createHtmlStructure = function () {
         var _a, _b;
         var _this = this;
+        var _c;
         var options = Array.from(this._element.querySelectorAll('option'));
         // Create wrapper and display elements
         var wrapperElement = templates_1.defaultTemplates.wrapper(this._config);
@@ -11955,7 +13281,7 @@ var KTSelect = /** @class */ (function (_super) {
             this._element.className = ''; // Clear classes from original select element
         }
         // Create an empty dropdown first (without options) using template
-        var dropdownElement = templates_1.defaultTemplates.dropdown(__assign(__assign({}, this._config), { zindex: this._config.dropdownZindex }));
+        var dropdownElement = templates_1.defaultTemplates.dropdown(__assign(__assign({}, this._config), { zindex: (_c = this._config.dropdownZindex) !== null && _c !== void 0 ? _c : undefined }));
         // Add search input if needed
         if (this._config.enableSearch) {
             var searchElement = templates_1.defaultTemplates.search(this._config);
@@ -12130,9 +13456,14 @@ var KTSelect = /** @class */ (function (_super) {
         if (!key || !obj)
             return null;
         // Use reduce to walk through the object by splitting the key on dots
-        var result = key
-            .split('.')
-            .reduce(function (o, k) { return (o && o[k] !== undefined ? o[k] : null); }, obj);
+        var result = key.split('.').reduce(function (o, k) {
+            if (o &&
+                typeof o === 'object' &&
+                o[k] !== undefined) {
+                return o[k];
+            }
+            return null;
+        }, obj);
         return result;
     };
     /**
@@ -12375,7 +13706,7 @@ var KTSelect = /** @class */ (function (_super) {
         var valueDisplayEl = this.getValueDisplayElement();
         // Sync native select value for FormData support
         this._syncNativeSelectValue();
-        if (tagsEnabled) {
+        if (this._config.tags && this._tagsModule) {
             // Tags module will render tags if selectedOptions > 0, or clear them if selectedOptions === 0.
             this._tagsModule.updateTagsDisplay(selectedOptions);
         }
@@ -12551,21 +13882,9 @@ var KTSelect = /** @class */ (function (_super) {
      * Select the currently focused option
      */
     KTSelect.prototype.selectFocusedOption = function () {
-        var _a, _b;
         var focusedOption = this._focusManager.getFocusedOption();
         if (focusedOption) {
             var selectedValue = focusedOption.dataset.value;
-            // Extract just the title text, not including description
-            var selectedText = '';
-            var titleElement = focusedOption.querySelector('[data-kt-option-title]');
-            if (titleElement) {
-                // If it has a structured content with title element
-                selectedText = ((_a = titleElement.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-            }
-            else {
-                // Fallback to the whole text content
-                selectedText = ((_b = focusedOption.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || '';
-            }
             // First trigger the selection to ensure state is updated properly
             if (selectedValue) {
                 this._selectOption(selectedValue);
@@ -12691,13 +14010,12 @@ var KTSelect = /** @class */ (function (_super) {
         var options = Array.from(this._dropdownContentElement.querySelectorAll("[data-kt-select-option]"));
         // Show all options by removing the hidden class and any inline styles
         options.forEach(function (option) {
-            var _a;
             // Remove hidden class
             option.classList.remove('hidden');
             // Clean up any existing inline styles for backward compatibility
             if (option.hasAttribute('style')) {
                 var styleAttr = option.getAttribute('style');
-                if (styleAttr.includes('display:')) {
+                if (styleAttr && styleAttr.includes('display:')) {
                     // If style only contains display property, remove the entire attribute
                     if (styleAttr.trim() === 'display: none;' ||
                         styleAttr.trim() === 'display: block;') {
@@ -12705,7 +14023,7 @@ var KTSelect = /** @class */ (function (_super) {
                     }
                     else {
                         // Otherwise, remove just the display property
-                        option.setAttribute('style', (_a = styleAttr === null || styleAttr === void 0 ? void 0 : styleAttr.replace(/display:\s*[^;]+;?/gi, '')) === null || _a === void 0 ? void 0 : _a.trim());
+                        option.setAttribute('style', styleAttr.replace(/display:\s*[^;]+;?/gi, '').trim());
                     }
                 }
             }
@@ -12810,7 +14128,7 @@ var KTSelect = /** @class */ (function (_super) {
      */
     KTSelect.prototype.dispose = function () {
         // Clean up event listeners
-        this._eventManager.removeAllListeners(null);
+        this._eventManager.removeAllListeners(this._wrapperElement);
         // Dispose modules
         if (this._dropdownModule) {
             this._dropdownModule.dispose();
@@ -13344,7 +14662,6 @@ var KTSelect = /** @class */ (function (_super) {
             return;
         }
         var isOpen = this._dropdownIsOpen;
-        var config = this._config;
         var focusManager = this._focusManager;
         var buffer = this._typeToSearchBuffer;
         // If the event target is the search input, let it handle most typing keys naturally.
@@ -13470,7 +14787,7 @@ var KTSelect = /** @class */ (function (_super) {
             var option = Array.from(_this._options).find(function (opt) { return opt.getAttribute('data-value') === value; });
             if (!option)
                 return '';
-            var displayTemplate = _this._config.displayTemplate;
+            var displayTemplate = _this._config.displayTemplate || '{{text}}';
             var text = option.getAttribute('data-text') || '';
             // Replace all {{varname}} in option.innerHTML with values from _config
             Object.entries(optionsConfig[value] || {}).forEach(function (_a) {
@@ -13589,6 +14906,7 @@ var KTSelect = /** @class */ (function (_super) {
         this._fireEvent('change');
     };
     KTSelect.prototype.updateSelectAllButtonState = function () {
+        var _a, _b;
         if (!this._config.multiple ||
             !this._config.enableSelectAll ||
             !this._selectAllButtonToggle) {
@@ -13597,18 +14915,22 @@ var KTSelect = /** @class */ (function (_super) {
         var visibleOptions = this._focusManager
             .getVisibleOptions()
             .filter(function (opt) { return opt.getAttribute('aria-disabled') !== 'true'; });
+        var selectAllButton = this._selectAllButton;
+        var selectAllButtonToggle = this._selectAllButtonToggle;
+        if (!selectAllButton || !selectAllButtonToggle)
+            return;
         if (visibleOptions.length === 0) {
-            this._selectAllButton.style.display = 'none';
+            selectAllButton.style.display = 'none';
             return;
         }
-        this._selectAllButton.style.display = '';
+        selectAllButton.style.display = '';
         var selectedValues = new Set(this.getSelectedOptions());
         var isAllSelected = visibleOptions.every(function (opt) {
             return selectedValues.has(opt.dataset.value);
         });
-        this._selectAllButtonToggle.textContent = isAllSelected
-            ? this._config.clearAllText
-            : this._config.selectAllText;
+        selectAllButtonToggle.textContent = isAllSelected
+            ? ((_a = this._config.clearAllText) !== null && _a !== void 0 ? _a : 'Clear all')
+            : ((_b = this._config.selectAllText) !== null && _b !== void 0 ? _b : 'Select all');
     };
     /**
      * Destroy the component and clean up resources
@@ -13671,44 +14993,51 @@ var KTSelectTags = /** @class */ (function () {
      */
     KTSelectTags.prototype.updateTagsDisplay = function (selectedOptions) {
         var _this = this;
+        if (!this._valueDisplayElement)
+            return;
+        var valueDisplayElement = this._valueDisplayElement;
         // Remove any existing tag elements
-        var wrapper = this._valueDisplayElement.parentElement;
+        var wrapper = valueDisplayElement.parentElement;
         if (!wrapper)
             return;
         // If no options selected, ensure placeholder is shown
         if (selectedOptions.length === 0) {
             // Clear any existing content and show placeholder
-            this._valueDisplayElement.innerHTML = '';
+            valueDisplayElement.innerHTML = '';
             var placeholderEl = templates_1.defaultTemplates.placeholder(this._config);
-            this._valueDisplayElement.appendChild(placeholderEl);
+            valueDisplayElement.appendChild(placeholderEl);
             return;
         }
         // Clear all existing content before adding tags
-        this._valueDisplayElement.innerHTML = '';
+        valueDisplayElement.innerHTML = '';
         // Insert each tag before the display element
         selectedOptions.forEach(function (optionValue) {
+            var _a;
             // Find the original option element (in dropdown or select)
             var optionElement = null;
             var optionElements = _this._select.getOptionsElement();
-            for (var _i = 0, _a = Array.from(optionElements); _i < _a.length; _i++) {
-                var opt = _a[_i];
+            for (var _i = 0, _b = Array.from(optionElements); _i < _b.length; _i++) {
+                var opt = _b[_i];
                 if (opt.dataset.value === optionValue) {
                     optionElement = opt;
                     break;
                 }
             }
             if (!optionElement) {
-                var originalOptions = _this._select
-                    .getElement()
-                    .querySelectorAll('option');
-                for (var _b = 0, _c = Array.from(originalOptions); _b < _c.length; _b++) {
-                    var opt = _c[_b];
+                var originalOptions = (_a = _this._select
+                    .getElement()) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option');
+                if (!originalOptions)
+                    return;
+                for (var _c = 0, _d = Array.from(originalOptions); _c < _d.length; _c++) {
+                    var opt = _d[_c];
                     if (opt.value === optionValue) {
                         optionElement = opt;
                         break;
                     }
                 }
             }
+            if (!optionElement)
+                return;
             var tag = templates_1.defaultTemplates.tag(optionElement, _this._config);
             // Add event listener to the close button
             var closeButton = tag.querySelector('[data-kt-select-remove-button]');
@@ -13719,7 +15048,7 @@ var KTSelectTags = /** @class */ (function () {
                 });
             }
             // Insert tag inside the display element
-            _this._valueDisplayElement.appendChild(tag);
+            valueDisplayElement.appendChild(tag);
         });
     };
     /**
@@ -13733,7 +15062,9 @@ var KTSelectTags = /** @class */ (function () {
      * Clean up resources used by this module
      */
     KTSelectTags.prototype.destroy = function () {
-        this._eventManager.removeAllListeners(null);
+        if (this._valueDisplayElement) {
+            this._eventManager.removeAllListeners(this._valueDisplayElement);
+        }
     };
     return KTSelectTags;
 }());
@@ -13919,7 +15250,7 @@ exports.defaultTemplates = {
      * Renders a single option
      */
     option: function (option, config) {
-        var _a, _b, _c;
+        var _a;
         var isHtmlOption = option instanceof HTMLOptionElement;
         var optionData;
         if (isHtmlOption) {
@@ -13934,14 +15265,14 @@ exports.defaultTemplates = {
             // which should have the getOptionDataForTemplate method.
             optionData = option.getOptionDataForTemplate();
         }
-        var content = (_b = optionData === null || optionData === void 0 ? void 0 : optionData.text) === null || _b === void 0 ? void 0 : _b.trim(); // Default content to option's text
+        var content = String((optionData === null || optionData === void 0 ? void 0 : optionData.text) || '').trim(); // Default content to option's text
         if (config.optionTemplate) {
             // Use the user-provided template string, rendering with the full optionData.
             // renderTemplateString will replace {{key}} with values from optionData.
             content = (0, utils_1.renderTemplateString)(config.optionTemplate, optionData);
         }
         else {
-            content = optionData.text || optionData.content; // Prefer explicit text, fallback to content
+            content = String(optionData.text || optionData.content || '');
         }
         // Use the core option template string as the base structure.
         var baseTemplate = getTemplateStrings(config).option;
@@ -13960,7 +15291,7 @@ exports.defaultTemplates = {
             element.innerHTML = content;
         }
         // Ensure data-text attribute is set to the original, clean text for searching/filtering
-        element.setAttribute('data-text', ((_c = optionData === null || optionData === void 0 ? void 0 : optionData.text) === null || _c === void 0 ? void 0 : _c.trim()) || '');
+        element.setAttribute('data-text', String((optionData === null || optionData === void 0 ? void 0 : optionData.text) || '').trim());
         return element;
     },
     /**
@@ -14153,7 +15484,7 @@ function filterOptions(options, query, config, dropdownElement, onVisibleCount)
  * Consolidates redundant focus management logic into shared functions
  */
 var FocusManager = /** @class */ (function () {
-    function FocusManager(element, optionsSelector, config) {
+    function FocusManager(element, optionsSelector, _config) {
         if (optionsSelector === void 0) { optionsSelector = '[data-kt-select-option]'; }
         this._focusedOptionIndex = null;
         this._onFocusChange = null;
@@ -14174,8 +15505,7 @@ var FocusManager = /** @class */ (function () {
         this._eventManager.addListener(this._element, 'click', function (e) {
             var target = e.target;
             var optionElement = target.closest(_this._optionsSelector);
-            if (optionElement) {
-            }
+            void optionElement;
         });
     };
     /**
@@ -14982,19 +16312,6 @@ var KTSticky = /** @class */ (function (_super) {
         _this._scrollTimeout = null;
         _this._resizeHandler = null;
         _this._scrollHandler = null;
-        _this._resetStyles = function () {
-            this._element.style.top = '';
-            this._element.style.bottom = '';
-            this._element.style.insetInlineStart = '';
-            this._element.style.insetInlineEnd = '';
-            this._element.style.insetBlockStart = '';
-            this._element.style.insetBlockEnd = '';
-            this._element.style.width = '';
-            this._element.style.left = '';
-            this._element.style.right = '';
-            this._element.style.zIndex = '';
-            this._element.style.position = '';
-        };
         // Check if element already has an instance and is still connected
         if (_this._shouldSkipInit(element)) {
             return _this;
@@ -15305,6 +16622,19 @@ var KTSticky = /** @class */ (function (_super) {
             this._timeoutState = null;
         }
     };
+    KTSticky.prototype._resetStyles = function () {
+        this._element.style.top = '';
+        this._element.style.bottom = '';
+        this._element.style.insetInlineStart = '';
+        this._element.style.insetInlineEnd = '';
+        this._element.style.insetBlockStart = '';
+        this._element.style.insetBlockEnd = '';
+        this._element.style.width = '';
+        this._element.style.left = '';
+        this._element.style.right = '';
+        this._element.style.zIndex = '';
+        this._element.style.position = '';
+    };
     KTSticky.prototype._update = function () {
         this._timeoutState = null;
         this._eventTriggerState = true;
@@ -15644,12 +16974,14 @@ var KTThemeSwitch = /** @class */ (function (_super) {
     function KTThemeSwitch(element, config) {
         if (config === void 0) { config = null; }
         var _this = _super.call(this) || this;
-        _this._name = 'theme-swtich';
+        _this._name = 'theme-switch';
         _this._defaultConfig = {
             mode: 'light',
         };
         _this._mode = null;
         _this._currentMode = null;
+        _this._themeSwitchToggleEventId = '';
+        _this._themeSwitchSetEventId = '';
         if (data_1.default.has(element, _this._name))
             return _this;
         _this._init(element);
@@ -15663,10 +16995,10 @@ var KTThemeSwitch = /** @class */ (function (_super) {
         var _this = this;
         if (!this._element)
             return;
-        event_handler_1.default.on(document.body, '[data-kt-theme-switch-toggle]', 'click', function () {
+        this._themeSwitchToggleEventId = event_handler_1.default.on(document.body, '[data-kt-theme-switch-toggle]', 'click', function () {
             _this._toggle();
         });
-        event_handler_1.default.on(document.body, '[data-kt-theme-switch-set]', 'click', function (event, target) {
+        this._themeSwitchSetEventId = event_handler_1.default.on(document.body, '[data-kt-theme-switch-set]', 'click', function (event, target) {
             event.preventDefault();
             var mode = target.getAttribute('data-kt-theme-switch-set');
             _this._setMode(mode);
@@ -15728,7 +17060,18 @@ var KTThemeSwitch = /** @class */ (function (_super) {
         return this._getMode();
     };
     KTThemeSwitch.prototype.setMode = function (mode) {
-        this.setMode(mode);
+        this._setMode(mode);
+    };
+    KTThemeSwitch.prototype.dispose = function () {
+        if (this._themeSwitchToggleEventId) {
+            event_handler_1.default.off(document.body, 'click', this._themeSwitchToggleEventId);
+            this._themeSwitchToggleEventId = '';
+        }
+        if (this._themeSwitchSetEventId) {
+            event_handler_1.default.off(document.body, 'click', this._themeSwitchSetEventId);
+            this._themeSwitchSetEventId = '';
+        }
+        _super.prototype.dispose.call(this);
     };
     KTThemeSwitch.getInstance = function () {
         var root = document.documentElement;
@@ -16003,7 +17346,7 @@ var KTToast = /** @class */ (function (_super) {
      * @returns Toast instance with dismiss method, or undefined if invalid input.
      */
     KTToast.show = function (inputOptions) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         var options = __assign(__assign({}, DEFAULT_TOAST_OPTIONS), inputOptions);
         if (!options || (!options.message && !options.content)) {
             return undefined;
@@ -16024,7 +17367,7 @@ var KTToast = /** @class */ (function (_super) {
         }
         // Enforce maxToasts
         if (container.children.length >=
-            (this.globalConfig.maxToasts || DEFAULT_CONFIG.maxToasts)) {
+            ((_b = (_a = this.globalConfig.maxToasts) !== null && _a !== void 0 ? _a : DEFAULT_CONFIG.maxToasts) !== null && _b !== void 0 ? _b : 5)) {
             var firstToast_1 = container.firstElementChild;
             if (firstToast_1) {
                 firstToast_1.classList.add('kt-toast-closing');
@@ -16055,7 +17398,10 @@ var KTToast = /** @class */ (function (_super) {
             lg: 'kt-alert-lg',
         };
         var toast = document.createElement('div');
-        toast.className = "kt-toast kt-alert ".concat(variantMap[options.variant] || '', " ").concat(appearanceMap[options.appearance] || '', " ").concat(sizeMap[options.size] || '', " ").concat(options.className || '', " ").concat(classNames.toast || '');
+        var variantClass = variantMap[(_c = options.variant) !== null && _c !== void 0 ? _c : 'info'] || '';
+        var appearanceClass = appearanceMap[(_d = options.appearance) !== null && _d !== void 0 ? _d : 'solid'] || '';
+        var sizeClass = sizeMap[(_e = options.size) !== null && _e !== void 0 ? _e : 'md'] || '';
+        toast.className = "kt-toast kt-alert ".concat(variantClass, " ").concat(appearanceClass, " ").concat(sizeClass, " ").concat(options.className || '', " ").concat(classNames.toast || '');
         // ARIA support
         toast.setAttribute('role', options.role || 'status');
         toast.setAttribute('aria-live', 'polite');
@@ -16106,7 +17452,7 @@ var KTToast = /** @class */ (function (_super) {
         // Progress line
         var duration = options.important
             ? null
-            : ((_b = (_a = options.duration) !== null && _a !== void 0 ? _a : this.globalConfig.duration) !== null && _b !== void 0 ? _b : DEFAULT_CONFIG.duration);
+            : ((_g = (_f = options.duration) !== null && _f !== void 0 ? _f : this.globalConfig.duration) !== null && _g !== void 0 ? _g : DEFAULT_CONFIG.duration);
         if (duration && options.progress) {
             var progress = document.createElement('div');
             progress.className = 'kt-toast-progress ' + (classNames.progress || '');
@@ -16129,7 +17475,7 @@ var KTToast = /** @class */ (function (_super) {
         var dirClass = directionClassMap[position] || 'kt-toast-top-end';
         toast.classList.add(dirClass);
         // Enforce maxToasts: remove oldest if needed
-        var maxToasts = (_d = (_c = options.maxToasts) !== null && _c !== void 0 ? _c : this.globalConfig.maxToasts) !== null && _d !== void 0 ? _d : DEFAULT_CONFIG.maxToasts;
+        var maxToasts = (_k = (_j = (_h = options.maxToasts) !== null && _h !== void 0 ? _h : this.globalConfig.maxToasts) !== null && _j !== void 0 ? _j : DEFAULT_CONFIG.maxToasts) !== null && _k !== void 0 ? _k : 5;
         var currentToasts = Array.from(container.children);
         if (currentToasts.length >= maxToasts && currentToasts.length > 0) {
             var oldestToast = currentToasts[currentToasts.length - 1];
@@ -16148,7 +17494,12 @@ var KTToast = /** @class */ (function (_super) {
         if (options.beep) {
             try {
                 // Use Web Audio API for a short beep
-                var ctx_1 = new (window.AudioContext || window.webkitAudioContext)();
+                var Ctx = window.AudioContext ||
+                    window.webkitAudioContext;
+                if (!Ctx) {
+                    throw new Error('Web Audio API unavailable');
+                }
+                var ctx_1 = new Ctx();
                 var o_1 = ctx_1.createOscillator();
                 var g = ctx_1.createGain();
                 o_1.type = 'sine';
@@ -16162,7 +17513,7 @@ var KTToast = /** @class */ (function (_super) {
                     ctx_1.close();
                 }, 120);
             }
-            catch (e) {
+            catch (_l) {
                 /* ignore */
             }
         }
@@ -16172,7 +17523,7 @@ var KTToast = /** @class */ (function (_super) {
         KTToast.toasts.set(id, instance);
         // Auto-dismiss
         var timeoutId = undefined;
-        var remaining = duration;
+        var remaining = duration !== null && duration !== void 0 ? duration : 0;
         var startTime;
         var paused = false;
         var progressEl = null;
@@ -16223,7 +17574,7 @@ var KTToast = /** @class */ (function (_super) {
                         if (progressEl) {
                             progressEl.style.transition = 'transform 0ms';
                             progressEl.style.transform = "scaleX(".concat(progressPausedAt_1, ")");
-                            progressEl.offsetHeight; // force reflow
+                            void progressEl.offsetHeight; // force reflow
                             progressEl.style.transition = "transform ".concat(remaining, "ms linear");
                             progressEl.style.transform = 'scaleX(0)';
                         }
@@ -16566,6 +17917,7 @@ var KTToggle = /** @class */ (function (_super) {
             attribute: '',
         };
         _this._config = _this._defaultConfig;
+        _this._clickHandler = null;
         if (data_1.default.has(element, _this._name))
             return _this;
         _this._init(element);
@@ -16581,9 +17933,17 @@ var KTToggle = /** @class */ (function (_super) {
         var _this = this;
         if (!this._element)
             return;
-        this._element.addEventListener('click', function () {
+        this._clickHandler = function () {
             _this._toggle();
-        });
+        };
+        this._element.addEventListener('click', this._clickHandler);
+    };
+    KTToggle.prototype.dispose = function () {
+        if (this._element && this._clickHandler) {
+            this._element.removeEventListener('click', this._clickHandler);
+            this._clickHandler = null;
+        }
+        _super.prototype.dispose.call(this);
     };
     KTToggle.prototype._getTargetElement = function () {
         return (dom_1.default.getElement(this._element.getAttribute('data-kt-toggle')) || dom_1.default.getElement(this._getOption('target')));
@@ -17077,18 +18437,13 @@ var KTDom = {
         return dir === 'rtl';
     },
     isElement: function (element) {
-        if (element && element instanceof HTMLElement) {
-            return true;
-        }
-        else {
-            return false;
-        }
+        return element instanceof HTMLElement;
     },
     getElement: function (element) {
         if (this.isElement(element)) {
             return element;
         }
-        if (element && element.length > 0) {
+        if (typeof element === 'string' && element.length > 0) {
             return document.querySelector(utils_1.default.parseSelector(element));
         }
         return null;
@@ -17188,7 +18543,7 @@ var KTDom = {
     },
     children: function (element, selector) {
         if (!element || !element.childNodes) {
-            return null;
+            return [];
         }
         var result = [];
         var l = element.childNodes.length;
@@ -17243,7 +18598,7 @@ var KTDom = {
         return (parseFloat(window.getComputedStyle(element).animationDuration) * 1000);
     },
     reflow: function (element) {
-        element.offsetHeight;
+        void element.offsetHeight;
     },
     insertAfter: function (element, referenceNode) {
         var parentNode = referenceNode.parentNode;
@@ -17345,7 +18700,10 @@ var KTDom = {
             var key = keys_1[_i];
             var normalizedKey = key.replace(prefix, '');
             normalizedKey = utils_1.default.uncapitalize(normalizedKey);
-            attributes[normalizedKey] = utils_1.default.parseDataAttribute(element.dataset[key]);
+            var datasetValue = element.dataset[key];
+            if (typeof datasetValue === 'string') {
+                attributes[normalizedKey] = utils_1.default.parseDataAttribute(datasetValue);
+            }
         }
         return attributes;
     },
@@ -17383,10 +18741,12 @@ var KTEventHandler = {
     on: function (element, selector, eventName, handler) {
         var _this = this;
         if (element === null) {
-            return null;
+            return '';
         }
         var eventId = utils_1.default.geUID('event');
         KTDelegatedEventHandlers[eventId] = function (event) {
+            if (!event)
+                return;
             // Fix: Check selector dynamically instead of pre-computing targets
             // This allows event delegation to work with dynamically added elements
             var target = event.target;
@@ -17525,6 +18885,9 @@ var KTUtils = {
         return null;
     },
     stringToObject: function (value) {
+        if (value === null) {
+            return null;
+        }
         try {
             var parsed = JSON.parse(value.toString());
             if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
@@ -17532,7 +18895,7 @@ var KTUtils = {
             }
             return null;
         }
-        catch (error) {
+        catch (_a) {
             return null;
         }
     },
@@ -17584,7 +18947,7 @@ exports["default"] = KTUtils;
  * Copyright 2025 by Keenthemes Inc
  */
 Object.defineProperty(exports, "__esModule", ({ value: true }));
-exports.KTRangeSlider = exports.KTClipboard = exports.KTRepeater = exports.KTRating = exports.KTToast = exports.KTSelect = exports.KTDataTable = exports.KTTogglePassword = exports.KTImageInput = exports.KTThemeSwitch = exports.KTStepper = exports.KTTooltip = exports.KTToggle = exports.KTReparent = exports.KTSticky = exports.KTScrollto = exports.KTScrollable = exports.KTScrollspy = exports.KTAccordion = exports.KTTabs = exports.KTDismiss = exports.KTCollapse = exports.KTDrawer = exports.KTModal = exports.KTDropdown = void 0;
+exports.KTCarousel = exports.KTPinInput = exports.KTRangeSlider = exports.KTClipboard = exports.KTRepeater = exports.KTRating = exports.KTToast = exports.KTSelect = exports.KTDataTable = exports.KTTogglePassword = exports.KTImageInput = exports.KTThemeSwitch = exports.KTStepper = exports.KTTooltip = exports.KTToggle = exports.KTReparent = exports.KTSticky = exports.KTScrollto = exports.KTScrollable = exports.KTScrollspy = exports.KTAccordion = exports.KTTabs = exports.KTDismiss = exports.KTCollapse = exports.KTDrawer = exports.KTModal = exports.KTDropdown = void 0;
 var dom_1 = __webpack_require__(/*! ./helpers/dom */ "./src/helpers/dom.ts");
 var dropdown_1 = __webpack_require__(/*! ./components/dropdown */ "./src/components/dropdown/index.ts");
 var modal_1 = __webpack_require__(/*! ./components/modal */ "./src/components/modal/index.ts");
@@ -17611,6 +18974,8 @@ var rating_1 = __webpack_require__(/*! ./components/rating */ "./src/components/
 var repeater_1 = __webpack_require__(/*! ./components/repeater */ "./src/components/repeater/index.ts");
 var clipboard_1 = __webpack_require__(/*! ./components/clipboard */ "./src/components/clipboard/index.ts");
 var range_slider_1 = __webpack_require__(/*! ./components/range-slider */ "./src/components/range-slider/index.ts");
+var pin_input_1 = __webpack_require__(/*! ./components/pin-input */ "./src/components/pin-input/index.ts");
+var carousel_1 = __webpack_require__(/*! ./components/carousel */ "./src/components/carousel/index.ts");
 var dropdown_2 = __webpack_require__(/*! ./components/dropdown */ "./src/components/dropdown/index.ts");
 Object.defineProperty(exports, "KTDropdown", ({ enumerable: true, get: function () { return dropdown_2.KTDropdown; } }));
 var modal_2 = __webpack_require__(/*! ./components/modal */ "./src/components/modal/index.ts");
@@ -17661,6 +19026,10 @@ var clipboard_2 = __webpack_require__(/*! ./components/clipboard */ "./src/compo
 Object.defineProperty(exports, "KTClipboard", ({ enumerable: true, get: function () { return clipboard_2.KTClipboard; } }));
 var range_slider_2 = __webpack_require__(/*! ./components/range-slider */ "./src/components/range-slider/index.ts");
 Object.defineProperty(exports, "KTRangeSlider", ({ enumerable: true, get: function () { return range_slider_2.KTRangeSlider; } }));
+var pin_input_2 = __webpack_require__(/*! ./components/pin-input */ "./src/components/pin-input/index.ts");
+Object.defineProperty(exports, "KTPinInput", ({ enumerable: true, get: function () { return pin_input_2.KTPinInput; } }));
+var carousel_2 = __webpack_require__(/*! ./components/carousel */ "./src/components/carousel/index.ts");
+Object.defineProperty(exports, "KTCarousel", ({ enumerable: true, get: function () { return carousel_2.KTCarousel; } }));
 var KTComponents = {
     init: function () {
         dropdown_1.KTDropdown.init();
@@ -17688,6 +19057,8 @@ var KTComponents = {
         repeater_1.KTRepeater.init();
         clipboard_1.KTClipboard.init();
         range_slider_1.KTRangeSlider.init();
+        pin_input_1.KTPinInput.init();
+        carousel_1.KTCarousel.init();
     },
 };
 exports["default"] = KTComponents;