@keenthemes/ktui 1.1.0 → 1.1.1

package/lib/cjs/components/datepicker/datepicker.js

@@ -1,2252 +0,0 @@
-"use strict";
-/*
- * datepicker.ts - Main implementation for KTDatepicker component
- * Provides single, range, and multi-date selection with segmented input UI.
- * Modular rendering and state helpers are imported from datepicker-helpers.ts.
- */
-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 __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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.KTDatepicker = void 0;
-exports.initDatepickers = initDatepickers;
-var component_1 = require("../component");
-var templates_1 = require("./ui/templates/templates");
-var config_1 = require("./config/config");
-var header_1 = require("./ui/renderers/header");
-var calendar_1 = require("./ui/renderers/calendar");
-var footer_1 = require("./ui/renderers/footer");
-var time_picker_1 = require("./ui/renderers/time-picker");
-var event_manager_1 = require("./core/event-manager");
-var focus_manager_1 = require("./core/focus-manager");
-var dropdown_1 = require("./ui/input/dropdown");
-var unified_state_manager_1 = require("./core/unified-state-manager");
-var date_utils_1 = require("./utils/date-utils");
-var date_formatters_1 = require("./utils/date-formatters");
-var time_utils_1 = require("./utils/time-utils");
-var helpers_1 = require("./core/helpers");
-/**
- * KTDatepicker
- *
- * Datepicker component for selecting single, range, or multiple dates.
- *
- * Features:
- * - Opens on input focus or calendar button click (configurable)
- * - Supports single, range, and multi-date modes
- * - Customizable via templates and data attributes
- * - Keyboard navigation and accessibility support
- */
-var KTDatepicker = /** @class */ (function (_super) {
-    __extends(KTDatepicker, _super);
-    /**
-     * Constructor: Initializes the datepicker component
-     */
-    function KTDatepicker(element, config) {
-        var _this = _super.call(this) || this;
-        _this._name = 'datepicker';
-        _this._defaultConfig = config_1.defaultDatepickerConfig;
-        _this._config = config_1.defaultDatepickerConfig;
-        _this._userTemplates = {};
-        _this._input = null;
-        _this._focusManager = null;
-        _this._dropdownModule = null;
-        _this._timePickerRenderer = null;
-        _this._unsubscribeFromState = null;
-        // Dynamic element detection
-        _this._elementObserver = null;
-        // DOM element cache for performance optimization
-        _this._cachedElements = {
-            calendarElement: null,
-            timePickerElement: null,
-            startContainer: null,
-            endContainer: null,
-            yearElement: null,
-            monthElement: null,
-            dayElement: null,
-            hourElement: null,
-            minuteElement: null,
-            secondElement: null,
-            ampmElement: null,
-            monthYearElement: null,
-            timeDisplay: null
-        };
-        /** Handler for Apply button in multi-date mode */
-        _this._onApplyMultiDate = function (e) {
-            // Apply button clicked in multi-date mode
-        };
-        _this._onToday = function (e) {
-            e.preventDefault();
-            var today = new Date();
-            _this.setDate(today);
-        };
-        // Stub for _onClear (to be implemented next)
-        _this._onClear = function (e) {
-            e.preventDefault();
-            // Clear all selection states using unified state manager
-            _this._unifiedStateManager.updateState({
-                selectedDate: null,
-                selectedRange: { start: null, end: null },
-                selectedDates: [],
-                selectedTime: null
-            }, 'clear');
-            if (_this._input) {
-                var evt = new Event('change', { bubbles: true });
-                _this._input.dispatchEvent(evt);
-            }
-        };
-        /**
-         * Handler for Apply button - confirms selection and closes dropdown
-         * Used in range and multi-date modes
-         */
-        _this._onApply = function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-            var currentState = _this._unifiedStateManager.getState();
-            // Ensure input value is updated with current selection
-            _this._updateInput(currentState);
-            // Fire onChange event if there's a selection
-            if (_this._config.range && currentState.selectedRange) {
-                if (currentState.selectedRange.start || currentState.selectedRange.end) {
-                    _this._fireDatepickerEvent('onChange', currentState.selectedRange, _this);
-                }
-            }
-            else if (_this._config.multiDate && currentState.selectedDates.length > 0) {
-                _this._fireDatepickerEvent('onChange', currentState.selectedDates, _this);
-            }
-            else if (currentState.selectedDate) {
-                _this._fireDatepickerEvent('onChange', currentState.selectedDate, _this);
-            }
-            // Trigger input change event
-            if (_this._input) {
-                var evt = new Event('change', { bubbles: true });
-                _this._input.dispatchEvent(evt);
-            }
-            // Close the dropdown
-            _this._unifiedStateManager.setDropdownOpen(false, 'apply-button');
-        };
-        /**
-         * Centralized keyboard event handler for all datepicker keyboard interactions.
-         * Handles navigation, selection, and closing for input, calendar, and popover.
-         * Covers: Tab, Shift+Tab, Arrow keys, Enter, Space, Escape, Home, End, PageUp, PageDown.
-         */
-        _this._onKeyDown = function (e) {
-            var _a;
-            if (!_this._unifiedStateManager.isDropdownOpen())
-                return;
-            var target = e.target;
-            // Check if segmented input is focused - let it handle its own keyboard events
-            if (target.closest('[data-segment]')) {
-                return; // Let segmented input handle its own keyboard events
-            }
-            // Handle Escape key
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                return;
-            }
-            // Handle Tab/Shift+Tab: allow normal tabbing, but trap focus within dropdown if needed
-            if (e.key === 'Tab') {
-                // Optionally implement focus trap if required
-                return;
-            }
-            // Handle Arrow keys, Home/End, PageUp/PageDown for calendar grid navigation
-            var isCalendarGrid = target.closest('[data-kt-datepicker-calendar-grid]');
-            if (isCalendarGrid) {
-                // Find all day buttons
-                var dayButtons = Array.from(isCalendarGrid.querySelectorAll('button[data-day]'));
-                var currentIndex = dayButtons.findIndex(function (btn) { return btn === target; });
-                var nextIndex_1 = currentIndex;
-                if (e.key === 'ArrowRight')
-                    nextIndex_1 = Math.min(dayButtons.length - 1, currentIndex + 1);
-                if (e.key === 'ArrowLeft')
-                    nextIndex_1 = Math.max(0, currentIndex - 1);
-                if (e.key === 'ArrowDown')
-                    nextIndex_1 = Math.min(dayButtons.length - 1, currentIndex + 7);
-                if (e.key === 'ArrowUp')
-                    nextIndex_1 = Math.max(0, currentIndex - 7);
-                if (e.key === 'Home')
-                    nextIndex_1 = Math.floor(currentIndex / 7) * 7;
-                if (e.key === 'End')
-                    nextIndex_1 = Math.min(dayButtons.length - 1, Math.floor(currentIndex / 7) * 7 + 6);
-                if (e.key === 'PageUp' || e.key === 'PageDown') {
-                    // Change month and focus first day
-                    _this._changeMonth(e.key === 'PageUp' ? -1 : 1);
-                    setTimeout(function () {
-                        var newGrid = _this._element.querySelector('[data-kt-datepicker-calendar-grid]');
-                        if (newGrid) {
-                            var newButtons = Array.from(newGrid.querySelectorAll('button[data-day]'));
-                            if (newButtons.length > 0) {
-                                // Set roving tabindex
-                                newButtons.forEach(function (btn, idx) { return btn.tabIndex = idx === 0 ? 0 : -1; });
-                                newButtons[0].focus();
-                            }
-                        }
-                    }, 0);
-                    e.preventDefault();
-                    return;
-                }
-                if (nextIndex_1 !== currentIndex && dayButtons[nextIndex_1]) {
-                    // Set roving tabindex
-                    dayButtons.forEach(function (btn, idx) { return btn.tabIndex = idx === nextIndex_1 ? 0 : -1; });
-                    dayButtons[nextIndex_1].focus();
-                    e.preventDefault();
-                    return;
-                }
-                // Enter/Space: select date
-                if (e.key === 'Enter' || e.key === ' ') {
-                    (_a = dayButtons[currentIndex]) === null || _a === void 0 ? void 0 : _a.click();
-                    // Optionally announce selection to screen reader
-                    var liveRegion = _this._element.querySelector('[data-kt-datepicker-live]');
-                    if (liveRegion && dayButtons[currentIndex]) {
-                        liveRegion.textContent = "Selected ".concat(dayButtons[currentIndex].getAttribute('aria-label'));
-                    }
-                    e.preventDefault();
-                    return;
-                }
-            }
-            // Handle navigation for header buttons (prev/next month)
-            if (target.hasAttribute('data-kt-datepicker-prev') || target.hasAttribute('data-kt-datepicker-next')) {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    target.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-                    // Optionally announce navigation to screen reader
-                    var liveRegion = _this._element.querySelector('[data-kt-datepicker-live]');
-                    if (liveRegion) {
-                        liveRegion.textContent = target.hasAttribute('data-kt-datepicker-prev') ? 'Previous month' : 'Next month';
-                    }
-                    e.preventDefault();
-                    return;
-                }
-            }
-            // Handle footer buttons (today, clear, apply)
-            if (target.hasAttribute('data-kt-datepicker-today') || target.hasAttribute('data-kt-datepicker-clear') || target.hasAttribute('data-kt-datepicker-apply')) {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    target.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-                    // Optionally announce action to screen reader
-                    var liveRegion = _this._element.querySelector('[data-kt-datepicker-live]');
-                    if (liveRegion) {
-                        if (target.hasAttribute('data-kt-datepicker-today'))
-                            liveRegion.textContent = 'Today selected';
-                        if (target.hasAttribute('data-kt-datepicker-clear'))
-                            liveRegion.textContent = 'Selection cleared';
-                        if (target.hasAttribute('data-kt-datepicker-apply'))
-                            liveRegion.textContent = 'Selection applied';
-                    }
-                    e.preventDefault();
-                    return;
-                }
-            }
-        };
-        /**
-         * Handler for input focus event, opens the datepicker if showOnFocus is true and input is not disabled/readonly
-         */
-        _this._onInputFocus = function (e) {
-            if (!_this._input)
-                return;
-            if (_this._input.hasAttribute('disabled') || _this._input.hasAttribute('readonly'))
-                return;
-            if (_this._config.showOnFocus) {
-                _this.open();
-            }
-        };
-        /**
-         * Handler for document click event, closes the datepicker if click is outside the component
-         */
-        _this._handleDocumentClick = function (e) {
-            // Skip if click-outside is disabled
-            if (!_this._config.closeOnOutsideClick)
-                return;
-            // Skip if dropdown is not open
-            if (!_this._unifiedStateManager.isDropdownOpen())
-                return;
-            var targetElement = e.target;
-            // Find the dropdown element (it's rendered in body, not inside _element)
-            var dropdownElement = document.querySelector("[data-kt-datepicker-dropdown][data-kt-datepicker-instance-id=\"".concat(_this._instanceId, "\"]"));
-            // Check if click is outside both the datepicker element and the dropdown
-            var isInsideDatepicker = _this._element.contains(targetElement);
-            var isInsideDropdown = dropdownElement && dropdownElement.contains(targetElement);
-            if (!isInsideDatepicker && !isInsideDropdown) {
-                _this.close();
-            }
-        };
-        // Generate unique instance ID
-        _this._instanceId = "datepicker-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
-        // Add instance ID to element for debugging
-        element.setAttribute('data-kt-datepicker-instance-id', _this._instanceId);
-        _this._init(element);
-        // Build config using the standard KTComponent approach
-        _this._buildConfig(config);
-        _this._templateSet = (0, templates_1.getTemplateStrings)(_this._config);
-        _this._templateRenderer = (0, templates_1.createTemplateRenderer)(_this._templateSet);
-        // Initialize unified state manager
-        _this._unifiedStateManager = new unified_state_manager_1.KTDatepickerUnifiedStateManager({
-            enableValidation: true,
-            enableDebugging: _this._config.debug || false,
-            enableUpdateBatching: true,
-            batchDelay: 16
-        });
-        // Subscribe to state changes
-        _this._unsubscribeFromState = _this._unifiedStateManager.subscribe(_this);
-        // Set placeholder from config if available
-        if (_this._input && _this._config.placeholder) {
-            _this._input.setAttribute('placeholder', _this._config.placeholder);
-        }
-        // Set disabled state from config if available
-        if (_this._input && _this._config.disabled) {
-            _this._input.setAttribute('disabled', 'true');
-            // Also set disabled state in unified state manager
-            _this._unifiedStateManager.setDropdownDisabled(true, 'config');
-        }
-        // --- Time initialization ---
-        if (_this._config.enableTime) {
-            _this._unifiedStateManager.updateState({
-                timeGranularity: _this._config.timeGranularity || 'minute'
-            }, 'config');
-            // Initialize time from selected date or current time
-            var baseDate = _this._unifiedStateManager.getState().selectedDate || _this._unifiedStateManager.getState().currentDate || new Date();
-            _this._unifiedStateManager.setSelectedTime((0, time_utils_1.dateToTimeState)(baseDate), 'config');
-        }
-        // --- Mode-specific initialization ---
-        if (_this._config.range && _this._config.valueRange) {
-            _this._initRangeFromConfig();
-        }
-        else if (_this._config.multiDate && Array.isArray(_this._config.values)) {
-            _this._initMultiDateFromConfig();
-        }
-        else if (_this._config.value) {
-            _this._initSingleDateFromConfig();
-        }
-        // --- Input focus event for showOnFocus ---
-        if (_this._input) {
-            _this._eventManager.addListener(_this._input, 'focus', _this._onInputFocus);
-        }
-        // --- Document click event for outside click detection ---
-        _this._eventManager.addListener(document, 'click', _this._handleDocumentClick);
-        element.instance = _this;
-        _this._render();
-        return _this;
-    }
-    /**
-     * Initialize the datepicker components after configuration is set
-     */
-    KTDatepicker.prototype._initializeDatepicker = function () {
-        // Set up templates
-        this._templateSet = (0, templates_1.getTemplateStrings)(this._config);
-        this._templateRenderer = (0, templates_1.createTemplateRenderer)(this._templateSet);
-        // Initialize state manager
-        this._unifiedStateManager = new unified_state_manager_1.KTDatepickerUnifiedStateManager({
-            enableValidation: true,
-            enableDebugging: this._config.debug || false,
-            enableUpdateBatching: true,
-            batchDelay: 16
-        });
-        // Set initial state
-        this._unifiedStateManager.updateState(this._getInitialState(), 'initialization', true);
-        // Subscribe to state changes
-        this._unsubscribeFromState = this._unifiedStateManager.subscribe(this);
-        // Initialize event manager
-        this._eventManager = new event_manager_1.EventManager();
-        // Set up instance ID for debugging
-        this._instanceId = "datepicker-".concat(Date.now(), "-").concat(Math.random().toString(36).substr(2, 9));
-        this._element.setAttribute('data-kt-datepicker-instance-id', this._instanceId);
-        // Set placeholder from config if available
-        if (this._input && this._config.placeholder) {
-            this._input.setAttribute('placeholder', this._config.placeholder);
-        }
-        // Set disabled state from config if available
-        if (this._input && this._config.disabled) {
-            this._input.setAttribute('disabled', 'true');
-            // Also set disabled state in unified state manager
-            this._unifiedStateManager.setDropdownDisabled(true, 'config');
-        }
-        // --- Time initialization ---
-        if (this._config.enableTime) {
-            this._unifiedStateManager.updateState({
-                timeGranularity: this._config.timeGranularity || 'minute'
-            }, 'config');
-            // Initialize time from selected date or current time
-            var baseDate = this._unifiedStateManager.getState().selectedDate || this._unifiedStateManager.getState().currentDate || new Date();
-            this._unifiedStateManager.setSelectedTime((0, time_utils_1.dateToTimeState)(baseDate), 'config');
-        }
-        // --- Mode-specific initialization ---
-        if (this._config.range && this._config.valueRange) {
-            this._initRangeFromConfig();
-        }
-        else if (this._config.multiDate && Array.isArray(this._config.values)) {
-            this._initMultiDateFromConfig();
-        }
-        else if (this._config.value) {
-            this._initSingleDateFromConfig();
-        }
-        // --- Input focus event for showOnFocus ---
-        if (this._input) {
-            this._eventManager.addListener(this._input, 'focus', this._onInputFocus);
-        }
-        // --- Document click event for outside click detection ---
-        this._eventManager.addListener(document, 'click', this._handleDocumentClick);
-        this._element.instance = this;
-        // Initial render
-        this._render();
-    };
-    /**
-     * Get the initial state for the datepicker
-     */
-    KTDatepicker.prototype._getInitialState = function () {
-        var now = new Date();
-        var selectedDate = this._config.value ? new Date(this._config.value) : null;
-        var selectedTime = selectedDate && this._config.enableTime ? (0, time_utils_1.dateToTimeState)(selectedDate) : null;
-        return {
-            currentDate: selectedDate || now,
-            selectedDate: selectedDate,
-            selectedRange: null,
-            selectedDates: [],
-            selectedTime: selectedTime,
-            timeGranularity: this._config.timeGranularity || 'minute',
-            viewMode: 'days',
-            isOpen: false,
-            isFocused: false,
-            isTransitioning: false,
-            isDisabled: !!this._config.disabled,
-            validationErrors: [],
-            isValid: true,
-            dropdownState: {
-                isOpen: false,
-                isTransitioning: false,
-                isDisabled: !!this._config.disabled,
-                isFocused: false,
-            },
-        };
-    };
-    /**
-     * Initialize DOM element cache for performance optimization
-     */
-    KTDatepicker.prototype._initializeElementCache = function () {
-        var _a, _b;
-        // Cache main container elements
-        this._cachedElements.calendarElement = this._element.querySelector('[data-kt-datepicker-calendar-table]');
-        this._cachedElements.timePickerElement = this._element.querySelector('[data-kt-datepicker-time-container]');
-        // Cache range mode containers
-        this._cachedElements.startContainer = this._element.querySelector('[data-kt-datepicker-start-container]');
-        this._cachedElements.endContainer = this._element.querySelector('[data-kt-datepicker-end-container]');
-        // Cache segmented input elements
-        this._cachedElements.yearElement = this._element.querySelector('[data-segment="year"]');
-        this._cachedElements.monthElement = this._element.querySelector('[data-segment="month"]');
-        this._cachedElements.dayElement = this._element.querySelector('[data-segment="day"]');
-        this._cachedElements.hourElement = this._element.querySelector('[data-segment="hour"]');
-        this._cachedElements.minuteElement = this._element.querySelector('[data-segment="minute"]');
-        this._cachedElements.secondElement = this._element.querySelector('[data-segment="second"]');
-        this._cachedElements.ampmElement = this._element.querySelector('[data-segment="ampm"]');
-        // Cache navigation and display elements
-        this._cachedElements.monthYearElement = (_a = this._cachedElements.calendarElement) === null || _a === void 0 ? void 0 : _a.querySelector('[data-kt-datepicker-month-year]');
-        this._cachedElements.timeDisplay = (_b = this._cachedElements.timePickerElement) === null || _b === void 0 ? void 0 : _b.querySelector('[data-kt-datepicker-time-value]');
-    };
-    /**
-     * Refresh DOM element cache when structure changes
-     */
-    KTDatepicker.prototype._refreshElementCache = function () {
-        this._initializeElementCache();
-    };
-    /**
-     * Update input field with current state
-     */
-    KTDatepicker.prototype._updateInput = function (state) {
-        if (!this._input)
-            return;
-        // Update input value
-        var value = '';
-        if (this._config.range && state.selectedRange) {
-            value = this._formatRange(state.selectedRange.start, state.selectedRange.end);
-        }
-        else if (this._config.multiDate && state.selectedDates.length > 0) {
-            value = this._formatMultiDate(state.selectedDates);
-        }
-        else if (state.selectedDate) {
-            value = this._formatSingleDate(state.selectedDate);
-        }
-        if (this._input.value !== value) {
-            this._input.value = value;
-        }
-        // Update disabled state
-        if (state.isDisabled) {
-            this._input.setAttribute('disabled', 'true');
-        }
-        else {
-            this._input.removeAttribute('disabled');
-        }
-        // Update placeholder
-        if (value) {
-            this._input.removeAttribute('placeholder');
-        }
-        else {
-            this._input.setAttribute('placeholder', 'Select date...');
-        }
-    };
-    /**
-     * Update single date segmented input
-     */
-    KTDatepicker.prototype._updateSingleSegmentedInput = function (state) {
-        var dateToUse = state.selectedDate || state.currentDate;
-        if (dateToUse) {
-            this._updateDateSegments(dateToUse);
-        }
-        // Update time segments if time is enabled
-        if (state.selectedTime) {
-            this._updateTimeSegments(state.selectedTime);
-        }
-    };
-    /**
-     * Update date segments in a specific container
-     */
-    KTDatepicker.prototype._updateDateSegmentsInContainer = function (date, container) {
-        // For range mode, we need to query within the specific container
-        var yearElement = container.querySelector('[data-segment="year"]');
-        var monthElement = container.querySelector('[data-segment="month"]');
-        var dayElement = container.querySelector('[data-segment="day"]');
-        if (yearElement) {
-            yearElement.textContent = date.getFullYear().toString();
-        }
-        if (monthElement) {
-            monthElement.textContent = (date.getMonth() + 1).toString().padStart(2, '0');
-        }
-        if (dayElement) {
-            dayElement.textContent = date.getDate().toString().padStart(2, '0');
-        }
-    };
-    /**
-     * Update date segments (year, month, day)
-     */
-    KTDatepicker.prototype._updateDateSegments = function (date) {
-        this._updateDateSegmentsInContainer(date, this._element);
-    };
-    /**
-     * Update time segments
-     */
-    KTDatepicker.prototype._updateTimeSegments = function (time) {
-        if (this._cachedElements.hourElement) {
-            this._cachedElements.hourElement.textContent = time.hour.toString().padStart(2, '0');
-        }
-        if (this._cachedElements.minuteElement) {
-            this._cachedElements.minuteElement.textContent = time.minute.toString().padStart(2, '0');
-        }
-        if (this._cachedElements.secondElement) {
-            this._cachedElements.secondElement.textContent = time.second.toString().padStart(2, '0');
-        }
-        if (this._cachedElements.ampmElement) {
-            this._cachedElements.ampmElement.textContent = time.hour >= 12 ? 'PM' : 'AM';
-        }
-    };
-    /**
-     * Update calendar display
-     */
-    KTDatepicker.prototype._updateCalendar = function (state) {
-        var _this = this;
-        // Try to find dropdown first
-        var dropdownEl = this._element.querySelector('[data-kt-datepicker-dropdown]');
-        if (!dropdownEl && this._instanceId) {
-            dropdownEl = document.querySelector("[data-kt-datepicker-dropdown][data-kt-datepicker-instance-id=\"".concat(this._instanceId, "\"]"));
-        }
-        if (!dropdownEl) {
-            return;
-        }
-        // Find ALL calendar tables (for multi-month view support)
-        var calendarElements = dropdownEl.querySelectorAll('[data-kt-datepicker-calendar-table]');
-        // If no calendars found, return early
-        if (calendarElements.length === 0) {
-            return;
-        }
-        // Update cache with first calendar (for backward compatibility)
-        if (calendarElements.length > 0) {
-            this._cachedElements.calendarElement = calendarElements[0];
-        }
-        // Update range state on ALL calendar elements for hover handlers to access dynamically
-        if (this._config.range && state.selectedRange) {
-            calendarElements.forEach(function (calendar) {
-                if (state.selectedRange.start) {
-                    calendar.setAttribute('data-kt-range-start', (0, date_utils_1.formatDateToLocalString)(state.selectedRange.start));
-                }
-                else {
-                    calendar.removeAttribute('data-kt-range-start');
-                }
-                if (state.selectedRange.end) {
-                    calendar.setAttribute('data-kt-range-end', (0, date_utils_1.formatDateToLocalString)(state.selectedRange.end));
-                }
-                else {
-                    calendar.removeAttribute('data-kt-range-end');
-                }
-            });
-        }
-        else if (this._config.range) {
-            // No range selected, clear attributes from all calendars
-            calendarElements.forEach(function (calendar) {
-                calendar.removeAttribute('data-kt-range-start');
-                calendar.removeAttribute('data-kt-range-end');
-            });
-        }
-        // Update date selection highlighting for ALL calendars
-        calendarElements.forEach(function (calendarElement) {
-            _this._updateDateSelection(state, calendarElement);
-        });
-        // Update navigation (month/year display) - only update first calendar for navigation
-        if (calendarElements.length > 0) {
-            this._updateNavigation(state, calendarElements[0]);
-        }
-    };
-    /**
-     * Update date selection highlighting
-     */
-    KTDatepicker.prototype._updateDateSelection = function (state, calendarElement) {
-        var _this = this;
-        var _a, _b;
-        // Clear previous selections
-        var selectedCells = calendarElement.querySelectorAll('[data-kt-selected]');
-        selectedCells.forEach(function (cell) {
-            cell.removeAttribute('data-kt-selected');
-            cell.removeAttribute('aria-selected');
-            cell.classList.remove('active'); // Remove active class if present (legacy support)
-        });
-        // Clear previous range highlighting (only if range is complete, not during hover preview)
-        // Check if we're in hover preview mode by checking if range has start but no end
-        if (((_a = state.selectedRange) === null || _a === void 0 ? void 0 : _a.start) && ((_b = state.selectedRange) === null || _b === void 0 ? void 0 : _b.end)) {
-            // Range is complete, clear all hover-range attributes to re-apply for completed range
-            var hoverRangeCells = calendarElement.querySelectorAll('[data-kt-hover-range]');
-            hoverRangeCells.forEach(function (cell) {
-                cell.removeAttribute('data-kt-hover-range');
-            });
-        }
-        // Highlight selected date(s)
-        if (state.selectedDate) {
-            this._highlightDate(state.selectedDate, calendarElement);
-        }
-        // Highlight range start/end dates and dates in between
-        if (state.selectedRange) {
-            this._highlightDateRange(state.selectedRange, calendarElement);
-        }
-        // Highlight multi-date selections
-        if (state.selectedDates.length > 0) {
-            state.selectedDates.forEach(function (date) { return _this._highlightDate(date, calendarElement); });
-        }
-    };
-    /**
-     * Highlight a specific date
-     * Uses data-kt-selected attribute (class="active" removed for consistency)
-     */
-    KTDatepicker.prototype._highlightDate = function (date, calendarElement) {
-        var cell = this._findDayCell(date, calendarElement);
-        if (cell) {
-            cell.setAttribute('data-kt-selected', 'true');
-            cell.setAttribute('aria-selected', 'true');
-            // Note: class="active" is redundant - CSS already targets data-kt-selected
-        }
-    };
-    /**
-     * Highlight a date range
-     * Uses data-kt-hover-range for both hover preview and completed ranges (consolidated)
-     */
-    KTDatepicker.prototype._highlightDateRange = function (range, calendarElement) {
-        if (!range.start || !range.end) {
-            // If only start or end is set, just highlight that date (hover preview handles the rest)
-            if (range.start) {
-                this._highlightDate(range.start, calendarElement);
-            }
-            if (range.end) {
-                this._highlightDate(range.end, calendarElement);
-            }
-            return;
-        }
-        // Normalize dates to local midnight for accurate comparison
-        var start = new Date(range.start);
-        start.setHours(0, 0, 0, 0);
-        var end = new Date(range.end);
-        end.setHours(0, 0, 0, 0);
-        // Determine actual start and end (handle backward selection)
-        var actualStart = start <= end ? start : end;
-        var actualEnd = start <= end ? end : start;
-        // Highlight start and end dates
-        this._highlightDate(actualStart, calendarElement);
-        this._highlightDate(actualEnd, calendarElement);
-        // Find all calendars in multi-month view to highlight range across all visible months
-        var dropdownEl = calendarElement.closest('[data-kt-datepicker-dropdown]');
-        var allCalendars = dropdownEl
-            ? Array.from(dropdownEl.querySelectorAll('[data-kt-datepicker-calendar-table]'))
-            : [calendarElement];
-        // Highlight all dates in between using data-kt-hover-range (same as hover preview)
-        var current = new Date(actualStart);
-        current.setDate(current.getDate() + 1); // Start from day after start
-        while (current < actualEnd) {
-            var dateLocal = (0, date_utils_1.formatDateToLocalString)(current);
-            // Search across all calendars to find the cell
-            for (var _i = 0, allCalendars_1 = allCalendars; _i < allCalendars_1.length; _i++) {
-                var calendar = allCalendars_1[_i];
-                var cell = calendar.querySelector("td[data-kt-datepicker-day][data-date=\"".concat(dateLocal, "\"]"));
-                if (cell) {
-                    // Use data-kt-hover-range for completed ranges (consolidated with hover preview)
-                    cell.setAttribute('data-kt-hover-range', 'true');
-                    break; // Found in this calendar, no need to search others
-                }
-            }
-            current.setDate(current.getDate() + 1);
-        }
-    };
-    /**
-     * Find day cell for a specific date
-     * Uses data-date attribute (YYYY-MM-DD format) for accurate date matching across months
-     * Searches within the provided calendar element, or across all calendars in multi-month view
-     */
-    KTDatepicker.prototype._findDayCell = function (date, calendarElement) {
-        var dateLocal = (0, date_utils_1.formatDateToLocalString)(date); // Use local timezone date string for accurate matching (YYYY-MM-DD)
-        // First, try to find in the provided calendar element
-        var cells = calendarElement.querySelectorAll('td[data-kt-datepicker-day]');
-        for (var _i = 0, _a = Array.from(cells); _i < _a.length; _i++) {
-            var cell = _a[_i];
-            var cellDate = cell.getAttribute('data-date');
-            if (cellDate === dateLocal) {
-                return cell;
-            }
-        }
-        // If not found in provided calendar, search across all calendars in multi-month view
-        // This handles cases where the date might be in a different visible month
-        var dropdownEl = calendarElement.closest('[data-kt-datepicker-dropdown]');
-        if (dropdownEl) {
-            var allCalendars = dropdownEl.querySelectorAll('[data-kt-datepicker-calendar-table]');
-            for (var _b = 0, _c = Array.from(allCalendars); _b < _c.length; _b++) {
-                var calendar = _c[_b];
-                var allCells = calendar.querySelectorAll('td[data-kt-datepicker-day]');
-                for (var _d = 0, _e = Array.from(allCells); _d < _e.length; _d++) {
-                    var cell = _e[_d];
-                    var cellDate = cell.getAttribute('data-date');
-                    if (cellDate === dateLocal) {
-                        return cell;
-                    }
-                }
-            }
-        }
-        // No fallback - if date not found by data-date, it's not in any visible calendar view
-        // This prevents incorrect matches (e.g., matching Oct 20 when looking for Nov 20)
-        return null;
-    };
-    /**
-     * Update navigation display
-     */
-    KTDatepicker.prototype._updateNavigation = function (state, calendarElement) {
-        if (this._cachedElements.monthYearElement) {
-            var month = state.currentDate.toLocaleDateString('en-US', { month: 'long' });
-            var year = state.currentDate.getFullYear();
-            this._cachedElements.monthYearElement.textContent = "".concat(month, " ").concat(year);
-        }
-    };
-    /**
-     * Update time picker display
-     */
-    KTDatepicker.prototype._updateTimePicker = function (state) {
-        if (!this._cachedElements.timePickerElement || !state.selectedTime)
-            return;
-        if (this._cachedElements.timeDisplay) {
-            var timeString = "".concat(state.selectedTime.hour.toString().padStart(2, '0'), ":").concat(state.selectedTime.minute.toString().padStart(2, '0'), ":").concat(state.selectedTime.second.toString().padStart(2, '0'));
-            this._cachedElements.timeDisplay.textContent = timeString;
-        }
-    };
-    /**
-     * Fire events based on state changes using the centralized event system
-     */
-    KTDatepicker.prototype._fireEvents = function (newState, oldState) {
-        var _a, _b, _c, _d;
-        // Fire onChange when selected date changes
-        if (newState.selectedDate !== oldState.selectedDate ||
-            ((_a = newState.selectedRange) === null || _a === void 0 ? void 0 : _a.start) !== ((_b = oldState.selectedRange) === null || _b === void 0 ? void 0 : _b.start) ||
-            ((_c = newState.selectedRange) === null || _c === void 0 ? void 0 : _c.end) !== ((_d = oldState.selectedRange) === null || _d === void 0 ? void 0 : _d.end) ||
-            JSON.stringify(newState.selectedDates) !== JSON.stringify(oldState.selectedDates)) {
-            var selectedValue = null;
-            if (this._config.range && newState.selectedRange) {
-                // For range mode, pass the end date if both are selected, otherwise null
-                selectedValue = newState.selectedRange.end || newState.selectedRange.start;
-            }
-            else if (this._config.multiDate && newState.selectedDates.length > 0) {
-                // For multi-date mode, pass the last selected date
-                selectedValue = newState.selectedDates[newState.selectedDates.length - 1];
-            }
-            else {
-                // For single date mode
-                selectedValue = newState.selectedDate;
-            }
-            this._fireDatepickerEvent('onChange', selectedValue, this);
-        }
-        // Fire onOpen when dropdown opens
-        if (newState.isOpen && !oldState.isOpen) {
-            this._fireDatepickerEvent('onOpen', this);
-        }
-        // Fire onClose when dropdown closes
-        if (!newState.isOpen && oldState.isOpen) {
-            this._fireDatepickerEvent('onClose', this);
-        }
-    };
-    /**
-     * Centralized event firing system - safely dispatches events with error handling
-     */
-    KTDatepicker.prototype._fireDatepickerEvent = function (eventName) {
-        var args = [];
-        for (var _i = 1; _i < arguments.length; _i++) {
-            args[_i - 1] = arguments[_i];
-        }
-        try {
-            var eventHandler = this._config[eventName];
-            if (typeof eventHandler === 'function') {
-                eventHandler.apply(void 0, args);
-            }
-        }
-        catch (error) {
-            // Don't let event handler errors break the datepicker
-        }
-    };
-    // --- Mode-specific helpers ---
-    /** Initialize single date from config */
-    KTDatepicker.prototype._initSingleDateFromConfig = function () {
-        if (this._config.value) {
-            var date = new Date(this._config.value);
-            this._unifiedStateManager.setSelectedDate(date, 'config');
-            this._unifiedStateManager.setCurrentDate(date, 'config');
-        }
-    };
-    /** Initialize range from config */
-    KTDatepicker.prototype._initRangeFromConfig = function () {
-        if (this._config.valueRange) {
-            var start = this._config.valueRange.start ? new Date(this._config.valueRange.start) : null;
-            var end = this._config.valueRange.end ? new Date(this._config.valueRange.end) : null;
-            this._unifiedStateManager.setSelectedRange({ start: start, end: end }, 'config');
-        }
-    };
-    /** Initialize multi-date from config */
-    KTDatepicker.prototype._initMultiDateFromConfig = function () {
-        if (Array.isArray(this._config.values)) {
-            var dates = this._config.values.map(function (v) { return new Date(v); });
-            this._unifiedStateManager.setSelectedDates(dates, 'config');
-        }
-    };
-    /** Format single date for input */
-    KTDatepicker.prototype._formatSingleDate = function (date) {
-        if (!date)
-            return '';
-        // If time is enabled, include time in the format
-        if (this._config.enableTime) {
-            if (this._config.format && typeof this._config.format === 'string') {
-                // Check if format already includes time tokens
-                var hasTimeTokens = /[Hhms]/.test(this._config.format);
-                if (hasTimeTokens) {
-                    return (0, date_formatters_1.formatDate)(date, this._config.format);
-                }
-                else {
-                    // Add time format based on granularity and format
-                    var timeFormat = this._getTimeFormat();
-                    var dateFormat = this._config.format;
-                    return (0, date_formatters_1.formatDate)(date, "".concat(dateFormat, " ").concat(timeFormat));
-                }
-            }
-            else {
-                // Default format with time
-                var timeFormat = this._getTimeFormat();
-                return "".concat(date.toLocaleDateString(this._config.locale || 'en-US'), " ").concat((0, date_formatters_1.formatDate)(date, timeFormat));
-            }
-        }
-        else {
-            // Time not enabled, use original logic
-            if (this._config.format && typeof this._config.format === 'string') {
-                return (0, date_formatters_1.formatDate)(date, this._config.format);
-            }
-            else if (this._config.locale) {
-                return date.toLocaleDateString(this._config.locale);
-            }
-            else {
-                return date.toLocaleDateString();
-            }
-        }
-    };
-    /**
-     * Get time format string based on granularity and time format
-     * @returns Time format string
-     */
-    KTDatepicker.prototype._getTimeFormat = function () {
-        var granularity = this._unifiedStateManager.getState().timeGranularity || 'minute';
-        var timeFormat = this._config.timeFormat || '24h';
-        switch (granularity) {
-            case 'hour':
-                return timeFormat === '12h' ? 'HH a' : 'HH';
-            case 'minute':
-                return timeFormat === '12h' ? 'HH:mm a' : 'HH:mm';
-            case 'second':
-                return timeFormat === '12h' ? 'HH:mm:ss a' : 'HH:mm:ss';
-            default:
-                return timeFormat === '12h' ? 'HH:mm a' : 'HH:mm';
-        }
-    };
-    /** Format range for input */
-    KTDatepicker.prototype._formatRange = function (start, end) {
-        if (start && end) {
-            return "".concat(this._formatSingleDate(start), " \u2013 ").concat(this._formatSingleDate(end));
-        }
-        else if (start) {
-            return this._formatSingleDate(start);
-        }
-        return '';
-    };
-    /** Format multi-date for input */
-    KTDatepicker.prototype._formatMultiDate = function (dates) {
-        var _this = this;
-        return dates.map(function (d) { return _this._formatSingleDate(d); }).join(', ');
-    };
-    /** Select a single date */
-    KTDatepicker.prototype._selectSingleDate = function (date) {
-        // Preserve time if time is enabled
-        if (this._config.enableTime) {
-            var timeToUse = this._unifiedStateManager.getState().selectedTime;
-            // If no selectedTime, try to extract from current selectedDate
-            if (!timeToUse) {
-                var currentSelectedDate = this._unifiedStateManager.getState().selectedDate;
-                if (currentSelectedDate) {
-                    timeToUse = (0, time_utils_1.dateToTimeState)(currentSelectedDate);
-                }
-            }
-            // If still no time, default to current time
-            if (!timeToUse) {
-                timeToUse = (0, time_utils_1.dateToTimeState)(new Date());
-            }
-            var dateWithTime = (0, time_utils_1.applyTimeToDate)(date, timeToUse);
-            this._unifiedStateManager.setSelectedDate(dateWithTime, 'calendar');
-        }
-        else {
-            this._unifiedStateManager.setSelectedDate(date, 'calendar');
-        }
-        // Dispatch change event
-        if (this._input) {
-            var evt = new Event('change', { bubbles: true });
-            this._input.dispatchEvent(evt);
-        }
-    };
-    /**
-     * Select a range date (calendar click or segmented input change)
-     * Updates both segmented inputs and internal state.
-     */
-    KTDatepicker.prototype._selectRangeDate = function (date) {
-        var _a;
-        var currentState = this._unifiedStateManager.getState();
-        // First, let updateRangeSelection handle the date logic (it normalizes to midnight for comparison)
-        var newRange = (0, helpers_1.updateRangeSelection)(currentState.selectedRange, date);
-        // Then, if time is enabled, apply time to both start and end dates
-        if (this._config.enableTime) {
-            var timeToUse = currentState.selectedTime;
-            // If no selectedTime, try to extract from current selectedDate or range dates
-            if (!timeToUse) {
-                // Check if we have a start date with time
-                if ((_a = currentState.selectedRange) === null || _a === void 0 ? void 0 : _a.start) {
-                    timeToUse = (0, time_utils_1.dateToTimeState)(currentState.selectedRange.start);
-                }
-                else if (currentState.selectedDate) {
-                    timeToUse = (0, time_utils_1.dateToTimeState)(currentState.selectedDate);
-                }
-            }
-            // If still no time, default to current time
-            if (!timeToUse) {
-                timeToUse = (0, time_utils_1.dateToTimeState)(new Date());
-            }
-            // Apply time to both start and end dates
-            var rangeWithTime = {
-                start: newRange.start ? (0, time_utils_1.applyTimeToDate)(newRange.start, timeToUse) : null,
-                end: newRange.end ? (0, time_utils_1.applyTimeToDate)(newRange.end, timeToUse) : null
-            };
-            this._unifiedStateManager.setSelectedRange(rangeWithTime, 'calendar');
-        }
-        else {
-            this._unifiedStateManager.setSelectedRange(newRange, 'calendar');
-        }
-        if (this._input) {
-            var evt = new Event('change', { bubbles: true });
-            this._input.dispatchEvent(evt);
-        }
-    };
-    /** Select a multi-date */
-    KTDatepicker.prototype._selectMultiDate = function (date) {
-        var currentState = this._unifiedStateManager.getState();
-        var currentDates = currentState.selectedDates || [];
-        // Preserve time if time is enabled
-        var dateToSelect = date;
-        if (this._config.enableTime) {
-            var timeToUse = currentState.selectedTime;
-            // If no selectedTime, try to extract from existing selected dates
-            if (!timeToUse && currentDates.length > 0) {
-                timeToUse = (0, time_utils_1.dateToTimeState)(currentDates[0]);
-            }
-            else if (!timeToUse && currentState.selectedDate) {
-                timeToUse = (0, time_utils_1.dateToTimeState)(currentState.selectedDate);
-            }
-            // If still no time, default to current time
-            if (!timeToUse) {
-                timeToUse = (0, time_utils_1.dateToTimeState)(new Date());
-            }
-            dateToSelect = (0, time_utils_1.applyTimeToDate)(date, timeToUse);
-        }
-        var exists = currentDates.some(function (d) { return d.getTime() === dateToSelect.getTime(); });
-        var newDates;
-        if (exists) {
-            newDates = currentDates.filter(function (d) { return d.getTime() !== dateToSelect.getTime(); });
-        }
-        else {
-            newDates = __spreadArray(__spreadArray([], currentDates, true), [dateToSelect], false);
-        }
-        this._unifiedStateManager.setSelectedDates(newDates, 'calendar');
-        if (this._input) {
-            var evt = new Event('change', { bubbles: true });
-            this._input.dispatchEvent(evt);
-        }
-    };
-    KTDatepicker.prototype._init = function (element) {
-        this._element = element;
-        // Find or assign the input
-        this._input = this._element.querySelector('input[data-kt-datepicker-input]');
-        if (!this._input) {
-            // Fallback: find the first input and add the attribute
-            var firstInput = this._element.querySelector('input');
-            if (firstInput) {
-                firstInput.setAttribute('data-kt-datepicker-input', '');
-                this._input = firstInput;
-            }
-            else {
-                // If no input exists, create one and append
-                var newInput = document.createElement('input');
-                newInput.setAttribute('data-kt-datepicker-input', '');
-                this._element.appendChild(newInput);
-                this._input = newInput;
-            }
-        }
-    };
-    /**
-     * Build config by merging defaults and user config
-     */
-    KTDatepicker.prototype._buildConfig = function (config) {
-        // First call parent to read data attributes
-        _super.prototype._buildConfig.call(this, config);
-        // Merge templates separately to ensure correct type
-        var mergedTemplates = __assign(__assign(__assign({}, templates_1.defaultTemplates), (this._config.templates || {})), (this._userTemplates || {}));
-        // Determine closeOnSelect default based on mode and requirements
-        var closeOnSelect;
-        if (typeof this._config.closeOnSelect !== 'undefined') {
-            // User explicitly set closeOnSelect, respect their choice
-            closeOnSelect = this._config.closeOnSelect;
-        }
-        else if (this._config.enableTime) {
-            // Time-enabled: never close on date selection
-            closeOnSelect = false;
-        }
-        else if (this._config.range) {
-            // Range mode: handle clicks inside dropdown
-            closeOnSelect = false;
-        }
-        else if (this._config.multiDate) {
-            // Multi-date mode: don't close on individual selections
-            closeOnSelect = false;
-        }
-        else {
-            // Single date only: close on date click
-            closeOnSelect = true;
-        }
-        // Merge with data attributes and passed config
-        // Important: data attributes (this._config) must come after defaults to override them
-        this._config = __assign(__assign(__assign(__assign({}, config_1.defaultDatepickerConfig), this._config), (config || {})), { templates: mergedTemplates, closeOnSelect: closeOnSelect });
-        // Initialize event manager
-        this._eventManager = new event_manager_1.EventManager();
-        // Initialize focus manager for keyboard navigation
-        this._focusManager = new focus_manager_1.FocusManager({
-            enableFocusTrapping: true,
-            enableFocusRestoration: true,
-            enableKeyboardNavigation: true,
-            enableDebugging: this._config.debug || false
-        });
-    };
-    /**
-     * Public method to set/override templates at runtime (supports string or function)
-     */
-    KTDatepicker.prototype.setTemplates = function (templates) {
-        this._userTemplates = __assign(__assign({}, this._userTemplates), templates);
-        this._templateSet = (0, templates_1.getTemplateStrings)(this._config);
-        this._templateRenderer.updateTemplates(this._templateSet);
-        this._render();
-    };
-    /**
-     * Render the main container and set this._container
-     */
-    KTDatepicker.prototype._renderContainer = function () {
-        var containerEl = this._templateRenderer.renderTemplateToElement({
-            templateKey: 'container',
-            data: {},
-            configClasses: this._config.classes
-        });
-        this._container = containerEl;
-        return containerEl;
-    };
-    /**
-     * Render the input wrapper and calendar button, move/create input element
-     * In range mode, renders two segmented inputs (start/end) using the segmentedDateRangeInput template.
-     */
-    KTDatepicker.prototype._renderInputWrapper = function (calendarButtonHtml) {
-        var _this = this;
-        var inputWrapperTpl = this._templateSet.inputWrapper || templates_1.defaultTemplates.inputWrapper;
-        // Set input to hidden instead of removing it, so it remains in DOM for form submission
-        if (this._input) {
-            this._input.type = 'hidden';
-            // Remove any visible styling classes that might interfere
-            this._input.classList.remove('hidden');
-        }
-        if (this._config.range) {
-            var rangeTpl = this._templateSet.segmentedDateRangeInput || templates_1.defaultTemplates.segmentedDateRangeInput;
-            var _a = (0, helpers_1.renderRangeSegmentedInputUI)(inputWrapperTpl, rangeTpl, calendarButtonHtml, this._config), inputWrapperEl_1 = _a.inputWrapperEl, startContainer = _a.startContainer, endContainer = _a.endContainer;
-            (0, helpers_1.instantiateRangeSegmentedInputs)(startContainer, endContainer, this._unifiedStateManager.getState(), this._config, function (date) {
-                var _a;
-                var end = ((_a = _this._unifiedStateManager.getState().selectedRange) === null || _a === void 0 ? void 0 : _a.end) || null;
-                var newEnd = end;
-                if (end && date > end)
-                    newEnd = null;
-                _this._unifiedStateManager.updateState({ selectedRange: { start: date, end: newEnd } }, 'range-selection');
-                _this._render();
-            }, function (date) {
-                var _a;
-                var start = ((_a = _this._unifiedStateManager.getState().selectedRange) === null || _a === void 0 ? void 0 : _a.start) || null;
-                var newStart = start;
-                if (start && date < start)
-                    newStart = null;
-                _this._unifiedStateManager.updateState({ selectedRange: { start: newStart, end: date } }, 'range-selection');
-                _this._render();
-            });
-            return inputWrapperEl_1;
-        }
-        // Single-date mode
-        var inputWrapperEl = (0, helpers_1.renderSingleSegmentedInputUI)(inputWrapperTpl, calendarButtonHtml, this._config);
-        // Find the segmented input container that was rendered by the template system
-        var segmentedInputContainer = inputWrapperEl.querySelector('[data-kt-datepicker-segmented-input]');
-        (0, helpers_1.instantiateSingleSegmentedInput)(segmentedInputContainer, this._unifiedStateManager.getState(), this._config, function (date) {
-            _this.setDate(date);
-        });
-        return inputWrapperEl;
-    };
-    /**
-     * Bind event listener to the calendar button and input wrapper
-     */
-    KTDatepicker.prototype._bindCalendarButtonEvent = function (inputWrapperEl) {
-        var _this = this;
-        var buttonEl = inputWrapperEl.querySelector('button[data-kt-datepicker-calendar-btn]');
-        if (buttonEl && buttonEl instanceof HTMLButtonElement) {
-            buttonEl.type = 'button';
-            buttonEl.setAttribute('aria-label', this._config.calendarButtonAriaLabel || 'Open calendar');
-            buttonEl.addEventListener('click', function (e) {
-                e.preventDefault();
-                e.stopPropagation();
-                if (_this._config.disabled || buttonEl.hasAttribute('disabled')) {
-                    return;
-                }
-                _this.toggle();
-            });
-        }
-        // Add click handler to entire input wrapper for better UX
-        inputWrapperEl.addEventListener('click', function (e) {
-            // Don't handle if disabled
-            if (_this._config.disabled) {
-                return;
-            }
-            // Don't handle if target is a focusable input element (segmented input)
-            var target = e.target;
-            if (target.hasAttribute('contenteditable') || target.hasAttribute('data-segment')) {
-                return;
-            }
-            // Don't handle if already handled by button click
-            if (target === buttonEl || (buttonEl === null || buttonEl === void 0 ? void 0 : buttonEl.contains(target))) {
-                return;
-            }
-            // Open the datepicker
-            _this.open();
-        });
-    };
-    /**
-     * Render the dropdown container from template
-     */
-    KTDatepicker.prototype._renderDropdown = function () {
-        var dropdownEl = this._templateRenderer.renderTemplateToElement({
-            templateKey: 'dropdown',
-            data: {},
-            configClasses: this._config.classes
-        });
-        dropdownEl.setAttribute('data-kt-datepicker-dropdown', '');
-        // Add instance association for better identification
-        if (this._instanceId) {
-            dropdownEl.setAttribute('data-kt-datepicker-instance-id', this._instanceId);
-        }
-        if (!this._unifiedStateManager.isDropdownOpen()) {
-            dropdownEl.classList.add('hidden');
-        }
-        return dropdownEl;
-    };
-    /**
-     * Render header, calendar, and footer into the dropdown element
-     */
-    KTDatepicker.prototype._renderDropdownContent = function (dropdownEl) {
-        var _this = this;
-        var _a;
-        var visibleMonths = (_a = this._config.visibleMonths) !== null && _a !== void 0 ? _a : 1;
-        if (visibleMonths === 1) {
-            this._renderSingleMonth(dropdownEl);
-        }
-        else {
-            this._renderMultiMonth(dropdownEl, visibleMonths);
-        }
-        // --- Render footer using template-driven buttons (conditional by mode) ---
-        var isRange = !!this._config.range;
-        var isMultiDate = !!this._config.multiDate;
-        var showFooter = isRange || isMultiDate;
-        if (showFooter) {
-            var todayButtonHtml = undefined;
-            var clearButtonHtml = undefined;
-            var applyButtonHtml = undefined;
-            var todayButtonTpl = this._templateSet.todayButton || templates_1.defaultTemplates.todayButton;
-            var clearButtonTpl = this._templateSet.clearButton || templates_1.defaultTemplates.clearButton;
-            var applyButtonTpl = this._templateSet.applyButton || templates_1.defaultTemplates.applyButton;
-            // Only show Today/Clear if explicitly enabled in config/templates
-            if (this._config.showTodayButton) {
-                todayButtonHtml = typeof todayButtonTpl === 'function' ? todayButtonTpl({}) : todayButtonTpl;
-            }
-            if (this._config.showClearButton) {
-                clearButtonHtml = typeof clearButtonTpl === 'function' ? clearButtonTpl({}) : clearButtonTpl;
-            }
-            // Always show Apply in range/multi-date mode
-            applyButtonHtml = typeof applyButtonTpl === 'function' ? applyButtonTpl({}) : applyButtonTpl;
-            var footer = (0, footer_1.renderFooter)(this._templateSet.footer, { todayButton: todayButtonHtml, clearButton: clearButtonHtml, applyButton: applyButtonHtml }, this._onToday, this._onClear, this._onApply);
-            dropdownEl.appendChild(footer);
-        }
-        // --- Render time picker if enabled ---
-        var currentState = this._unifiedStateManager.getState();
-        if (this._config.enableTime && currentState.selectedTime) {
-            var timePickerContainer = this._templateRenderer.renderTemplateToElement({
-                templateKey: 'timePickerWrapper',
-                data: {},
-                configClasses: this._config.classes
-            });
-            timePickerContainer.setAttribute('data-kt-datepicker-time-container', '');
-            // Store the time picker renderer result
-            this._timePickerRenderer = (0, time_picker_1.renderTimePicker)(timePickerContainer, {
-                time: currentState.selectedTime,
-                granularity: currentState.timeGranularity,
-                format: this._config.timeFormat || '24h',
-                minTime: this._config.minTime,
-                maxTime: this._config.maxTime,
-                timeStep: this._config.timeStep || 1,
-                disabled: !!this._config.disabled,
-                onChange: function (newTime) {
-                    // Update unified state manager
-                    _this._unifiedStateManager.updateState({
-                        selectedTime: newTime
-                    }, 'time-picker');
-                    // Apply time to selected date if exists
-                    var updatedState = _this._unifiedStateManager.getState();
-                    if (updatedState.selectedDate) {
-                        var dateWithTime = (0, time_utils_1.applyTimeToDate)(updatedState.selectedDate, newTime);
-                        _this._unifiedStateManager.updateState({
-                            selectedDate: dateWithTime
-                        }, 'time-picker');
-                    }
-                    // Update the time picker renderer with the new state
-                    if (_this._timePickerRenderer) {
-                        _this._timePickerRenderer.update(newTime);
-                    }
-                },
-                templates: this._templateSet
-            });
-            dropdownEl.appendChild(timePickerContainer);
-        }
-    };
-    /**
-     * Render single month calendar
-     */
-    KTDatepicker.prototype._renderSingleMonth = function (dropdownEl) {
-        var _this = this;
-        var prevButtonHtml;
-        var nextButtonHtml;
-        var prevButtonTpl = this._templateSet.prevButton || templates_1.defaultTemplates.prevButton;
-        var nextButtonTpl = this._templateSet.nextButton || templates_1.defaultTemplates.nextButton;
-        prevButtonHtml = typeof prevButtonTpl === 'function' ? prevButtonTpl({}) : prevButtonTpl;
-        nextButtonHtml = typeof nextButtonTpl === 'function' ? nextButtonTpl({}) : nextButtonTpl;
-        var currentState = this._unifiedStateManager.getState();
-        var header = (0, header_1.renderHeader)(this._templateSet.header, {
-            month: currentState.currentDate.toLocaleString(this._config.locale, { month: 'long' }),
-            year: currentState.currentDate.getFullYear(),
-            prevButton: prevButtonHtml,
-            nextButton: nextButtonHtml,
-        }, function (e) { e.stopPropagation(); _this._changeMonth(-1); }, function (e) { e.stopPropagation(); _this._changeMonth(1); });
-        dropdownEl.appendChild(header);
-        var dayClickHandler = function (day) {
-            _this.setDate(day);
-        };
-        var calendar = (0, calendar_1.renderCalendar)(this._templateSet.dayCell, this._getCalendarDays(currentState.currentDate), currentState.currentDate, currentState.selectedDate, dayClickHandler, this._config.locale, this._config.range ? currentState.selectedRange : undefined, this._config.multiDate ? currentState.selectedDates : undefined);
-        dropdownEl.appendChild(calendar);
-    };
-    /**
-     * Get array of dates for multi-month display
-     * @param baseDate - The base date to calculate months from
-     * @param count - Number of months to generate
-     * @returns Array of dates representing the first day of each month
-     */
-    KTDatepicker.prototype._getMultiMonthDates = function (baseDate, count) {
-        var dates = [];
-        for (var i = 0; i < count; i++) {
-            var monthDate = new Date(baseDate.getFullYear(), baseDate.getMonth() + i, 1);
-            dates.push(monthDate);
-        }
-        return dates;
-    };
-    /**
-     * Render a single calendar month for multi-month display
-     * @param monthDate - The date representing the month to render
-     * @param index - Index of this month in the multi-month display
-     * @param totalMonths - Total number of months being displayed
-     * @returns HTMLElement containing the rendered month
-     */
-    KTDatepicker.prototype._renderMultiMonthCalendar = function (monthDate, index, totalMonths) {
-        var _this = this;
-        // Navigation buttons: only first gets prev, only last gets next
-        var prevButtonHtml = '';
-        var nextButtonHtml = '';
-        if (index === 0) {
-            var prevButtonTpl = this._templateSet.prevButton || templates_1.defaultTemplates.prevButton;
-            prevButtonHtml = typeof prevButtonTpl === 'function' ? prevButtonTpl({}) : prevButtonTpl;
-        }
-        if (index === totalMonths - 1) {
-            var nextButtonTpl = this._templateSet.nextButton || templates_1.defaultTemplates.nextButton;
-            nextButtonHtml = typeof nextButtonTpl === 'function' ? nextButtonTpl({}) : nextButtonTpl;
-        }
-        var header = (0, header_1.renderHeader)(this._templateSet.header, {
-            month: monthDate.toLocaleString(this._config.locale, { month: 'long' }),
-            year: monthDate.getFullYear(),
-            prevButton: prevButtonHtml,
-            nextButton: nextButtonHtml,
-        }, function (e) { e.stopPropagation(); _this._changeMonth(-1); }, function (e) { e.stopPropagation(); _this._changeMonth(1); });
-        var currentState = this._unifiedStateManager.getState();
-        var calendar = (0, calendar_1.renderCalendar)(this._templateSet.dayCell, this._getCalendarDays(monthDate), monthDate, currentState.selectedDate, function (day) { _this.setDate(day); }, this._config.locale, this._config.range ? currentState.selectedRange : undefined, this._config.multiDate ? currentState.selectedDates : undefined);
-        // Create panel element and append header + calendar directly to preserve event listeners
-        // Instead of converting to HTML strings which lose event listeners
-        var panel = document.createElement('div');
-        panel.setAttribute('data-kt-datepicker-panel', '');
-        // Apply default panel styling (flex flex-col gap-1.5 from CSS)
-        panel.className = 'flex flex-col gap-1.5';
-        // Append header and calendar directly (preserves event listeners)
-        panel.appendChild(header);
-        panel.appendChild(calendar);
-        return panel;
-    };
-    /**
-     * Render multi-month calendar
-     */
-    KTDatepicker.prototype._renderMultiMonth = function (dropdownEl, visibleMonths) {
-        var _this = this;
-        var _a;
-        var currentState = this._unifiedStateManager.getState();
-        var baseDate = new Date(currentState.currentDate);
-        // Get all month dates for multi-month display
-        var monthDates = this._getMultiMonthDates(baseDate, visibleMonths);
-        // Create multi-month container element
-        var multiMonthContainer = document.createElement('div');
-        multiMonthContainer.setAttribute('data-kt-datepicker-multimonth-container', '');
-        // Apply classes: flex flex-col md:flex-row gap-4
-        multiMonthContainer.className = 'flex flex-col md:flex-row gap-4';
-        if ((_a = this._config.classes) === null || _a === void 0 ? void 0 : _a.multiMonthContainer) {
-            multiMonthContainer.className += ' ' + this._config.classes.multiMonthContainer;
-        }
-        // Render each month panel and append directly (preserves event listeners)
-        monthDates.forEach(function (monthDate, index) {
-            var panel = _this._renderMultiMonthCalendar(monthDate, index, visibleMonths);
-            multiMonthContainer.appendChild(panel);
-        });
-        dropdownEl.appendChild(multiMonthContainer);
-    };
-    /**
-     * Render the datepicker UI using templates
-     */
-    KTDatepicker.prototype._render = function () {
-        var _this = this;
-        // Performance marker: Start render
-        if (typeof performance !== 'undefined' && this._config.debug) {
-            performance.mark('datepicker-render-start');
-        }
-        // Store current state before rendering
-        var wasOpen = this._unifiedStateManager.isDropdownOpen();
-        var selectedDate = this._unifiedStateManager.getState().selectedDate;
-        var selectedRange = this._unifiedStateManager.getState().selectedRange;
-        var selectedDates = this._unifiedStateManager.getState().selectedDates;
-        // Remove any previous container
-        if (this._container && this._container.parentNode) {
-            this._container.parentNode.removeChild(this._container);
-        }
-        // Render main container from template
-        var containerEl = this._renderContainer();
-        // Remove any previous input wrapper
-        var existingWrapper = this._element.querySelector('[data-kt-datepicker-input-wrapper]');
-        if (existingWrapper && existingWrapper.parentNode) {
-            existingWrapper.parentNode.removeChild(existingWrapper);
-        }
-        // Render calendar button from template
-        var calendarButtonTpl = this._templateSet.calendarButton || templates_1.defaultTemplates.calendarButton;
-        var calendarButtonHtml;
-        if (typeof calendarButtonTpl === 'function') {
-            var classData = (0, templates_1.mergeClassData)('calendarButton', { ariaLabel: this._config.calendarButtonAriaLabel || 'Open calendar' }, this._config.classes);
-            calendarButtonHtml = calendarButtonTpl(classData);
-        }
-        else {
-            var classData = (0, templates_1.mergeClassData)('calendarButton', { ariaLabel: this._config.calendarButtonAriaLabel || 'Open calendar' }, this._config.classes);
-            calendarButtonHtml = (0, templates_1.renderTemplateString)(calendarButtonTpl, classData);
-        }
-        // Render input wrapper and calendar button from template
-        var inputWrapperEl = this._renderInputWrapper(calendarButtonHtml);
-        // Attach calendar button event listener
-        this._bindCalendarButtonEvent(inputWrapperEl);
-        // Insert wrapper at the start of the element
-        this._element.insertBefore(inputWrapperEl, this._element.firstChild);
-        // --- Dropdown rendering and attachment ---
-        // Remove any previous dropdown
-        var existingDropdown = this._element.querySelector('[data-kt-datepicker-dropdown]');
-        if (existingDropdown && existingDropdown.parentNode) {
-            existingDropdown.parentNode.removeChild(existingDropdown);
-        }
-        // Render dropdown from template system (never inline)
-        var dropdownEl = this._renderDropdown();
-        this._renderDropdownContent(dropdownEl);
-        this._attachDropdown(inputWrapperEl, dropdownEl);
-        // Restore state
-        this._unifiedStateManager.updateState({
-            selectedDate: selectedDate,
-            selectedRange: selectedRange,
-            selectedDates: selectedDates
-        }, 'render-restore');
-        // Restore open state
-        if (wasOpen) {
-            this._unifiedStateManager.setDropdownOpen(true, 'render-restore');
-            // The dropdown module will automatically open via observer pattern
-        }
-        this._updatePlaceholder();
-        this._updateDisabledState();
-        // Enforce min/max dates after rendering
-        // Use requestAnimationFrame to align with browser render cycle
-        requestAnimationFrame(function () {
-            _this._enforceMinMaxDates();
-        });
-        // Attach keyboard event listeners
-        if (this._input) {
-            this._eventManager.removeListener(this._input, 'keydown', this._onKeyDown);
-            this._eventManager.addListener(this._input, 'keydown', this._onKeyDown);
-        }
-        if (dropdownEl) {
-            this._eventManager.removeListener(dropdownEl, 'keydown', this._onKeyDown);
-            this._eventManager.addListener(dropdownEl, 'keydown', this._onKeyDown);
-        }
-        // Ensure live region exists
-        var liveRegion = this._element.querySelector('[data-kt-datepicker-live]');
-        if (!liveRegion) {
-            liveRegion = this._templateRenderer.renderTemplateToElement({
-                templateKey: 'liveRegion',
-                data: {},
-                configClasses: this._config.classes
-            });
-            this._element.appendChild(liveRegion);
-        }
-        // Initialize DOM element cache after rendering
-        this._initializeElementCache();
-        // Performance marker: End render
-        if (typeof performance !== 'undefined' && this._config.debug) {
-            performance.mark('datepicker-render-end');
-            performance.measure('datepicker-render', 'datepicker-render-start', 'datepicker-render-end');
-        }
-    };
-    /**
-     * Attach the dropdown after the input wrapper
-     */
-    KTDatepicker.prototype._attachDropdown = function (inputWrapperEl, dropdownEl) {
-        // Clean up existing dropdown module
-        if (this._dropdownModule) {
-            this._dropdownModule.dispose();
-        }
-        // Always attach dropdown element to DOM first
-        if (inputWrapperEl.nextSibling) {
-            this._element.insertBefore(dropdownEl, inputWrapperEl.nextSibling);
-        }
-        else {
-            this._element.appendChild(dropdownEl);
-        }
-        // Find the toggle element (calendar button)
-        var toggleElement = this._element.querySelector('button[data-kt-datepicker-calendar-btn]');
-        if (toggleElement) {
-            // Create new dropdown module
-            this._dropdownModule = new dropdown_1.KTDatepickerDropdown(this._element, toggleElement, dropdownEl, this._config);
-            // Connect dropdown module to unified state manager
-            if (this._dropdownModule) {
-                this._dropdownModule.setUnifiedStateManager(this._unifiedStateManager);
-                this._unifiedStateManager.subscribe(this._dropdownModule);
-            }
-        }
-    };
-    KTDatepicker.prototype._getCalendarDays = function (date) {
-        var year = date.getFullYear();
-        var month = date.getMonth();
-        var firstDay = new Date(year, month, 1);
-        var lastDay = new Date(year, month + 1, 0);
-        var days = [];
-        // Start from Sunday of the first week
-        var start = new Date(firstDay);
-        start.setDate(firstDay.getDate() - firstDay.getDay());
-        // End at Saturday of the last week
-        var end = new Date(lastDay);
-        end.setDate(lastDay.getDate() + (6 - lastDay.getDay()));
-        // Reuse date object by incrementing instead of creating new ones
-        var currentDate = new Date(start);
-        while (currentDate <= end) {
-            days.push(new Date(currentDate)); // Create new Date instance for each day to avoid mutation issues
-            currentDate.setDate(currentDate.getDate() + 1);
-        }
-        return days;
-    };
-    KTDatepicker.prototype._changeMonth = function (offset) {
-        var _this = this;
-        var currentState = this._unifiedStateManager.getState();
-        var d = new Date(currentState.currentDate);
-        d.setMonth(d.getMonth() + offset);
-        // Update the unified state manager and wait for state to propagate
-        this._unifiedStateManager.updateState({
-            currentDate: d
-        }, 'month-navigation');
-        // Ensure state is fully updated before proceeding
-        setTimeout(function () {
-            // Force a state refresh to ensure we have the latest state
-            var updatedState = _this._unifiedStateManager.getState();
-            // Check if the state actually changed
-            if (updatedState.currentDate.getMonth() === d.getMonth()) {
-                // Use multi-month update if multiple months are visible
-                if (_this._config.visibleMonths && _this._config.visibleMonths > 1) {
-                    _this._updateMultiMonthCalendarContent();
-                }
-                else {
-                    _this._updateCalendarContent();
-                }
-            }
-            else {
-                // Wait a bit more for state to propagate
-                setTimeout(function () {
-                    if (_this._config.visibleMonths && _this._config.visibleMonths > 1) {
-                        _this._updateMultiMonthCalendarContent();
-                    }
-                    else {
-                        _this._updateCalendarContent();
-                    }
-                }, 50);
-            }
-        }, 10);
-    };
-    /**
-   * Update only the calendar content without recreating the dropdown
-   * This preserves the dropdown state while updating the month view
-   */
-    KTDatepicker.prototype._updateCalendarContent = function () {
-        var _this = this;
-        // Performance marker: Start incremental update
-        if (typeof performance !== 'undefined' && this._config.debug) {
-            performance.mark('datepicker-incremental-update-start');
-        }
-        // Instance-scoped dropdown element selection strategy
-        var dropdownEl = null;
-        // First priority: find dropdown within current datepicker instance
-        dropdownEl = this._element.querySelector('[data-kt-datepicker-dropdown]');
-        // Second priority: if instance ID is available, find by instance ID
-        if (!dropdownEl && this._instanceId) {
-            dropdownEl = document.querySelector("[data-kt-datepicker-dropdown][data-kt-datepicker-instance-id=\"".concat(this._instanceId, "\"]"));
-        }
-        // Third priority: check dropdown module reference
-        if (!dropdownEl && this._dropdownModule) {
-            var dropdownModuleElement = this._dropdownModule._dropdownElement;
-            if (dropdownModuleElement) {
-                dropdownEl = dropdownModuleElement;
-            }
-        }
-        // Final fallback: global search with warnings (only if no other instances exist)
-        if (!dropdownEl) {
-            var allDropdowns = document.querySelectorAll('[data-kt-datepicker-dropdown]');
-            if (allDropdowns.length === 1) {
-                // Only one dropdown exists globally, safe to use
-                dropdownEl = allDropdowns[0];
-            }
-            else if (allDropdowns.length > 1) {
-                // Multiple dropdowns exist - this could cause cross-instance issues
-                this._render();
-                return;
-            }
-            else {
-                this._render();
-                return;
-            }
-        }
-        if (!dropdownEl) {
-            // Fallback to full render if dropdown doesn't exist (should be rare)
-            this._render();
-            return;
-        }
-        // Clear existing calendar content and update only the calendar
-        var calendarEl = dropdownEl.querySelector('[data-kt-datepicker-calendar-table]');
-        if (calendarEl) {
-            // Remove the old calendar
-            calendarEl.remove();
-            // Get current state - ensure we have the most up-to-date state
-            var currentState = this._unifiedStateManager.getState();
-            // Update the month/year display in the header with multiple selector strategies
-            var monthYearEl = dropdownEl.querySelector('[data-kt-datepicker-month-year]');
-            // Fallback selectors if primary selector fails
-            if (!monthYearEl) {
-                monthYearEl = dropdownEl.querySelector('[data-kt-datepicker-month]');
-            }
-            // Additional fallback: look for span containing month and year
-            if (!monthYearEl) {
-                var spans = dropdownEl.querySelectorAll('span');
-                monthYearEl = Array.from(spans).find(function (span) {
-                    return span.textContent && span.textContent.match(/[A-Za-z]+ \d{4}/);
-                });
-            }
-            // Final fallback: any span in header
-            if (!monthYearEl) {
-                var headerEl_1 = dropdownEl.querySelector('[data-kt-datepicker-header]');
-                if (headerEl_1) {
-                    monthYearEl = headerEl_1.querySelector('span');
-                }
-            }
-            if (monthYearEl) {
-                var newMonthYear = "".concat(currentState.currentDate.toLocaleString(this._config.locale, { month: 'long' }), " ").concat(currentState.currentDate.getFullYear());
-                monthYearEl.textContent = newMonthYear;
-            }
-            // Render only the new calendar
-            var dayClickHandler = function (day) {
-                _this.setDate(day);
-            };
-            var newCalendar = (0, calendar_1.renderCalendar)(this._templateSet.dayCell, this._getCalendarDays(currentState.currentDate), currentState.currentDate, currentState.selectedDate, dayClickHandler, this._config.locale, this._config.range ? currentState.selectedRange : undefined, this._config.multiDate ? currentState.selectedDates : undefined);
-            // Insert the new calendar after the header
-            var headerEl = dropdownEl.querySelector('[data-kt-datepicker-header]');
-            if (headerEl) {
-                headerEl.insertAdjacentElement('afterend', newCalendar);
-            }
-            else {
-                // Fallback: append to dropdown
-                dropdownEl.appendChild(newCalendar);
-            }
-            // Refresh cache with the new calendar element
-            this._cachedElements.calendarElement = newCalendar;
-            // Enforce min/max dates after calendar update
-            this._enforceMinMaxDates();
-            // Performance marker: End incremental update
-            if (typeof performance !== 'undefined' && this._config.debug) {
-                performance.mark('datepicker-incremental-update-end');
-                performance.measure('datepicker-incremental-update', 'datepicker-incremental-update-start', 'datepicker-incremental-update-end');
-            }
-        }
-        else {
-            // If calendar element not found, fallback to full render
-            this._render();
-        }
-    };
-    /**
-     * Update multi-month calendar content without recreating the dropdown
-     * This preserves the dropdown state while updating all visible months
-     */
-    KTDatepicker.prototype._updateMultiMonthCalendarContent = function () {
-        var _this = this;
-        // Instance-scoped dropdown element selection strategy
-        var dropdownEl = null;
-        // First priority: find dropdown within current datepicker instance
-        dropdownEl = this._element.querySelector('[data-kt-datepicker-dropdown]');
-        // Second priority: if instance ID is available, find by instance ID
-        if (!dropdownEl && this._instanceId) {
-            dropdownEl = document.querySelector("[data-kt-datepicker-dropdown][data-kt-datepicker-instance-id=\"".concat(this._instanceId, "\"]"));
-        }
-        // Third priority: check dropdown module reference
-        if (!dropdownEl && this._dropdownModule) {
-            var dropdownModuleElement = this._dropdownModule._dropdownElement;
-            if (dropdownModuleElement) {
-                dropdownEl = dropdownModuleElement;
-            }
-        }
-        // Final fallback: global search with warnings (only if no other instances exist)
-        if (!dropdownEl) {
-            var allDropdowns = document.querySelectorAll('[data-kt-datepicker-dropdown]');
-            if (allDropdowns.length === 1) {
-                // Only one dropdown exists globally, safe to use
-                dropdownEl = allDropdowns[0];
-            }
-            else if (allDropdowns.length > 1) {
-                // Multiple dropdowns exist - this could cause cross-instance issues
-                this._render();
-                return;
-            }
-            else {
-                this._render();
-                return;
-            }
-        }
-        if (!dropdownEl) {
-            // Fallback to full render if dropdown doesn't exist (should be rare)
-            this._render();
-            return;
-        }
-        // Get current state - ensure we have the most up-to-date state
-        var currentState = this._unifiedStateManager.getState();
-        var visibleMonths = this._config.visibleMonths || 1;
-        // Find the multi-month container
-        var multiMonthContainer = dropdownEl.querySelector('[data-kt-datepicker-multimonth-container]');
-        if (!multiMonthContainer) {
-            // Multi-month container not found, fallback to full render
-            this._render();
-            return;
-        }
-        // Clear existing multi-month content
-        multiMonthContainer.innerHTML = '';
-        // Get all month dates for multi-month display
-        var monthDates = this._getMultiMonthDates(currentState.currentDate, visibleMonths);
-        // Re-render each month using the helper method
-        monthDates.forEach(function (monthDate, index) {
-            var panel = _this._renderMultiMonthCalendar(monthDate, index, visibleMonths);
-            multiMonthContainer.appendChild(panel);
-        });
-        // Enforce min/max dates after multi-month calendar update
-        this._enforceMinMaxDates();
-        console.log('[KTDatepicker] Multi-month calendar content updated successfully');
-    };
-    /**
-     * Set the selected date (single, range, or multi-date)
-     * @param date - The date to select
-     */
-    KTDatepicker.prototype.setDate = function (date) {
-        console.log('🗓️ [KTDatepicker] setDate called with:', date);
-        // Prevent selection if date is outside min/max
-        if (this._config.minDate && date < new Date(this._config.minDate)) {
-            console.log('🗓️ [KTDatepicker] setDate blocked: date is before minDate');
-            return;
-        }
-        if (this._config.maxDate && date > new Date(this._config.maxDate)) {
-            console.log('🗓️ [KTDatepicker] setDate blocked: date is after maxDate');
-            return;
-        }
-        // Validate time constraints if time is enabled
-        if (this._config.enableTime) {
-            var timeState = (0, time_utils_1.dateToTimeState)(date);
-            var validation = (0, time_utils_1.validateTime)(timeState, this._config.minTime, this._config.maxTime);
-            if (!validation.isValid) {
-                console.log('🗓️ [KTDatepicker] setDate blocked: time validation failed:', validation.error);
-                return;
-            }
-        }
-        if (this._config.multiDate) {
-            this._selectMultiDate(date);
-            return;
-        }
-        if (this._config.range) {
-            this._selectRangeDate(date);
-            return;
-        }
-        this._selectSingleDate(date);
-    };
-    /**
-     * Get the selected date
-     */
-    KTDatepicker.prototype.getDate = function () {
-        return this._unifiedStateManager.getState().selectedDate;
-    };
-    /**
-     * Update the datepicker (re-render)
-     */
-    KTDatepicker.prototype.update = function () {
-        this._render();
-    };
-    /**
-     * Clean up event listeners and DOM on destroy
-     */
-    KTDatepicker.prototype.destroy = function () {
-        console.log('🗓️ [KTDatepicker] destroy() called');
-        if (this._container && this._container.parentNode) {
-            this._container.parentNode.removeChild(this._container);
-        }
-        // Clean up event manager
-        this._eventManager.removeListener(document, 'click', this._handleDocumentClick);
-        if (this._input) {
-            this._eventManager.removeAllListeners(this._input);
-        }
-        // Clean up focus manager
-        if (this._focusManager) {
-            this._focusManager.dispose();
-        }
-        // Clean up dropdown module
-        if (this._dropdownModule) {
-            this._dropdownModule.dispose();
-        }
-        // Clean up unified state manager
-        if (this._unsubscribeFromState) {
-            this._unsubscribeFromState();
-            this._unsubscribeFromState = null;
-        }
-        if (this._unifiedStateManager) {
-            this._unifiedStateManager.dispose();
-        }
-        // Clean up element observer
-        if (this._elementObserver) {
-            this._elementObserver.disconnect();
-            this._elementObserver = null;
-        }
-        // Clean up time picker renderer
-        if (this._timePickerRenderer) {
-            this._timePickerRenderer.cleanup();
-            this._timePickerRenderer = null;
-        }
-        // Clear DOM element cache
-        this._cachedElements = {
-            calendarElement: null,
-            timePickerElement: null,
-            startContainer: null,
-            endContainer: null,
-            yearElement: null,
-            monthElement: null,
-            dayElement: null,
-            hourElement: null,
-            minuteElement: null,
-            secondElement: null,
-            ampmElement: null,
-            monthYearElement: null,
-            timeDisplay: null
-        };
-        this._element.instance = null;
-        console.log('🗓️ [KTDatepicker] destroy() completed');
-    };
-    /**
-     * Start observing for dynamic element creation
-     */
-    KTDatepicker.prototype._startElementObservation = function () {
-        if (this._elementObserver) {
-            this._elementObserver.disconnect();
-        }
-        this._elementObserver = new MutationObserver(function (mutations) {
-            mutations.forEach(function (mutation) {
-                if (mutation.type === 'childList') {
-                    mutation.addedNodes.forEach(function (node) {
-                        if (node.nodeType === Node.ELEMENT_NODE) {
-                            var element = node;
-                            // Segmented input elements are now handled by direct UI updates
-                        }
-                    });
-                }
-            });
-        });
-        this._elementObserver.observe(this._element, {
-            childList: true,
-            subtree: true
-        });
-    };
-    /**
-     * Update the input placeholder if no date is selected
-     */
-    KTDatepicker.prototype._updatePlaceholder = function () {
-        var currentState = this._unifiedStateManager.getState();
-        if (this._input && !currentState.selectedDate && this._config.placeholder) {
-            this._input.setAttribute('placeholder', this._config.placeholder);
-            console.log('🗓️ [KTDatepicker] _render: Placeholder set to:', this._config.placeholder);
-        }
-    };
-    /**
-     * Update the disabled state of the input and calendar button
-     *
-     * Accessibility rationale:
-     * - When disabling the calendar button, set:
-     *   - disabled attribute (removes from tab order, blocks interaction)
-     *   - aria-disabled="true" (announces as disabled to screen readers)
-     *   - tabindex="-1" (removes from tab order for extra safety)
-     * - When enabling, remove these attributes.
-     * This matches accessibility best practices and ensures the button is properly announced and not focusable when disabled.
-     */
-    KTDatepicker.prototype._updateDisabledState = function () {
-        var calendarButton = this._element.querySelector('button[data-kt-datepicker-calendar-btn]');
-        if (this._input && this._config.disabled) {
-            this._input.setAttribute('disabled', 'true');
-            if (calendarButton) {
-                // Set disabled attribute
-                calendarButton.setAttribute('disabled', 'true');
-                // Set aria-disabled for screen readers
-                calendarButton.setAttribute('aria-disabled', 'true');
-                // Remove from tab order
-                calendarButton.setAttribute('tabindex', '-1');
-            }
-            console.log('🗓️ [KTDatepicker] _render: Input and calendar button disabled');
-        }
-        else if (this._input) {
-            this._input.removeAttribute('disabled');
-            if (calendarButton) {
-                // Remove disabled attribute
-                calendarButton.removeAttribute('disabled');
-                // Remove aria-disabled attribute
-                calendarButton.removeAttribute('aria-disabled');
-                // Restore tab order (remove tabindex)
-                calendarButton.removeAttribute('tabindex');
-            }
-        }
-    };
-    /**
-     * Update the segmented input UI to reflect current state
-     */
-    KTDatepicker.prototype._updateSegmentedInput = function (state) {
-        var _this = this;
-        var segmentedContainer = this._element.querySelector('[data-kt-datepicker-segmented-input]');
-        if (!segmentedContainer)
-            return;
-        // Re-instantiate the segmented input with the current state
-        // This will update the display without recreating the entire UI
-        (0, helpers_1.instantiateSingleSegmentedInput)(segmentedContainer, state, this._config, function (date) { return _this._handleSegmentedInputChange(date); });
-    };
-    /**
-     * Update the range segmented inputs UI to reflect current state
-     */
-    KTDatepicker.prototype._updateRangeSegmentedInput = function (state) {
-        var _this = this;
-        var startContainer = this._element.querySelector('[data-kt-datepicker-start-container]');
-        var endContainer = this._element.querySelector('[data-kt-datepicker-end-container]');
-        if (!startContainer || !endContainer)
-            return;
-        // Re-instantiate the range segmented inputs with the current state
-        // This will update the display without recreating the entire UI
-        (0, helpers_1.instantiateRangeSegmentedInputs)(startContainer, endContainer, state, this._config, function (date) {
-            var _a;
-            var end = ((_a = state.selectedRange) === null || _a === void 0 ? void 0 : _a.end) || null;
-            var newEnd = end;
-            if (end && date > end)
-                newEnd = null;
-            _this._unifiedStateManager.updateState({ selectedRange: { start: date, end: newEnd } }, 'range-selection');
-            _this._updateCalendarContent();
-        }, function (date) {
-            var _a;
-            var start = ((_a = state.selectedRange) === null || _a === void 0 ? void 0 : _a.start) || null;
-            var newStart = start;
-            if (start && date < start)
-                newStart = null;
-            _this._unifiedStateManager.updateState({ selectedRange: { start: newStart, end: date } }, 'range-selection');
-            _this._updateCalendarContent();
-        });
-    };
-    /**
-     * Handle changes from the segmented input
-     */
-    KTDatepicker.prototype._handleSegmentedInputChange = function (date) {
-        console.log('🗓️ [KTDatepicker] Segmented input change:', date);
-        // When date changes from segmented input, also update the calendar view to show the selected date's month/year
-        var currentState = this._unifiedStateManager.getState();
-        var newCurrentDate = new Date(date.getFullYear(), date.getMonth(), 1); // First day of selected date's month
-        // Prepare state updates
-        var stateUpdates = {
-            selectedDate: date,
-            currentDate: newCurrentDate
-        };
-        // Update selectedTime if time is enabled
-        if (this._config.enableTime) {
-            stateUpdates.selectedTime = (0, time_utils_1.dateToTimeState)(date);
-        }
-        // Update both selectedDate and currentDate to sync the calendar view
-        // Use immediate update to ensure events fire synchronously
-        this._unifiedStateManager.updateState(stateUpdates, 'segmented-input', true);
-        // Update calendar content to sync dropdown even when closed
-        this._updateCalendarContent();
-        // Fire onChange event
-        this._fireDatepickerEvent('onChange', date, this);
-    };
-    /**
-     * Normalize a date to midnight for date-only comparison (removes time component)
-     */
-    /**
-     * Disable day buttons outside min/max date range
-     */
-    KTDatepicker.prototype._enforceMinMaxDates = function () {
-        if (this._config.minDate || this._config.maxDate) {
-            // Normalize min/max dates to midnight for date-only comparison
-            var minDate_1 = this._config.minDate ? (0, date_formatters_1.normalizeDateToMidnight)(new Date(this._config.minDate)) : null;
-            var maxDate_1 = this._config.maxDate ? (0, date_formatters_1.normalizeDateToMidnight)(new Date(this._config.maxDate)) : null;
-            // Find calendar element - try multiple strategies
-            var calendarElement = this._cachedElements.calendarElement;
-            if (!calendarElement || !calendarElement.isConnected) {
-                // Try to find dropdown first
-                var dropdownEl = this._element.querySelector('[data-kt-datepicker-dropdown]');
-                if (!dropdownEl && this._instanceId) {
-                    dropdownEl = document.querySelector("[data-kt-datepicker-dropdown][data-kt-datepicker-instance-id=\"".concat(this._instanceId, "\"]"));
-                }
-                if (dropdownEl) {
-                    calendarElement = dropdownEl.querySelector('[data-kt-datepicker-calendar-table]');
-                }
-            }
-            if (!calendarElement)
-                return;
-            // Get all day cells using the calendar element scope
-            var dayCells = calendarElement.querySelectorAll('td[data-kt-datepicker-day]');
-            dayCells.forEach(function (td) {
-                // Get the actual date from the data-date attribute (stored as ISO string)
-                var dateISO = td.getAttribute('data-date');
-                if (!dateISO)
-                    return;
-                // Parse the ISO date and normalize to midnight for comparison
-                var cellDate = (0, date_formatters_1.normalizeDateToMidnight)(new Date(dateISO));
-                var btn = td.querySelector('button[data-day]');
-                if (!btn)
-                    return;
-                var disabled = false;
-                // Compare dates (normalized to midnight) for proper date-only comparison
-                if (minDate_1 && cellDate < minDate_1)
-                    disabled = true;
-                if (maxDate_1 && cellDate > maxDate_1)
-                    disabled = true;
-                if (disabled) {
-                    btn.setAttribute('disabled', 'true');
-                    td.setAttribute('data-out-of-range', 'true');
-                }
-                else {
-                    btn.removeAttribute('disabled');
-                    td.removeAttribute('data-out-of-range');
-                }
-            });
-        }
-    };
-    /**
-     * Opens the datepicker dropdown.
-     */
-    KTDatepicker.prototype.open = function () {
-        if (this._unifiedStateManager.isDropdownOpen()) {
-            console.log('🗓️ [KTDatepicker] open() skipped: already open');
-            return;
-        }
-        if (this._config.disabled) {
-            console.log('🗓️ [KTDatepicker] open() blocked: datepicker is disabled');
-            return;
-        }
-        console.log('🗓️ [KTDatepicker] open() called, attempting to open dropdown');
-        // Use unified state management
-        var success = this._unifiedStateManager.setDropdownOpen(true, 'datepicker-open');
-        if (!success) {
-            console.log('🗓️ [KTDatepicker] open() blocked by state validation');
-            return;
-        }
-        console.log('🗓️ [KTDatepicker] State manager open() successful, dropdown module:', this._dropdownModule);
-        // Ensure dropdown content is rendered before opening
-        var dropdownEl = this._element.querySelector('[data-kt-datepicker-dropdown]');
-        if (dropdownEl) {
-            // Always render dropdown content to ensure it's up to date
-            console.log('🗓️ [KTDatepicker] Rendering dropdown content before opening');
-            this._renderDropdownContent(dropdownEl);
-        }
-        // Use dropdown module if available
-        if (this._dropdownModule) {
-            console.log('🗓️ [KTDatepicker] Dropdown module available, state change will trigger open');
-            // The dropdown module will automatically open via observer pattern
-        }
-        else {
-            console.log('🗓️ [KTDatepicker] No dropdown module, using fallback');
-        }
-        // Don't call _render() here as it recreates the dropdown module
-        // The dropdown module handles its own visibility
-    };
-    /**
-     * Closes the datepicker dropdown.
-     */
-    KTDatepicker.prototype.close = function () {
-        var _a;
-        console.log('🗓️ [KTDatepicker] close() called, current state:', {
-            stateManagerOpen: this._unifiedStateManager.isDropdownOpen(),
-            dropdownModuleOpen: (_a = this._dropdownModule) === null || _a === void 0 ? void 0 : _a.isOpen(),
-            stateManagerState: this._unifiedStateManager.getDropdownState()
-        });
-        if (!this._unifiedStateManager.isDropdownOpen()) {
-            console.log('🗓️ [KTDatepicker] close() skipped: already closed');
-            return;
-        }
-        // Debug log with stack trace
-        console.log('[KTDatepicker] close() called. Dropdown will close. Stack trace:', new Error().stack);
-        // Use unified state management
-        var success = this._unifiedStateManager.setDropdownOpen(false, 'datepicker-close');
-        if (!success) {
-            console.log('🗓️ [KTDatepicker] close() blocked by state validation');
-            return;
-        }
-        console.log('🗓️ [KTDatepicker] State manager close() successful');
-        // Use dropdown module if available
-        if (this._dropdownModule) {
-            console.log('🗓️ [KTDatepicker] Dropdown module available, state change will trigger close');
-            // The dropdown module will automatically close via observer pattern
-        }
-        else {
-            console.log('🗓️ [KTDatepicker] No dropdown module, using fallback');
-        }
-        // Don't call _render() here as it recreates the dropdown module
-        // The dropdown module handles its own visibility
-    };
-    KTDatepicker.prototype.toggle = function () {
-        if (this._unifiedStateManager.isDropdownOpen()) {
-            this.close();
-        }
-        else {
-            this.open();
-        }
-    };
-    /**
-     * Returns whether the datepicker dropdown is currently open.
-     */
-    KTDatepicker.prototype.isOpen = function () {
-        return this._unifiedStateManager.isDropdownOpen();
-    };
-    /**
-     * Returns the current state of the datepicker component.
-     */
-    KTDatepicker.prototype.getState = function () {
-        return __assign({}, this._unifiedStateManager.getState());
-    };
-    /**
-     * Returns the current dropdown state.
-     */
-    KTDatepicker.prototype.getDropdownState = function () {
-        return this._unifiedStateManager.getDropdownState();
-    };
-    /**
-     * StateObserver implementation: Called when state changes
-     */
-    /**
-     * StateObserver implementation: Returns update priority (lower = higher priority)
-     */
-    KTDatepicker.prototype.getUpdatePriority = function () {
-        return 10; // Medium priority
-    };
-    /**
-     * StateObserver implementation: Handle state changes from unified state manager
-     */
-    KTDatepicker.prototype.onStateChange = function (newState, oldState) {
-        this._handleStateChange(newState, oldState);
-    };
-    /**
-     * Handle state changes from the unified state manager
-     */
-    KTDatepicker.prototype._handleStateChange = function (newState, oldState) {
-        console.log('🗓️ [KTDatepicker] _handleStateChange called:', { newState: newState, oldState: oldState });
-        // Skip UI updates if this is from segmented input arrow navigation
-        if (typeof window !== 'undefined' && window.__ktui_segmented_input_arrow_navigation) {
-            console.log('🗓️ [KTDatepicker] Skipping UI update due to segmented input navigation');
-            return;
-        }
-        // Get changed properties for selective updates
-        var changedProperties = this._unifiedStateManager.getLastChangedProperties();
-        // Get the source of the last state update
-        var lastUpdateSource = this._unifiedStateManager.getLastUpdateSource();
-        // Update dropdown state if open/closed changed
-        if (changedProperties.has('isOpen') && newState.isOpen !== oldState.isOpen) {
-            if (this._dropdownModule) {
-                console.log('🗓️ [KTDatepicker] Dropdown module available, state change will trigger open');
-                // The dropdown module will automatically open via observer pattern
-            }
-            else {
-                console.log('🗓️ [KTDatepicker] No dropdown module, using fallback');
-            }
-            // Don't call _render() here as it recreates the dropdown module
-            // The dropdown module handles its own visibility
-        }
-        // Update disabled state only if it changed
-        if (changedProperties.has('isDisabled') && newState.isDisabled !== oldState.isDisabled) {
-            this._updateDisabledState();
-        }
-        // Selective UI updates based on changed properties
-        // Update input field only if selection-related properties changed
-        if (changedProperties.has('selectedDate') ||
-            changedProperties.has('selectedRange') ||
-            changedProperties.has('selectedDates') ||
-            changedProperties.has('selectedRange.start') ||
-            changedProperties.has('selectedRange.end')) {
-            this._updateInput(newState);
-        }
-        // Update segmented input only if selectedDate changed (and not from segmented input itself)
-        if (this._config.range) {
-            if ((changedProperties.has('selectedRange') ||
-                changedProperties.has('selectedRange.start') ||
-                changedProperties.has('selectedRange.end')) &&
-                lastUpdateSource !== 'range-selection') {
-                this._updateRangeSegmentedInput(newState);
-            }
-            else if (lastUpdateSource === 'range-selection') {
-                console.log('🗓️ [KTDatepicker] Skipping _updateRangeSegmentedInput to preserve focus during typing');
-            }
-        }
-        else {
-            if (changedProperties.has('selectedDate') && lastUpdateSource !== 'segmented-input') {
-                this._updateSegmentedInput(newState);
-            }
-            else if (lastUpdateSource === 'segmented-input') {
-                console.log('🗓️ [KTDatepicker] Skipping _updateSegmentedInput to preserve focus during typing');
-            }
-        }
-        // Update calendar highlighting only if selection state changed
-        if (changedProperties.has('selectedDate') ||
-            changedProperties.has('selectedRange') ||
-            changedProperties.has('selectedRange.start') ||
-            changedProperties.has('selectedRange.end') ||
-            changedProperties.has('selectedDates') ||
-            changedProperties.has('currentDate')) {
-            this._updateCalendar(newState);
-        }
-        // Update time picker only if selectedTime changed
-        if (changedProperties.has('selectedTime')) {
-            this._updateTimePicker(newState);
-        }
-        // Fire events based on state changes
-        this._fireEvents(newState, oldState);
-        // Start observing for dynamic element creation
-        this._startElementObservation();
-    };
-    // Static init method for auto-initialization
-    KTDatepicker.init = function () {
-        var elements = document.querySelectorAll('[data-kt-datepicker]');
-        elements.forEach(function (el) {
-            if (!el.instance) {
-                new KTDatepicker(el);
-            }
-        });
-    };
-    return KTDatepicker;
-}(component_1.default));
-exports.KTDatepicker = KTDatepicker;
-// Optionally, export a static init method for auto-initialization
-function initDatepickers() {
-    var elements = document.querySelectorAll('[data-kt-datepicker]');
-    elements.forEach(function (el) {
-        if (!el.instance) {
-            new KTDatepicker(el);
-        }
-    });
-}
-//# sourceMappingURL=datepicker.js.map