@nasa-terra/components 0.0.165 → 0.0.167

package/dist/chunks/chunk.JQZKVVMA.js

@@ -1,2160 +0,0 @@
-import {
-  date_picker_styles_default
-} from "./chunk.6BJRMCOW.js";
-import {
-  TerraInput
-} from "./chunk.5356OGOU.js";
-import {
-  TerraDropdown
-} from "./chunk.HZJ3FPWX.js";
-import {
-  TerraButton
-} from "./chunk.3E224JEK.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.BMP66UJR.js";
-import {
-  __decorateClass
-} from "./chunk.SHKVBVTI.js";
-
-// src/components/date-picker/date-picker.component.ts
-import { property, state, query } from "lit/decorators.js";
-import { html } from "lit";
-import { createRef, ref } from "lit/directives/ref.js";
-import { isValid } from "date-fns";
-var TerraDatePicker = class extends TerraElement {
-  constructor() {
-    super();
-    this.range = false;
-    this.hideLabel = false;
-    this.label = "Select Date";
-    this.helpText = "";
-    this.startHelpText = "";
-    this.endHelpText = "";
-    this.showPresets = false;
-    this.presets = [];
-    this.enableTime = false;
-    this.inline = false;
-    this.splitInputs = false;
-    this.placeholder = "Select Date";
-    this.startPlaceholder = "Start Date";
-    this.endPlaceholder = "End Date";
-    this.role = "group";
-    this.ariaLabel = "Date picker";
-    this.isOpen = false;
-    this.leftMonth = /* @__PURE__ */ new Date();
-    this.rightMonth = /* @__PURE__ */ new Date();
-    this.selectedStart = null;
-    this.selectedEnd = null;
-    this.hoverDate = null;
-    this.isSelectingRange = false;
-    this.showLeftMonthDropdown = false;
-    this.showRightMonthDropdown = false;
-    this.startHour = 0;
-    this.startMinute = 0;
-    this.startSecond = 0;
-    this.endHour = 23;
-    this.endMinute = 59;
-    this.endSecond = 59;
-    this.selectedDates = {
-      startDate: (/* @__PURE__ */ new Date()).toString(),
-      endDate: (/* @__PURE__ */ new Date()).toString()
-    };
-    this.dropdownRef = createRef();
-    this.DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-    this.MONTHS = [
-      "January",
-      "February",
-      "March",
-      "April",
-      "May",
-      "June",
-      "July",
-      "August",
-      "September",
-      "October",
-      "November",
-      "December"
-    ];
-    this.initializePresets();
-  }
-  /**
-   * Parse a date string (YYYY-MM-DD or ISO datetime) as a local date, avoiding timezone issues.
-   * When you do `new Date("2024-03-20")`, JavaScript interprets it as UTC midnight,
-   * which can cause off-by-one day errors when using getDate() in local timezone.
-   * This function parses the date as a local date instead.
-   *
-   * When enableTime is true, datetime strings are parsed as UTC to match API min/max dates.
-   */
-  parseLocalDate(dateString) {
-    const dateOnlyPattern = /^\d{4}-\d{2}-\d{2}$/;
-    if (dateOnlyPattern.test(dateString)) {
-      const [year, month, day] = dateString.split("-").map(Number);
-      if (this.enableTime) {
-        return new Date(Date.UTC(year, month - 1, day, 0, 0, 0));
-      }
-      return new Date(year, month - 1, day);
-    }
-    const dateTimePattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/;
-    if (dateTimePattern.test(dateString)) {
-      const [datePart, timePart] = dateString.split("T");
-      const [year, month, day] = datePart.split("-").map(Number);
-      const [hours, minutes, seconds] = timePart.split(":").map(Number);
-      return new Date(Date.UTC(year, month - 1, day, hours, minutes, seconds));
-    }
-    return new Date(dateString);
-  }
-  /**
-   * Check if two dates are in the same calendar month and year
-   */
-  isSameMonth(date1, date2) {
-    if (this.enableTime) {
-      return date1.getUTCFullYear() === date2.getUTCFullYear() && date1.getUTCMonth() === date2.getUTCMonth();
-    }
-    return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
-  }
-  /**
-   * Check if a date's month/year matches a given month Date
-   */
-  isDateInMonth(date, monthDate) {
-    if (this.enableTime) {
-      return date.getUTCFullYear() === monthDate.getUTCFullYear() && date.getUTCMonth() === monthDate.getUTCMonth();
-    }
-    return date.getFullYear() === monthDate.getFullYear() && date.getMonth() === monthDate.getMonth();
-  }
-  getBounds() {
-    const min = this.minDate ? this.parseLocalDate(this.minDate) : void 0;
-    const max = this.maxDate ? this.parseLocalDate(this.maxDate) : void 0;
-    return { min, max };
-  }
-  doesRangeOverlapBounds(range) {
-    const { startDate, endDate } = range;
-    const { min, max } = this.getBounds();
-    if (!this.range) {
-      if (!startDate)
-        return false;
-      if (min && startDate < min)
-        return false;
-      if (max && startDate > max)
-        return false;
-      return true;
-    }
-    const start = startDate != null ? startDate : /* @__PURE__ */ new Date(-864e13);
-    const end = endDate != null ? endDate : /* @__PURE__ */ new Date(864e13);
-    if (!min && !max)
-      return true;
-    const windowStart = min != null ? min : /* @__PURE__ */ new Date(-864e13);
-    const windowEnd = max != null ? max : /* @__PURE__ */ new Date(864e13);
-    return end >= windowStart && start <= windowEnd;
-  }
-  isPresetWithinBounds(range) {
-    return this.doesRangeOverlapBounds(range);
-  }
-  get filteredPresets() {
-    return (this.presets || []).filter(
-      (preset) => this.isPresetWithinBounds(preset.getValue())
-    );
-  }
-  open() {
-    this.isOpen = true;
-    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);
-        }
-      }
-    }
-    if (!this.inline && this.dropdownRef.value) {
-      this.dropdownRef.value.show();
-    }
-    this.requestUpdate();
-  }
-  close() {
-    this.isOpen = false;
-    if (!this.inline && this.dropdownRef.value) {
-      this.dropdownRef.value.hide();
-    }
-    this.requestUpdate();
-  }
-  setOpen(open) {
-    if (open) {
-      this.open();
-    } else {
-      this.close();
-    }
-  }
-  willUpdate(changedProperties) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("inline")) {
-      if (this.inline) {
-        this.isOpen = true;
-        if (this.dropdownRef.value) {
-          this.dropdownRef.value.hide();
-        }
-      }
-    }
-    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);
-          }
-        }
-      }
-    }
-    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(start, true);
-          }
-        }
-      } else {
-        this.selectedStart = null;
-      }
-      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);
-            } else {
-              this.leftMonth = new Date(this.selectedStart);
-            }
-          } else {
-            this.leftMonth = new Date(this.selectedStart);
-            this.rightMonth = new Date(this.selectedEnd);
-          }
-        } 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);
-        }
-        this.selectedEnd = null;
-      }
-    }
-  }
-  initializePresets() {
-    if (this.presets.length === 0) {
-      this.presets = [
-        {
-          label: "Today",
-          getValue: () => {
-            const today = /* @__PURE__ */ new Date();
-            return {
-              startDate: today,
-              endDate: this.range ? today : null
-            };
-          }
-        },
-        {
-          label: "Yesterday",
-          getValue: () => {
-            const yesterday = /* @__PURE__ */ new Date();
-            yesterday.setDate(yesterday.getDate() - 1);
-            return {
-              startDate: yesterday,
-              endDate: this.range ? yesterday : null
-            };
-          }
-        },
-        {
-          label: "Last 7 days",
-          getValue: () => {
-            const end = /* @__PURE__ */ new Date();
-            const start = /* @__PURE__ */ new Date();
-            start.setDate(start.getDate() - 6);
-            return { startDate: start, endDate: end };
-          }
-        },
-        {
-          label: "Last 30 days",
-          getValue: () => {
-            const end = /* @__PURE__ */ new Date();
-            const start = /* @__PURE__ */ new Date();
-            start.setDate(start.getDate() - 29);
-            return { startDate: start, endDate: end };
-          }
-        },
-        {
-          label: "Last 6 months",
-          getValue: () => {
-            const end = /* @__PURE__ */ new Date();
-            const start = /* @__PURE__ */ new Date();
-            start.setMonth(start.getMonth() - 6);
-            return { startDate: start, endDate: end };
-          }
-        },
-        {
-          label: "Last year",
-          getValue: () => {
-            const end = /* @__PURE__ */ new Date();
-            const start = /* @__PURE__ */ new Date();
-            start.setFullYear(start.getFullYear() - 1);
-            return { startDate: start, endDate: end };
-          }
-        },
-        {
-          label: "All time",
-          getValue: () => {
-            const { min, max } = this.getBounds();
-            return {
-              startDate: min || null,
-              endDate: max || null
-            };
-          }
-        }
-      ];
-    }
-  }
-  firstUpdated() {
-    const params = new URLSearchParams(window.location.search);
-    const timeStartParam = params.get("time_start") || this.startDate;
-    const timeEndParam = params.get("time_end") || this.endDate;
-    if (timeStartParam) {
-      this.selectedStart = this.parseLocalDate(timeStartParam);
-      this.leftMonth = new Date(this.selectedStart);
-      if (this.enableTime) {
-        this.initializeTimeFromDate(this.selectedStart, true);
-      }
-    }
-    if (this.range && timeEndParam) {
-      this.selectedEnd = this.parseLocalDate(timeEndParam);
-      if (this.enableTime) {
-        this.initializeTimeFromDate(this.selectedEnd, false);
-      }
-      if (this.selectedStart && this.selectedEnd) {
-        const isSingleMonthRange = this.isSameMonth(
-          this.selectedStart,
-          this.selectedEnd
-        );
-        if (isSingleMonthRange) {
-          this.rightMonth = new Date(this.selectedStart);
-          this.rightMonth.setMonth(this.rightMonth.getMonth() + 1);
-        } else {
-          this.rightMonth = new Date(this.selectedEnd);
-        }
-      } else if (this.selectedEnd) {
-        this.rightMonth = new Date(this.selectedEnd);
-      }
-    }
-    if (this.range && !timeEndParam) {
-      this.rightMonth = new Date(this.leftMonth);
-      this.rightMonth.setMonth(this.rightMonth.getMonth() + 1);
-    }
-    if (this.inline) {
-      this.isOpen = true;
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-  handleDropdownShow() {
-    this.isOpen = true;
-  }
-  handleDropdownHide() {
-    this.isOpen = false;
-  }
-  formatDisplayDate(date, isStart = true) {
-    if (!date)
-      return "";
-    const format = this.displayFormat || (this.enableTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD");
-    if (this.enableTime) {
-      const year2 = date.getUTCFullYear();
-      const month2 = String(date.getUTCMonth() + 1).padStart(2, "0");
-      const day2 = String(date.getUTCDate()).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();
-    const month = String(date.getMonth() + 1).padStart(2, "0");
-    const day = String(date.getDate()).padStart(2, "0");
-    return format.replace("YYYY", year.toString()).replace("MM", month).replace("DD", day);
-  }
-  getDisplayValue() {
-    if (this.range) {
-      if (this.selectedStart && this.selectedEnd) {
-        return `${this.formatDisplayDate(this.selectedStart, true)} \u2013 ${this.formatDisplayDate(this.selectedEnd, false)}`;
-      } else if (this.selectedStart) {
-        return this.formatDisplayDate(this.selectedStart, true);
-      }
-      return "";
-    } else {
-      return this.selectedStart ? this.formatDisplayDate(this.selectedStart, true) : "";
-    }
-  }
-  getStartDateDisplayValue() {
-    return this.selectedStart ? this.formatDisplayDate(this.selectedStart, true) : "";
-  }
-  getEndDateDisplayValue() {
-    return this.selectedEnd ? this.formatDisplayDate(this.selectedEnd, false) : "";
-  }
-  parseAndFormatDate(dateStr) {
-    const trimmed = dateStr.trim();
-    if (!trimmed)
-      return null;
-    const dateOnlyPattern = /^\d{4}-\d{2}-\d{2}$/;
-    const dateTimePattern = /^\d{4}-\d{2}-\d{2}[T\s]\d{1,2}:\d{2}(:\d{2})?$/;
-    let date;
-    if (dateOnlyPattern.test(trimmed)) {
-      date = this.parseLocalDate(trimmed);
-    } else if (this.enableTime && dateTimePattern.test(trimmed)) {
-      const [datePart, timePart] = trimmed.split(/[T\s]+/);
-      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(year, month - 1, day, hours, minutes, seconds));
-    } else {
-      date = new Date(trimmed);
-      if (!isValid(date)) {
-        return null;
-      }
-    }
-    if (!isValid(date)) {
-      return null;
-    }
-    if (this.enableTime) {
-      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")}`;
-    }
-  }
-  clearInputValidation() {
-    const inputs = this.renderRoot.querySelectorAll("terra-input");
-    inputs.forEach((input) => {
-      input.setCustomValidity("");
-    });
-  }
-  /**
-   * Format a date string for display in error messages
-   * When time is disabled, only show the date portion (YYYY-MM-DD)
-   */
-  formatDateForError(dateString) {
-    if (!this.enableTime) {
-      return dateString.split("T")[0];
-    }
-    return dateString;
-  }
-  /**
-   * Set validation error on input and emit invalid event
-   */
-  setInputValidationError(input, message) {
-    input.setCustomValidity(message);
-    requestAnimationFrame(() => {
-      ;
-      input.validationErrorMessage = message;
-      input.requestUpdate();
-    });
-    this.emit("terra-date-selection-invalid", {
-      detail: { message }
-    });
-  }
-  handleInputBlur(event) {
-    const input = event.target;
-    const value = input.value || "";
-    if (!value.trim()) {
-      this.selectedStart = null;
-      this.selectedEnd = null;
-      input.setCustomValidity("");
-      this.emitChange();
-      return;
-    }
-    if (this.range) {
-      const parts = value.split(" - ");
-      if (parts.length !== 2) {
-        const message = "Date range must be in format: YYYY-MM-DD - YYYY-MM-DD";
-        this.setInputValidationError(input, message);
-        return;
-      }
-      const startFormatted = this.parseAndFormatDate(parts[0]);
-      const endFormatted = this.parseAndFormatDate(parts[1]);
-      if (!startFormatted) {
-        const message = "Invalid start date format";
-        this.setInputValidationError(input, message);
-        return;
-      }
-      if (!endFormatted) {
-        const message = "Invalid end date format";
-        this.setInputValidationError(input, message);
-        return;
-      }
-      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) {
-        finalStart = end;
-        finalEnd = start;
-      }
-      if (this.minDate) {
-        const min = this.parseLocalDate(this.minDate);
-        if (finalStart < min) {
-          const message = `Start date must be on or after ${this.formatDateForError(this.minDate)}`;
-          this.setInputValidationError(input, message);
-          return;
-        }
-      }
-      if (this.maxDate) {
-        const max = this.parseLocalDate(this.maxDate);
-        if (finalEnd > max) {
-          const message = `End date must be on or before ${this.formatDateForError(this.maxDate)}`;
-          this.setInputValidationError(input, message);
-          return;
-        }
-      }
-      this.selectedStart = finalStart;
-      this.selectedEnd = finalEnd;
-      this.updateMonthViews();
-      input.value = `${startFormatted} - ${endFormatted}`;
-      input.setCustomValidity("");
-      this.emitChange();
-    } else {
-      const formatted = this.parseAndFormatDate(value);
-      if (!formatted) {
-        const message = "Invalid date format";
-        this.setInputValidationError(input, message);
-        return;
-      }
-      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) {
-          const message = `Date must be on or after ${this.formatDateForError(this.minDate)}`;
-          this.setInputValidationError(input, message);
-          return;
-        }
-      }
-      if (this.maxDate) {
-        const max = this.parseLocalDate(this.maxDate);
-        if (date > max) {
-          const message = `Date must be on or before ${this.formatDateForError(this.maxDate)}`;
-          this.setInputValidationError(input, message);
-          return;
-        }
-      }
-      this.selectedStart = date;
-      this.selectedEnd = null;
-      this.updateMonthViews();
-      input.value = formatted;
-      input.setCustomValidity("");
-      this.emitChange();
-    }
-  }
-  handleStartInputBlur(event) {
-    const input = event.target;
-    const value = input.value || "";
-    if (!value.trim()) {
-      this.selectedStart = null;
-      input.setCustomValidity("");
-      this.emitChange();
-      return;
-    }
-    const formatted = this.parseAndFormatDate(value);
-    if (!formatted) {
-      const message = "Invalid date format";
-      this.setInputValidationError(input, message);
-      return;
-    }
-    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) {
-        const message = `Date must be on or after ${this.formatDateForError(this.minDate)}`;
-        this.setInputValidationError(input, message);
-        return;
-      }
-    }
-    if (this.maxDate) {
-      const max = this.parseLocalDate(this.maxDate);
-      if (date > max) {
-        const message = `Date must be on or before ${this.formatDateForError(this.maxDate)}`;
-        this.setInputValidationError(input, message);
-        return;
-      }
-    }
-    if (this.selectedEnd && date > this.selectedEnd) {
-      const message = "Start date must be before end date";
-      this.setInputValidationError(input, message);
-      return;
-    }
-    this.selectedStart = date;
-    this.leftMonth = new Date(date);
-    input.value = formatted;
-    input.setCustomValidity("");
-    this.emitChange();
-  }
-  handleEndInputBlur(event) {
-    const input = event.target;
-    const value = input.value || "";
-    if (!value.trim()) {
-      this.selectedEnd = null;
-      input.setCustomValidity("");
-      this.emitChange();
-      return;
-    }
-    const formatted = this.parseAndFormatDate(value);
-    if (!formatted) {
-      const message = "Invalid date format";
-      this.setInputValidationError(input, message);
-      return;
-    }
-    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) {
-        const message = `Date must be on or after ${this.formatDateForError(this.minDate)}`;
-        this.setInputValidationError(input, message);
-        return;
-      }
-    }
-    if (this.maxDate) {
-      const max = this.parseLocalDate(this.maxDate);
-      if (date > max) {
-        const message = `Date must be on or before ${this.formatDateForError(this.maxDate)}`;
-        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)) {
-      this.rightMonth = new Date(this.selectedStart);
-      this.rightMonth.setMonth(this.rightMonth.getMonth() + 1);
-    } else {
-      this.rightMonth = new Date(date);
-    }
-    input.setCustomValidity("");
-    this.emitChange();
-  }
-  updateMonthViews() {
-    if (this.selectedStart) {
-      this.leftMonth = new Date(this.selectedStart);
-      if (this.range && this.selectedEnd) {
-        if (this.isSameMonth(this.selectedStart, this.selectedEnd)) {
-          this.rightMonth = new Date(this.selectedStart);
-          this.rightMonth.setMonth(this.rightMonth.getMonth() + 1);
-        } else {
-          this.rightMonth = new Date(this.selectedEnd);
-        }
-      }
-    }
-  }
-  handleKeydown(event) {
-    if (event.key === " ") {
-      event.stopPropagation();
-      return;
-    }
-    if (event.key === "Enter") {
-      event.preventDefault();
-      this.handleInputBlur(event);
-    }
-  }
-  previousMonth(isLeft) {
-    if (isLeft) {
-      const newMonth = new Date(this.leftMonth);
-      newMonth.setMonth(newMonth.getMonth() - 1);
-      this.leftMonth = newMonth;
-    } else {
-      const newMonth = new Date(this.rightMonth);
-      newMonth.setMonth(newMonth.getMonth() - 1);
-      this.rightMonth = newMonth;
-    }
-  }
-  nextMonth(isLeft) {
-    if (isLeft) {
-      const newMonth = new Date(this.leftMonth);
-      newMonth.setMonth(newMonth.getMonth() + 1);
-      this.leftMonth = newMonth;
-    } else {
-      const newMonth = new Date(this.rightMonth);
-      newMonth.setMonth(newMonth.getMonth() + 1);
-      this.rightMonth = newMonth;
-    }
-  }
-  toggleMonthDropdown(isLeft, event) {
-    event.stopPropagation();
-    if (isLeft) {
-      this.showLeftMonthDropdown = !this.showLeftMonthDropdown;
-      this.showRightMonthDropdown = false;
-    } else {
-      this.showRightMonthDropdown = !this.showRightMonthDropdown;
-      this.showLeftMonthDropdown = false;
-    }
-  }
-  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;
-    }
-  }
-  changeYear(delta, isLeft) {
-    if (isLeft) {
-      const newMonth = new Date(this.leftMonth);
-      newMonth.setFullYear(newMonth.getFullYear() + delta);
-      this.leftMonth = newMonth;
-    } else {
-      const newMonth = new Date(this.rightMonth);
-      newMonth.setFullYear(newMonth.getFullYear() + delta);
-      this.rightMonth = newMonth;
-    }
-  }
-  handleYearInput(event, isLeft) {
-    const input = event.target;
-    const year = parseInt(input.value, 10);
-    if (!isNaN(year) && year >= 1900 && year <= 2100) {
-      if (isLeft) {
-        const newMonth = new Date(this.leftMonth);
-        newMonth.setFullYear(year);
-        this.leftMonth = newMonth;
-      } else {
-        const newMonth = new Date(this.rightMonth);
-        newMonth.setFullYear(year);
-        this.rightMonth = newMonth;
-      }
-    }
-  }
-  getDaysInMonth(date) {
-    const year = date.getFullYear();
-    const month = date.getMonth();
-    const createDate = (y, m, d) => {
-      if (this.enableTime) {
-        return new Date(Date.UTC(y, m, d, 0, 0, 0));
-      }
-      return new Date(y, m, d);
-    };
-    const firstDay = createDate(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-    const days = [];
-    const firstDayOfWeek = this.enableTime ? firstDay.getUTCDay() : firstDay.getDay();
-    for (let i = firstDayOfWeek - 1; i >= 0; i--) {
-      const day = createDate(year, month, -i);
-      days.push(day);
-    }
-    for (let i = 1; i <= lastDay.getDate(); i++) {
-      days.push(createDate(year, month, i));
-    }
-    const remainingDays = 7 - days.length % 7;
-    if (remainingDays < 7) {
-      for (let i = 1; i <= remainingDays; i++) {
-        days.push(createDate(year, month + 1, i));
-      }
-    }
-    return days;
-  }
-  isSameDay(date1, date2) {
-    if (!date1 || !date2)
-      return false;
-    if (this.enableTime) {
-      return date1.getUTCFullYear() === date2.getUTCFullYear() && date1.getUTCMonth() === date2.getUTCMonth() && date1.getUTCDate() === date2.getUTCDate();
-    }
-    return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
-  }
-  isInRange(date) {
-    if (!this.selectedStart || !this.selectedEnd)
-      return false;
-    const time = date.getTime();
-    return time >= this.selectedStart.getTime() && time <= this.selectedEnd.getTime();
-  }
-  isInHoverRange(date) {
-    if (!this.range || !this.selectedStart || !this.hoverDate || this.selectedEnd)
-      return false;
-    const time = date.getTime();
-    const start = Math.min(this.selectedStart.getTime(), this.hoverDate.getTime());
-    const end = Math.max(this.selectedStart.getTime(), this.hoverDate.getTime());
-    return time >= start && time <= end;
-  }
-  isDisabled(date) {
-    if (this.minDate) {
-      const min = this.parseLocalDate(this.minDate);
-      const minMidnight = new Date(
-        Date.UTC(min.getUTCFullYear(), min.getUTCMonth(), min.getUTCDate())
-      );
-      const dateMidnight = new Date(
-        Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
-      );
-      if (dateMidnight < minMidnight)
-        return true;
-    }
-    if (this.maxDate) {
-      const max = this.parseLocalDate(this.maxDate);
-      const maxMidnight = new Date(
-        Date.UTC(max.getUTCFullYear(), max.getUTCMonth(), max.getUTCDate())
-      );
-      const dateMidnight = new Date(
-        Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
-      );
-      if (dateMidnight > maxMidnight)
-        return true;
-    }
-    return false;
-  }
-  selectDate(date) {
-    if (this.isDisabled(date)) {
-      this.emit("terra-date-selection-invalid", {
-        detail: {
-          message: `You are not allowed to select dates outside ${this.minDate} to ${this.maxDate}.`
-        }
-      });
-      return;
-    }
-    this.clearInputValidation();
-    if (this.range) {
-      if (!this.selectedStart || this.selectedEnd) {
-        this.selectedStart = date;
-        this.selectedEnd = null;
-        this.isSelectingRange = true;
-      } else {
-        if (date < this.selectedStart) {
-          this.selectedEnd = this.selectedStart;
-          this.selectedStart = date;
-        } else {
-          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;
-        }
-      }
-    } else {
-      this.selectedStart = date;
-      this.selectedEnd = null;
-      this.emitChange();
-      if (!this.inline) {
-        this.isOpen = false;
-      }
-    }
-  }
-  handleDateHover(date) {
-    if (this.range && this.selectedStart && !this.selectedEnd) {
-      this.hoverDate = date;
-    }
-  }
-  selectPreset(preset) {
-    const { startDate, endDate } = preset.getValue();
-    if (!this.isPresetWithinBounds({ startDate, endDate })) {
-      this.emit("terra-date-selection-invalid", {
-        detail: {
-          message: `The preset "${preset.label}" is not available within the allowed date range ${this.minDate} to ${this.maxDate}.`
-        }
-      });
-      return;
-    }
-    this.clearInputValidation();
-    const { min, max } = this.getBounds();
-    if (this.range) {
-      let s = startDate;
-      let e = endDate;
-      if (s && min && s < min)
-        s = new Date(min);
-      if (s && max && s > max)
-        s = new Date(max);
-      if (e && min && e < min)
-        e = new Date(min);
-      if (e && max && e > max)
-        e = new Date(max);
-      if (s && e && e < s) {
-        const tmp = s;
-        s = e;
-        e = tmp;
-      }
-      this.selectedStart = s;
-      this.selectedEnd = e;
-    } else {
-      let s = startDate;
-      if (s && min && s < min)
-        s = new Date(min);
-      if (s && max && s > max)
-        s = new Date(max);
-      this.selectedStart = s;
-      this.selectedEnd = null;
-    }
-    if (this.selectedStart) {
-      this.leftMonth = new Date(this.selectedStart);
-      if (this.range && this.selectedEnd) {
-        this.rightMonth = new Date(this.selectedEnd);
-      }
-    }
-    this.emitChange();
-    if (!this.range && !this.inline) {
-      this.isOpen = false;
-    }
-  }
-  emitChange() {
-    let startDateTime = "";
-    let endDateTime = "";
-    if (this.selectedStart) {
-      if (this.enableTime) {
-        const startDate = new Date(this.selectedStart);
-        startDate.setUTCHours(
-          this.startHour,
-          this.startMinute,
-          this.startSecond,
-          0
-        );
-        startDateTime = startDate.toISOString();
-      } else {
-        const year = this.selectedStart.getFullYear();
-        const month = String(this.selectedStart.getMonth() + 1).padStart(
-          2,
-          "0"
-        );
-        const day = String(this.selectedStart.getDate()).padStart(2, "0");
-        startDateTime = `${year}-${month}-${day}`;
-      }
-    }
-    if (this.selectedEnd) {
-      if (this.enableTime) {
-        const endDate = new Date(this.selectedEnd);
-        endDate.setUTCHours(this.endHour, this.endMinute, this.endSecond, 0);
-        endDateTime = endDate.toISOString();
-      } else {
-        const year = this.selectedEnd.getFullYear();
-        const month = String(this.selectedEnd.getMonth() + 1).padStart(2, "0");
-        const day = String(this.selectedEnd.getDate()).padStart(2, "0");
-        endDateTime = `${year}-${month}-${day}`;
-      }
-    }
-    this.emit("terra-date-range-change", {
-      detail: {
-        startDate: startDateTime,
-        endDate: endDateTime
-      }
-    });
-  }
-  initializeTimeFromDate(date, isStart) {
-    const hours = date.getUTCHours();
-    const minutes = date.getUTCMinutes();
-    const seconds = date.getUTCSeconds();
-    if (isStart) {
-      this.startHour = hours;
-      this.startMinute = minutes;
-      this.startSecond = seconds;
-    } else {
-      this.endHour = hours;
-      this.endMinute = minutes;
-      this.endSecond = seconds;
-    }
-  }
-  changeTime(type, delta, isStart) {
-    if (type === "hour") {
-      if (isStart) {
-        let newHour = this.startHour + delta;
-        if (newHour > 23)
-          newHour = 0;
-        if (newHour < 0)
-          newHour = 23;
-        this.startHour = newHour;
-      } else {
-        let newHour = this.endHour + delta;
-        if (newHour > 23)
-          newHour = 0;
-        if (newHour < 0)
-          newHour = 23;
-        this.endHour = newHour;
-      }
-    } else if (type === "minute") {
-      if (isStart) {
-        let newMinute = this.startMinute + delta;
-        if (newMinute >= 60)
-          newMinute = 0;
-        if (newMinute < 0)
-          newMinute = 59;
-        this.startMinute = newMinute;
-      } else {
-        let newMinute = this.endMinute + delta;
-        if (newMinute >= 60)
-          newMinute = 0;
-        if (newMinute < 0)
-          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();
-  }
-  handleTimeInput(event, type, isStart) {
-    const input = event.target;
-    let value = parseInt(input.value, 10);
-    if (type === "hour") {
-      if (isNaN(value) || value < 0 || value > 23) {
-        input.value = isStart ? this.startHour.toString().padStart(2, "0") : this.endHour.toString().padStart(2, "0");
-        return;
-      }
-      if (isStart)
-        this.startHour = value;
-      else
-        this.endHour = value;
-    } 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;
-      }
-      if (isStart)
-        this.startMinute = value;
-      else
-        this.endMinute = value;
-    } else {
-      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();
-  }
-  renderCalendar(month, isLeft = true) {
-    const days = this.getDaysInMonth(month);
-    const currentMonth = month.getMonth();
-    const showDropdown = isLeft ? this.showLeftMonthDropdown : this.showRightMonthDropdown;
-    return html`
-            <div class="calendar">
-                <div class="calendar__header">
-                    <button
-                        type="button"
-                        class="calendar__nav"
-                        @click=${() => this.previousMonth(isLeft)}
-                    >
-                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                            <path
-                                d="M10 12L6 8L10 4"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            />
-                        </svg>
-                    </button>
-
-                    <div class="calendar__month-year">
-                        <div class="calendar__month-dropdown-wrapper">
-                            <button
-                                type="button"
-                                class="calendar__month-button"
-                                @click=${(e) => this.toggleMonthDropdown(isLeft, e)}
-                            >
-                                ${this.MONTHS[month.getMonth()]}
-                                <svg
-                                    width="12"
-                                    height="12"
-                                    viewBox="0 0 12 12"
-                                    fill="none"
-                                    class="calendar__month-icon"
-                                >
-                                    <path
-                                        d="M3 5L6 8L9 5"
-                                        stroke="currentColor"
-                                        stroke-width="1.5"
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                    />
-                                </svg>
-                            </button>
-
-                            ${showDropdown ? html`
-                                      <div class="calendar__month-dropdown">
-                                          ${this.MONTHS.map(
-      (monthName, index) => html`
-                                                  <button
-                                                      type="button"
-                                                      class="calendar__month-option ${index === month.getMonth() ? "calendar__month-option--selected" : ""}"
-                                                      @click=${() => this.selectMonth(
-        index,
-        isLeft
-      )}
-                                                  >
-                                                      ${index === month.getMonth() ? html`
-                                                                <svg
-                                                                    width="16"
-                                                                    height="16"
-                                                                    viewBox="0 0 16 16"
-                                                                    fill="none"
-                                                                    class="calendar__month-check"
-                                                                >
-                                                                    <path
-                                                                        d="M13 4L6 11L3 8"
-                                                                        stroke="currentColor"
-                                                                        stroke-width="2"
-                                                                        stroke-linecap="round"
-                                                                        stroke-linejoin="round"
-                                                                    />
-                                                                </svg>
-                                                            ` : ""}
-                                                      ${monthName}
-                                                  </button>
-                                              `
-    )}
-                                      </div>
-                                  ` : ""}
-                        </div>
-
-                        <div class="calendar__year-input-wrapper">
-                            <input
-                                type="number"
-                                class="calendar__year-input"
-                                .value=${month.getFullYear().toString()}
-                                @input=${(e) => this.handleYearInput(e, isLeft)}
-                                @blur=${(e) => {
-      const input = e.target;
-      input.value = month.getFullYear().toString();
-    }}
-                                min="1900"
-                                max="2100"
-                            />
-                            <div class="calendar__year-spinners">
-                                <button
-                                    type="button"
-                                    class="calendar__year-spinner calendar__year-spinner--up"
-                                    @click=${() => this.changeYear(1, isLeft)}
-                                >
-                                    <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="calendar__year-spinner calendar__year-spinner--down"
-                                    @click=${() => this.changeYear(-1, isLeft)}
-                                >
-                                    <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>
-
-                    <button
-                        type="button"
-                        class="calendar__nav"
-                        @click=${() => this.nextMonth(isLeft)}
-                    >
-                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                            <path
-                                d="M6 12L10 8L6 4"
-                                stroke="currentColor"
-                                stroke-width="2"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            />
-                        </svg>
-                    </button>
-                </div>
-                <div class="calendar__weekdays">
-                    ${this.DAYS.map(
-      (day) => html`<div class="calendar__weekday">${day}</div>`
-    )}
-                </div>
-                <div class="calendar__days">
-                    ${days.map((date) => {
-      const dateMonth = this.enableTime ? date.getUTCMonth() : date.getMonth();
-      const dateDay = this.enableTime ? date.getUTCDate() : date.getDate();
-      const isCurrentMonth = dateMonth === currentMonth;
-      const isSelected = this.isSameDay(date, this.selectedStart) || this.isSameDay(date, this.selectedEnd);
-      const isStart = this.isSameDay(date, this.selectedStart);
-      const isEnd = this.isSameDay(date, this.selectedEnd);
-      const inRange = this.isInRange(date);
-      const inHoverRange = this.isInHoverRange(date);
-      const isDisabled = this.isDisabled(date);
-      return html`
-                            <button
-                                type="button"
-                                class="calendar__day ${!isCurrentMonth ? "calendar__day--outside" : ""} 
-                                       ${isSelected ? "calendar__day--selected" : ""}
-                                       ${isStart ? "calendar__day--start" : ""}
-                                       ${isEnd ? "calendar__day--end" : ""}
-                                       ${inRange ? "calendar__day--in-range" : ""}
-                                       ${inHoverRange ? "calendar__day--hover-range" : ""}
-                                       ${isDisabled ? "calendar__day--disabled" : ""}"
-                                @click=${() => this.selectDate(date)}
-                                @mouseenter=${() => this.handleDateHover(date)}
-                                ?disabled=${isDisabled}
-                            >
-                                ${dateDay}
-                            </button>
-                        `;
-    })}
-                </div>
-            </div>
-        `;
-  }
-  renderTimePicker() {
-    if (!this.enableTime)
-      return "";
-    return html`
-            <div class="date-picker__time">
-                <div class="date-picker__time-section">
-                    <div class="date-picker__time-inputs">
-                        <div class="date-picker__time-input-group">
-                            <input
-                                type="number"
-                                class="date-picker__time-input"
-                                .value=${this.startHour.toString().padStart(2, "0")}
-                                @input=${(e) => this.handleTimeInput(e, "hour", true)}
-                                @blur=${(e) => {
-      const input = e.target;
-      input.value = this.startHour.toString().padStart(2, "0");
-    }}
-                                min="0"
-                                max="23"
-                            />
-                            <div class="date-picker__time-spinners">
-                                <button
-                                    type="button"
-                                    class="date-picker__time-spinner"
-                                    @click=${() => this.changeTime("hour", 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("hour", -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>
-
-                        <span class="date-picker__time-separator">:</span>
-
-                        <div class="date-picker__time-input-group">
-                            <input
-                                type="number"
-                                class="date-picker__time-input"
-                                .value=${this.startMinute.toString().padStart(2, "0")}
-                                @input=${(e) => this.handleTimeInput(e, "minute", true)}
-                                @blur=${(e) => {
-      const input = e.target;
-      input.value = this.startMinute.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("minute", 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("minute", -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>
-
-                        <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>
-
-                ${this.range ? html`
-                          <span class="date-picker__separator">–</span>
-
-                          <div class="date-picker__time-section">
-                              <div class="date-picker__time-inputs">
-                                  <div class="date-picker__time-input-group">
-                                      <input
-                                          type="number"
-                                          class="date-picker__time-input"
-                                          .value=${this.endHour.toString().padStart(2, "0")}
-                                          @input=${(e) => this.handleTimeInput(e, "hour", false)}
-                                          @blur=${(e) => {
-      const input = e.target;
-      input.value = this.endHour.toString().padStart(2, "0");
-    }}
-                                          min="0"
-                                          max="23"
-                                      />
-                                      <div class="date-picker__time-spinners">
-                                          <button
-                                              type="button"
-                                              class="date-picker__time-spinner"
-                                              @click=${() => this.changeTime("hour", 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("hour", -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>
-
-                                  <span class="date-picker__time-separator">:</span>
-
-                                  <div class="date-picker__time-input-group">
-                                      <input
-                                          type="number"
-                                          class="date-picker__time-input"
-                                          .value=${this.endMinute.toString().padStart(2, "0")}
-                                          @input=${(e) => this.handleTimeInput(
-      e,
-      "minute",
-      false
-    )}
-                                          @blur=${(e) => {
-      const input = e.target;
-      input.value = this.endMinute.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("minute", 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(
-      "minute",
-      -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>
-
-                                  <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>
-                      ` : ""}
-            </div>
-        `;
-  }
-  renderCalendarIcon() {
-    return html`
-            <svg
-                slot="suffix"
-                class="date-picker__icon"
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-            >
-                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-                <line x1="16" y1="2" x2="16" y2="6"></line>
-                <line x1="8" y1="2" x2="8" y2="6"></line>
-                <line x1="3" y1="10" x2="21" y2="10"></line>
-            </svg>
-        `;
-  }
-  renderCalendarContent() {
-    return html`
-            <div class="date-picker__dropdown" part="calendar">
-                <div class="date-picker__content">
-                    ${this.showPresets && this.filteredPresets.length > 0 ? html`
-                              <div class="date-picker__sidebar" part="sidebar">
-                                  <slot name="sidebar-header"></slot>
-
-                                  <div class="presets">
-                                      ${this.filteredPresets.map(
-      (preset) => html`
-                                              <button
-                                                  type="button"
-                                                  class="date-picker__preset"
-                                                  @click=${() => this.selectPreset(preset)}
-                                              >
-                                                  ${preset.label}
-                                              </button>
-                                          `
-    )}
-                                  </div>
-
-                                  <slot name="sidebar-footer"></slot>
-                              </div>
-                          ` : ""}
-
-                    <div class="date-picker__calendars">
-                        ${this.renderCalendar(this.leftMonth, true)}
-                        ${this.range ? this.renderCalendar(this.rightMonth, false) : ""}
-                    </div>
-                </div>
-
-                ${this.enableTime ? this.renderTimePicker() : ""}
-            </div>
-        `;
-  }
-  render() {
-    const showSplitInputs = this.range && this.splitInputs;
-    if (this.inline) {
-      return html`
-                <div
-                    class="date-picker date-picker--inline ${showSplitInputs ? "date-picker--split-inputs" : ""}"
-                    @click=${(e) => e.stopPropagation()}
-                >
-                    ${showSplitInputs ? html`
-                              <div class="date-picker__inputs">
-                                  <terra-input
-                                      .label=${this.startLabel || (this.label ? `${this.label} (Start)` : "Start Date")}
-                                      .hideLabel=${this.hideLabel}
-                                      .helpText=${this.startHelpText || this.helpText}
-                                      .value=${this.getStartDateDisplayValue()}
-                                      @terra-blur=${this.handleStartInputBlur}
-                                      @keydown=${this.handleKeydown}
-                                      placeholder=${this.startPlaceholder}
-                                      name="start-date"
-                                  >
-                                      ${this.renderCalendarIcon()}
-                                  </terra-input>
-                                  <terra-input
-                                      .label=${this.endLabel || (this.label ? `${this.label} (End)` : "End Date")}
-                                      .hideLabel=${this.hideLabel}
-                                      .helpText=${this.endHelpText || this.helpText}
-                                      .value=${this.getEndDateDisplayValue()}
-                                      @terra-blur=${this.handleEndInputBlur}
-                                      @keydown=${this.handleKeydown}
-                                      placeholder=${this.endPlaceholder}
-                                      name="end-date"
-                                  >
-                                      ${this.renderCalendarIcon()}
-                                  </terra-input>
-                              </div>
-                          ` : html`
-                              <terra-input
-                                  .label=${this.label}
-                                  .hideLabel=${this.hideLabel}
-                                  .helpText=${this.helpText}
-                                  .value=${this.getDisplayValue()}
-                                  placeholder=${this.placeholder}
-                                  @terra-blur=${this.handleInputBlur}
-                                  @keydown=${this.handleKeydown}
-                                  name="date"
-                              >
-                                  ${this.renderCalendarIcon()}
-                              </terra-input>
-                          `}
-
-                    <slot name="additional-text"></slot>
-
-                    <div class="date-picker__dropdown-wrapper">
-                        <div
-                            class="date-picker__dropdown date-picker__dropdown--inline"
-                            part="calendar"
-                        >
-                            <div class="date-picker__content">
-                                ${this.showPresets && this.filteredPresets.length > 0 ? html`
-                                          <div
-                                              class="date-picker__sidebar"
-                                              part="sidebar"
-                                          >
-                                              ${this.filteredPresets.map(
-        (preset) => html`
-                                                      <button
-                                                          type="button"
-                                                          class="date-picker__preset"
-                                                          @click=${() => this.selectPreset(
-          preset
-        )}
-                                                      >
-                                                          ${preset.label}
-                                                      </button>
-                                                  `
-      )}
-                                          </div>
-                                      ` : ""}
-
-                                <div class="date-picker__calendars">
-                                    ${this.renderCalendar(this.leftMonth, true)}
-                                    ${this.range ? this.renderCalendar(this.rightMonth, false) : ""}
-                                </div>
-                            </div>
-
-                            ${this.enableTime ? this.renderTimePicker() : ""}
-                        </div>
-                    </div>
-                </div>
-            `;
-    }
-    return html`
-            <div
-                class="date-picker ${showSplitInputs ? "date-picker--split-inputs" : ""}"
-                @click=${(e) => e.stopPropagation()}
-            >
-                ${showSplitInputs ? html`
-                          <div class="date-picker__inputs">
-                              <terra-dropdown
-                                  ${ref(this.dropdownRef)}
-                                  placement="bottom-start"
-                                  distance="4"
-                                  @terra-show=${this.handleDropdownShow}
-                                  @terra-hide=${this.handleDropdownHide}
-                                  hoist
-                              >
-                                  <terra-input
-                                      slot="trigger"
-                                      .label=${this.startLabel || (this.label ? `${this.label} (Start)` : "Start Date")}
-                                      .hideLabel=${this.hideLabel}
-                                      .helpText=${this.startHelpText || this.helpText}
-                                      .value=${this.getStartDateDisplayValue()}
-                                      placeholder=${this.startPlaceholder}
-                                      @terra-blur=${this.handleStartInputBlur}
-                                      @keydown=${this.handleKeydown}
-                                      name="start-date"
-                                  >
-                                      ${this.renderCalendarIcon()}
-                                  </terra-input>
-                                  ${this.renderCalendarContent()}
-                              </terra-dropdown>
-                              <terra-dropdown
-                                  placement="bottom-start"
-                                  distance="4"
-                                  @terra-show=${this.handleDropdownShow}
-                                  @terra-hide=${this.handleDropdownHide}
-                                  hoist
-                              >
-                                  <terra-input
-                                      slot="trigger"
-                                      .label=${this.endLabel || (this.label ? `${this.label} (End)` : "End Date")}
-                                      .hideLabel=${this.hideLabel}
-                                      .helpText=${this.endHelpText || this.helpText}
-                                      .value=${this.getEndDateDisplayValue()}
-                                      placeholder=${this.endPlaceholder}
-                                      @terra-blur=${this.handleEndInputBlur}
-                                      @keydown=${this.handleKeydown}
-                                      name="end-date"
-                                  >
-                                      ${this.renderCalendarIcon()}
-                                  </terra-input>
-                                  ${this.renderCalendarContent()}
-                              </terra-dropdown>
-                          </div>
-                      ` : html`
-                          <terra-dropdown
-                              ${ref(this.dropdownRef)}
-                              placement="bottom-start"
-                              distance="4"
-                              @terra-show=${this.handleDropdownShow}
-                              @terra-hide=${this.handleDropdownHide}
-                              hoist
-                          >
-                              <terra-input
-                                  slot="trigger"
-                                  .label=${this.label}
-                                  .hideLabel=${this.hideLabel}
-                                  .helpText=${this.helpText}
-                                  .value=${this.getDisplayValue()}
-                                  placeholder=${this.placeholder}
-                                  @terra-blur=${this.handleInputBlur}
-                                  @keydown=${this.handleKeydown}
-                                  name="date"
-                              >
-                                  ${this.renderCalendarIcon()}
-                              </terra-input>
-                              ${this.renderCalendarContent()}
-                          </terra-dropdown>
-                      `}
-            </div>
-        `;
-  }
-};
-TerraDatePicker.styles = [component_styles_default, date_picker_styles_default];
-TerraDatePicker.dependencies = {
-  "terra-button": TerraButton,
-  "terra-input": TerraInput,
-  "terra-dropdown": TerraDropdown
-};
-__decorateClass([
-  property()
-], TerraDatePicker.prototype, "id", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], TerraDatePicker.prototype, "range", 2);
-__decorateClass([
-  property({ attribute: "min-date", reflect: true })
-], TerraDatePicker.prototype, "minDate", 2);
-__decorateClass([
-  property({ attribute: "max-date", reflect: true })
-], TerraDatePicker.prototype, "maxDate", 2);
-__decorateClass([
-  property({ attribute: "start-date", reflect: true })
-], TerraDatePicker.prototype, "startDate", 2);
-__decorateClass([
-  property({ attribute: "end-date", reflect: true })
-], TerraDatePicker.prototype, "endDate", 2);
-__decorateClass([
-  property({ attribute: "hide-label", type: Boolean })
-], TerraDatePicker.prototype, "hideLabel", 2);
-__decorateClass([
-  property()
-], TerraDatePicker.prototype, "label", 2);
-__decorateClass([
-  property({ attribute: "help-text" })
-], TerraDatePicker.prototype, "helpText", 2);
-__decorateClass([
-  property({ attribute: "start-help-text" })
-], TerraDatePicker.prototype, "startHelpText", 2);
-__decorateClass([
-  property({ attribute: "end-help-text" })
-], TerraDatePicker.prototype, "endHelpText", 2);
-__decorateClass([
-  property({ attribute: "start-label" })
-], TerraDatePicker.prototype, "startLabel", 2);
-__decorateClass([
-  property({ attribute: "end-label" })
-], TerraDatePicker.prototype, "endLabel", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-presets" })
-], TerraDatePicker.prototype, "showPresets", 2);
-__decorateClass([
-  property({ type: Array })
-], TerraDatePicker.prototype, "presets", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "enable-time" })
-], TerraDatePicker.prototype, "enableTime", 2);
-__decorateClass([
-  property({ attribute: "display-format" })
-], TerraDatePicker.prototype, "displayFormat", 2);
-__decorateClass([
-  property({ type: Boolean })
-], TerraDatePicker.prototype, "inline", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "split-inputs" })
-], TerraDatePicker.prototype, "splitInputs", 2);
-__decorateClass([
-  property()
-], TerraDatePicker.prototype, "placeholder", 2);
-__decorateClass([
-  property()
-], TerraDatePicker.prototype, "startPlaceholder", 2);
-__decorateClass([
-  property()
-], TerraDatePicker.prototype, "endPlaceholder", 2);
-__decorateClass([
-  property({ reflect: true })
-], TerraDatePicker.prototype, "role", 2);
-__decorateClass([
-  property({ reflect: true, attribute: "aria-label" })
-], TerraDatePicker.prototype, "ariaLabel", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "isOpen", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "leftMonth", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "rightMonth", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "selectedStart", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "selectedEnd", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "hoverDate", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "isSelectingRange", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "showLeftMonthDropdown", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "showRightMonthDropdown", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "startHour", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "startMinute", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "startSecond", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "endHour", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "endMinute", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "endSecond", 2);
-__decorateClass([
-  state()
-], TerraDatePicker.prototype, "selectedDates", 2);
-__decorateClass([
-  query(".date-picker__dropdown")
-], TerraDatePicker.prototype, "dropdown", 2);
-
-export {
-  TerraDatePicker
-};