@nova-design-system/nova-react 3.0.0-beta.43 → 3.0.0-beta.44

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

@@ -0,0 +1,1011 @@
+'use strict';
+
+var index = require('./index-BZCQTWfv.js');
+var constants98e2dcc2 = require('./constants-98e2dcc2-C0SBCapP.js');
+var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+require('react');
+
+/**
+ * Checks if a string starts with a given prefix, ignoring case.
+ * @param {string} str - The string to check.
+ * @param {string} prefix - The prefix to check for.
+ * @returns {boolean} - True if the string starts with the prefix, ignoring case.
+ * @example startsWithIgnoreCase('Hello, world!', 'hello') // true
+ * @example startsWithIgnoreCase('Hello, world!', 'world') // false
+ */
+function startsWithIgnoreCase(str, prefix) {
+    if (!str || !prefix)
+        return false;
+    return str.toLowerCase().startsWith(prefix.toLowerCase());
+}
+
+const nvFieldtimeCss = "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}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)}nv-fieldtime[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldtime[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}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:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;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 .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldtime .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;min-height:40px;gap:0;padding-left:var(--form-field-padding-x)}nv-fieldtime .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtime .input-container:focus-within,nv-fieldtime .input-container:focus-within:hover,nv-fieldtime .input-container:focus,nv-fieldtime .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtime .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtime .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtime .input-container input.time-input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;min-width:24px;flex:0 0 24px;text-align:center;padding:0;margin:0}nv-fieldtime .input-container input.time-input:focus{outline:none}nv-fieldtime .input-container input.time-input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldtime .input-container input.time-input::-webkit-inner-spin-button,nv-fieldtime .input-container input.time-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}nv-fieldtime .input-container span{width:100%;text-align:center;min-width:24px;flex:0 0 24px;padding:0 4px;color:var(--components-form-field-content-text)}nv-fieldtime .input-container>nv-iconbutton{border:0px;border-radius:0px;margin-left:auto}nv-fieldtime .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldtime .input-container nv-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{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldtime .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldtime hr{border:none;border-top:1px solid var(--dropdown-divider-color, #ccc);margin:0.5rem 0}nv-fieldtime .time-dropdown{width:100%}nv-fieldtime .time-dropdown .time-columns{display:flex;justify-content:flex-start;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column{flex:1;text-align:center;max-height:200px;overflow-y:auto;scroll-behavior:smooth}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar{width:4px}nv-fieldtime .time-dropdown .time-columns .time-column::-webkit-scrollbar-thumb{border-radius:4px}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(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);text-align:center;cursor:pointer;transition:background-color 0.2s;height:40px;border-radius:var(--list-dropdown-item-radius);display:flex;justify-content:center;align-items:center}nv-fieldtime .time-dropdown .time-columns .time-column .time-option:hover{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-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-list-dropdown-item-background-hover);color:var(--components-list-dropdown-item-label-hover)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.selected{background-color:var(--components-list-dropdown-item-background-active);color:var(--components-list-dropdown-item-label-active);border-width:1px;border-style:solid;border-color:var(--components-list-dropdown-item-border-active)}nv-fieldtime .time-dropdown .time-columns .time-column .time-option.highlighted{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}";
+const NvFieldtimeStyle0 = nvFieldtimeCss;
+
+const NvFieldtime = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged");
+        // Input elements for hours, minutes, and seconds
+        this.inputElements = {};
+        this.inputZeroAdded = {};
+        this.typeFocused = constants98e2dcc2.TimeType.Hours;
+        /****************************************************************************/
+        //#region STATES
+        this.hours = '00';
+        this.minutes = '00';
+        this.seconds = '00';
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4A79185f4.v4();
+        /**
+         * Display the input field's content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won't be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * The disabled prop lets you turn off the input field so that users can't
+         * interact with it. When disabled, the field is grayed out and won't respond to
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Marks the input field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         */
+        this.required = false;
+        /**
+         * Changes the input field’s appearance to indicate successful input or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * Alters the input field's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Specifies the time format to be used.
+         * Available formats:
+         * - HH: 24-hour format (00-23)
+         * - HH:mm: 24-hour format with minutes (00:00-23:59)
+         * - HH:mm:ss: 24-hour format with minutes and seconds (00:00:00-23:59:59)
+         * - hh: 12-hour format (01-12)
+         * - hh:mm: 12-hour format with minutes (01:00-12:59)
+         * - hh:mm:ss: 12-hour format with minutes and seconds (01:00:00-12:59:59)
+         */
+        this.format = 'HH:mm:ss';
+        /**
+         * State of the time picker popover.
+         */
+        this.open = false;
+        /**
+         * The step interval in milliseconds for time increments/decrements.
+         * This affects how the time changes when using arrow keys or spinners.
+         */
+        this.step = 60000; // In secondes
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region LISTENERS
+    handleOpenChanged(event) {
+        this.open = event.detail; // Update `open` based on the popover state
+    }
+    handleKeyDown(event) {
+        var _a, _b, _c, _d;
+        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();
+            if (this.typeFocused === constants98e2dcc2.TimeType.Hours) {
+                (_a = this.inputElements[constants98e2dcc2.TimeType.Minutes]) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = this.inputElements[constants98e2dcc2.TimeType.Minutes]) === null || _b === void 0 ? void 0 : _b.select();
+            }
+            else if (this.typeFocused === constants98e2dcc2.TimeType.Minutes ||
+                this.typeFocused === constants98e2dcc2.TimeType.Seconds) {
+                (_c = this.inputElements[constants98e2dcc2.TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
+                (_d = this.inputElements[constants98e2dcc2.TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
+            }
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            if (this.inputElements[constants98e2dcc2.TimeType.Hours]) {
+                this.inputElements[constants98e2dcc2.TimeType.Hours].blur();
+            }
+        }
+    }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region WATCHERS
+    handleValueChange(newValue) {
+        this.valueChanged.emit(newValue);
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region METHODS
+    handleInputChange(e, type) {
+        const inputElement = e.target;
+        const inputValue = inputElement.value.replace(/[^0-9]/g, ''); // Only keep numeric input
+        // Update the time value based on the type
+        switch (type) {
+            case constants98e2dcc2.TimeType.Hours:
+                this.handleHoursChange(inputValue, type);
+                break;
+            case constants98e2dcc2.TimeType.Minutes:
+                this.handleMinutesChange(inputValue, type);
+                break;
+            case constants98e2dcc2.TimeType.Seconds:
+                this.handleSecondsChange(inputValue, type);
+                break;
+        }
+        // Reconstruct time from inputs
+        const currentValue = this.reconstructTime();
+        this.value = currentValue;
+    }
+    handleHoursChange(inputValue, type) {
+        var _a, _b, _c, _d;
+        const isHHFormat = this.format.startsWith('HH');
+        const maxHours = isHHFormat ? 24 : 12;
+        let reputedToZero = false;
+        const maxHour = this.parseHour(this.max, this.format) ||
+            (this.format.startsWith('hh') ? '12' : '24');
+        const minHour = this.parseHour(this.min, this.format) || '00';
+        if (inputValue.length === 1) {
+            this.inputZeroAdded[type] = true;
+            const newInputValue = inputValue.padStart(2, '0');
+            if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {
+                if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
+                    this.hours = minHour;
+                }
+                else {
+                    this.hours = '00';
+                    reputedToZero = true;
+                }
+            }
+            else {
+                if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
+                    this.hours = minHour;
+                }
+                else {
+                    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;
+            if (parsedNewInputValue >= maxHours) {
+                if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
+                    this.hours = minHour;
+                }
+                else {
+                    this.hours = '00';
+                    reputedToZero = true;
+                }
+            }
+            else {
+                if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {
+                    if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
+                        this.hours = minHour;
+                    }
+                    else {
+                        this.hours = '00';
+                        reputedToZero = true;
+                    }
+                }
+                else {
+                    if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
+                        this.hours = minHour;
+                    }
+                    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');
+                if (maxHour && parseInt(newInputValue, 10) > parseInt(maxHour, 10)) {
+                    if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
+                        this.hours = minHour;
+                    }
+                    else {
+                        this.hours = '00';
+                        reputedToZero = true;
+                    }
+                }
+                else {
+                    if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
+                        this.hours = minHour;
+                    }
+                    else {
+                        this.hours = newInputValue;
+                    }
+                }
+            }
+            else {
+                const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+                const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+                if (parsedNewInputValue >= maxHours) {
+                    if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
+                        this.hours = minHour;
+                        reputedToZero = true;
+                    }
+                    else {
+                        this.hours = '00';
+                        reputedToZero = true;
+                    }
+                }
+                else {
+                    if (maxHour && parsedNewInputValue > parseInt(maxHour, 10)) {
+                        if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
+                            this.hours = minHour;
+                        }
+                        else {
+                            this.hours = '00';
+                            reputedToZero = true;
+                        }
+                    }
+                    else {
+                        if (parsedNewInputValue < parseInt(minHour, 10)) {
+                            this.hours = minHour;
+                        }
+                        else {
+                            this.hours = parsedNewInputValue.toString();
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            const newInputValue = inputValue.padStart(2, '0');
+            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            if (parsedNewInputValue >= maxHours) {
+                if (parseInt(newInputValue, 10) < parseInt(minHour, 10)) {
+                    this.hours = minHour;
+                }
+                else {
+                    this.hours = '00';
+                    reputedToZero = true;
+                }
+            }
+            else {
+                if (maxHour && parsedNewInputValue > parseInt(maxHour, 10)) {
+                    this.hours = '00';
+                    reputedToZero = true;
+                }
+                else {
+                    if (parsedNewInputValue < parseInt(minHour, 10)) {
+                        this.hours = minHour;
+                    }
+                    else {
+                        this.hours = parsedNewInputValue.toString();
+                    }
+                }
+            }
+        }
+        if (this.hours.length === 2 &&
+            !this.inputZeroAdded[type] &&
+            !reputedToZero) {
+            (_a = this.inputElements[constants98e2dcc2.TimeType.Minutes]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = this.inputElements[constants98e2dcc2.TimeType.Minutes]) === null || _b === void 0 ? void 0 : _b.select();
+        }
+        else if (reputedToZero) {
+            (_c = this.inputElements[constants98e2dcc2.TimeType.Hours]) === null || _c === void 0 ? void 0 : _c.focus();
+            (_d = this.inputElements[constants98e2dcc2.TimeType.Hours]) === null || _d === void 0 ? void 0 : _d.select();
+        }
+    }
+    handleMinutesChange(inputValue, type) {
+        var _a, _b, _c, _d, _e, _f;
+        const maxMinutes = 60;
+        let reputedToZero = false;
+        const minMinute = (_a = this.parseMinute(this.min)) !== null && _a !== void 0 ? _a : 0;
+        const maxMinute = (_b = this.parseMinute(this.max)) !== null && _b !== void 0 ? _b : 59;
+        if (inputValue.length === 1) {
+            this.inputZeroAdded[type] = true;
+            const newInputValue = inputValue.padStart(2, '0');
+            if (maxMinute && parseInt(newInputValue, 10) > maxMinute) {
+                if (minMinute && parseInt(newInputValue, 10) < minMinute) {
+                    this.minutes = minMinute.toString().padStart(2, '0');
+                }
+                else {
+                    this.minutes = '00';
+                    reputedToZero = true;
+                }
+            }
+            else {
+                if (minMinute && parseInt(newInputValue, 10) < minMinute) {
+                    this.minutes = minMinute.toString().padStart(2, '0');
+                }
+                else {
+                    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;
+            if (parsedNewInputValue >= maxMinutes) {
+                if (minMinute && parseInt(newInputValue, 10) < minMinute) {
+                    this.minutes = minMinute.toString().padStart(2, '0');
+                }
+                else {
+                    this.minutes = '00';
+                    reputedToZero = true;
+                }
+            }
+            else {
+                if (maxMinute && parsedNewInputValue > maxMinute) {
+                    if (minMinute && parseInt(newInputValue, 10) < minMinute) {
+                        this.minutes = minMinute.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.minutes = '00';
+                        reputedToZero = true;
+                    }
+                }
+                else {
+                    if (minMinute && parsedNewInputValue < minMinute) {
+                        this.minutes = minMinute.toString().padStart(2, '0');
+                    }
+                    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');
+                if (maxMinute && parseInt(newInputValue, 10) > maxMinute) {
+                    if (minMinute && parseInt(newInputValue, 10) < minMinute) {
+                        this.minutes = minMinute.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.minutes = '00';
+                        reputedToZero = true;
+                    }
+                }
+                else {
+                    if (minMinute && parseInt(newInputValue, 10) < minMinute) {
+                        this.minutes = minMinute.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.minutes = newInputValue;
+                    }
+                }
+            }
+            else {
+                const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+                const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+                if (parsedNewInputValue >= maxMinutes) {
+                    if (minMinute && parseInt(newInputValue, 10) < minMinute) {
+                        this.minutes = minMinute.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.minutes = '00';
+                        reputedToZero = true;
+                    }
+                }
+                else {
+                    if (maxMinute && parsedNewInputValue > maxMinute) {
+                        if (minMinute && parseInt(newInputValue, 10) < minMinute) {
+                            this.minutes = minMinute.toString().padStart(2, '0');
+                        }
+                        else {
+                            this.minutes = '00';
+                            reputedToZero = true;
+                        }
+                    }
+                    else {
+                        if (minMinute && parsedNewInputValue < minMinute) {
+                            this.minutes = minMinute.toString().padStart(2, '0');
+                        }
+                        else {
+                            this.minutes = parsedNewInputValue.toString();
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            const newInputValue = inputValue.padStart(2, '0');
+            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            if (parsedNewInputValue >= maxMinutes) {
+                if (minMinute && parseInt(newInputValue, 10) < minMinute) {
+                    this.minutes = minMinute.toString().padStart(2, '0');
+                }
+                else {
+                    this.minutes = '00';
+                    reputedToZero = true;
+                }
+            }
+            else {
+                if (maxMinute && parsedNewInputValue > maxMinute) {
+                    if (minMinute && parseInt(newInputValue, 10) < minMinute) {
+                        this.minutes = minMinute.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.minutes = '00';
+                        reputedToZero = true;
+                    }
+                }
+                else {
+                    if (minMinute && parsedNewInputValue < minMinute) {
+                        this.minutes = minMinute.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.minutes = parsedNewInputValue.toString();
+                    }
+                }
+            }
+        }
+        if (this.minutes.length === 2 &&
+            !this.inputZeroAdded[type] &&
+            !reputedToZero) {
+            (_c = this.inputElements[constants98e2dcc2.TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
+            (_d = this.inputElements[constants98e2dcc2.TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
+        }
+        else if (reputedToZero) {
+            (_e = this.inputElements[constants98e2dcc2.TimeType.Minutes]) === null || _e === void 0 ? void 0 : _e.focus();
+            (_f = this.inputElements[constants98e2dcc2.TimeType.Minutes]) === null || _f === void 0 ? void 0 : _f.select();
+        }
+    }
+    handleSecondsChange(inputValue, type) {
+        var _a, _b, _c, _d;
+        const maxSeconds = 60;
+        let reputedToZero = false;
+        const minSecond = (_a = this.parseSecond(this.min)) !== null && _a !== void 0 ? _a : 0;
+        const maxSecond = (_b = this.parseSecond(this.max)) !== null && _b !== void 0 ? _b : 59;
+        if (inputValue.length === 1) {
+            this.inputZeroAdded[type] = true;
+            const newInputValue = inputValue.padStart(2, '0');
+            if (maxSecond && parseInt(newInputValue, 10) > maxSecond) {
+                if (minSecond && parseInt(newInputValue, 10) < minSecond) {
+                    this.seconds = minSecond.toString().padStart(2, '0');
+                }
+                else {
+                    this.seconds = '00';
+                    reputedToZero = true;
+                }
+            }
+            else {
+                if (minSecond && parseInt(newInputValue, 10) < minSecond) {
+                    this.seconds = minSecond.toString().padStart(2, '0');
+                }
+                else {
+                    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;
+            if (parsedNewInputValue >= maxSeconds) {
+                if (minSecond && parseInt(newInputValue, 10) < minSecond) {
+                    this.seconds = minSecond.toString().padStart(2, '0');
+                }
+                else {
+                    this.seconds = '00';
+                    reputedToZero = true;
+                }
+            }
+            else {
+                if (maxSecond && parsedNewInputValue > maxSecond) {
+                    if (minSecond && parseInt(newInputValue, 10) < minSecond) {
+                        this.seconds = minSecond.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.seconds = '00';
+                        reputedToZero = true;
+                    }
+                }
+                else {
+                    if (minSecond && parsedNewInputValue < minSecond) {
+                        this.seconds = minSecond.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.seconds = newInputValue;
+                    }
+                }
+            }
+        }
+        else if (inputValue.length > 2) {
+            const newInputValue = inputValue.slice(1, 3).padStart(2, '0');
+            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            if (parsedNewInputValue >= maxSeconds) {
+                if (minSecond && parseInt(newInputValue, 10) < minSecond) {
+                    this.seconds = minSecond.toString().padStart(2, '0');
+                }
+                else {
+                    this.seconds = '00';
+                    reputedToZero = true;
+                }
+            }
+            else {
+                if (maxSecond && parsedNewInputValue > maxSecond) {
+                    if (minSecond && parseInt(newInputValue, 10) < minSecond) {
+                        this.seconds = minSecond.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.seconds = '00';
+                        reputedToZero = true;
+                    }
+                }
+                else {
+                    if (minSecond && parsedNewInputValue < minSecond) {
+                        this.seconds = minSecond.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.seconds = parsedNewInputValue.toString();
+                    }
+                }
+            }
+        }
+        else {
+            const newInputValue = inputValue.padStart(2, '0');
+            const parsedNewInputValue = parseInt(newInputValue, 10) || 0;
+            if (parsedNewInputValue >= maxSeconds) {
+                if (minSecond && parseInt(newInputValue, 10) < minSecond) {
+                    this.seconds = minSecond.toString().padStart(2, '0');
+                }
+                else {
+                    this.seconds = '00';
+                    reputedToZero = true;
+                }
+            }
+            else {
+                if (maxSecond && parsedNewInputValue > maxSecond) {
+                    if (minSecond && parseInt(newInputValue, 10) < minSecond) {
+                        this.seconds = minSecond.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.seconds = '00';
+                        reputedToZero = true;
+                    }
+                }
+                else {
+                    if (minSecond && parsedNewInputValue < minSecond) {
+                        this.seconds = minSecond.toString().padStart(2, '0');
+                    }
+                    else {
+                        this.seconds = parsedNewInputValue.toString();
+                    }
+                }
+            }
+        }
+        if (reputedToZero) {
+            (_c = this.inputElements[constants98e2dcc2.TimeType.Seconds]) === null || _c === void 0 ? void 0 : _c.focus();
+            (_d = this.inputElements[constants98e2dcc2.TimeType.Seconds]) === null || _d === void 0 ? void 0 : _d.select();
+        }
+    }
+    // Parse a continuous time string (e.g., "123456") into hours, minutes, and seconds
+    parseTime(timeString) {
+        if (!timeString) {
+            return;
+        }
+        const cleanedTime = timeString.replace(/[^0-9]/g, '').padStart(6, '0');
+        const hour = cleanedTime.slice(0, 2);
+        const minute = cleanedTime.slice(2, 4);
+        const second = cleanedTime.slice(4, 6);
+        const minHour = this.parseHour(this.min, this.format) || hour;
+        const minMinute = this.parseMinute(this.min) || minute;
+        const minSecond = this.parseSecond(this.min) || second;
+        this.hours = minHour.padStart(2, '0');
+        this.minutes = minMinute.toString().padStart(2, '0');
+        this.seconds = minSecond.toString().padStart(2, '0');
+    }
+    reconstructTime() {
+        if (this.format === 'HH' || this.format === 'hh') {
+            return this.hours;
+        }
+        else if (this.format === 'HH:mm' || this.format === 'hh:mm') {
+            return `${this.hours}:${this.minutes}`;
+        }
+        else if (this.format === 'HH:mm:ss' || this.format === 'hh:mm:ss') {
+            return `${this.hours}:${this.minutes}:${this.seconds}`;
+        }
+        else {
+            return `${this.hours}:${this.minutes}:${this.seconds}`;
+        }
+    }
+    handleFocus(type) {
+        var _a, _b, _c, _d;
+        if (this.readonly || this.disabled) {
+            return;
+        }
+        if (!this.open) {
+            this.open = true; // Force the popover to open
+        }
+        // Refocus on the input if it loses focus and is empty
+        if (((_a = this.inputElements[type]) === null || _a === void 0 ? void 0 : _a.value.length) === 0 ||
+            ((_b = this.inputElements[type]) === null || _b === void 0 ? void 0 : _b.value) === '00') {
+            (_c = this.inputElements[type]) === null || _c === void 0 ? void 0 : _c.focus();
+            (_d = this.inputElements[type]) === null || _d === void 0 ? void 0 : _d.select();
+        }
+        this.typeFocused = type;
+    }
+    HandleDropdownIconClick() {
+        var _a, _b, _c, _d, _e, _f;
+        if (this.disabled || this.readonly) {
+            return; // Do not toggle if disabled or read-only
+        }
+        if (this.open && this.inputElements[constants98e2dcc2.TimeType.Hours]) {
+            this.open = false; // Close the popover if it is open
+        }
+        else if (this.open && this.inputElements[constants98e2dcc2.TimeType.Minutes]) {
+            this.open = false; // Close the popover if it is open
+        }
+        else if (this.open && this.inputElements[constants98e2dcc2.TimeType.Seconds]) {
+            this.open = false; // Close the popover if it is open
+        }
+        else if (!this.open && this.inputElements[constants98e2dcc2.TimeType.Hours]) {
+            (_a = this.inputElements[constants98e2dcc2.TimeType.Hours]) === null || _a === void 0 ? void 0 : _a.focus(); // Focus will open the popover
+            (_b = this.inputElements[constants98e2dcc2.TimeType.Hours]) === null || _b === void 0 ? void 0 : _b.select();
+        }
+        else if (!this.open && this.inputElements[constants98e2dcc2.TimeType.Minutes]) {
+            (_c = this.inputElements[constants98e2dcc2.TimeType.Minutes]) === null || _c === void 0 ? void 0 : _c.focus(); // Focus will open the popover
+            (_d = this.inputElements[constants98e2dcc2.TimeType.Minutes]) === null || _d === void 0 ? void 0 : _d.select();
+        }
+        else if (!this.open && this.inputElements[constants98e2dcc2.TimeType.Seconds]) {
+            (_e = this.inputElements[constants98e2dcc2.TimeType.Seconds]) === null || _e === void 0 ? void 0 : _e.focus(); // Focus will open the popover
+            (_f = this.inputElements[constants98e2dcc2.TimeType.Seconds]) === null || _f === void 0 ? void 0 : _f.select();
+        }
+        else {
+            console.warn('nv-fieldtime -> No input elements found to focus or to blur');
+        }
+    }
+    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);
+        if (type === constants98e2dcc2.TimeType.Hours) {
+            this.hours = option.toString().padStart(2, '0');
+        }
+        else if (type === constants98e2dcc2.TimeType.Minutes) {
+            this.minutes = option.toString().padStart(2, '0');
+        }
+        else if (type === constants98e2dcc2.TimeType.Seconds) {
+            this.seconds = option.toString().padStart(2, '0');
+        }
+        const reconstructTime = this.reconstructTime();
+        this.value = reconstructTime;
+    }
+    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 constants98e2dcc2.TimeType.Hours:
+                return this.generateHourOptions(stepInSeconds);
+            case constants98e2dcc2.TimeType.Minutes:
+                return this.generateMinuteOptions(stepInSeconds);
+            case constants98e2dcc2.TimeType.Seconds:
+                return this.generateSecondOptions(stepInSeconds);
+            default:
+                return [];
+        }
+    }
+    generateHourOptions(stepInSeconds) {
+        const hourStep = Math.max(1, Math.floor(stepInSeconds / 3600)); // Prevent step < 1
+        const maxHour = this.parseHour(this.max, this.format) ||
+            (this.format.startsWith('hh') ? '12' : '24');
+        const minHour = this.parseHour(this.min, this.format) || '00';
+        const maxHourValue = parseInt(maxHour, 10);
+        const minHourValue = parseInt(minHour, 10);
+        const values = [];
+        for (let i = minHourValue; i < maxHourValue; i += hourStep) {
+            values.push(i.toString().padStart(2, '0'));
+        }
+        return values;
+    }
+    parseHour(value, format) {
+        if (!value)
+            return null;
+        const [hourStr] = value.split(':');
+        const hour = parseInt(hourStr, 10);
+        if (isNaN(hour))
+            return null;
+        if (format.startsWith('hh'))
+            return hour > 0 && hour <= 12 ? hourStr.padStart(2, '0') : null;
+        return hour >= 0 && hour <= 24 ? hourStr.padStart(2, '0') : null;
+    }
+    generateMinuteOptions(stepInSeconds) {
+        var _a, _b;
+        const minuteStep = Math.max(1, Math.floor((stepInSeconds % 3600) / 60)); // Ensure step >= 1
+        const minMinute = (_a = this.parseMinute(this.min)) !== null && _a !== void 0 ? _a : 0;
+        const maxMinute = (_b = this.parseMinute(this.max)) !== null && _b !== void 0 ? _b : 59;
+        if (minMinute === 0 && maxMinute === 0)
+            return ['00']; // Handle edge case for zero seconds
+        const values = [];
+        for (let i = minMinute; i <= maxMinute; i += minuteStep) {
+            values.push(i.toString().padStart(2, '0'));
+        }
+        return values;
+    }
+    parseMinute(value) {
+        if (!value)
+            return null;
+        const parts = value.split(':');
+        if (parts.length < 2)
+            return null; // Expect at least "hh:mm"
+        const minute = parseInt(parts[1], 10);
+        return isNaN(minute) || minute < 0 || minute >= 60 ? null : minute;
+    }
+    generateSecondOptions(stepInSeconds) {
+        var _a, _b;
+        const secondStep = Math.max(1, stepInSeconds % 60); // Ensure step >= 1
+        const minSecond = (_a = this.parseSecond(this.min)) !== null && _a !== void 0 ? _a : 0;
+        const maxSecond = (_b = this.parseSecond(this.max)) !== null && _b !== void 0 ? _b : 59;
+        if (minSecond === 0 && maxSecond === 0)
+            return ['00']; // Handle edge case for zero seconds
+        const values = [];
+        for (let i = minSecond; i <= maxSecond; i += secondStep) {
+            values.push(i.toString().padStart(2, '0'));
+        }
+        return values;
+    }
+    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();
+    }
+    getCurrentTime() {
+        const currentTime = new Date();
+        return currentTime.toLocaleTimeString(); // Returns the time in the locale's format
+    }
+    updateColumnHighlight(selector, value) {
+        const items = Array.from(this.el.querySelectorAll(selector));
+        const index = items.findIndex(x => x.textContent === value);
+        this.updateHighlightedItem(items, index);
+    }
+    handleHostClick(event) {
+        var _a, _b;
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        const targetElement = event.target;
+        // Check if the click target or its ancestors are inside an nv-iconbutton element
+        if (targetElement.closest('nv-iconbutton')) {
+            return; // Handle icon button click separately
+        }
+        if (!this.open) {
+            if (this.inputElements) {
+                (_a = this.inputElements[constants98e2dcc2.TimeType.Hours]) === null || _a === void 0 ? void 0 : _a.focus();
+                (_b = this.inputElements[constants98e2dcc2.TimeType.Hours]) === null || _b === void 0 ? void 0 : _b.select();
+            }
+            event.preventDefault();
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // If an initial value is passed, parse it
+        if (this.value) {
+            this.parseTime(this.value);
+        }
+        else {
+            const minHour = this.parseHour(this.min, this.format) || '00';
+            const minMinute = this.parseMinute(this.min) || 0;
+            const minSecond = this.parseSecond(this.min) || 0;
+            this.hours = minHour.padStart(2, '0');
+            this.minutes = minMinute.toString().padStart(2, '0');
+            this.seconds = minSecond.toString().padStart(2, '0');
+        }
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.handleClickOutside.bind(this));
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleClickOutside.bind(this));
+    }
+    componentDidLoad() {
+        if (!this.value) {
+            const currentTime = this.getCurrentTime();
+            // Split time into components
+            // eslint-disable-next-line prefer-const
+            let [hour, minute, secondAmPm] = currentTime.split(':');
+            let second, amPm;
+            // Check if AM/PM is present and split accordingly
+            if (secondAmPm.includes(' ')) {
+                [second, amPm] = secondAmPm.split(' ');
+            }
+            else {
+                second = secondAmPm;
+            }
+            // Parse hour as integer for calculations
+            let parsedHour = parseInt(hour, 10);
+            // Convert hour to 24-hour format based on AM/PM (if present)
+            if (amPm) {
+                if (amPm === 'PM' && parsedHour < 12) {
+                    parsedHour += 12; // Convert PM to 24-hour
+                }
+                else if (amPm === 'AM' && parsedHour === 12) {
+                    parsedHour = 0; // Midnight in 24-hour format
+                }
+            }
+            // Adjust for 12-hour format if necessary
+            if (this.format.startsWith('hh')) {
+                if (parsedHour === 0) {
+                    hour = '12'; // Midnight in 12-hour format
+                }
+                else if (parsedHour > 12) {
+                    hour = (parsedHour - 12).toString(); // Convert 24-hour to 12-hour
+                }
+                else {
+                    hour = parsedHour.toString();
+                }
+            }
+            else {
+                hour = parsedHour.toString(); // Use 24-hour format directly
+            }
+            // Pad hour, minute, and second to ensure two digits
+            hour = hour.padStart(2, '0');
+            minute = minute.padStart(2, '0');
+            second = second.padStart(2, '0');
+            // Update highlighted items for hours
+            const hourSelector = `.time-column.time-column-hours div`;
+            this.updateColumnHighlight(hourSelector, hour);
+            // Update highlighted items for minutes
+            const minuteSelector = `.time-column.time-column-minutes div`;
+            this.updateColumnHighlight(minuteSelector, minute);
+            // Update highlighted items for seconds
+            const secondSelector = `.time-column.time-column-seconds div`;
+            this.updateColumnHighlight(secondSelector, second);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    RenderTimeOptionsColumn(type) {
+        return (index.h("div", { class: `time-column time-column-${type}`, onScroll: e => this.handleScroll(e, type) }, this.generateInfiniteTimeOptions(type).map((option, index$1) => (index.h("div", { class: {
+                'time-option': true,
+                'selected': (type === constants98e2dcc2.TimeType.Hours && option === this.hours) ||
+                    (type === constants98e2dcc2.TimeType.Minutes && option === this.minutes) ||
+                    (type === constants98e2dcc2.TimeType.Seconds && option === this.seconds),
+            }, key: `${option}-${index$1}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
+    }
+    render() {
+        return (index.h(index.Host, { key: '2bd5109091c0e07418ce9565e87384f386428c7f', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'fb435b88f17474c69e9400f3f74545a6e1b9e71c', htmlFor: this.inputId }, index.h("slot", { key: 'c252c0daf40bec73e405ad53a06ca84de823b3d7', name: "label" }, this.label))), index.h("nv-popover", { key: '009f40e96c5cb95ef985909e8a0edfa9df3e7c7f', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'd22fa1424d88309d07dbbd73a8c1d25d21392329', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: 'e56bcfab83d254bc7df35ac84481b5ef67b23ca2', name: "before-input" }), index.h("div", { key: '20ce8289edbfbddd54424dd86e672ab4689cd51d', class: "input-container" }, index.h("slot", { key: '98c4d58900edfc2b618f6882be0832eae4ce1e65', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            index.h("input", { key: '9317fddf11f5715a585f784cda78b54aa62be063', ref: el => (this.inputElements[constants98e2dcc2.TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, constants98e2dcc2.TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(constants98e2dcc2.TimeType.Hours), name: this.name
+                    ? `${constants98e2dcc2.TimeType.Hours}-${this.name}`
+                    : constants98e2dcc2.TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
+        ], this.format.includes('mm') && [
+            index.h("span", { key: '044a1a102651f107f84815479428737a01ec9bc5' }, ":"),
+            index.h("input", { key: '19facb2211d8e3505a66effb65357e40cd5d4cdb', ref: el => (this.inputElements[constants98e2dcc2.TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, constants98e2dcc2.TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(constants98e2dcc2.TimeType.Minutes), name: this.name
+                    ? `${constants98e2dcc2.TimeType.Minutes}-${this.name}`
+                    : constants98e2dcc2.TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
+        ], this.format.includes('ss') && [
+            index.h("span", { key: '239c6cee81a91eaa37c66dad419838eac713dc52' }, ":"),
+            index.h("input", { key: '86b90a830be379c88c93b56cb19ff2f7905ae90a', ref: el => (this.inputElements[constants98e2dcc2.TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, constants98e2dcc2.TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(constants98e2dcc2.TimeType.Seconds), name: this.name
+                    ? `${constants98e2dcc2.TimeType.Seconds}-${this.name}`
+                    : constants98e2dcc2.TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
+        ], index.h("nv-iconbutton", { key: '2aed05d3ba441bb145e43b480d3c30b227559fd5', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (index.h("nv-icon", { key: '88e621d6753e3b4661a49d612133eff268abe459', name: "alert-circle", class: "validation", size: "sm" })), this.success && (index.h("nv-icon", { key: 'c9493053d4c60c9826517e63d8bdb9d3d915e5a4', name: "circle-check", class: "validation", size: "sm" }))), index.h("slot", { key: 'd1e56ff18a036b3eecfc3b82603417747444f515', name: "after-input" })), index.h("div", { key: 'ee316a5355842ba4b94d7f155be4ee76170b653d', class: "time-dropdown", slot: "content" }, index.h("div", { key: 'b4c00d933a89420c2b7f6c91e52dab14b00aacd2', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+            this.RenderTimeOptionsColumn(constants98e2dcc2.TimeType.Hours), this.format.includes('mm') &&
+            this.RenderTimeOptionsColumn(constants98e2dcc2.TimeType.Minutes), this.format.includes('ss') &&
+            this.RenderTimeOptionsColumn(constants98e2dcc2.TimeType.Seconds)))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'ebb6ca0885ea6f099617f2deebd1e55e53dd4f05', class: "description" }, index.h("slot", { key: '7045fe19cba7c811db78636b57f05d2f9913f49e', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b6b52a078889f4a5e5856bc29580f1dd461175e0', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '76759966defe06d595e9aa5df3a580ebea1d7f81', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+NvFieldtime.style = NvFieldtimeStyle0;
+
+exports.nv_fieldtime = NvFieldtime;