@keenthemes/ktui 1.1.0 → 1.1.2

package/lib/cjs/components/datepicker/ui/input/segmented-input.js

@@ -1,640 +0,0 @@
-"use strict";
-/*
- * segmented-input.ts - Modular segmented input for KTDatepicker (2025+)
- * Each date/time part is rendered as a focusable, editable segment.
- *
- * Features:
- * - Segments: day, month, year, (optionally hour, minute, second, AM/PM)
- * - Keyboard navigation: Tab, Shift+Tab, arrow keys, Enter
- * - Direct typing/editing of segments with focus preservation
- * - ARIA roles and accessibility for all segments
- * - Emits change events on value update (debounced)
- * - Integrates with KTDatepicker for value sync
- *
- * Keyboard Navigation:
- * - Tab/Shift+Tab: Move between segments
- * - Arrow Left/Right: Move between segments
- * - Arrow Up/Down: Increment/decrement segment value
- * - Enter: Move to next segment (wraps from last to first)
- * - Number keys: Direct input with validation (optimized for performance)
- *
- * Performance Optimizations:
- * - No DOM re-rendering during number typing
- * - Focus preserved during rapid input
- * - Debounced onChange events (150ms delay)
- * - Caret position maintained during editing
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SegmentedInput = SegmentedInput;
-var templates_1 = require("../templates/templates");
-/**
- * SegmentedInput - renders a segmented date/time input.
- * @param container - HTMLElement to render into
- * @param options - SegmentedInputOptions
- * @returns cleanup function
- */
-function SegmentedInput(container, options) {
-    // --- Internal state ---
-    var currentValue = new Date(options.value);
-    var segments = options.segments || ['month', 'day', 'year'];
-    var locale = options.locale || 'default';
-    // Global flag to track arrow navigation across all segmented inputs
-    if (!window.__ktui_segmented_input_arrow_navigation) {
-        window.__ktui_segmented_input_arrow_navigation = false;
-    }
-    // --- Get templates ---
-    // Use a minimal config to get templates; in real usage, pass full config if available
-    var templates = (0, templates_1.getTemplateStrings)({});
-    var segmentTpl = templates.dateSegment;
-    var separatorTpl = templates.segmentSeparator;
-    // --- Utility: get separator between segments ---
-    function getSeparatorBetweenSegments(segment1, segment2, format) {
-        // Time segments use ":" as separator
-        var timeSegments = ['hour', 'minute', 'second'];
-        if (timeSegments.includes(segment1) && timeSegments.includes(segment2)) {
-            return ':';
-        }
-        // Space between date and time
-        var dateSegments = ['day', 'month', 'year'];
-        if (dateSegments.includes(segment1) && timeSegments.includes(segment2)) {
-            return ' ';
-        }
-        // AM/PM has space before it
-        if (segment2 === 'ampm') {
-            return ' ';
-        }
-        // Second to AM/PM has space
-        if (segment1 === 'second' && segment2 === 'ampm') {
-            return ' ';
-        }
-        // Date segments use separator from format
-        if (dateSegments.includes(segment1) && dateSegments.includes(segment2)) {
-            return getSeparatorFromFormat(format);
-        }
-        // Default fallback
-        return '';
-    }
-    // --- Utility: get separator from format ---
-    function getSeparatorFromFormat(format) {
-        if (!format)
-            return '/'; // Default fallback
-        // Find the first non-date token character to use as separator
-        var tokenRegex = /(yyyy|yy|MM|M|dd|d)/g;
-        var lastIndex = 0;
-        var match;
-        while ((match = tokenRegex.exec(format)) !== null) {
-            if (match.index > lastIndex) {
-                // Found a separator character
-                var separator = format.slice(lastIndex, match.index);
-                if (separator && separator.length > 0) {
-                    return separator;
-                }
-            }
-            lastIndex = match.index + match[0].length;
-        }
-        // Check for separator after the last token
-        if (lastIndex < format.length) {
-            var separator = format.slice(lastIndex);
-            if (separator && separator.length > 0) {
-                return separator;
-            }
-        }
-        return '/'; // Default fallback
-    }
-    // --- Utility: check if segment should be padded based on format ---
-    function shouldPadSegment(segment, format) {
-        if (!format)
-            return true; // Default to padded for backward compatibility
-        var tokenRegex = /(yyyy|yy|MM|M|dd|d|HH|H|mm|m|ss|s)/g;
-        var match;
-        while ((match = tokenRegex.exec(format)) !== null) {
-            switch (match[0]) {
-                case 'dd':
-                    if (segment === 'day')
-                        return true;
-                    break;
-                case 'd':
-                    if (segment === 'day')
-                        return false;
-                    break;
-                case 'MM':
-                    if (segment === 'month')
-                        return true;
-                    break;
-                case 'M':
-                    if (segment === 'month')
-                        return false;
-                    break;
-                case 'yyyy':
-                    if (segment === 'year')
-                        return true;
-                    break; // 4-digit year
-                case 'yy':
-                    if (segment === 'year')
-                        return false;
-                    break; // 2-digit year
-                case 'HH':
-                case 'H':
-                    if (segment === 'hour')
-                        return match[0] === 'HH';
-                    break;
-                case 'mm':
-                case 'm':
-                    if (segment === 'minute')
-                        return match[0] === 'mm';
-                    break;
-                case 'ss':
-                case 's':
-                    if (segment === 'second')
-                        return match[0] === 'ss';
-                    break;
-            }
-        }
-        return true; // Default fallback
-    }
-    // --- Utility: get segment value as string ---
-    function getSegmentValue(segment, date) {
-        var shouldPad = shouldPadSegment(segment, options.format);
-        switch (segment) {
-            case 'day':
-                var day = date.getDate();
-                return shouldPad ? day.toString().padStart(2, '0') : day.toString();
-            case 'month':
-                var month = date.getMonth() + 1;
-                return shouldPad ? month.toString().padStart(2, '0') : month.toString();
-            case 'year':
-                var year = date.getFullYear();
-                return shouldPad ? year.toString() : year.toString().slice(-2); // yy format shows last 2 digits
-            case 'hour':
-                // For 12-hour format, convert to 1-12 range
-                var hourValue = void 0;
-                if (options.timeFormat === '12h') {
-                    var hour24 = date.getHours();
-                    hourValue = hour24 === 0 ? 12 : hour24 > 12 ? hour24 - 12 : hour24;
-                }
-                else {
-                    hourValue = date.getHours();
-                }
-                return shouldPad ? hourValue.toString().padStart(2, '0') : hourValue.toString();
-            case 'minute':
-                var minute = date.getMinutes();
-                return shouldPad ? minute.toString().padStart(2, '0') : minute.toString();
-            case 'second':
-                var second = date.getSeconds();
-                return shouldPad ? second.toString().padStart(2, '0') : second.toString();
-            case 'ampm': return date.getHours() < 12 ? 'AM' : 'PM';
-            default: return '';
-        }
-    }
-    // --- Utility: set segment value ---
-    function setSegmentValue(segment, value, date) {
-        var d = new Date(date);
-        switch (segment) {
-            case 'day':
-                d.setDate(Number(value));
-                break;
-            case 'month':
-                d.setMonth(Number(value) - 1);
-                break;
-            case 'year':
-                d.setFullYear(Number(value));
-                break;
-            case 'hour':
-                // Handle 12-hour vs 24-hour format
-                var hourValue = Number(value);
-                if (options.timeFormat === '12h') {
-                    // In 12-hour mode, convert 12-hour input to 24-hour
-                    var currentHour = d.getHours();
-                    var isPM = currentHour >= 12;
-                    if (hourValue === 12) {
-                        hourValue = isPM ? 12 : 0; // 12 AM = 0, 12 PM = 12
-                    }
-                    else if (isPM) {
-                        hourValue += 12; // PM hours: add 12
-                    }
-                }
-                // Preserve existing minutes and seconds when setting hour
-                var currentMinutes = d.getMinutes();
-                var currentSecondsForHour = d.getSeconds();
-                d.setHours(hourValue, currentMinutes, currentSecondsForHour);
-                break;
-            case 'minute':
-                // Preserve existing seconds when setting minute
-                var currentSecondsForMinute = d.getSeconds();
-                d.setMinutes(Number(value), currentSecondsForMinute);
-                break;
-            case 'second':
-                d.setSeconds(Number(value));
-                break;
-            case 'ampm':
-                if (value === 'AM' && d.getHours() >= 12) {
-                    d.setHours(d.getHours() - 12);
-                }
-                else if (value === 'PM' && d.getHours() < 12) {
-                    d.setHours(d.getHours() + 12);
-                }
-                break;
-        }
-        return d;
-    }
-    // --- Utility: get min/max for a segment ---
-    function getSegmentMin(segment, date) {
-        switch (segment) {
-            case 'day':
-                // Use actual month/year for max days
-                return 1;
-            case 'month':
-                return 1;
-            case 'year':
-                return options.min ? options.min.getFullYear() : undefined;
-            case 'hour':
-                return 0;
-            case 'minute':
-            case 'second':
-                return 0;
-            case 'ampm':
-                return 0; // 0 = AM, 1 = PM
-            default:
-                return undefined;
-        }
-    }
-    function getSegmentMax(segment, date) {
-        switch (segment) {
-            case 'day':
-                // Use actual month/year for max days
-                return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
-            case 'month':
-                return 12;
-            case 'year':
-                return options.max ? options.max.getFullYear() : undefined;
-            case 'hour':
-                return 23;
-            case 'minute':
-            case 'second':
-                return 59;
-            case 'ampm':
-                return 1; // 0 = AM, 1 = PM
-            default:
-                return undefined;
-        }
-    }
-    // --- Track focused segment index ---
-    var focusedIdx = 0;
-    // --- Track caret position (offset) ---
-    var caretOffset = null;
-    // --- Track if this is the first render ---
-    var isInitialRender = true;
-    // --- Track if we're in the middle of Arrow Up/Down navigation ---
-    var isArrowNavigation = false;
-    // --- Focus a segment by index and restore caret position ---
-    /**
-     * Restores focus to the segment at the given index and restores caret position if available.
-     * @param idx - Index of the segment to focus
-     * @param caret - Caret offset to restore (null for end)
-     */
-    function restoreFocus(idx, caret) {
-        var _a;
-        if (caret === void 0) { caret = null; }
-        try {
-            var segs = Array.from(container.querySelectorAll('[data-segment]'));
-            if (segs[idx] && segs[idx].offsetParent !== null) { // Check if element is in DOM
-                segs.forEach(function (el, i) { return el.setAttribute('tabindex', i === idx ? '0' : '-1'); });
-                segs[idx].focus();
-                // Restore caret position (at end if null)
-                if (segs[idx].isContentEditable) {
-                    var range = document.createRange();
-                    range.selectNodeContents(segs[idx]);
-                    range.collapse(false); // place at end
-                    if (caret !== null && segs[idx].firstChild) {
-                        range.setStart(segs[idx].firstChild, Math.min(caret, ((_a = segs[idx].textContent) === null || _a === void 0 ? void 0 : _a.length) || 0));
-                        range.collapse(true);
-                    }
-                    var sel = window.getSelection();
-                    if (sel) {
-                        sel.removeAllRanges();
-                        sel.addRange(range);
-                    }
-                }
-            }
-        }
-        catch (error) {
-            // Fallback: focus first available segment
-            var segs = Array.from(container.querySelectorAll('[data-segment]'));
-            if (segs[0])
-                segs[0].focus();
-        }
-    }
-    // --- Render segments using templates ---
-    function render() {
-        // Capture caret position before DOM update
-        var prevSegs = Array.from(container.querySelectorAll('[data-segment]'));
-        if (prevSegs[focusedIdx] && document.activeElement === prevSegs[focusedIdx]) {
-            var sel = window.getSelection();
-            if (sel && sel.anchorNode === prevSegs[focusedIdx].firstChild) {
-                caretOffset = sel.anchorOffset;
-            }
-            else {
-                caretOffset = null;
-            }
-        }
-        else {
-            caretOffset = null;
-        }
-        container.innerHTML = '';
-        container.setAttribute('role', 'group');
-        container.setAttribute('aria-label', 'Date input');
-        container.tabIndex = -1;
-        // Build segments HTML using templates
-        var segmentsHtml = '';
-        segments.forEach(function (segment, idx) {
-            var _a, _b, _c, _d;
-            var segmentValue = getSegmentValue(segment, currentValue);
-            var segmentData = {
-                segmentType: segment,
-                segmentValue: segmentValue,
-                ariaLabel: segment.charAt(0).toUpperCase() + segment.slice(1),
-                ariaValueNow: segmentValue,
-                ariaValueText: segmentValue,
-                ariaValueMin: (_b = (_a = getSegmentMin(segment, currentValue)) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : '',
-                ariaValueMax: (_d = (_c = getSegmentMax(segment, currentValue)) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '',
-                tabindex: idx === focusedIdx ? '0' : '-1',
-                contenteditable: (!options.disabled && !options.readOnly).toString(),
-            };
-            var segmentHtml = '';
-            if (typeof segmentTpl === 'function') {
-                segmentHtml = segmentTpl(segmentData);
-            }
-            else if (typeof segmentTpl === 'string') {
-                segmentHtml = segmentTpl
-                    .replace(/{{segmentType}}/g, segmentData.segmentType)
-                    .replace(/{{segmentValue}}/g, segmentData.segmentValue)
-                    .replace(/{{ariaLabel}}/g, segmentData.ariaLabel)
-                    .replace(/{{ariaValueNow}}/g, segmentData.ariaValueNow)
-                    .replace(/{{ariaValueText}}/g, segmentData.ariaValueText)
-                    .replace(/{{ariaValueMin}}/g, segmentData.ariaValueMin)
-                    .replace(/{{ariaValueMax}}/g, segmentData.ariaValueMax)
-                    .replace(/{{tabindex}}/g, segmentData.tabindex)
-                    .replace(/{{contenteditable}}/g, segmentData.contenteditable)
-                    .replace(/{{class}}/g, ''); // Replace class placeholder with empty string
-            }
-            else {
-                segmentHtml = '';
-            }
-            segmentsHtml += segmentHtml;
-            if (idx < segments.length - 1) {
-                // Get appropriate separator between these segments
-                var nextSegment = segments[idx + 1];
-                var separator = getSeparatorBetweenSegments(segment, nextSegment, options.format);
-                var sepHtml = '';
-                if (typeof separatorTpl === 'function') {
-                    sepHtml = separatorTpl({ separator: separator });
-                }
-                else if (typeof separatorTpl === 'string') {
-                    sepHtml = separatorTpl
-                        .replace(/{{separator}}/g, separator)
-                        .replace(/{{class}}/g, ''); // Replace class placeholder with empty string
-                }
-                else {
-                    sepHtml = '';
-                }
-                segmentsHtml += sepHtml;
-            }
-        });
-        // Render segments directly into container (container already has the correct structure from template)
-        container.innerHTML = segmentsHtml;
-        // Verify template rendering was successful
-        var segs = Array.from(container.querySelectorAll('[data-segment]'));
-        if (segs.length === 0) {
-            throw new Error('Segmented input template rendering failed');
-        }
-        // Re-bind events to all segments
-        segs.forEach(function (span, idx) {
-            span.addEventListener('keydown', function (e) {
-                var _a, _b, _c, _d;
-                if (options.disabled || options.readOnly)
-                    return;
-                // Wrapping navigation
-                if (e.key === 'ArrowRight' || (e.key === 'Tab' && !e.shiftKey)) {
-                    e.preventDefault();
-                    isArrowNavigation = true; // Set flag to prevent blur onChange
-                    focusedIdx = (idx + 1) % segments.length;
-                    caretOffset = null;
-                    // Update tabindex directly instead of full re-render
-                    var segs_1 = Array.from(container.querySelectorAll('[data-segment]'));
-                    segs_1.forEach(function (el, i) { return el.setAttribute('tabindex', i === focusedIdx ? '0' : '-1'); });
-                    restoreFocus(focusedIdx, caretOffset);
-                    // Reset flag after a short delay to allow focus to be restored
-                    setTimeout(function () {
-                        isArrowNavigation = false;
-                    }, 10);
-                }
-                else if (e.key === 'ArrowLeft' || (e.key === 'Tab' && e.shiftKey)) {
-                    e.preventDefault();
-                    isArrowNavigation = true; // Set flag to prevent blur onChange
-                    focusedIdx = (idx - 1 + segments.length) % segments.length;
-                    caretOffset = null;
-                    // Update tabindex directly instead of full re-render
-                    var segs_2 = Array.from(container.querySelectorAll('[data-segment]'));
-                    segs_2.forEach(function (el, i) { return el.setAttribute('tabindex', i === focusedIdx ? '0' : '-1'); });
-                    restoreFocus(focusedIdx, caretOffset);
-                    // Reset flag after a short delay to allow focus to be restored
-                    setTimeout(function () {
-                        isArrowNavigation = false;
-                    }, 10);
-                }
-                else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-                    // Increment/decrement value
-                    e.preventDefault();
-                    e.stopPropagation(); // Prevent bubbling to main datepicker
-                    isArrowNavigation = true; // Set flag to prevent blur onChange
-                    var newValue = void 0;
-                    if (segments[idx] === 'ampm') {
-                        // Handle AM/PM toggle
-                        var currentAmPm = span.textContent || 'AM';
-                        if (e.key === 'ArrowUp') {
-                            newValue = currentAmPm === 'AM' ? 'PM' : 'AM';
-                        }
-                        else {
-                            newValue = currentAmPm === 'AM' ? 'PM' : 'AM';
-                        }
-                    }
-                    else {
-                        // Handle numeric segments
-                        var min = (_a = getSegmentMin(segments[idx], currentValue)) !== null && _a !== void 0 ? _a : 0;
-                        var max = (_b = getSegmentMax(segments[idx], currentValue)) !== null && _b !== void 0 ? _b : 9999;
-                        var current = Number(getSegmentValue(segments[idx], currentValue)) || min;
-                        if (e.key === 'ArrowUp') {
-                            current = Math.min(max, current + 1);
-                        }
-                        else if (e.key === 'ArrowDown') {
-                            current = Math.max(min, current - 1);
-                        }
-                        newValue = current.toString();
-                        var shouldPad = shouldPadSegment(segments[idx], options.format);
-                        if (segments[idx] === 'year') {
-                            if (shouldPad) {
-                                newValue = newValue.padStart(4, '0');
-                            }
-                        }
-                        else if (shouldPad) {
-                            newValue = newValue.padStart(2, '0');
-                        }
-                    }
-                    span.textContent = newValue;
-                    currentValue = setSegmentValue(segments[idx], newValue, currentValue);
-                    // Set global flag to prevent unified observer from overriding UI
-                    window.__ktui_segmented_input_arrow_navigation = true;
-                    // Call onChange immediately for Arrow Up/Down to update the main datepicker
-                    if (options.onChange) {
-                        options.onChange(currentValue);
-                    }
-                    // Clear flag after onChange callback
-                    setTimeout(function () {
-                        window.__ktui_segmented_input_arrow_navigation = false;
-                    }, 50);
-                    // Preserve caret position at end of content
-                    if (span.isContentEditable) {
-                        var range = document.createRange();
-                        range.selectNodeContents(span);
-                        range.collapse(false); // place at end
-                        var sel = window.getSelection();
-                        if (sel) {
-                            sel.removeAllRanges();
-                            sel.addRange(range);
-                        }
-                    }
-                    // Reset flag after a short delay to allow focus to be restored
-                    setTimeout(function () {
-                        isArrowNavigation = false;
-                    }, 10);
-                }
-                else if (e.key === 'Enter') {
-                    // Move to next segment on Enter
-                    e.preventDefault();
-                    e.stopPropagation(); // Prevent bubbling to main datepicker
-                    isArrowNavigation = true; // Set flag to prevent blur onChange
-                    focusedIdx = (idx + 1) % segments.length;
-                    caretOffset = null;
-                    // Update tabindex directly instead of full re-render
-                    var segs_3 = Array.from(container.querySelectorAll('[data-segment]'));
-                    segs_3.forEach(function (el, i) { return el.setAttribute('tabindex', i === focusedIdx ? '0' : '-1'); });
-                    restoreFocus(focusedIdx, caretOffset);
-                    // Reset flag after a short delay to allow focus to be restored
-                    setTimeout(function () {
-                        isArrowNavigation = false;
-                    }, 10);
-                }
-                else if (/^[0-9]$/.test(e.key)) {
-                    // Direct typing, enforce min/max - optimized to avoid focus loss
-                    e.preventDefault();
-                    var newValue = void 0;
-                    var currentText = span.textContent || '';
-                    if (segments[idx] === 'year') {
-                        // For year: shift left and append new digit (e.g., "2024" + "6" = "0246", then becomes "2026" after validation)
-                        // If already 4 digits, shift left by removing first digit and appending new one
-                        if (currentText.length === 4) {
-                            newValue = (currentText.slice(1) + e.key);
-                        }
-                        else {
-                            newValue = (currentText + e.key).slice(-4);
-                        }
-                    }
-                    else {
-                        // For day/month: shift left and append new digit (e.g., "12" + "5" = "25")
-                        // If already 2 digits, shift left by removing first digit and appending new one
-                        if (currentText.length === 2) {
-                            newValue = (currentText.slice(1) + e.key);
-                        }
-                        else {
-                            newValue = (currentText + e.key).slice(-2);
-                        }
-                    }
-                    var min = (_c = getSegmentMin(segments[idx], currentValue)) !== null && _c !== void 0 ? _c : 0;
-                    var max = (_d = getSegmentMax(segments[idx], currentValue)) !== null && _d !== void 0 ? _d : (segments[idx] === 'year' ? 9999 : 99);
-                    var num = Math.max(min, Math.min(max, Number(newValue)));
-                    if (isNaN(num))
-                        num = min;
-                    // Update content directly without re-rendering to preserve focus
-                    var shouldPad = shouldPadSegment(segments[idx], options.format);
-                    if (segments[idx] === 'year') {
-                        span.textContent = shouldPad ? num.toString().padStart(4, '0') : num.toString();
-                    }
-                    else {
-                        span.textContent = shouldPad ? num.toString().padStart(2, '0') : num.toString();
-                    }
-                    // Update internal value
-                    currentValue = setSegmentValue(segments[idx], span.textContent || '', currentValue);
-                    // Debounce onChange to avoid excessive updates during rapid typing
-                    if (options.onChange) {
-                        clearTimeout(span._onChangeTimeout);
-                        span._onChangeTimeout = setTimeout(function () {
-                            options.onChange(currentValue);
-                        }, 150); // 150ms debounce
-                    }
-                    // Preserve caret position at end of content
-                    if (span.isContentEditable) {
-                        var range = document.createRange();
-                        range.selectNodeContents(span);
-                        range.collapse(false); // place at end
-                        var sel = window.getSelection();
-                        if (sel) {
-                            sel.removeAllRanges();
-                            sel.addRange(range);
-                        }
-                    }
-                }
-            });
-            // Focus/blur styling (no classes, just ARIA/tabindex)
-            span.addEventListener('focus', function () {
-                span.setAttribute('tabindex', '0');
-                focusedIdx = idx;
-            });
-            span.addEventListener('blur', function () {
-                span.setAttribute('tabindex', '-1');
-                // Clear any pending debounced onChange calls
-                if (span._onChangeTimeout) {
-                    clearTimeout(span._onChangeTimeout);
-                    span._onChangeTimeout = null;
-                }
-                // Call onChange when user finishes editing to update the main datepicker
-                // But not during Arrow Up/Down navigation and only if value actually changed
-                if (options.onChange && !isArrowNavigation) {
-                    var updatedValue = setSegmentValue(segments[idx], span.textContent || '', currentValue);
-                    // Only call onChange if the value has actually changed
-                    if (updatedValue.getTime() !== currentValue.getTime()) {
-                        options.onChange(updatedValue);
-                    }
-                }
-            });
-            // Mouse click focuses segment (optimized to avoid unnecessary re-rendering)
-            span.addEventListener('mousedown', function (e) {
-                e.preventDefault();
-                focusedIdx = idx;
-                caretOffset = null;
-                // Only update tabindex and focus, no full re-render
-                var segs = Array.from(container.querySelectorAll('[data-segment]'));
-                segs.forEach(function (el, i) { return el.setAttribute('tabindex', i === focusedIdx ? '0' : '-1'); });
-                restoreFocus(focusedIdx, caretOffset);
-            });
-        });
-        // After rendering, restore focus to the correct segment and caret (skip on initial render)
-        if (!isInitialRender) {
-            restoreFocus(focusedIdx, caretOffset);
-        }
-        isInitialRender = false;
-    }
-    // --- Initial render ---
-    render();
-    // --- Cleanup function ---
-    return function () {
-        // Clear any pending debounced onChange calls
-        var segs = Array.from(container.querySelectorAll('[data-segment]'));
-        segs.forEach(function (span) {
-            if (span._onChangeTimeout) {
-                clearTimeout(span._onChangeTimeout);
-            }
-        });
-        container.innerHTML = '';
-    };
-}
-//# sourceMappingURL=segmented-input.js.map