@nova-design-system/nova-react 3.17.0 → 3.18.0

package/dist/cjs/nv-fieldtime.entry-DQb9u4eg.js

@@ -0,0 +1,1076 @@
+'use strict';
+
+var index = require('./index-_oq_uffl.js');
+var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+require('react-dom');
+
+/**
+ * Format configurations for all supported time formats
+ */
+const FORMAT_CONFIGS = {
+    'HH': {
+        pattern: /^([0-1]?[0-9]|2[0-3])$/,
+        parts: [constants69bafca2.TimeType.Hours],
+        defaultValue: '00',
+        maxLength: 2,
+    },
+    'HH:mm': {
+        pattern: /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9])$/,
+        parts: [constants69bafca2.TimeType.Hours, constants69bafca2.TimeType.Minutes],
+        defaultValue: '00:00',
+        maxLength: 5,
+    },
+    'HH:mm:ss': {
+        pattern: /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/,
+        parts: [constants69bafca2.TimeType.Hours, constants69bafca2.TimeType.Minutes, constants69bafca2.TimeType.Seconds],
+        defaultValue: '00:00:00',
+        maxLength: 8,
+    },
+    'hh': {
+        pattern: /^(0?[1-9]|1[0-2])$/,
+        parts: [constants69bafca2.TimeType.Hours],
+        defaultValue: '01',
+        maxLength: 2,
+    },
+    'hh:mm': {
+        pattern: /^(0?[1-9]|1[0-2]):([0-5]?[0-9])$/,
+        parts: [constants69bafca2.TimeType.Hours, constants69bafca2.TimeType.Minutes],
+        defaultValue: '01:00',
+        maxLength: 5,
+    },
+    'hh:mm:ss': {
+        pattern: /^(0?[1-9]|1[0-2]):([0-5]?[0-9]):([0-5]?[0-9])$/,
+        parts: [constants69bafca2.TimeType.Hours, constants69bafca2.TimeType.Minutes, constants69bafca2.TimeType.Seconds],
+        defaultValue: '01:00:00',
+        maxLength: 8,
+    },
+};
+/**
+ * Returns the visible time types for a given format
+ * @param {string} format - The time format string
+ * @returns {TimeType[]} Array of TimeType values that should be visible
+ */
+function getVisibleTimeTypes(format) {
+    const config = FORMAT_CONFIGS[format];
+    if (!config) {
+        // Fallback for unknown formats
+        return [constants69bafca2.TimeType.Hours, constants69bafca2.TimeType.Minutes, constants69bafca2.TimeType.Seconds];
+    }
+    return config.parts;
+}
+/**
+ * Validates if a given value string matches the expected format pattern
+ * @param {string} value - The time value string to validate
+ * @param {string} format - The expected time format
+ * @returns {boolean} True if the value matches the format, false otherwise
+ */
+function isValidFormatValue(value, format) {
+    if (!value || !format) {
+        return false;
+    }
+    const config = FORMAT_CONFIGS[format];
+    if (!config) {
+        return false;
+    }
+    return config.pattern.test(value);
+}
+/**
+ * Parses a time value string according to the specified format
+ * Handles both full and partial time strings with backward compatibility
+ * @param {string} value - The time value string to parse
+ * @param {string} format - The target time format
+ * @returns {TimeComponents} TimeComponents object with parsed hours, minutes, and seconds
+ */
+function parseValueByFormat(value, format) {
+    const config = FORMAT_CONFIGS[format];
+    const defaultComponents = {
+        hours: format.startsWith('hh') ? '01' : '00',
+        minutes: '00',
+        seconds: '00',
+    };
+    if (!value || !config) {
+        return defaultComponents;
+    }
+    // Clean the input value - remove non-numeric characters except colons
+    const cleanValue = value.replace(/[^0-9:]/g, '');
+    // Try to match the exact format first
+    const exactMatch = cleanValue.match(config.pattern);
+    if (exactMatch) {
+        return extractComponentsFromMatch(exactMatch, format);
+    }
+    // Handle backward compatibility - parse full format values when format is shorter
+    const fullFormatPattern = /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/;
+    const fullMatch = cleanValue.match(fullFormatPattern);
+    if (fullMatch) {
+        const fullComponents = extractComponentsFromMatch(fullMatch, 'HH:mm:ss');
+        return extractRelevantComponents(fullComponents, format);
+    }
+    // Handle partial format values - try to parse what we can
+    const parts = cleanValue.split(':');
+    const result = Object.assign({}, defaultComponents);
+    if (parts.length >= 1 && parts[0]) {
+        const hours = parseInt(parts[0], 10);
+        if (!isNaN(hours)) {
+            if (format.startsWith('hh')) {
+                // 12-hour format validation
+                if (hours >= 1 && hours <= 12) {
+                    result.hours = hours.toString().padStart(2, '0');
+                }
+                else {
+                    // Invalid hour for 12-hour format, keep default
+                    result.hours = defaultComponents.hours;
+                }
+            }
+            else {
+                // 24-hour format validation
+                if (hours >= 0 && hours <= 23) {
+                    result.hours = hours.toString().padStart(2, '0');
+                }
+                else {
+                    // Invalid hour for 24-hour format, keep default
+                    result.hours = defaultComponents.hours;
+                }
+            }
+        }
+    }
+    if (parts.length >= 2 &&
+        parts[1] &&
+        config.parts.includes(constants69bafca2.TimeType.Minutes)) {
+        const minutes = parseInt(parts[1], 10);
+        if (!isNaN(minutes) && minutes >= 0 && minutes <= 59) {
+            result.minutes = minutes.toString().padStart(2, '0');
+        }
+    }
+    if (parts.length >= 3 &&
+        parts[2] &&
+        config.parts.includes(constants69bafca2.TimeType.Seconds)) {
+        const seconds = parseInt(parts[2], 10);
+        if (!isNaN(seconds) && seconds >= 0 && seconds <= 59) {
+            result.seconds = seconds.toString().padStart(2, '0');
+        }
+    }
+    return result;
+}
+/**
+ * Extracts time components from a regex match result
+ * @param {RegExpMatchArray} match - The regex match result
+ * @param {string} format - The format that was matched
+ * @returns {TimeComponents} TimeComponents object
+ */
+function extractComponentsFromMatch(match, format) {
+    const result = {
+        hours: format.startsWith('hh') ? '01' : '00',
+        minutes: '00',
+        seconds: '00',
+    };
+    if (match[1]) {
+        result.hours = parseInt(match[1], 10).toString().padStart(2, '0');
+    }
+    if (match[2]) {
+        result.minutes = parseInt(match[2], 10).toString().padStart(2, '0');
+    }
+    if (match[3]) {
+        result.seconds = parseInt(match[3], 10).toString().padStart(2, '0');
+    }
+    return result;
+}
+/**
+ * Extracts only the relevant components based on the target format
+ * @param {TimeComponents} components - Full time components
+ * @param {string} format - Target format to extract components for
+ * @returns {TimeComponents} TimeComponents with only relevant parts
+ */
+function extractRelevantComponents(components, format) {
+    const config = FORMAT_CONFIGS[format];
+    const result = {
+        hours: format.startsWith('hh') ? '01' : '00',
+        minutes: '00',
+        seconds: '00',
+    };
+    if (config.parts.includes(constants69bafca2.TimeType.Hours)) {
+        // Validate hours for the target format
+        const hours = parseInt(components.hours, 10);
+        if (format.startsWith('hh')) {
+            // 12-hour format validation
+            if (hours >= 1 && hours <= 12) {
+                result.hours = components.hours;
+            }
+            // If invalid, keep the default '01'
+        }
+        else {
+            // 24-hour format validation
+            if (hours >= 0 && hours <= 23) {
+                result.hours = components.hours;
+            }
+            // If invalid, keep the default '00'
+        }
+    }
+    if (config.parts.includes(constants69bafca2.TimeType.Minutes)) {
+        result.minutes = components.minutes;
+    }
+    if (config.parts.includes(constants69bafca2.TimeType.Seconds)) {
+        result.seconds = components.seconds;
+    }
+    return result;
+}
+/**
+ * Reconstructs a time string from components according to the specified format
+ * @param {TimeComponents} components - Time components to reconstruct
+ * @param {string} format - Target format for reconstruction
+ * @returns {string} Formatted time string
+ */
+function reconstructTimeByFormat(components, format) {
+    const config = FORMAT_CONFIGS[format];
+    if (!config) {
+        return `${components.hours}:${components.minutes}:${components.seconds}`;
+    }
+    switch (format) {
+        case 'HH':
+        case 'hh':
+            return components.hours;
+        case 'HH:mm':
+        case 'hh:mm':
+            return `${components.hours}:${components.minutes}`;
+        case 'HH:mm:ss':
+        case 'hh:mm:ss':
+            return `${components.hours}:${components.minutes}:${components.seconds}`;
+        default:
+            return `${components.hours}:${components.minutes}:${components.seconds}`;
+    }
+}
+
+const nvFieldtimeCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldtime{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldtime[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldtime[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldtime[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtime label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldtime nv-popover{width:100%;display:block;z-index:9999}nv-fieldtime nv-popover [data-scope=popover]{padding:var(--list-dropdown-padding);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:100%}nv-fieldtime .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtime .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%;width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldtime .input-container input.time-input[type=password]::-ms-clear,nv-fieldtime .input-container input.time-input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldtime .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px;top:50%;transform:translateY(-50%)}nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus-within{border-color:var(--color-focus-brand);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand)}nv-fieldtime .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtime .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth;scrollbar-gutter:stable both-edges;scrollbar-gutter:auto}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:6px;height:6px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtime .time-dropdown .time-columns .time-column:last-child{border-right:none}nv-fieldtime .time-dropdown .time-columns .time-column .time-option{padding:var(--calendar-padding);text-align:center;cursor:pointer;transition:background-color 0.2s;border-radius:var(--list-dropdown-item-radius);color:var(--components-calendar-cell-text);font-size:var(--font-size-sm);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus,nv-fieldtime .time-dropdown .time-columns .time-column .time-option:focus-within{background-color:var(--components-calendar-cell-background-hover);color:var(--components-calendar-cell-text-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-calendar-cell-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
+const NvFieldtimeStyle0 = nvFieldtimeCss;
+
+const NvFieldtime = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        // Input elements for hours, minutes, and seconds
+        this.inputElements = {};
+        this.inputZeroAdded = {};
+        this.typeFocused = constants69bafca2.TimeType.Hours;
+        /****************************************************************************/
+        //#region STATES
+        this.hours = '00';
+        this.minutes = '00';
+        this.seconds = '00';
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4A79185f4.v4();
+        /**
+         * Display the input field's content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won't be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * The disabled prop lets you turn off the input field so that users can't
+         * interact with it. When disabled, the field is grayed out and won't respond to
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Marks the input field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         */
+        this.required = false;
+        /**
+         * Changes the input field’s appearance to indicate successful input or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * Alters the input field's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Specifies the time format to be used.
+         * Available formats:
+         * - HH: 24-hour format (00-23)
+         * - HH:mm: 24-hour format with minutes (00:00-23:59)
+         * - HH:mm:ss: 24-hour format with minutes and seconds (00:00:00-23:59:59)
+         * - hh: 12-hour format (01-12)
+         * - hh:mm: 12-hour format with minutes (01:00-12:59)
+         * - hh:mm:ss: 12-hour format with minutes and seconds (01:00:00-12:59:59)
+         *
+         * The component automatically shows only the relevant input fields based on the selected format.
+         * When the format changes dynamically, the component re-parses the current value and updates
+         * the visible fields accordingly.
+         */
+        this.format = 'HH:mm:ss';
+        /**
+         * State of the time picker popover.
+         */
+        this.open = false;
+        /**
+         * The step interval in milliseconds for time increments/decrements.
+         * This affects how the time changes when using arrow keys or spinners.
+         */
+        this.step = 60000; // In secondes
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region LISTENERS
+    handleOpenChanged(event) {
+        // Stop propagation to prevent the event from affecting parent components like dialogs
+        event.stopPropagation();
+        // Update `open` based on the popover state
+        this.open = event.detail;
+    }
+    handleKeyDown(event) {
+        var _a, _b;
+        if (!this.open) {
+            if (event.key === 'ArrowDown') {
+                this.open = true;
+                event.preventDefault();
+                return;
+            }
+            return;
+        }
+        // Verify if the popover element is defined
+        if (!this.popoverElement) {
+            console.warn('nv-fieldtime -> Popover element is not defined');
+            return;
+        }
+        const stringSelector = `.time-column.time-column-${this.typeFocused} div`;
+        const items = Array.from(this.el.querySelectorAll(stringSelector));
+        // Verify if there are items to navigate
+        if (items.length === 0) {
+            console.warn('nv-fieldtime -> No dropdown items found to navigate');
+            return;
+        }
+        let currentIndex = items.findIndex(item => item.classList.contains('highlighted'));
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            currentIndex = (currentIndex + 1) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            currentIndex = (currentIndex - 1 + items.length) % items.length;
+            this.updateHighlightedItem(items, currentIndex);
+        }
+        else if (event.key === 'Enter' && currentIndex >= 0) {
+            event.preventDefault();
+            items[currentIndex].click();
+            // Navigate to the next visible field
+            const visibleTypes = getVisibleTimeTypes(this.format);
+            const currentTypeIndex = visibleTypes.indexOf(this.typeFocused);
+            const nextTypeIndex = currentTypeIndex + 1;
+            if (nextTypeIndex < visibleTypes.length) {
+                const nextType = visibleTypes[nextTypeIndex];
+                (_a = this.inputElements[nextType]) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = this.inputElements[nextType]) === null || _b === void 0 ? void 0 : _b.select();
+            }
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            const visibleTypes = getVisibleTimeTypes(this.format);
+            const firstVisibleType = visibleTypes[0];
+            if (firstVisibleType && this.inputElements[firstVisibleType]) {
+                this.inputElements[firstVisibleType].blur();
+            }
+        }
+    }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region WATCHERS
+    handleValueChange(newValue) {
+        // Parse the new value and ensure it's in the correct format
+        if (newValue) {
+            const components = parseValueByFormat(newValue, this.format);
+            const formattedValue = reconstructTimeByFormat(components, this.format);
+            // Only emit if the formatted value is different from what we received
+            // This prevents infinite loops while ensuring format consistency
+            if (formattedValue !== newValue) {
+                this.value = formattedValue;
+                return; // The watcher will be called again with the formatted value
+            }
+        }
+        // Emit the value in the correct format
+        this.valueChanged.emit(newValue);
+    }
+    handleOpenChange(newOpen) {
+        // React to external changes, e.g., highlight current time on open
+        if (newOpen) {
+            // Re-highlight columns based on current value
+            const hourSelector = `.time-column.time-column-${constants69bafca2.TimeType.Hours} div`;
+            this.updateColumnHighlight(hourSelector, this.hours);
+            const minutesSelector = `.time-column.time-column-${constants69bafca2.TimeType.Minutes} div`;
+            this.updateColumnHighlight(minutesSelector, this.minutes);
+            const secondsSelector = `.time-column.time-column-${constants69bafca2.TimeType.Seconds} div`;
+            this.updateColumnHighlight(secondsSelector, this.seconds);
+        }
+    }
+    handleFormatChange(newFormat, oldFormat) {
+        if (newFormat === oldFormat) {
+            return; // No change, nothing to do
+        }
+        // Re-parse the current value with the new format
+        const currentValue = this.value || this.reconstructTime();
+        // Parse the current value using the old format to get the time components
+        const components = parseValueByFormat(currentValue, oldFormat || 'HH:mm:ss');
+        // Update the component state with the parsed components
+        this.hours = components.hours;
+        this.minutes = components.minutes;
+        this.seconds = components.seconds;
+        // Reconstruct the time value in the new format
+        const newValue = reconstructTimeByFormat(components, newFormat);
+        // Update the value, which will trigger the value watcher and emit the event
+        this.value = newValue;
+        // Force a re-render to update the visible input fields
+        index.forceUpdate(this.el);
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region METHODS
+    handleInputChange(e, type) {
+        const inputElement = e.target;
+        const inputValue = inputElement.value.replace(/[^0-9]/g, ''); // Only keep numeric input
+        // Check if this field is visible for the current format
+        const visibleTypes = getVisibleTimeTypes(this.format);
+        if (!visibleTypes.includes(type)) {
+            return; // Don't process input for non-visible fields
+        }
+        // Update the time value based on the type
+        switch (type) {
+            case constants69bafca2.TimeType.Hours:
+                this.handleHoursChange(inputValue, type);
+                break;
+            case constants69bafca2.TimeType.Minutes:
+                this.handleMinutesChange(inputValue, type);
+                break;
+            case constants69bafca2.TimeType.Seconds:
+                this.handleSecondsChange(inputValue, type);
+                break;
+        }
+        // Reconstruct time from inputs in the correct format
+        const reconstructedValue = this.reconstructTime();
+        // Update the value, which will trigger the watcher and emit the event
+        this.value = reconstructedValue;
+    }
+    handleHoursChange(inputValue, type) {
+        var _a, _b;
+        const isHHFormat = this.format.startsWith('HH');
+        const maxHours = isHHFormat ? 24 : 12;
+        // Handle empty input
+        if (inputValue.length === 0) {
+            this.hours = '00';
+            return;
+        }
+        if (inputValue.length === 1) {
+            this.inputZeroAdded[type] = true;
+            const newInputValue = inputValue.padStart(2, '0');
+            this.hours = newInputValue;
+        }
+        else if (this.inputZeroAdded[type]) {
+            this.inputZeroAdded[type] = false;
+            const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
+            if (parsedNewInputValue >= maxHours) {
+                this.hours = '00';
+            }
+            else {
+                this.hours = newInputValue;
+            }
+        }
+        else if (inputValue.length > 2) {
+            if (inputValue.startsWith('00')) {
+                this.inputZeroAdded[type] = true;
+                const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+                this.hours = newInputValue;
+            }
+            else {
+                const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+                const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+                // Only apply format validation (not min/max constraints)
+                if (parsedNewInputValue >= maxHours) {
+                    this.hours = '00';
+                }
+                else {
+                    this.hours = parsedNewInputValue.toString();
+                }
+            }
+        }
+        else {
+            const parsedNewInputValue = parseInt(inputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
+            if (parsedNewInputValue >= maxHours) {
+                this.hours = '00';
+            }
+            else {
+                // For direct input, remove unnecessary leading zeros (e.g., '01' becomes '1')
+                this.hours = parsedNewInputValue.toString();
+            }
+        }
+        // Auto-navigation to next field when input is complete
+        if (this.hours.length >= 1 && !this.inputZeroAdded[type]) {
+            const visibleTypes = getVisibleTimeTypes(this.format);
+            const currentTypeIndex = visibleTypes.indexOf(constants69bafca2.TimeType.Hours);
+            const nextTypeIndex = currentTypeIndex + 1;
+            if (nextTypeIndex < visibleTypes.length) {
+                const nextType = visibleTypes[nextTypeIndex];
+                (_a = this.inputElements[nextType]) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = this.inputElements[nextType]) === null || _b === void 0 ? void 0 : _b.select();
+            }
+        }
+    }
+    handleMinutesChange(inputValue, type) {
+        var _a, _b;
+        const maxMinutes = 60;
+        // Handle empty input
+        if (inputValue.length === 0) {
+            this.minutes = '00';
+            return;
+        }
+        if (inputValue.length === 1) {
+            this.inputZeroAdded[type] = true;
+            const newInputValue = inputValue.padStart(2, '0');
+            this.minutes = newInputValue;
+        }
+        else if (this.inputZeroAdded[type]) {
+            this.inputZeroAdded[type] = false;
+            const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
+            if (parsedNewInputValue >= maxMinutes) {
+                this.minutes = '00';
+            }
+            else {
+                this.minutes = newInputValue;
+            }
+        }
+        else if (inputValue.length > 2) {
+            if (inputValue.startsWith('00')) {
+                this.inputZeroAdded[type] = true;
+                const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+                this.minutes = newInputValue;
+            }
+            else {
+                const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+                const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+                // Only apply format validation (not min/max constraints)
+                if (parsedNewInputValue >= maxMinutes) {
+                    this.minutes = '00';
+                }
+                else {
+                    this.minutes = parsedNewInputValue.toString();
+                }
+            }
+        }
+        else {
+            const parsedNewInputValue = parseInt(inputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
+            if (parsedNewInputValue >= maxMinutes) {
+                this.minutes = '00';
+            }
+            else {
+                // For direct input, remove unnecessary leading zeros (e.g., '01' becomes '1')
+                this.minutes = parsedNewInputValue.toString();
+            }
+        }
+        // Auto-navigation to next field when input is complete
+        if (this.minutes.length >= 1 && !this.inputZeroAdded[type]) {
+            const visibleTypes = getVisibleTimeTypes(this.format);
+            const currentTypeIndex = visibleTypes.indexOf(constants69bafca2.TimeType.Minutes);
+            const nextTypeIndex = currentTypeIndex + 1;
+            if (nextTypeIndex < visibleTypes.length) {
+                const nextType = visibleTypes[nextTypeIndex];
+                (_a = this.inputElements[nextType]) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = this.inputElements[nextType]) === null || _b === void 0 ? void 0 : _b.select();
+            }
+        }
+    }
+    handleSecondsChange(inputValue, type) {
+        const maxSeconds = 60;
+        // Handle empty input
+        if (inputValue.length === 0) {
+            this.seconds = '00';
+            return;
+        }
+        if (inputValue.length === 1) {
+            this.inputZeroAdded[type] = true;
+            const newInputValue = inputValue.padStart(2, '0');
+            this.seconds = newInputValue;
+        }
+        else if (this.inputZeroAdded[type]) {
+            this.inputZeroAdded[type] = false;
+            const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
+            if (parsedNewInputValue >= maxSeconds) {
+                this.seconds = '00';
+            }
+            else {
+                this.seconds = newInputValue;
+            }
+        }
+        else if (inputValue.length > 2) {
+            const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
+            if (parsedNewInputValue >= maxSeconds) {
+                this.seconds = '00';
+            }
+            else {
+                this.seconds = parsedNewInputValue.toString();
+            }
+        }
+        else {
+            const parsedNewInputValue = parseInt(inputValue, 10) || 0;
+            // Only apply format validation (not min/max constraints)
+            if (parsedNewInputValue >= maxSeconds) {
+                this.seconds = '00';
+            }
+            else {
+                // For direct input, remove unnecessary leading zeros (e.g., '01' becomes '1')
+                this.seconds = parsedNewInputValue.toString();
+            }
+        }
+        // No auto-navigation for seconds field as it's typically the last field
+    }
+    // Parse a time string according to the current format
+    parseTime(timeString) {
+        if (!timeString) {
+            return;
+        }
+        // Use format-aware parsing without constraint application
+        const components = parseValueByFormat(timeString, this.format);
+        // Set the parsed values without applying min/max constraints
+        this.hours = components.hours;
+        this.minutes = components.minutes;
+        this.seconds = components.seconds;
+    }
+    reconstructTime() {
+        const components = {
+            hours: this.hours,
+            minutes: this.minutes,
+            seconds: this.seconds,
+        };
+        // Ensure the reconstructed time is in the correct format
+        const reconstructedTime = reconstructTimeByFormat(components, this.format);
+        // Validate that the reconstructed time matches the expected format
+        if (!isValidFormatValue(reconstructedTime, this.format)) {
+            // If invalid, return the default value for this format
+            const config = FORMAT_CONFIGS[this.format];
+            return config ? config.defaultValue : reconstructedTime;
+        }
+        return reconstructedTime;
+    }
+    handleFocus(type) {
+        var _a, _b, _c, _d;
+        if (this.readonly || this.disabled) {
+            return;
+        }
+        // Check if this field is visible for the current format
+        const visibleTypes = getVisibleTimeTypes(this.format);
+        if (!visibleTypes.includes(type)) {
+            return; // Don't handle focus for non-visible fields
+        }
+        if (!this.open) {
+            this.open = true; // Force the popover to open
+        }
+        // Refocus on the input if it loses focus and is empty
+        if (((_a = this.inputElements[type]) === null || _a === void 0 ? void 0 : _a.value.length) === 0 ||
+            ((_b = this.inputElements[type]) === null || _b === void 0 ? void 0 : _b.value) === '00') {
+            (_c = this.inputElements[type]) === null || _c === void 0 ? void 0 : _c.focus();
+            (_d = this.inputElements[type]) === null || _d === void 0 ? void 0 : _d.select();
+        }
+        this.typeFocused = type;
+    }
+    HandleDropdownIconClick() {
+        var _a, _b;
+        if (this.disabled || this.readonly) {
+            return; // Do not toggle if disabled or read-only
+        }
+        const visibleTypes = getVisibleTimeTypes(this.format);
+        const firstVisibleType = visibleTypes[0];
+        if (this.open) {
+            this.open = false; // Close the popover if it is open
+        }
+        else if (!this.open &&
+            firstVisibleType &&
+            this.inputElements[firstVisibleType]) {
+            (_a = this.inputElements[firstVisibleType]) === null || _a === void 0 ? void 0 : _a.focus(); // Focus will open the popover
+            (_b = this.inputElements[firstVisibleType]) === null || _b === void 0 ? void 0 : _b.select();
+        }
+        else {
+            console.warn('nv-fieldtime -> No visible input elements found to focus');
+        }
+    }
+    updateHighlightedItem(items, index) {
+        items.forEach((item, i) => {
+            if (i === index) {
+                item.classList.add('highlighted');
+                item.setAttribute('tabindex', '0');
+                item.focus(); // Forcer le focus ici
+                item.scrollIntoView({ block: 'nearest' });
+            }
+            else {
+                item.classList.remove('highlighted');
+                item.setAttribute('tabindex', '-1');
+            }
+        });
+    }
+    handleTimeOptionClick(event, type) {
+        const option = parseInt(event.target.textContent || '0', 10);
+        // Update the time component directly without constraint validation
+        // Dropdown options are already filtered by constraints during generation
+        if (type === constants69bafca2.TimeType.Hours) {
+            this.hours = option.toString().padStart(2, '0');
+        }
+        else if (type === constants69bafca2.TimeType.Minutes) {
+            this.minutes = option.toString().padStart(2, '0');
+        }
+        else if (type === constants69bafca2.TimeType.Seconds) {
+            this.seconds = option.toString().padStart(2, '0');
+        }
+        // Reconstruct time in the correct format and update value
+        const reconstructedTime = this.reconstructTime();
+        this.value = reconstructedTime;
+    }
+    handleInputBlur() {
+        // Use a delay to check if the focus is still within the popover
+        setTimeout(() => {
+            if (!this.el.contains(document.activeElement)) {
+                if (this.open) {
+                    this.open = false; // Close the popover if the focus is outside the component
+                }
+            }
+        }, 150);
+    }
+    handleClickOutside(event) {
+        const target = event.target;
+        // Check if the click is inside the component or any of the input elements
+        if (this.el.contains(target) ||
+            Object.values(this.inputElements).some(input => input.contains(target))) {
+            return;
+        }
+        if (this.open) {
+            this.open = false; // Close the popover if the click is outside
+        }
+    }
+    handleScroll(e, type) {
+        const target = e.target;
+        const scrollTop = target.scrollTop;
+        const containerHeight = target.clientHeight;
+        const scrollHeight = target.scrollHeight;
+        // Define the height of each item, this could be dynamic if the height varies
+        const itemHeight = 40; // Consider making this configurable or dynamic
+        const options = this.generateTimeOptions(type); // Generates the list of time options
+        const singleSetHeight = options.length * itemHeight;
+        // Check if the scroll is near the bottom or top and reset to the first set
+        if (scrollTop + containerHeight >= scrollHeight - itemHeight ||
+            scrollTop <= 0) {
+            target.scrollTop = singleSetHeight; // Reset to the first set from the bottom
+        }
+    }
+    generateTimeOptions(type) {
+        // Convert the step in seconds
+        const stepInSeconds = this.step / 1000;
+        // Handle edge case for zero step
+        if (stepInSeconds === 0) {
+            return ['00']; // Just return the default value
+        }
+        // Generate the time options based on the type
+        switch (type) {
+            case constants69bafca2.TimeType.Hours:
+                return this.generateHourOptions(stepInSeconds);
+            case constants69bafca2.TimeType.Minutes:
+                return this.generateMinuteOptions(stepInSeconds);
+            case constants69bafca2.TimeType.Seconds:
+                return this.generateSecondOptions(stepInSeconds);
+            default:
+                return [];
+        }
+    }
+    generateHourOptions(stepInSeconds) {
+        const hourStep = Math.max(1, Math.floor(stepInSeconds / 3600)); // Prevent step < 1
+        const is12HourFormat = this.format.startsWith('hh');
+        // Set proper hour ranges based on format
+        const defaultMaxHour = is12HourFormat ? 12 : 23;
+        const defaultMinHour = is12HourFormat ? 1 : 0;
+        const maxHour = this.parseHour(this.max, this.format);
+        const minHour = this.parseHour(this.min, this.format);
+        const maxHourValue = maxHour ? parseInt(maxHour, 10) : defaultMaxHour;
+        const minHourValue = minHour ? parseInt(minHour, 10) : defaultMinHour;
+        const values = [];
+        for (let i = minHourValue; i <= maxHourValue; i += hourStep) {
+            const hourStr = i.toString().padStart(2, '0');
+            values.push(hourStr);
+        }
+        return values;
+    }
+    /**
+     * Parse hour value from min/max constraint strings for dropdown generation only.
+     * This method is used exclusively for filtering dropdown options and should not
+     * affect input values or validation.
+     * @param {string} value - The time string to parse (e.g., "14:30" or "02:30")
+     * @param {string} format - The time format string (e.g., "HH:mm" or "hh:mm")
+     * @returns {string} The parsed hour string or null if invalid
+     */
+    parseHour(value, format) {
+        if (!value)
+            return null;
+        const [hourStr] = value.split(':');
+        const hour = parseInt(hourStr, 10);
+        if (isNaN(hour))
+            return null;
+        if (format.startsWith('hh'))
+            return hour > 0 && hour <= 12 ? hourStr.padStart(2, '0') : null;
+        return hour >= 0 && hour <= 24 ? hourStr.padStart(2, '0') : null;
+    }
+    generateMinuteOptions(stepInSeconds) {
+        var _a, _b;
+        const minuteStep = Math.max(1, Math.floor((stepInSeconds % 3600) / 60)); // Ensure step >= 1
+        const minMinute = (_a = this.parseMinute(this.min)) !== null && _a !== void 0 ? _a : 0;
+        const maxMinute = (_b = this.parseMinute(this.max)) !== null && _b !== void 0 ? _b : 59;
+        if (minMinute === 0 && maxMinute === 0)
+            return ['00']; // Handle edge case for zero minutes
+        const values = [];
+        for (let i = minMinute; i <= maxMinute; i += minuteStep) {
+            const minuteStr = i.toString().padStart(2, '0');
+            values.push(minuteStr);
+        }
+        return values;
+    }
+    /**
+     * Parse minute value from min/max constraint strings for dropdown generation only.
+     * This method is used exclusively for filtering dropdown options and should not
+     * affect input values or validation.
+     * @param {string} value - The time string to parse (e.g., "14:30" or "02:30")
+     * @returns {number} The parsed minute number or null if invalid
+     */
+    parseMinute(value) {
+        if (!value)
+            return null;
+        const parts = value.split(':');
+        if (parts.length < 2)
+            return null; // Expect at least "hh:mm"
+        const minute = parseInt(parts[1], 10);
+        return isNaN(minute) || minute < 0 || minute >= 60 ? null : minute;
+    }
+    generateSecondOptions(stepInSeconds) {
+        var _a, _b;
+        const secondStep = Math.max(1, stepInSeconds % 60); // Ensure step >= 1
+        const minSecond = (_a = this.parseSecond(this.min)) !== null && _a !== void 0 ? _a : 0;
+        const maxSecond = (_b = this.parseSecond(this.max)) !== null && _b !== void 0 ? _b : 59;
+        if (minSecond === 0 && maxSecond === 0)
+            return ['00']; // Handle edge case for zero seconds
+        const values = [];
+        for (let i = minSecond; i <= maxSecond; i += secondStep) {
+            const secondStr = i.toString().padStart(2, '0');
+            values.push(secondStr);
+        }
+        return values;
+    }
+    /**
+     * Parse second value from min/max constraint strings for dropdown generation only.
+     * This method is used exclusively for filtering dropdown options and should not
+     * affect input values or validation.
+     * @param {string} value - The time string to parse (e.g., "14:30:45" or "02:30:45")
+     * @returns {number} The parsed second number or null if invalid
+     */
+    parseSecond(value) {
+        if (!value)
+            return null;
+        const parts = value.split(':');
+        if (parts.length < 3)
+            return null; // Expect "hh:mm:ss" or "HH:mm:ss"
+        const second = parseInt(parts[2], 10);
+        return isNaN(second) || second < 0 || second >= 60 ? null : second;
+    }
+    generateInfiniteTimeOptions(type) {
+        const options = this.generateTimeOptions(type);
+        const totalOptions = options.length;
+        // Dynamically calculate repetitions based on a target number of items (e.g., 300 items)
+        const repetitions = Math.ceil(300 / totalOptions);
+        return Array(repetitions).fill(options).flat();
+    }
+    updateColumnHighlight(selector, value) {
+        const items = Array.from(this.el.querySelectorAll(selector));
+        const index = items.findIndex(x => x.textContent === value);
+        this.updateHighlightedItem(items, index);
+    }
+    handleHostClick(event) {
+        var _a, _b;
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const targetElement = event.target;
+        // Check if the click target or its ancestors are inside an nv-iconbutton element
+        if (targetElement.closest('nv-iconbutton')) {
+            return; // Handle icon button click separately
+        }
+        if (!this.open) {
+            if (this.inputElements) {
+                // Focus on the first visible field based on format
+                const visibleTypes = getVisibleTimeTypes(this.format);
+                const firstVisibleType = visibleTypes[0];
+                if (firstVisibleType && this.inputElements[firstVisibleType]) {
+                    (_a = this.inputElements[firstVisibleType]) === null || _a === void 0 ? void 0 : _a.focus();
+                    (_b = this.inputElements[firstVisibleType]) === null || _b === void 0 ? void 0 : _b.select();
+                }
+            }
+            event.preventDefault();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Initialize component state based on format and value
+        if (this.value) {
+            // Parse the provided value using format-aware parsing without constraint application
+            this.parseTime(this.value);
+        }
+        else {
+            // Initialize with format-appropriate default values without any constraint application
+            // Use format-specific defaults: '01' for 12-hour formats, '00' for 24-hour formats
+            const defaultComponents = parseValueByFormat('', this.format);
+            // Set default values directly without any min/max constraint validation
+            this.hours = defaultComponents.hours;
+            this.minutes = defaultComponents.minutes;
+            this.seconds = defaultComponents.seconds;
+            // Set the initial value in the correct format without constraint validation
+            // This ensures the component has a proper initial state for the value watcher
+            const initialValue = reconstructTimeByFormat(defaultComponents, this.format);
+            this.value = initialValue;
+        }
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+    componentDidLoad() {
+        // Initialize dropdown highlighting based on current component state
+        // This ensures proper visual feedback without applying any constraints
+        // Update highlighted items for hours based on current state
+        const hourSelector = `.time-column.time-column-hours div`;
+        this.updateColumnHighlight(hourSelector, this.hours);
+        // Update highlighted items for minutes based on current state
+        const minuteSelector = `.time-column.time-column-minutes div`;
+        this.updateColumnHighlight(minuteSelector, this.minutes);
+        // Update highlighted items for seconds based on current state
+        const secondSelector = `.time-column.time-column-seconds div`;
+        this.updateColumnHighlight(secondSelector, this.seconds);
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    /**
+     * Renders input fields based on the current format
+     * Only shows fields that are relevant to the selected format
+     * @returns {HTMLElement[]} Array of HTML elements for time input fields
+     */
+    renderTimeInputFields() {
+        const visibleTypes = getVisibleTimeTypes(this.format);
+        const elements = [];
+        visibleTypes.forEach((type, index$1) => {
+            // Add separator colon before minutes and seconds (but not before the first field)
+            if (index$1 > 0) {
+                elements.push(index.h("span", null, ":"));
+            }
+            // Add the input field for this time type
+            elements.push(this.renderTimeInputField(type));
+        });
+        return elements;
+    }
+    /**
+     * Renders a single time input field for the specified type
+     * @param {TimeType} type - The time type to render input for
+     * @returns {HTMLInputElement} HTML input element for the specified time type
+     */
+    renderTimeInputField(type) {
+        const getValue = () => {
+            switch (type) {
+                case constants69bafca2.TimeType.Hours:
+                    return this.hours;
+                case constants69bafca2.TimeType.Minutes:
+                    return this.minutes;
+                case constants69bafca2.TimeType.Seconds:
+                    return this.seconds;
+                default:
+                    return '00';
+            }
+        };
+        const getPlaceholder = () => {
+            switch (type) {
+                case constants69bafca2.TimeType.Hours:
+                    return this.format.includes('hh') ? 'hh' : 'HH';
+                case constants69bafca2.TimeType.Minutes:
+                    return 'mm';
+                case constants69bafca2.TimeType.Seconds:
+                    return 'ss';
+                default:
+                    return '';
+            }
+        };
+        const getId = () => {
+            switch (type) {
+                case constants69bafca2.TimeType.Hours:
+                    return this.inputId;
+                case constants69bafca2.TimeType.Minutes:
+                    return `${this.inputId}-minutes`;
+                case constants69bafca2.TimeType.Seconds:
+                    return `${this.inputId}-seconds`;
+                default:
+                    return this.inputId;
+            }
+        };
+        // Remove min/max constraints from input elements to allow native stepper behavior
+        // Constraints are only applied to dropdown options, not input steppers
+        return (index.h("input", { ref: el => (this.inputElements[type] = el), type: "number", autofocus: this.autofocus && type === getVisibleTimeTypes(this.format)[0], class: "time-input", pattern: "[0-9]*", maxlength: "3", value: getValue(), onInput: e => this.handleInputChange(e, type), placeholder: getPlaceholder(), inputMode: "numeric", onFocus: () => this.handleFocus(type), name: this.name ? `${type}-${this.name}` : type, id: getId(), readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }));
+    }
+    /**
+     * Renders dropdown columns based on the current format
+     * Only shows columns that are relevant to the selected format
+     * @returns {HTMLElement[]} Array of HTML elements for time dropdown columns
+     */
+    renderTimeDropdownColumns() {
+        const visibleTypes = getVisibleTimeTypes(this.format);
+        return visibleTypes.map(type => this.RenderTimeOptionsColumn(type));
+    }
+    RenderTimeOptionsColumn(type) {
+        return (index.h("div", { class: `time-column time-column-${type}`, onScroll: e => this.handleScroll(e, type) }, this.generateInfiniteTimeOptions(type).map((option, index$1) => (index.h("div", { class: {
+                'time-option': true,
+                'selected': (type === constants69bafca2.TimeType.Hours && option === this.hours) ||
+                    (type === constants69bafca2.TimeType.Minutes && option === this.minutes) ||
+                    (type === constants69bafca2.TimeType.Seconds && option === this.seconds),
+            }, key: `${option}-${index$1}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
+    }
+    render() {
+        return (index.h(index.Host, { key: '315b0a732c1ef8bee7aaa0141ce533ec265e35ab', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '100b75accd50c277e3ddd13c007e55dad8c6f8b7', htmlFor: this.inputId }, index.h("slot", { key: 'cec67688f98fc7976299a2f55ba8ba859e4ecacc', name: "label" }, this.label))), index.h("nv-popover", { key: 'feaaefb107251368db809babb02b8f8c7cb7baf0', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'c539917597eebdd92bb2e832d1fd9d6afceb5c04', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '5a869349e9fd7a422d596f5bd05402d5559a6f2b', name: "before-input" }), index.h("div", { key: '27dac6987b28d08bb54b9ffc70ddade28f527a9c', class: "input-container" }, index.h("slot", { key: '9df638bb3d58df138a360966925b04092f1d4b9a', name: "leading-input" }), this.renderTimeInputFields(), index.h("nv-iconbutton", { key: '8d6796d9fc57ef2a934bfe79621ff76def8e9507', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (index.h("nv-icon", { key: '15b593ce4e850d18a5f5f93120ae84e84054cffe', name: "alert-circle", class: "validation", size: "sm" })), this.success && (index.h("nv-icon", { key: '85e4a38c3ef64552fc7a47448471d4276ee5cc46', name: "circle-check", class: "validation", size: "sm" }))), index.h("slot", { key: '45cc1c26bc40425df62382a371ab658dd18aefa8', name: "after-input" })), index.h("div", { key: '23432dd354491420e42400d9eeb22bc23e36623e', class: "time-dropdown", slot: "content" }, index.h("div", { key: 'efb53556077c85ee94a8fe345a03d67a3e36cdc1', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '735447b328a8264739d3185ce6c65d48a01ec801', class: "description" }, index.h("slot", { key: '86387e48804b2ac1842c64b4cf4f5ca9f34a6719', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b6cc406c6a872b5ebb83a35a84852e143781e12f', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'c9dc284e202b081a61346796d21e73c8647c7daa', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "open": ["handleOpenChange"],
+        "format": ["handleFormatChange"]
+    }; }
+};
+NvFieldtime.style = NvFieldtimeStyle0;
+
+exports.nv_fieldtime = NvFieldtime;