@nova-design-system/nova-webcomponents 3.24.0 → 3.26.0

package/dist/components/nv-fieldtime.js

@@ -1,1189 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, d as Host } from './p-C63Xpg9a.js';
-import { g as TimeType } from './p-BReL3Lsa.js';
-import { d as defineCustomElement$5 } from './p-nfYynlVq.js';
-import { d as defineCustomElement$4 } from './p-DvapDVBj.js';
-import { d as defineCustomElement$3 } from './p-COnt5ux_.js';
-import { d as defineCustomElement$2 } from './p-B9i3m6rk.js';
-import { v as v4 } from './p-BdYh22OP.js';
-
-/**
- * Format configurations for all supported time formats
- */
-const FORMAT_CONFIGS = {
-    'HH': {
-        pattern: /^([0-1]?[0-9]|2[0-3])$/,
-        parts: [TimeType.Hours],
-        defaultValue: '00',
-        maxLength: 2,
-    },
-    'HH:mm': {
-        pattern: /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9])$/,
-        parts: [TimeType.Hours, 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: [TimeType.Hours, TimeType.Minutes, TimeType.Seconds],
-        defaultValue: '00:00:00',
-        maxLength: 8,
-    },
-    'hh': {
-        pattern: /^(0?[1-9]|1[0-2])$/,
-        parts: [TimeType.Hours],
-        defaultValue: '01',
-        maxLength: 2,
-    },
-    'hh:mm': {
-        pattern: /^(0?[1-9]|1[0-2]):([0-5]?[0-9])$/,
-        parts: [TimeType.Hours, 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: [TimeType.Hours, TimeType.Minutes, 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 [TimeType.Hours, TimeType.Minutes, 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 = { ...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(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(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(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(TimeType.Minutes)) {
-        result.minutes = components.minutes;
-    }
-    if (config.parts.includes(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,nv-fieldtime[aria-required=true] 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}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 nv-popover{z-index:9999}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}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){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{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 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:calc(var(--form-field-padding-y) - 1px) 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%}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{}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{width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin: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}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-iconbutton{margin-left:auto}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}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{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: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 NvFieldtime$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtime extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.valueChanged = createEvent(this, "valueChanged", 3);
-        // Input elements for hours, minutes, and seconds
-        this.inputElements = {};
-        this.inputZeroAdded = {};
-        this.typeFocused = 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 = 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.
-         * @note This uses the native HTML `required` attribute, which triggers browser validation.
-         */
-        this.required = false;
-        /**
-         * Marks the input field as required for accessibility purposes without triggering
-         * native HTML validation. Use this when implementing custom validation logic.
-         * @note When set, this uses `aria-required` instead of the native `required` attribute.
-         * This allows developers to implement custom validation while maintaining accessibility.
-         * @note If this prop is not explicitly set, the component will check for the HTML attribute
-         * 'aria-required' directly to determine if it should be applied.
-         */
-        this.ariaRequiredAttr = 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
-    handleKeyDown(event) {
-        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];
-                this.inputElements[nextType]?.focus();
-                this.inputElements[nextType]?.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();
-            }
-            this.open = false;
-        }
-    }
-    //#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-${TimeType.Hours} div`;
-            this.updateColumnHighlight(hourSelector, this.hours);
-            const minutesSelector = `.time-column.time-column-${TimeType.Minutes} div`;
-            this.updateColumnHighlight(minutesSelector, this.minutes);
-            const secondsSelector = `.time-column.time-column-${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
-        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 TimeType.Hours:
-                this.handleHoursChange(inputValue, type);
-                break;
-            case TimeType.Minutes:
-                this.handleMinutesChange(inputValue, type);
-                break;
-            case 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) {
-        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(TimeType.Hours);
-            const nextTypeIndex = currentTypeIndex + 1;
-            if (nextTypeIndex < visibleTypes.length) {
-                const nextType = visibleTypes[nextTypeIndex];
-                this.inputElements[nextType]?.focus();
-                this.inputElements[nextType]?.select();
-            }
-        }
-    }
-    handleMinutesChange(inputValue, type) {
-        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(TimeType.Minutes);
-            const nextTypeIndex = currentTypeIndex + 1;
-            if (nextTypeIndex < visibleTypes.length) {
-                const nextType = visibleTypes[nextTypeIndex];
-                this.inputElements[nextType]?.focus();
-                this.inputElements[nextType]?.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) {
-        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 (this.inputElements[type]?.value.length === 0 ||
-            this.inputElements[type]?.value === '00') {
-            this.inputElements[type]?.focus();
-            this.inputElements[type]?.select();
-        }
-        this.typeFocused = type;
-    }
-    HandleDropdownIconClick() {
-        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]) {
-            this.inputElements[firstVisibleType]?.focus(); // Focus will open the popover
-            this.inputElements[firstVisibleType]?.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 === TimeType.Hours) {
-            this.hours = option.toString().padStart(2, '0');
-        }
-        else if (type === TimeType.Minutes) {
-            this.minutes = option.toString().padStart(2, '0');
-        }
-        else if (type === 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 TimeType.Hours:
-                return this.generateHourOptions(stepInSeconds);
-            case TimeType.Minutes:
-                return this.generateMinuteOptions(stepInSeconds);
-            case 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) {
-        const minuteStep = Math.max(1, Math.floor((stepInSeconds % 3600) / 60)); // Ensure step >= 1
-        const minMinute = this.parseMinute(this.min) ?? 0;
-        const maxMinute = this.parseMinute(this.max) ?? 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) {
-        const secondStep = Math.max(1, stepInSeconds % 60); // Ensure step >= 1
-        const minSecond = this.parseSecond(this.min) ?? 0;
-        const maxSecond = this.parseSecond(this.max) ?? 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) {
-        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]) {
-                    this.inputElements[firstVisibleType]?.focus();
-                    this.inputElements[firstVisibleType]?.select();
-                }
-            }
-            event.preventDefault();
-        }
-    }
-    handleOpenChanged(event) {
-        this.open = event.detail;
-    }
-    //#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
-    /**
-     * Calculates aria-required and native required values based on props and attributes
-     * @returns {object} Object with ariaRequiredValue and useNativeRequired
-     */
-    getRequiredAttributes() {
-        // Check aria-required from multiple sources:
-        // 1. JavaScript prop (most reliable)
-        // 2. HTML attribute 'aria-required' (direct HTML)
-        // 3. HTML attribute 'aria-required-attr' (from JSX kebab-case conversion)
-        // Check aria-required from multiple sources:
-        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
-        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
-        // We use hasAttribute to determine if the attribute was explicitly set by the user,
-        // since the prop now defaults to false (to maintain Blazor compatibility)
-        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
-            this.el.hasAttribute('aria-required-attr');
-        const ariaRequiredFromAttr = hasAriaRequiredAttr
-            ? this.el.getAttribute('aria-required') ||
-                this.el.getAttribute('aria-required-attr')
-            : null;
-        // Use aria-required if the attribute was explicitly set
-        // With reflect: true, setting the prop will also set the attribute
-        const useAriaRequired = hasAriaRequiredAttr;
-        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
-        // If attribute doesn't exist, the prop was never set and we don't use aria-required
-        const ariaRequiredAttrValue = hasAriaRequiredAttr
-            ? ariaRequiredFromAttr
-            : null;
-        // Determine which attributes to use
-        // If aria-required HTML attribute is present, use it (convert string to boolean)
-        // If required is set and aria-required is not "false", use native required
-        // If aria-required is "false", don't use native required even if required is set
-        const ariaRequiredValue = useAriaRequired
-            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
-            : undefined;
-        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return {
-            ariaRequiredValue,
-            useNativeRequired,
-        };
-    }
-    /**
-     * 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) => {
-            // Add separator colon before minutes and seconds (but not before the first field)
-            if (index > 0) {
-                elements.push(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 TimeType.Hours:
-                    return this.hours;
-                case TimeType.Minutes:
-                    return this.minutes;
-                case TimeType.Seconds:
-                    return this.seconds;
-                default:
-                    return '00';
-            }
-        };
-        const getPlaceholder = () => {
-            switch (type) {
-                case TimeType.Hours:
-                    return this.format.includes('hh') ? 'hh' : 'HH';
-                case TimeType.Minutes:
-                    return 'mm';
-                case TimeType.Seconds:
-                    return 'ss';
-                default:
-                    return '';
-            }
-        };
-        const getId = () => {
-            switch (type) {
-                case TimeType.Hours:
-                    return this.inputId;
-                case TimeType.Minutes:
-                    return `${this.inputId}-minutes`;
-                case 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 (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.getRequiredAttributes().useNativeRequired
-                ? this.required
-                : undefined, ...(this.getRequiredAttributes().ariaRequiredValue !== undefined && {
-                'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
-            }), 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 (h("div", { class: `time-column time-column-${type}`, onScroll: e => this.handleScroll(e, type) }, this.generateInfiniteTimeOptions(type).map((option, index) => (h("div", { class: {
-                'time-option': true,
-                'selected': (type === TimeType.Hours && option === this.hours) ||
-                    (type === TimeType.Minutes && option === this.minutes) ||
-                    (type === TimeType.Seconds && option === this.seconds),
-            }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
-    }
-    render() {
-        return (h(Host, { key: 'a6edfc1d50527225c9a275de73e497f6cd9652aa', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a82749db001869fb2246bef7126348c585e14a1a', htmlFor: this.inputId }, h("slot", { key: '8a96f4fad4f32b6793bee53ca94eec983c1ff09f', name: "label" }, this.label))), h("nv-popover", { key: 'de931598921043b8e6b44035964a5026e040afb1', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: 'b7e654cdb7ce4e270ebba03d20ebe47b37063fce', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '1cde39106fad880cdd27ed96574f8cf320fc334a', name: "before-input" }), h("div", { key: 'eb7d8edd89d951eff5e00eb994dd85504b44801f', class: "input-container" }, h("slot", { key: '48212e52a925cdfb9d897201ca8ee50b037ba573', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: 'eb541ae9faaefb95c146f8ee9d32d533099162fc', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'c25d25f96b786c96ead487dc8af2b200e372ef79', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '2c08c7caa21771c697ed191589c836f58be4e761', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '77e91dd93225a61730ea7b892c50a7517a25af71', name: "after-input" })), h("div", { key: '9e8abc574dd8024dc479b2fe57891b022793291b', class: "time-dropdown", slot: "content" }, h("div", { key: 'f232d3e7a0b43f08b801ff76f4cdbf863bfc7a4a', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ab21ffb708f50a1b38a7d21d02d5f0b920aceca8', class: "description" }, h("slot", { key: '56790e4cc2c6d5f57e45ef7507aee8c1a8ea5a13', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '392a563b5eccd2120263bd72c883ccefe66d0c02', hidden: !this.error, class: "error-description" }, h("slot", { key: '8e6df58e39a9de7fdf05edb0611178c62ff9e79e', name: "error-description" }, this.errorDescription)))));
-    }
-    static get formAssociated() { return true; }
-    get el() { return this; }
-    static get watchers() { return {
-        "value": ["handleValueChange"],
-        "open": ["handleOpenChange"],
-        "format": ["handleFormatChange"]
-    }; }
-    static get style() { return nvFieldtimeCss; }
-}, [324, "nv-fieldtime", {
-        "value": [1537],
-        "label": [513],
-        "inputId": [513, "input-id"],
-        "readonly": [516],
-        "disabled": [516],
-        "required": [516],
-        "ariaRequiredAttr": [516, "aria-required"],
-        "name": [513],
-        "success": [516],
-        "error": [516],
-        "errorDescription": [513, "error-description"],
-        "format": [513],
-        "description": [513],
-        "open": [1540],
-        "step": [514],
-        "max": [513],
-        "min": [513],
-        "autofocus": [516],
-        "hours": [32],
-        "minutes": [32],
-        "seconds": [32]
-    }, [[0, "keydown", "handleKeyDown"]], {
-        "value": ["handleValueChange"],
-        "open": ["handleOpenChange"],
-        "format": ["handleFormatChange"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-fieldtime", "nv-icon", "nv-iconbutton", "nv-loader", "nv-popover"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-fieldtime":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvFieldtime$1);
-            }
-            break;
-        case "nv-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "nv-iconbutton":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "nv-loader":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "nv-popover":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const NvFieldtime = NvFieldtime$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvFieldtime, defineCustomElement };
-//# sourceMappingURL=nv-fieldtime.js.map
-
-//# sourceMappingURL=nv-fieldtime.js.map
+import{t as e,p as t,H as i,c as n,f as r,h as o,d as s}from"./p-iXsbKJzR.js";import{g as a}from"./p-BReL3Lsa.js";import{d as l}from"./p-jZF_Ggmx.js";import{d}from"./p-DDqZBSGn.js";import{d as c}from"./p-CAKTe96z.js";import{d as f}from"./p-DHNSuxz-.js";import{v as h}from"./p-BdYh22OP.js";const u={HH:{pattern:/^([0-1]?[0-9]|2[0-3])$/,parts:[a.Hours],defaultValue:"00",maxLength:2},"HH:mm":{pattern:/^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9])$/,parts:[a.Hours,a.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:[a.Hours,a.Minutes,a.Seconds],defaultValue:"00:00:00",maxLength:8},hh:{pattern:/^(0?[1-9]|1[0-2])$/,parts:[a.Hours],defaultValue:"01",maxLength:2},"hh:mm":{pattern:/^(0?[1-9]|1[0-2]):([0-5]?[0-9])$/,parts:[a.Hours,a.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:[a.Hours,a.Minutes,a.Seconds],defaultValue:"01:00:00",maxLength:8}};function m(e){const t=u[e];return t?t.parts:[a.Hours,a.Minutes,a.Seconds]}function p(e,t){const i=u[t],n={hours:t.startsWith("hh")?"01":"00",minutes:"00",seconds:"00"};if(!e||!i)return n;const r=e.replace(/[^0-9:]/g,""),o=r.match(i.pattern);if(o)return v(o,t);const s=r.match(/^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/);if(s)return function(e,t){const i=u[t],n={hours:t.startsWith("hh")?"01":"00",minutes:"00",seconds:"00"};if(i.parts.includes(a.Hours)){const i=parseInt(e.hours,10);t.startsWith("hh")?i>=1&&i<=12&&(n.hours=e.hours):i>=0&&i<=23&&(n.hours=e.hours)}return i.parts.includes(a.Minutes)&&(n.minutes=e.minutes),i.parts.includes(a.Seconds)&&(n.seconds=e.seconds),n}(v(s,"HH:mm:ss"),t);const l=r.split(":"),d={...n};if(l.length>=1&&l[0]){const e=parseInt(l[0],10);isNaN(e)||(d.hours=t.startsWith("hh")?e>=1&&e<=12?(""+e).padStart(2,"0"):n.hours:e>=0&&e<=23?(""+e).padStart(2,"0"):n.hours)}if(l.length>=2&&l[1]&&i.parts.includes(a.Minutes)){const e=parseInt(l[1],10);!isNaN(e)&&e>=0&&e<=59&&(d.minutes=(""+e).padStart(2,"0"))}if(l.length>=3&&l[2]&&i.parts.includes(a.Seconds)){const e=parseInt(l[2],10);!isNaN(e)&&e>=0&&e<=59&&(d.seconds=(""+e).padStart(2,"0"))}return d}function v(e,t){const i={hours:t.startsWith("hh")?"01":"00",minutes:"00",seconds:"00"};return e[1]&&(i.hours=(""+parseInt(e[1],10)).padStart(2,"0")),e[2]&&(i.minutes=(""+parseInt(e[2],10)).padStart(2,"0")),e[3]&&(i.seconds=(""+parseInt(e[3],10)).padStart(2,"0")),i}function b(e,t){if(!u[t])return`${e.hours}:${e.minutes}:${e.seconds}`;switch(t){case"HH":case"hh":return e.hours;case"HH:mm":case"hh:mm":return`${e.hours}:${e.minutes}`;default:return`${e.hours}:${e.minutes}:${e.seconds}`}}const g=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.valueChanged=n(this,"valueChanged",3),this.inputElements={},this.inputZeroAdded={},this.typeFocused=a.Hours,this.hours="00",this.minutes="00",this.seconds="00",this.inputId=h(),this.readonly=!1,this.disabled=!1,this.required=!1,this.ariaRequiredAttr=!1,this.success=!1,this.error=!1,this.format="HH:mm:ss",this.open=!1,this.step=6e4,this.autofocus=!1}handleKeyDown(e){if(!this.open)return"ArrowDown"===e.key?(this.open=!0,void e.preventDefault()):void 0;if(!this.popoverElement)return void console.warn("nv-fieldtime -> Popover element is not defined");const t=Array.from(this.el.querySelectorAll(`.time-column.time-column-${this.typeFocused} div`));if(0===t.length)return void console.warn("nv-fieldtime -> No dropdown items found to navigate");let i=t.findIndex((e=>e.classList.contains("highlighted")));if("ArrowDown"===e.key)e.preventDefault(),i=(i+1)%t.length,this.updateHighlightedItem(t,i);else if("ArrowUp"===e.key)e.preventDefault(),i=(i-1+t.length)%t.length,this.updateHighlightedItem(t,i);else if("Enter"===e.key&&i>=0){e.preventDefault(),t[i].click();const n=m(this.format),r=n.indexOf(this.typeFocused)+1;if(r<n.length){const e=n[r];this.inputElements[e]?.focus(),this.inputElements[e]?.select()}}else if("Escape"===e.key){e.preventDefault();const t=m(this.format)[0];t&&this.inputElements[t]&&this.inputElements[t].blur(),this.open=!1}}handleValueChange(e){if(e){const t=b(p(e,this.format),this.format);if(t!==e)return void(this.value=t)}this.valueChanged.emit(e)}handleOpenChange(e){e&&(this.updateColumnHighlight(`.time-column.time-column-${a.Hours} div`,this.hours),this.updateColumnHighlight(`.time-column.time-column-${a.Minutes} div`,this.minutes),this.updateColumnHighlight(`.time-column.time-column-${a.Seconds} div`,this.seconds))}handleFormatChange(e,t){if(e===t)return;const i=p(this.value||this.reconstructTime(),t||"HH:mm:ss");this.hours=i.hours,this.minutes=i.minutes,this.seconds=i.seconds;const n=b(i,e);this.value=n,r(this.el)}handleInputChange(e,t){const i=e.target.value.replace(/[^0-9]/g,"");if(!m(this.format).includes(t))return;switch(t){case a.Hours:this.handleHoursChange(i,t);break;case a.Minutes:this.handleMinutesChange(i,t);break;case a.Seconds:this.handleSecondsChange(i,t)}const n=this.reconstructTime();this.value=n}handleHoursChange(e,t){const i=this.format.startsWith("HH")?24:12;if(0!==e.length){if(1===e.length){this.inputZeroAdded[t]=!0;const i=e.padStart(2,"0");this.hours=i}else if(this.inputZeroAdded[t]){this.inputZeroAdded[t]=!1;const n=e.slice(1,3).padStart(2,"0");this.hours=(parseInt(n,10)||0)>=i?"00":n}else if(e.length>2)if(e.startsWith("00")){this.inputZeroAdded[t]=!0;const i=e.slice(1,3).padStart(2,"0");this.hours=i}else{const t=e.slice(1,3).padStart(2,"0"),n=parseInt(t,10)||0;this.hours=n>=i?"00":""+n}else{const t=parseInt(e,10)||0;this.hours=t>=i?"00":""+t}if(this.hours.length>=1&&!this.inputZeroAdded[t]){const e=m(this.format),t=e.indexOf(a.Hours)+1;if(t<e.length){const i=e[t];this.inputElements[i]?.focus(),this.inputElements[i]?.select()}}}else this.hours="00"}handleMinutesChange(e,t){if(0!==e.length){if(1===e.length){this.inputZeroAdded[t]=!0;const i=e.padStart(2,"0");this.minutes=i}else if(this.inputZeroAdded[t]){this.inputZeroAdded[t]=!1;const i=e.slice(1,3).padStart(2,"0");this.minutes=(parseInt(i,10)||0)>=60?"00":i}else if(e.length>2)if(e.startsWith("00")){this.inputZeroAdded[t]=!0;const i=e.slice(1,3).padStart(2,"0");this.minutes=i}else{const t=e.slice(1,3).padStart(2,"0"),i=parseInt(t,10)||0;this.minutes=i>=60?"00":""+i}else{const t=parseInt(e,10)||0;this.minutes=t>=60?"00":""+t}if(this.minutes.length>=1&&!this.inputZeroAdded[t]){const e=m(this.format),t=e.indexOf(a.Minutes)+1;if(t<e.length){const i=e[t];this.inputElements[i]?.focus(),this.inputElements[i]?.select()}}}else this.minutes="00"}handleSecondsChange(e,t){if(0!==e.length)if(1===e.length){this.inputZeroAdded[t]=!0;const i=e.padStart(2,"0");this.seconds=i}else if(this.inputZeroAdded[t]){this.inputZeroAdded[t]=!1;const i=e.slice(1,3).padStart(2,"0");this.seconds=(parseInt(i,10)||0)>=60?"00":i}else if(e.length>2){const t=e.slice(1,3).padStart(2,"0"),i=parseInt(t,10)||0;this.seconds=i>=60?"00":""+i}else{const t=parseInt(e,10)||0;this.seconds=t>=60?"00":""+t}else this.seconds="00"}parseTime(e){if(!e)return;const t=p(e,this.format);this.hours=t.hours,this.minutes=t.minutes,this.seconds=t.seconds}reconstructTime(){const e=b({hours:this.hours,minutes:this.minutes,seconds:this.seconds},this.format);if(!function(e,t){if(!e||!t)return!1;const i=u[t];return!!i&&i.pattern.test(e)}(e,this.format)){const t=u[this.format];return t?t.defaultValue:e}return e}handleFocus(e){this.readonly||this.disabled||m(this.format).includes(e)&&(this.open||(this.open=!0),0!==this.inputElements[e]?.value.length&&"00"!==this.inputElements[e]?.value||(this.inputElements[e]?.focus(),this.inputElements[e]?.select()),this.typeFocused=e)}HandleDropdownIconClick(){if(this.disabled||this.readonly)return;const e=m(this.format)[0];this.open?this.open=!1:!this.open&&e&&this.inputElements[e]?(this.inputElements[e]?.focus(),this.inputElements[e]?.select()):console.warn("nv-fieldtime -> No visible input elements found to focus")}updateHighlightedItem(e,t){e.forEach(((e,i)=>{i===t?(e.classList.add("highlighted"),e.setAttribute("tabindex","0"),e.focus(),e.scrollIntoView({block:"nearest"})):(e.classList.remove("highlighted"),e.setAttribute("tabindex","-1"))}))}handleTimeOptionClick(e,t){const i=parseInt(e.target.textContent||"0",10);t===a.Hours?this.hours=(""+i).padStart(2,"0"):t===a.Minutes?this.minutes=(""+i).padStart(2,"0"):t===a.Seconds&&(this.seconds=(""+i).padStart(2,"0"));const n=this.reconstructTime();this.value=n}handleInputBlur(){setTimeout((()=>{this.el.contains(document.activeElement)||this.open&&(this.open=!1)}),150)}handleClickOutside(e){const t=e.target;this.el.contains(t)||Object.values(this.inputElements).some((e=>e.contains(t)))||this.open&&(this.open=!1)}handleScroll(e,t){const i=e.target,n=i.scrollTop,r=i.clientHeight,o=i.scrollHeight,s=this.generateTimeOptions(t);(n+r>=o-40||n<=0)&&(i.scrollTop=40*s.length)}generateTimeOptions(e){const t=this.step/1e3;if(0===t)return["00"];switch(e){case a.Hours:return this.generateHourOptions(t);case a.Minutes:return this.generateMinuteOptions(t);case a.Seconds:return this.generateSecondOptions(t);default:return[]}}generateHourOptions(e){const t=Math.max(1,Math.floor(e/3600)),i=this.format.startsWith("hh"),n=i?12:23,r=i?1:0,o=this.parseHour(this.max,this.format),s=this.parseHour(this.min,this.format),a=o?parseInt(o,10):n,l=[];for(let e=s?parseInt(s,10):r;e<=a;e+=t)l.push((""+e).padStart(2,"0"));return l}parseHour(e,t){if(!e)return null;const[i]=e.split(":"),n=parseInt(i,10);return isNaN(n)?null:t.startsWith("hh")?n>0&&n<=12?i.padStart(2,"0"):null:n>=0&&n<=24?i.padStart(2,"0"):null}generateMinuteOptions(e){const t=Math.max(1,Math.floor(e%3600/60)),i=this.parseMinute(this.min)??0,n=this.parseMinute(this.max)??59;if(0===i&&0===n)return["00"];const r=[];for(let e=i;e<=n;e+=t)r.push((""+e).padStart(2,"0"));return r}parseMinute(e){if(!e)return null;const t=e.split(":");if(t.length<2)return null;const i=parseInt(t[1],10);return isNaN(i)||i<0||i>=60?null:i}generateSecondOptions(e){const t=Math.max(1,e%60),i=this.parseSecond(this.min)??0,n=this.parseSecond(this.max)??59;if(0===i&&0===n)return["00"];const r=[];for(let e=i;e<=n;e+=t)r.push((""+e).padStart(2,"0"));return r}parseSecond(e){if(!e)return null;const t=e.split(":");if(t.length<3)return null;const i=parseInt(t[2],10);return isNaN(i)||i<0||i>=60?null:i}generateInfiniteTimeOptions(e){const t=this.generateTimeOptions(e);return Array(Math.ceil(300/t.length)).fill(t).flat()}updateColumnHighlight(e,t){const i=Array.from(this.el.querySelectorAll(e)),n=i.findIndex((e=>e.textContent===t));this.updateHighlightedItem(i,n)}handleHostClick(e){if(!(this.disabled||this.readonly||e.target.closest("nv-iconbutton")||this.open)){if(this.inputElements){const e=m(this.format)[0];e&&this.inputElements[e]&&(this.inputElements[e]?.focus(),this.inputElements[e]?.select())}e.preventDefault()}}handleOpenChanged(e){this.open=e.detail}componentWillLoad(){if(document.addEventListener("click",this.handleClickOutside.bind(this)),this.value)this.parseTime(this.value);else{const e=p("",this.format);this.hours=e.hours,this.minutes=e.minutes,this.seconds=e.seconds;const t=b(e,this.format);this.value=t}}connectedCallback(){document.addEventListener("click",this.handleClickOutside.bind(this))}disconnectedCallback(){document.removeEventListener("click",this.handleClickOutside.bind(this))}componentDidLoad(){this.updateColumnHighlight(".time-column.time-column-hours div",this.hours),this.updateColumnHighlight(".time-column.time-column-minutes div",this.minutes),this.updateColumnHighlight(".time-column.time-column-seconds div",this.seconds)}getRequiredAttributes(){const e=this.el.hasAttribute("aria-required")||this.el.hasAttribute("aria-required-attr"),t=e?this.el.getAttribute("aria-required")||this.el.getAttribute("aria-required-attr"):null,i=e?t:null,n=e?"true"===i||""===i:void 0;return{ariaRequiredValue:n,useNativeRequired:this.required&&(!e||!0===n)}}renderTimeInputFields(){const e=m(this.format),t=[];return e.forEach(((e,i)=>{i>0&&t.push(o("span",null,":")),t.push(this.renderTimeInputField(e))})),t}renderTimeInputField(e){return o("input",{ref:t=>this.inputElements[e]=t,type:"number",autofocus:this.autofocus&&e===m(this.format)[0],class:"time-input",pattern:"[0-9]*",maxlength:"3",value:(()=>{switch(e){case a.Hours:return this.hours;case a.Minutes:return this.minutes;case a.Seconds:return this.seconds;default:return"00"}})(),onInput:t=>this.handleInputChange(t,e),placeholder:(()=>{switch(e){case a.Hours:return this.format.includes("hh")?"hh":"HH";case a.Minutes:return"mm";case a.Seconds:return"ss";default:return""}})(),inputMode:"numeric",onFocus:()=>this.handleFocus(e),name:this.name?`${e}-${this.name}`:e,id:(()=>{switch(e){case a.Hours:return this.inputId;case a.Minutes:return this.inputId+"-minutes";case a.Seconds:return this.inputId+"-seconds";default:return this.inputId}})(),readonly:this.readonly,disabled:this.disabled,required:this.getRequiredAttributes().useNativeRequired?this.required:void 0,...void 0!==this.getRequiredAttributes().ariaRequiredValue&&{"aria-required":this.getRequiredAttributes().ariaRequiredValue+""},onKeyDown:e=>this.handleKeyDown(e),onBlur:()=>this.handleInputBlur()})}renderTimeDropdownColumns(){return m(this.format).map((e=>this.RenderTimeOptionsColumn(e)))}RenderTimeOptionsColumn(e){return o("div",{class:"time-column time-column-"+e,onScroll:t=>this.handleScroll(t,e)},this.generateInfiniteTimeOptions(e).map(((t,i)=>o("div",{class:{"time-option":!0,selected:e===a.Hours&&t===this.hours||e===a.Minutes&&t===this.minutes||e===a.Seconds&&t===this.seconds},key:`${t}-${i}`,onClick:t=>this.handleTimeOptionClick(t,e)},t))))}render(){return o(s,{key:"a02fbea3aa9b46d22978cececd750548c16c79cf",onclick:e=>this.handleHostClick(e),"aria-expanded":this.open?"true":"false"},(this.label||this.el.querySelector('[slot="label"]'))&&o("label",{key:"0ec36fbb4e2e810455e35537277496b600b8bd72",htmlFor:this.inputId},o("slot",{key:"5ab4bca171c9d68fbb592c378b0db30139e23642",name:"label"},this.label)),o("nv-popover",{key:"962705b7347af233d00ad7c33ea8777403e32534",ref:e=>this.popoverElement=e,triggerMode:"controlled",placement:"bottom-start",open:this.open,onOpenChanged:this.handleOpenChanged},o("div",{key:"16e06fbf7003cfdf29e019cd4dfcd33c3b4a12e4",class:"input-wrapper",slot:"trigger"},o("slot",{key:"64c31ef85a92430ac348e9ff06405f682ceb7a98",name:"before-input"}),o("div",{key:"291130925798643a0c034719fc46a5ee391ec487",class:"input-container"},o("slot",{key:"823f17b06aeb798216a46631655513bef79f7508",name:"leading-input"}),this.renderTimeInputFields(),o("nv-iconbutton",{key:"4e87bc2c19494f43cb4ac7dfb3b370eac6edab0b",name:"clock",size:"md",emphasis:"lower","aria-label":this.open?"Hide time picker":"Show time picker",onClick:()=>this.HandleDropdownIconClick()}),this.error&&o("nv-icon",{key:"a5c97446025ee0b571f3fe2223dfd759ed69f9ca",name:"alert-circle",class:"validation",size:"sm"}),this.success&&o("nv-icon",{key:"475f240e74459e16e5a9dd3bea0df21f32949e18",name:"circle-check",class:"validation",size:"sm"})),o("slot",{key:"696be862dee53acc18c311fe2ea26f4ec099c62e",name:"after-input"})),o("div",{key:"75e7e8ad1c1bc7be602d633946b3845007a3b1c5",class:"time-dropdown",slot:"content"},o("div",{key:"89898000bb7005ef687372d1016b5b93f02a43bc",class:"time-columns"},this.renderTimeDropdownColumns()))),(this.description||this.el.querySelector('[slot="description"]'))&&o("div",{key:"a0bddd8851b21c57637fbe8f9d8a83d62ff43bdf",class:"description"},o("slot",{key:"133c39ce0065b8f95a932d12c5150af595eab460",name:"description"},this.description)),(this.errorDescription||this.el.querySelector('[slot="error-description"]'))&&o("div",{key:"de3a537dd418c1c218eceb8062fd925c0ea06bba",hidden:!this.error,class:"error-description"},o("slot",{key:"97e2865ce647f2e4e32697acf5154fc94be9eab7",name:"error-description"},this.errorDescription)))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{value:[{handleValueChange:0}],open:[{handleOpenChange:0}],format:[{handleFormatChange:0}]}}static get style(){return'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,nv-fieldtime[aria-required=true] 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}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 nv-popover{z-index:9999}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}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){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{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 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:calc(var(--form-field-padding-y) - 1px) 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%}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{}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{width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin: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}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-iconbutton{margin-left:auto}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}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{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: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)}'}},[324,"nv-fieldtime",{value:[1537],label:[513],inputId:[513,"input-id"],readonly:[516],disabled:[516],required:[516],ariaRequiredAttr:[516,"aria-required"],name:[513],success:[516],error:[516],errorDescription:[513,"error-description"],format:[513],description:[513],open:[1540],step:[514],max:[513],min:[513],autofocus:[516],hours:[32],minutes:[32],seconds:[32]},[[0,"keydown","handleKeyDown"]],{value:[{handleValueChange:0}],open:[{handleOpenChange:0}],format:[{handleFormatChange:0}]}]);function k(){"undefined"!=typeof customElements&&["nv-fieldtime","nv-icon","nv-iconbutton","nv-loader","nv-popover"].forEach((t=>{switch(t){case"nv-fieldtime":customElements.get(e(t))||customElements.define(e(t),g);break;case"nv-icon":customElements.get(e(t))||l();break;case"nv-iconbutton":customElements.get(e(t))||d();break;case"nv-loader":customElements.get(e(t))||c();break;case"nv-popover":customElements.get(e(t))||f()}}))}k();const w=g,x=k;export{w as NvFieldtime,x as defineCustomElement}