@nasa-terra/components 0.0.167 → 0.0.169

package/dist/chunks/chunk.QIV6FTJZ.js

@@ -0,0 +1,2210 @@
+import {
+  date_picker_styles_default
+} from "./chunk.6BJRMCOW.js";
+import {
+  TerraInput
+} from "./chunk.RJ3ZDWLV.js";
+import {
+  TerraDropdown
+} from "./chunk.OESICSHC.js";
+import {
+  TerraButton
+} from "./chunk.HARXTWRK.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.JEAP7TNI.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.hideClearAll = false;
+    this.clearAllLabel = "Clear Dates";
+    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();
+  }
+  /**
+   * Clears the selected date(s) and resets the date picker to its initial state.
+   */
+  clear() {
+    this.selectedStart = null;
+    this.selectedEnd = null;
+    this.hoverDate = null;
+    this.isSelectingRange = false;
+    this.startHour = 0;
+    this.startMinute = 0;
+    this.startSecond = 0;
+    this.endHour = 23;
+    this.endMinute = 59;
+    this.endSecond = 59;
+    this.clearInputValidation();
+    this.requestUpdate();
+    this.emitChange();
+  }
+  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">
+                                      <terra-button
+                                          outline
+                                          variant="default"
+                                          size="small"
+                                          @click=${() => this.clear()}
+                                      >
+                                          ${this.clearAllLabel}
+                                      </terra-button>
+                                  </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"
+                                          >
+                                              <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">
+                                                  <terra-button
+                                                      outline
+                                                      variant="default"
+                                                      size="small"
+                                                      @click=${() => this.clear()}
+                                                  >
+                                                      ${this.clearAllLabel}
+                                                  </terra-button>
+                                              </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>
+                    </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([
+  property({ type: Boolean })
+], TerraDatePicker.prototype, "hideClearAll", 2);
+__decorateClass([
+  property()
+], TerraDatePicker.prototype, "clearAllLabel", 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
+};