@nasa-terra/components 0.0.162 → 0.0.164

package/dist/chunks/{chunk.MX24LDU3.js → chunk.TUNQFYBB.js}

@@ -3,20 +3,17 @@ import {
 } from "./chunk.6BJRMCOW.js";
 import {
   TerraInput
-} from "./chunk.6C2JL4A2.js";
+} from "./chunk.Z36ZH6JG.js";
 import {
   TerraDropdown
-} from "./chunk.PULOWKWG.js";
+} from "./chunk.WDTNTD4U.js";
 import {
   TerraButton
-} from "./chunk.PEWMIDW5.js";
-import {
-  watch
-} from "./chunk.NWXJOH5T.js";
+} from "./chunk.OJTUNJAB.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.XXYZQF7D.js";
+} from "./chunk.PDHE3X3B.js";
 import {
   __decorateClass
 } from "./chunk.SHKVBVTI.js";
@@ -54,12 +51,12 @@ var TerraDatePicker = class extends TerraElement {
     this.isSelectingRange = false;
     this.showLeftMonthDropdown = false;
     this.showRightMonthDropdown = false;
-    this.startHour = 12;
+    this.startHour = 0;
     this.startMinute = 0;
-    this.endHour = 12;
-    this.endMinute = 0;
-    this.timePeriod = "AM";
-    this.endTimePeriod = "PM";
+    this.startSecond = 0;
+    this.endHour = 23;
+    this.endMinute = 59;
+    this.endSecond = 59;
     this.selectedDates = {
       startDate: (/* @__PURE__ */ new Date()).toString(),
       endDate: (/* @__PURE__ */ new Date()).toString()
@@ -184,84 +181,92 @@ var TerraDatePicker = class extends TerraElement {
       this.close();
     }
   }
-  handleInlineChange() {
-    if (this.inline) {
-      this.isOpen = true;
-      if (this.dropdownRef.value) {
-        this.dropdownRef.value.hide();
-      }
-    }
-  }
-  handleMinMaxDateChange() {
-    if (this.maxDate && !this.selectedStart && !this.selectedEnd) {
-      const max = this.parseLocalDate(this.maxDate);
-      if (!isNaN(max.getTime())) {
-        if (this.range) {
-          this.rightMonth = new Date(max);
-          const left = new Date(max);
-          left.setMonth(left.getMonth() - 1);
-          this.leftMonth = left;
-        } else {
-          this.leftMonth = new Date(max);
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("inline")) {
+      if (this.inline) {
+        this.isOpen = true;
+        if (this.dropdownRef.value) {
+          this.dropdownRef.value.hide();
         }
       }
     }
-  }
-  handleStartEndDateChange() {
-    if (this.startDate) {
-      const start = this.parseLocalDate(this.startDate);
-      if (!isNaN(start.getTime())) {
-        this.selectedStart = start;
-        if (this.enableTime) {
-          this.initializeTimeFromDate(start, true);
+    if (changedProperties.has("minDate") || changedProperties.has("maxDate")) {
+      if (this.maxDate && !this.selectedStart && !this.selectedEnd) {
+        const max = this.parseLocalDate(this.maxDate);
+        if (!isNaN(max.getTime())) {
+          if (this.range) {
+            this.rightMonth = new Date(max);
+            const left = new Date(max);
+            left.setMonth(left.getMonth() - 1);
+            this.leftMonth = left;
+          } else {
+            this.leftMonth = new Date(max);
+          }
         }
       }
-    } else {
-      this.selectedStart = null;
     }
-    if (this.range) {
-      if (this.endDate) {
-        const end = this.parseLocalDate(this.endDate);
-        if (!isNaN(end.getTime())) {
-          this.selectedEnd = end;
+    if (changedProperties.has("startDate") || changedProperties.has("endDate")) {
+      if (this.startDate) {
+        const start = this.parseLocalDate(this.startDate);
+        if (!isNaN(start.getTime())) {
+          this.selectedStart = start;
           if (this.enableTime) {
-            this.initializeTimeFromDate(end, false);
+            this.initializeTimeFromDate(start, true);
           }
         }
       } else {
-        this.selectedEnd = null;
+        this.selectedStart = null;
       }
-      if (this.selectedStart && this.selectedEnd) {
-        const isSingleMonthRange = this.isSameMonth(
-          this.selectedStart,
-          this.selectedEnd
-        );
-        if (isSingleMonthRange) {
-          if (this.isDateInMonth(this.selectedStart, this.leftMonth)) {
-            this.leftMonth = new Date(this.selectedStart);
-            if (this.isDateInMonth(this.selectedStart, this.rightMonth)) {
+      if (this.range) {
+        if (this.endDate) {
+          const end = this.parseLocalDate(this.endDate);
+          if (!isNaN(end.getTime())) {
+            this.selectedEnd = end;
+            if (this.enableTime) {
+              this.initializeTimeFromDate(end, false);
+            }
+          }
+        } else {
+          this.selectedEnd = null;
+        }
+        if (this.selectedStart && this.selectedEnd) {
+          const isSingleMonthRange = this.isSameMonth(
+            this.selectedStart,
+            this.selectedEnd
+          );
+          if (isSingleMonthRange) {
+            if (this.isDateInMonth(this.selectedStart, this.leftMonth)) {
+              this.leftMonth = new Date(this.selectedStart);
+              if (this.isDateInMonth(
+                this.selectedStart,
+                this.rightMonth
+              )) {
+                this.rightMonth = new Date(this.selectedStart);
+                this.rightMonth.setMonth(
+                  this.rightMonth.getMonth() + 1
+                );
+              }
+            } else if (this.isDateInMonth(this.selectedStart, this.rightMonth)) {
               this.rightMonth = new Date(this.selectedStart);
-              this.rightMonth.setMonth(this.rightMonth.getMonth() + 1);
+            } else {
+              this.leftMonth = new Date(this.selectedStart);
             }
-          } else if (this.isDateInMonth(this.selectedStart, this.rightMonth)) {
-            this.rightMonth = new Date(this.selectedStart);
           } else {
             this.leftMonth = new Date(this.selectedStart);
+            this.rightMonth = new Date(this.selectedEnd);
           }
-        } else {
+        } else if (this.selectedStart) {
           this.leftMonth = new Date(this.selectedStart);
-          this.rightMonth = new Date(this.selectedEnd);
+          this.rightMonth = new Date(this.leftMonth);
+          this.rightMonth.setMonth(this.rightMonth.getMonth() + 1);
         }
-      } else if (this.selectedStart) {
-        this.leftMonth = new Date(this.selectedStart);
-        this.rightMonth = new Date(this.leftMonth);
-        this.rightMonth.setMonth(this.rightMonth.getMonth() + 1);
-      }
-    } else {
-      if (this.selectedStart) {
-        this.leftMonth = new Date(this.selectedStart);
+      } else {
+        if (this.selectedStart) {
+          this.leftMonth = new Date(this.selectedStart);
+        }
+        this.selectedEnd = null;
       }
-      this.selectedEnd = null;
     }
   }
   initializePresets() {
@@ -385,7 +390,7 @@ var TerraDatePicker = class extends TerraElement {
   handleDropdownHide() {
     this.isOpen = false;
   }
-  formatDisplayDate(date, _isStart = true) {
+  formatDisplayDate(date, isStart = true) {
     if (!date)
       return "";
     const format = this.displayFormat || (this.enableTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD");
@@ -393,9 +398,16 @@ var TerraDatePicker = class extends TerraElement {
       const year2 = date.getUTCFullYear();
       const month2 = String(date.getUTCMonth() + 1).padStart(2, "0");
       const day2 = String(date.getUTCDate()).padStart(2, "0");
-      const hours = String(date.getUTCHours()).padStart(2, "0");
-      const minutes = String(date.getUTCMinutes()).padStart(2, "0");
-      const seconds = String(date.getUTCSeconds()).padStart(2, "0");
+      const hours = String(isStart ? this.startHour : this.endHour).padStart(
+        2,
+        "0"
+      );
+      const minutes = String(
+        isStart ? this.startMinute : this.endMinute
+      ).padStart(2, "0");
+      const seconds = String(
+        isStart ? this.startSecond : this.endSecond
+      ).padStart(2, "0");
       return format.replace("YYYY", year2.toString()).replace("MM", month2).replace("DD", day2).replace("HH", hours).replace("mm", minutes).replace("ss", seconds);
     }
     const year = date.getFullYear();
@@ -432,12 +444,12 @@ var TerraDatePicker = class extends TerraElement {
       date = this.parseLocalDate(trimmed);
     } else if (this.enableTime && dateTimePattern.test(trimmed)) {
       const [datePart, timePart] = trimmed.split(/[T\s]+/);
-      const [year2, month2, day2] = datePart.split("-").map(Number);
+      const [year, month, day] = datePart.split("-").map(Number);
       const timeComponents = timePart.split(":").map(Number);
       const hours = timeComponents[0] || 0;
       const minutes = timeComponents[1] || 0;
       const seconds = timeComponents[2] || 0;
-      date = new Date(Date.UTC(year2, month2 - 1, day2, hours, minutes, seconds));
+      date = new Date(Date.UTC(year, month - 1, day, hours, minutes, seconds));
     } else {
       date = new Date(trimmed);
       if (!isValid(date)) {
@@ -447,18 +459,22 @@ var TerraDatePicker = class extends TerraElement {
     if (!isValid(date)) {
       return null;
     }
-    const year = date.getFullYear();
-    const month = date.getMonth() + 1;
-    const day = date.getDate();
     if (this.enableTime) {
-      const utcYear = date.getUTCFullYear();
-      const utcMonth = date.getUTCMonth() + 1;
-      const utcDay = date.getUTCDate();
-      const utcHours = date.getUTCHours();
-      const utcMinutes = date.getUTCMinutes();
-      const utcSeconds = date.getUTCSeconds();
-      return `${utcYear}-${String(utcMonth).padStart(2, "0")}-${String(utcDay).padStart(2, "0")}T${String(utcHours).padStart(2, "0")}:${String(utcMinutes).padStart(2, "0")}:${String(utcSeconds).padStart(2, "0")}`;
+      if (dateOnlyPattern.test(trimmed)) {
+        return trimmed;
+      } else {
+        const utcYear = date.getUTCFullYear();
+        const utcMonth = date.getUTCMonth() + 1;
+        const utcDay = date.getUTCDate();
+        const utcHours = date.getUTCHours();
+        const utcMinutes = date.getUTCMinutes();
+        const utcSeconds = date.getUTCSeconds();
+        return `${utcYear}-${String(utcMonth).padStart(2, "0")}-${String(utcDay).padStart(2, "0")}T${String(utcHours).padStart(2, "0")}:${String(utcMinutes).padStart(2, "0")}:${String(utcSeconds).padStart(2, "0")}`;
+      }
     } else {
+      const year = date.getFullYear();
+      const month = date.getMonth() + 1;
+      const day = date.getDate();
       return `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
     }
   }
@@ -521,8 +537,44 @@ var TerraDatePicker = class extends TerraElement {
         this.setInputValidationError(input, message);
         return;
       }
-      const start = this.parseLocalDate(startFormatted);
-      const end = this.parseLocalDate(endFormatted);
+      let start;
+      let end;
+      if (this.enableTime && startFormatted.includes("T")) {
+        start = new Date(startFormatted);
+        this.initializeTimeFromDate(start, true);
+      } else if (this.enableTime) {
+        const [year, month, day] = startFormatted.split("-").map(Number);
+        start = new Date(
+          Date.UTC(
+            year,
+            month - 1,
+            day,
+            this.startHour,
+            this.startMinute,
+            this.startSecond
+          )
+        );
+      } else {
+        start = this.parseLocalDate(startFormatted);
+      }
+      if (this.enableTime && endFormatted.includes("T")) {
+        end = new Date(endFormatted);
+        this.initializeTimeFromDate(end, false);
+      } else if (this.enableTime) {
+        const [year, month, day] = endFormatted.split("-").map(Number);
+        end = new Date(
+          Date.UTC(
+            year,
+            month - 1,
+            day,
+            this.endHour,
+            this.endMinute,
+            this.endSecond
+          )
+        );
+      } else {
+        end = this.parseLocalDate(endFormatted);
+      }
       let finalStart = start;
       let finalEnd = end;
       if (start > end) {
@@ -558,7 +610,25 @@ var TerraDatePicker = class extends TerraElement {
         this.setInputValidationError(input, message);
         return;
       }
-      const date = this.parseLocalDate(formatted);
+      let date;
+      if (this.enableTime && formatted.includes("T")) {
+        date = new Date(formatted);
+        this.initializeTimeFromDate(date, true);
+      } else if (this.enableTime) {
+        const [year, month, day] = formatted.split("-").map(Number);
+        date = new Date(
+          Date.UTC(
+            year,
+            month - 1,
+            day,
+            this.startHour,
+            this.startMinute,
+            this.startSecond
+          )
+        );
+      } else {
+        date = this.parseLocalDate(formatted);
+      }
       if (this.minDate) {
         const min = this.parseLocalDate(this.minDate);
         if (date < min) {
@@ -598,7 +668,25 @@ var TerraDatePicker = class extends TerraElement {
       this.setInputValidationError(input, message);
       return;
     }
-    const date = this.parseLocalDate(formatted);
+    let date;
+    if (this.enableTime && formatted.includes("T")) {
+      date = new Date(formatted);
+      this.initializeTimeFromDate(date, true);
+    } else if (this.enableTime) {
+      const [year, month, day] = formatted.split("-").map(Number);
+      date = new Date(
+        Date.UTC(
+          year,
+          month - 1,
+          day,
+          this.startHour,
+          this.startMinute,
+          this.startSecond
+        )
+      );
+    } else {
+      date = this.parseLocalDate(formatted);
+    }
     if (this.minDate) {
       const min = this.parseLocalDate(this.minDate);
       if (date < min) {
@@ -641,7 +729,25 @@ var TerraDatePicker = class extends TerraElement {
       this.setInputValidationError(input, message);
       return;
     }
-    const date = this.parseLocalDate(formatted);
+    let date;
+    if (this.enableTime && formatted.includes("T")) {
+      date = new Date(formatted);
+      this.initializeTimeFromDate(date, false);
+    } else if (this.enableTime) {
+      const [year, month, day] = formatted.split("-").map(Number);
+      date = new Date(
+        Date.UTC(
+          year,
+          month - 1,
+          day,
+          this.endHour,
+          this.endMinute,
+          this.endSecond
+        )
+      );
+    } else {
+      date = this.parseLocalDate(formatted);
+    }
     if (this.minDate) {
       const min = this.parseLocalDate(this.minDate);
       if (date < min) {
@@ -658,10 +764,20 @@ var TerraDatePicker = class extends TerraElement {
         return;
       }
     }
-    if (this.selectedStart && date < this.selectedStart) {
-      const message = "End date must be after start date";
-      this.setInputValidationError(input, message);
-      return;
+    if (this.selectedStart) {
+      if (this.enableTime && this.isSameDay(date, this.selectedStart)) {
+        const startTimeSeconds = this.startHour * 3600 + this.startMinute * 60 + this.startSecond;
+        const endTimeSeconds = this.endHour * 3600 + this.endMinute * 60 + this.endSecond;
+        if (endTimeSeconds < startTimeSeconds) {
+          const message = "End time must be after start time when dates are the same";
+          this.setInputValidationError(input, message);
+          return;
+        }
+      } else if (date < this.selectedStart) {
+        const message = "End date must be after start date";
+        this.setInputValidationError(input, message);
+        return;
+      }
     }
     this.selectedEnd = date;
     if (this.selectedStart && this.isSameMonth(this.selectedStart, this.selectedEnd)) {
@@ -731,11 +847,13 @@ var TerraDatePicker = class extends TerraElement {
   selectMonth(month, isLeft) {
     if (isLeft) {
       const newMonth = new Date(this.leftMonth);
+      newMonth.setDate(1);
       newMonth.setMonth(month);
       this.leftMonth = newMonth;
       this.showLeftMonthDropdown = false;
     } else {
       const newMonth = new Date(this.rightMonth);
+      newMonth.setDate(1);
       newMonth.setMonth(month);
       this.rightMonth = newMonth;
       this.showRightMonthDropdown = false;
@@ -856,6 +974,17 @@ var TerraDatePicker = class extends TerraElement {
           this.selectedEnd = date;
         }
         this.isSelectingRange = false;
+        if (this.enableTime && this.selectedStart && this.selectedEnd && this.isSameDay(this.selectedStart, this.selectedEnd)) {
+          const startTimeSeconds = this.startHour * 3600 + this.startMinute * 60 + this.startSecond;
+          const endTimeSeconds = this.endHour * 3600 + this.endMinute * 60 + this.endSecond;
+          if (endTimeSeconds < startTimeSeconds) {
+            this.emit("terra-date-selection-invalid", {
+              detail: {
+                message: "End time is before start time. Please adjust the time values."
+              }
+            });
+          }
+        }
         this.emitChange();
         if (!this.inline) {
           this.isOpen = false;
@@ -931,12 +1060,12 @@ var TerraDatePicker = class extends TerraElement {
     if (this.selectedStart) {
       if (this.enableTime) {
         const startDate = new Date(this.selectedStart);
-        let hours = this.startHour;
-        if (this.timePeriod === "PM" && hours !== 12)
-          hours += 12;
-        if (this.timePeriod === "AM" && hours === 12)
-          hours = 0;
-        startDate.setUTCHours(hours, this.startMinute, 0, 0);
+        startDate.setUTCHours(
+          this.startHour,
+          this.startMinute,
+          this.startSecond,
+          0
+        );
         startDateTime = startDate.toISOString();
       } else {
         startDateTime = this.selectedStart.toISOString().split("T")[0];
@@ -945,12 +1074,7 @@ var TerraDatePicker = class extends TerraElement {
     if (this.selectedEnd) {
       if (this.enableTime) {
         const endDate = new Date(this.selectedEnd);
-        let hours = this.endHour;
-        if (this.endTimePeriod === "PM" && hours !== 12)
-          hours += 12;
-        if (this.endTimePeriod === "AM" && hours === 12)
-          hours = 0;
-        endDate.setUTCHours(hours, this.endMinute, 0, 0);
+        endDate.setUTCHours(this.endHour, this.endMinute, this.endSecond, 0);
         endDateTime = endDate.toISOString();
       } else {
         endDateTime = this.selectedEnd.toISOString().split("T")[0];
@@ -964,41 +1088,37 @@ var TerraDatePicker = class extends TerraElement {
     });
   }
   initializeTimeFromDate(date, isStart) {
-    let hours = date.getUTCHours();
+    const hours = date.getUTCHours();
     const minutes = date.getUTCMinutes();
-    const period = hours >= 12 ? "PM" : "AM";
-    if (hours === 0)
-      hours = 12;
-    else if (hours > 12)
-      hours -= 12;
+    const seconds = date.getUTCSeconds();
     if (isStart) {
       this.startHour = hours;
       this.startMinute = minutes;
-      this.timePeriod = period;
+      this.startSecond = seconds;
     } else {
       this.endHour = hours;
       this.endMinute = minutes;
-      this.endTimePeriod = period;
+      this.endSecond = seconds;
     }
   }
   changeTime(type, delta, isStart) {
     if (type === "hour") {
       if (isStart) {
         let newHour = this.startHour + delta;
-        if (newHour > 12)
-          newHour = 1;
-        if (newHour < 1)
-          newHour = 12;
+        if (newHour > 23)
+          newHour = 0;
+        if (newHour < 0)
+          newHour = 23;
         this.startHour = newHour;
       } else {
         let newHour = this.endHour + delta;
-        if (newHour > 12)
-          newHour = 1;
-        if (newHour < 1)
-          newHour = 12;
+        if (newHour > 23)
+          newHour = 0;
+        if (newHour < 0)
+          newHour = 23;
         this.endHour = newHour;
       }
-    } else {
+    } else if (type === "minute") {
       if (isStart) {
         let newMinute = this.startMinute + delta;
         if (newMinute >= 60)
@@ -1014,6 +1134,22 @@ var TerraDatePicker = class extends TerraElement {
           newMinute = 59;
         this.endMinute = newMinute;
       }
+    } else {
+      if (isStart) {
+        let newSecond = this.startSecond + delta;
+        if (newSecond >= 60)
+          newSecond = 0;
+        if (newSecond < 0)
+          newSecond = 59;
+        this.startSecond = newSecond;
+      } else {
+        let newSecond = this.endSecond + delta;
+        if (newSecond >= 60)
+          newSecond = 0;
+        if (newSecond < 0)
+          newSecond = 59;
+        this.endSecond = newSecond;
+      }
     }
     this.emitChange();
     this.requestUpdate();
@@ -1022,7 +1158,7 @@ var TerraDatePicker = class extends TerraElement {
     const input = event.target;
     let value = parseInt(input.value, 10);
     if (type === "hour") {
-      if (isNaN(value) || value < 1 || value > 12) {
+      if (isNaN(value) || value < 0 || value > 23) {
         input.value = isStart ? this.startHour.toString().padStart(2, "0") : this.endHour.toString().padStart(2, "0");
         return;
       }
@@ -1030,7 +1166,7 @@ var TerraDatePicker = class extends TerraElement {
         this.startHour = value;
       else
         this.endHour = value;
-    } else {
+    } else if (type === "minute") {
       if (isNaN(value) || value < 0 || value >= 60) {
         input.value = isStart ? this.startMinute.toString().padStart(2, "0") : this.endMinute.toString().padStart(2, "0");
         return;
@@ -1039,15 +1175,15 @@ var TerraDatePicker = class extends TerraElement {
         this.startMinute = value;
       else
         this.endMinute = value;
-    }
-    this.emitChange();
-    this.requestUpdate();
-  }
-  togglePeriod(isStart) {
-    if (isStart) {
-      this.timePeriod = this.timePeriod === "AM" ? "PM" : "AM";
     } else {
-      this.endTimePeriod = this.endTimePeriod === "AM" ? "PM" : "AM";
+      if (isNaN(value) || value < 0 || value >= 60) {
+        input.value = isStart ? this.startSecond.toString().padStart(2, "0") : this.endSecond.toString().padStart(2, "0");
+        return;
+      }
+      if (isStart)
+        this.startSecond = value;
+      else
+        this.endSecond = value;
     }
     this.emitChange();
     this.requestUpdate();
@@ -1264,8 +1400,8 @@ var TerraDatePicker = class extends TerraElement {
       const input = e.target;
       input.value = this.startHour.toString().padStart(2, "0");
     }}
-                                min="1"
-                                max="12"
+                                min="0"
+                                max="23"
                             />
                             <div class="date-picker__time-spinners">
                                 <button
@@ -1370,13 +1506,64 @@ var TerraDatePicker = class extends TerraElement {
                             </div>
                         </div>
 
-                        <button
-                            type="button"
-                            class="date-picker__time-period"
-                            @click=${() => this.togglePeriod(true)}
-                        >
-                            ${this.timePeriod}
-                        </button>
+                        <span class="date-picker__time-separator">:</span>
+
+                        <div class="date-picker__time-input-group">
+                            <input
+                                type="number"
+                                class="date-picker__time-input"
+                                .value=${this.startSecond.toString().padStart(2, "0")}
+                                @input=${(e) => this.handleTimeInput(e, "second", true)}
+                                @blur=${(e) => {
+      const input = e.target;
+      input.value = this.startSecond.toString().padStart(2, "0");
+    }}
+                                min="0"
+                                max="59"
+                            />
+                            <div class="date-picker__time-spinners">
+                                <button
+                                    type="button"
+                                    class="date-picker__time-spinner"
+                                    @click=${() => this.changeTime("second", 1, true)}
+                                >
+                                    <svg
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 10 10"
+                                        fill="none"
+                                    >
+                                        <path
+                                            d="M2 6L5 3L8 6"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                </button>
+                                <button
+                                    type="button"
+                                    class="date-picker__time-spinner"
+                                    @click=${() => this.changeTime("second", -1, true)}
+                                >
+                                    <svg
+                                        width="10"
+                                        height="10"
+                                        viewBox="0 0 10 10"
+                                        fill="none"
+                                    >
+                                        <path
+                                            d="M2 4L5 7L8 4"
+                                            stroke="currentColor"
+                                            stroke-width="1.5"
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                        />
+                                    </svg>
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
 
@@ -1395,8 +1582,8 @@ var TerraDatePicker = class extends TerraElement {
       const input = e.target;
       input.value = this.endHour.toString().padStart(2, "0");
     }}
-                                          min="1"
-                                          max="12"
+                                          min="0"
+                                          max="23"
                                       />
                                       <div class="date-picker__time-spinners">
                                           <button
@@ -1509,13 +1696,72 @@ var TerraDatePicker = class extends TerraElement {
                                       </div>
                                   </div>
 
-                                  <button
-                                      type="button"
-                                      class="date-picker__time-period"
-                                      @click=${() => this.togglePeriod(false)}
-                                  >
-                                      ${this.endTimePeriod}
-                                  </button>
+                                  <span class="date-picker__time-separator">:</span>
+
+                                  <div class="date-picker__time-input-group">
+                                      <input
+                                          type="number"
+                                          class="date-picker__time-input"
+                                          .value=${this.endSecond.toString().padStart(2, "0")}
+                                          @input=${(e) => this.handleTimeInput(
+      e,
+      "second",
+      false
+    )}
+                                          @blur=${(e) => {
+      const input = e.target;
+      input.value = this.endSecond.toString().padStart(2, "0");
+    }}
+                                          min="0"
+                                          max="59"
+                                      />
+                                      <div class="date-picker__time-spinners">
+                                          <button
+                                              type="button"
+                                              class="date-picker__time-spinner"
+                                              @click=${() => this.changeTime("second", 1, false)}
+                                          >
+                                              <svg
+                                                  width="10"
+                                                  height="10"
+                                                  viewBox="0 0 10 10"
+                                                  fill="none"
+                                              >
+                                                  <path
+                                                      d="M2 6L5 3L8 6"
+                                                      stroke="currentColor"
+                                                      stroke-width="1.5"
+                                                      stroke-linecap="round"
+                                                      stroke-linejoin="round"
+                                                  />
+                                              </svg>
+                                          </button>
+                                          <button
+                                              type="button"
+                                              class="date-picker__time-spinner"
+                                              @click=${() => this.changeTime(
+      "second",
+      -1,
+      false
+    )}
+                                          >
+                                              <svg
+                                                  width="10"
+                                                  height="10"
+                                                  viewBox="0 0 10 10"
+                                                  fill="none"
+                                              >
+                                                  <path
+                                                      d="M2 4L5 7L8 4"
+                                                      stroke="currentColor"
+                                                      stroke-width="1.5"
+                                                      stroke-linecap="round"
+                                                      stroke-linejoin="round"
+                                                  />
+                                              </svg>
+                                          </button>
+                                      </div>
+                                  </div>
                               </div>
                           </div>
                       ` : ""}
@@ -1863,31 +2109,22 @@ __decorateClass([
 ], TerraDatePicker.prototype, "startMinute", 2);
 __decorateClass([
   state()
-], TerraDatePicker.prototype, "endHour", 2);
+], TerraDatePicker.prototype, "startSecond", 2);
 __decorateClass([
   state()
-], TerraDatePicker.prototype, "endMinute", 2);
+], TerraDatePicker.prototype, "endHour", 2);
 __decorateClass([
   state()
-], TerraDatePicker.prototype, "timePeriod", 2);
+], TerraDatePicker.prototype, "endMinute", 2);
 __decorateClass([
   state()
-], TerraDatePicker.prototype, "endTimePeriod", 2);
+], TerraDatePicker.prototype, "endSecond", 2);
 __decorateClass([
   state()
 ], TerraDatePicker.prototype, "selectedDates", 2);
 __decorateClass([
   query(".date-picker__dropdown")
 ], TerraDatePicker.prototype, "dropdown", 2);
-__decorateClass([
-  watch("inline")
-], TerraDatePicker.prototype, "handleInlineChange", 1);
-__decorateClass([
-  watch(["minDate", "maxDate"])
-], TerraDatePicker.prototype, "handleMinMaxDateChange", 1);
-__decorateClass([
-  watch(["startDate", "endDate"])
-], TerraDatePicker.prototype, "handleStartEndDateChange", 1);
 
 export {
   TerraDatePicker