@uplynk/lynk-design 1.18.0 → 1.18.1

package/dist/chunks/chunk.BH7VVSMP.js

@@ -0,0 +1,831 @@
+import {
+  Locale,
+  addUnit,
+  getDaysInMonth,
+  isAfter,
+  isBefore,
+  isToday,
+  toSegment,
+  utcFormat,
+  utcParse
+} from "./chunk.E4AXJBLQ.js";
+import {
+  calendar_styles_default
+} from "./chunk.7E7CGYTS.js";
+import {
+  LynkElement
+} from "./chunk.K4BFCDFI.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/calendar/calendar.component.ts
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { repeat } from "lit/directives/repeat.js";
+var LynkCalendar = class extends LynkElement {
+  constructor() {
+    super();
+    this.currentDate = /* @__PURE__ */ new Date();
+    this.focusedDate = null;
+    this.hoverDate = null;
+    this.viewMode = "calendar";
+    this.type = "date";
+    this._value = "";
+    this.months = 1;
+    this.showOutsideDays = false;
+    this.showWeekNumbers = false;
+    this.disableNavigation = false;
+    this.firstDayOfWeek = 1;
+    this.readonly = false;
+    this.weekNumberFormatter = (weekNumber) => `${weekNumber}`;
+    this.captionLayout = "none";
+    try {
+      this.localeFormatter = Locale.fromOptions({ weekday: "short" }, this.locale || navigator.language);
+    } catch (e) {
+      this.localeFormatter = Locale.fromOptions({ weekday: "short" }, "en-US");
+    }
+  }
+  get value() {
+    return this._value;
+  }
+  set value(val) {
+    const oldValue = this._value;
+    this._value = val;
+    this.requestUpdate("value", oldValue);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("value") || changedProperties.has("type")) {
+      let newFocusedDate = null;
+      let newCurrentDate = null;
+      if (this.value) {
+        let parsedValueDate;
+        if (this.type === "range") {
+          const [start] = this.value.split("/");
+          parsedValueDate = start ? utcParse(start) : null;
+        } else if (this.type === "multi") {
+          const [firstDate] = this.value.split(/[, ]+/).filter(Boolean);
+          parsedValueDate = firstDate ? utcParse(firstDate) : null;
+        } else {
+          parsedValueDate = utcParse(this.value);
+        }
+        if (parsedValueDate && !Number.isNaN(parsedValueDate.getTime())) {
+          newFocusedDate = parsedValueDate;
+          newCurrentDate = utcParse({
+            year: parsedValueDate.getUTCFullYear(),
+            month: parsedValueDate.getUTCMonth(),
+            day: 1
+          });
+        }
+      }
+      if (newCurrentDate && (newCurrentDate.getUTCFullYear() !== this.currentDate.getUTCFullYear() || newCurrentDate.getUTCMonth() !== this.currentDate.getUTCMonth())) {
+        this.currentDate = newCurrentDate;
+      } else if (!newCurrentDate && this.value === "") {
+      }
+      this.focusedDate = newFocusedDate || utcParse({ year: this.currentDate.getUTCFullYear(), month: this.currentDate.getUTCMonth(), day: 1 });
+    }
+    if (changedProperties.has("locale")) {
+      try {
+        this.localeFormatter = Locale.fromOptions({ weekday: "short" }, this.locale || navigator.language);
+      } catch (e) {
+        this.localeFormatter = Locale.fromOptions({ weekday: "short" }, "en-US");
+      }
+      this.requestUpdate();
+    }
+  }
+  /**
+   * Gets the localized month names based on the current locale
+   * @returns Array of month names in the current locale
+   */
+  get localizedMonthNames() {
+    try {
+      const monthFormatter = Locale.fromOptions({ month: "long" }, this.locale || navigator.language);
+      return monthFormatter.monthNames.map((month) => month.name.charAt(0).toUpperCase() + month.name.slice(1));
+    } catch (e) {
+      const monthFormatter = Locale.fromOptions({ month: "long" }, "en-US");
+      return monthFormatter.monthNames.map((month) => month.name.charAt(0).toUpperCase() + month.name.slice(1));
+    }
+  }
+  /**
+   * Gets the localized weekday names based on the current locale and first day of week
+   * @returns Array of weekday names in the current locale
+   */
+  get localizedWeekDays() {
+    const weekdays = this.localeFormatter.weekdayNames;
+    const firstDay = this.firstDayOfWeek;
+    return [...weekdays.slice(firstDay), ...weekdays.slice(0, firstDay)].map(
+      (day) => day.name.charAt(0).toUpperCase() + day.name.slice(1)
+    );
+  }
+  /**
+   * Gets the weekdays for the calendar
+   * @returns Array of weekday names
+   */
+  getWeekDays() {
+    return this.localizedWeekDays;
+  }
+  /**
+   * Gets all days for a given month, including padding days if showOutsideDays is true
+   * @param year - The year to get days for
+   * @param month - The month to get days for (0-11)
+   * @returns Array of dates or null for padding days
+   */
+  getMonthDays(year, month) {
+    const daysInMonth = getDaysInMonth(year, month);
+    const firstDay = utcParse({ year, month, day: 1 });
+    const lastDay = utcParse({ year, month, day: daysInMonth });
+    const firstDayOfWeek = this.firstDayOfWeek;
+    const firstDayOfMonth = firstDay.getUTCDay();
+    const offset = (firstDayOfMonth - firstDayOfWeek + 7) % 7;
+    const lastDayOfWeek = (lastDay.getUTCDay() - firstDayOfWeek + 7) % 7;
+    const days = [];
+    if (this.showOutsideDays) {
+      const prevMonth = month === 0 ? 11 : month - 1;
+      const prevMonthYear = month === 0 ? year - 1 : year;
+      const prevMonthDays = getDaysInMonth(prevMonthYear, prevMonth);
+      for (let i = offset - 1; i >= 0; i--) {
+        days.push(utcParse({ year: prevMonthYear, month: prevMonth, day: prevMonthDays - i }));
+      }
+    } else {
+      for (let i = 0; i < offset; i++) {
+        days.push(null);
+      }
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push(utcParse({ year, month, day: i }));
+    }
+    if (this.showOutsideDays) {
+      const nextMonth = month === 11 ? 0 : month + 1;
+      const nextMonthYear = month === 11 ? year + 1 : year;
+      for (let i = 1; i <= 6 - lastDayOfWeek; i++) {
+        days.push(utcParse({ year: nextMonthYear, month: nextMonth, day: i }));
+      }
+    } else {
+      for (let i = 0; i < 6 - lastDayOfWeek; i++) {
+        days.push(null);
+      }
+    }
+    return days;
+  }
+  /**
+   * Calculates the week number for a given date
+   * @param date - The date to calculate the week number for
+   * @returns The week number (1-53)
+   */
+  getWeekNumber(date) {
+    const segment = toSegment(date);
+    const firstDayOfYear = utcParse({ year: segment.year, month: 0, day: 1 });
+    const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 864e5;
+    return Math.ceil((pastDaysOfYear + firstDayOfYear.getUTCDay() + 1) / 7);
+  }
+  /**
+   * Checks if a date should be disabled based on min, max, readonly, and isDateDisallowed
+   * @param date - The date to check
+   * @returns True if the date should be disabled
+   */
+  isDateDisabled(date) {
+    var _a;
+    if (this.readonly) return true;
+    if (this.min && date < new Date(this.min)) return true;
+    if (this.max && date > new Date(this.max)) return true;
+    if ((_a = this.isDateDisallowed) == null ? void 0 : _a.call(this, date)) return true;
+    return false;
+  }
+  isDateOutsideMonth(date, month) {
+    return date.getUTCMonth() !== month;
+  }
+  isDateToday(date) {
+    return isToday(utcFormat(date));
+  }
+  isSameDay(a, b) {
+    if (Number.isNaN(a.getTime()) || Number.isNaN(b.getTime())) return false;
+    return utcFormat(a) === utcFormat(b);
+  }
+  isDateSelected(date) {
+    switch (this.type) {
+      case "date": {
+        if (!this.value) return false;
+        const selected = utcParse(this.value);
+        if (Number.isNaN(selected.getTime())) return false;
+        return this.isSameDay(date, selected);
+      }
+      case "multi": {
+        if (!this.value) return false;
+        const selectedDates = this.value.split(/[, ]+/).filter(Boolean).map((d) => utcParse(d));
+        return selectedDates.some((selected) => !Number.isNaN(selected.getTime()) && this.isSameDay(date, selected));
+      }
+      case "range": {
+        const start = this.startDate;
+        const end = this.endDate;
+        if (!start || !end) return false;
+        const dateStr = utcFormat(date);
+        return !isAfter(dateStr, utcFormat(end)) && !isBefore(dateStr, utcFormat(start));
+      }
+      default:
+        return false;
+    }
+  }
+  get startDate() {
+    if (this.type !== "range" || !this.value) return null;
+    const [start] = this.value.split("/");
+    return start ? utcParse(start) : null;
+  }
+  get endDate() {
+    if (this.type !== "range" || !this.value) return null;
+    const [, end] = this.value.split("/");
+    return end ? utcParse(end) : null;
+  }
+  /**
+   * Checks if a date is the start of a range selection
+   * @param date - The date to check
+   * @returns True if the date is the start of a range
+   */
+  isRangeStart(date) {
+    if (this.type !== "range") return false;
+    if (this.startDate && !this.endDate && this.hoverDate) {
+      const effectiveStart = this.startDate < this.hoverDate ? this.startDate : this.hoverDate;
+      return this.isSameDay(date, effectiveStart);
+    }
+    const start = this.startDate;
+    if (!start) return false;
+    return this.isSameDay(date, start);
+  }
+  /**
+   * Checks if a date is the end of a range selection
+   * @param date - The date to check
+   * @returns True if the date is the end of a range
+   */
+  isRangeEnd(date) {
+    if (this.type !== "range") return false;
+    if (this.startDate && !this.endDate && this.hoverDate) {
+      const effectiveEnd = this.startDate > this.hoverDate ? this.startDate : this.hoverDate;
+      return this.isSameDay(date, effectiveEnd);
+    }
+    const end = this.endDate || this.hoverDate;
+    if (!end) return false;
+    return this.isSameDay(date, end);
+  }
+  /**
+   * Checks if a date is within a selected range (including hover preview)
+   * @param date - The date to check
+   * @returns True if the date is within the range
+   */
+  isDateInRange(date) {
+    if (this.type !== "range") return false;
+    let start = this.startDate;
+    let end = this.endDate;
+    if (start && !end && this.hoverDate) {
+      const provisionalStart = start < this.hoverDate ? start : this.hoverDate;
+      const provisionalEnd = start > this.hoverDate ? start : this.hoverDate;
+      start = provisionalStart;
+      end = provisionalEnd;
+    }
+    if (!start || !end) return false;
+    const dateStr = utcFormat(date);
+    const startStr = utcFormat(start);
+    const endStr = utcFormat(end);
+    return dateStr > startStr && dateStr < endStr;
+  }
+  /**
+   * Handles mouse hover over a date for range selection
+   */
+  handleDateHover(date) {
+    if (this.type !== "range" || !this.startDate || this.endDate) return;
+    this.hoverDate = date;
+  }
+  /**
+   * Handles mouse leave from a date for range selection
+   */
+  handleDateLeave() {
+    if (this.type !== "range") return;
+    this.hoverDate = null;
+  }
+  /**
+   * Handles keyboard navigation for date selection
+   * @param e - The keyboard event
+   * @param date - The current focused date (the one with tabindex=0)
+   */
+  async handleKeyDown(e, date) {
+    var _a;
+    let newDate;
+    const dateStr = utcFormat(date);
+    switch (e.key) {
+      case "ArrowRight":
+        newDate = utcParse(addUnit(dateStr, "day", 1));
+        break;
+      case "ArrowLeft":
+        newDate = utcParse(addUnit(dateStr, "day", -1));
+        break;
+      case "ArrowDown":
+        newDate = utcParse(addUnit(dateStr, "day", 7));
+        break;
+      case "ArrowUp":
+        newDate = utcParse(addUnit(dateStr, "day", -7));
+        break;
+      case "PageUp":
+        newDate = utcParse(addUnit(dateStr, e.shiftKey ? "year" : "month", -1));
+        break;
+      case "PageDown":
+        newDate = utcParse(addUnit(dateStr, e.shiftKey ? "year" : "month", 1));
+        break;
+      case "Home":
+        newDate = utcParse({ year: this.currentDate.getUTCFullYear(), month: this.currentDate.getUTCMonth(), day: 1 });
+        break;
+      case "End":
+        newDate = utcParse({
+          year: this.currentDate.getUTCFullYear(),
+          month: this.currentDate.getUTCMonth() + this.months,
+          day: 0
+        });
+        break;
+      case "Enter":
+      case " ":
+        if (!this.readonly && !this.isDateDisabled(date)) {
+          this.handleDateClick(date);
+        }
+        e.preventDefault();
+        return;
+      default:
+        return;
+    }
+    const cleanedNewDate = new Date(newDate.getUTCFullYear(), newDate.getUTCMonth(), newDate.getUTCDate());
+    if (!this.isDateDisabled(cleanedNewDate)) {
+      this.focusedDate = cleanedNewDate;
+      if (this.type === "range" && this.startDate && !this.endDate) {
+        this.hoverDate = cleanedNewDate;
+      }
+      const firstDisplayedMonthStart = utcParse({
+        year: this.currentDate.getUTCFullYear(),
+        month: this.currentDate.getUTCMonth(),
+        day: 1
+      });
+      const lastDisplayedMonthEnd = utcParse({
+        year: this.currentDate.getUTCFullYear(),
+        month: this.currentDate.getUTCMonth() + this.months,
+        day: 0
+      });
+      const isNewDateBeforeFirstDisplayed = cleanedNewDate < firstDisplayedMonthStart;
+      const isNewDateAfterLastDisplayed = cleanedNewDate > lastDisplayedMonthEnd;
+      if (isNewDateBeforeFirstDisplayed || isNewDateAfterLastDisplayed) {
+        this.currentDate = utcParse({
+          year: cleanedNewDate.getUTCFullYear(),
+          month: cleanedNewDate.getUTCMonth(),
+          day: 1
+        });
+      }
+    }
+    this.requestUpdate();
+    await this.updateComplete;
+    const newlyFocusedButton = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector('button[tabindex="0"]');
+    if (newlyFocusedButton) {
+      newlyFocusedButton.focus();
+    }
+    e.preventDefault();
+  }
+  /**
+   * Handles date selection based on the calendar type
+   * @param date - The selected date
+   */
+  handleDateClick(date) {
+    if (this.isDateDisabled(date)) return;
+    this.focusedDate = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+    switch (this.type) {
+      case "date": {
+        this.value = utcFormat(date);
+        break;
+      }
+      case "multi": {
+        const iso = utcFormat(date);
+        const selectedDates = this.value.split(/[, ]+/).filter(Boolean);
+        const index = selectedDates.indexOf(iso);
+        if (index > -1) {
+          selectedDates.splice(index, 1);
+        } else {
+          selectedDates.push(iso);
+        }
+        this.value = selectedDates.join(" ");
+        break;
+      }
+      case "range": {
+        const iso = utcFormat(date);
+        const start = this.startDate;
+        const end = this.endDate;
+        if (!start || start && end) {
+          this.value = `${iso}/`;
+          this.hoverDate = null;
+        } else if (start && !end) {
+          if (isBefore(iso, utcFormat(start))) {
+            this.value = `${iso}/${utcFormat(start)}`;
+          } else {
+            this.value = `${utcFormat(start)}/${iso}`;
+          }
+          this.hoverDate = null;
+        }
+        break;
+      }
+    }
+    this.requestUpdate();
+    this.emit("ev-change");
+  }
+  /**
+   * Navigates to the previous month(s)
+   */
+  handlePreviousMonth() {
+    if (this.disableNavigation) return;
+    const currentDateStr = utcFormat(this.currentDate);
+    const newCurrentDate = utcParse(addUnit(currentDateStr, "month", -this.months));
+    this.currentDate = newCurrentDate;
+    this.focusedDate = utcParse({ year: newCurrentDate.getUTCFullYear(), month: newCurrentDate.getUTCMonth(), day: 1 });
+  }
+  /**
+   * Navigates to the next month(s)
+   */
+  handleNextMonth() {
+    if (this.disableNavigation) return;
+    const currentDateStr = utcFormat(this.currentDate);
+    const newCurrentDate = utcParse(addUnit(currentDateStr, "month", this.months));
+    this.currentDate = newCurrentDate;
+    this.focusedDate = utcParse({ year: newCurrentDate.getUTCFullYear(), month: newCurrentDate.getUTCMonth(), day: 1 });
+  }
+  /**
+   * Renders a single month view
+   * @param year - The year to render
+   * @param month - The month to render (0-11)
+   * @returns The rendered month template
+   */
+  renderMonth(year, month) {
+    const days = this.getMonthDays(year, month);
+    const weekDays = this.localizedWeekDays;
+    const weeks = [];
+    let currentWeek = [];
+    days.forEach((date) => {
+      currentWeek.push(date);
+      if (currentWeek.length === 7) {
+        weeks.push(currentWeek);
+        currentWeek = [];
+      }
+    });
+    if (currentWeek.length > 0) {
+      weeks.push(currentWeek);
+    }
+    return html`
+      <div class="calendar-month">
+        <div class="calendar-grid">
+          <table class="calendar-table">
+            <thead>
+              <tr>
+                ${this.showWeekNumbers ? html`<th class="weeknumber" part="weeknumber-header"></th>` : nothing}
+                ${repeat(
+      weekDays,
+      (day) => day,
+      (day) => html`<th part="weekday">${day}</th>`
+    )}
+              </tr>
+            </thead>
+            <tbody>
+              ${repeat(
+      weeks,
+      (week) => week[0] ? utcFormat(week[0]) : String(Math.random()),
+      (week) => {
+        var _a;
+        return html`
+                  <tr>
+                    ${this.showWeekNumbers ? html`
+                            <td class="weeknumber" part="weeknumber">
+                              ${((_a = week.find((d) => d)) == null ? void 0 : _a.getUTCDate()) ? (
+          /* biome-ignore lint/style/noNonNullAssertion: We know that at least one date exists in the week */
+          this.weekNumberFormatter(this.getWeekNumber(week.find((d) => d)))
+        ) : ""}
+                            </td>
+                          ` : nothing}
+                    ${repeat(
+          week,
+          (date) => date ? utcFormat(date) : String(Math.random()),
+          (date) => {
+            var _a2;
+            return date ? html`
+                              <td>
+                                <button
+                                  class=${classMap({
+              outside: this.isDateOutsideMonth(date, month),
+              disabled: this.isDateDisabled(date),
+              selected: this.isDateSelected(date),
+              "in-range": this.isDateInRange(date),
+              today: this.isDateToday(date),
+              "range-start": this.isRangeStart(date),
+              "range-end": this.isRangeEnd(date)
+            })}
+                                  part=${[
+              "day",
+              this.isDateToday(date) ? "today" : "",
+              this.isDateSelected(date) ? "selected" : "",
+              this.isRangeStart(date) ? "range-start" : "",
+              this.isRangeEnd(date) ? "range-end" : "",
+              this.isDateInRange(date) ? "in-range" : "",
+              this.isDateOutsideMonth(date, month) ? "outside" : "",
+              this.isDateDisabled(date) ? "disabled" : "",
+              ((_a2 = this.isDateDisallowed) == null ? void 0 : _a2.call(this, date)) ? "disallowed" : ""
+            ].filter(Boolean).join(" ")}
+                                  ?disabled=${this.isDateDisabled(date)}
+                                  ?aria-disabled=${this.isDateDisabled(date) ? "true" : void 0}
+                                  ?aria-pressed=${this.isDateSelected(date) ? "true" : void 0}
+                                  aria-current=${this.isDateToday(date) ? "date" : void 0}
+                                  aria-label=${`${this.localizedMonthNames[date.getUTCMonth()]} ${date.getUTCDate()}`}
+                                  tabindex=${this.focusedDate && this.isSameDay(date, this.focusedDate) ? 0 : -1}
+                                  @click=${() => this.handleDateClick(date)}
+                                  @keydown=${(e) => this.handleKeyDown(e, date)}
+                                  @mouseenter=${() => this.handleDateHover(date)}
+                                  @mouseleave=${() => this.handleDateLeave()}
+                                >
+                                  ${date.getUTCDate()}
+                                </button>
+                              </td>
+                            ` : html`<td></td>`;
+          }
+        )}
+                  </tr>
+                `;
+      }
+    )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    `;
+  }
+  handleMonthYearClick() {
+    if (this.captionLayout === "none") return;
+    this.viewMode = "month";
+  }
+  handleYearClick() {
+    if (this.captionLayout === "none") return;
+    this.viewMode = "year";
+  }
+  // Modified handlers to accept a date if coming from a specific month's header
+  handleMonthSelect(month) {
+    this.currentDate = utcParse({ year: this.currentDate.getUTCFullYear(), month, day: 1 });
+    this.viewMode = "calendar";
+  }
+  // Modified handlers to accept a date if coming from a specific month's header
+  handleYearSelect(year) {
+    this.currentDate = utcParse({ year, month: this.currentDate.getUTCMonth(), day: 1 });
+    this.viewMode = "calendar";
+  }
+  handlePreviousYear() {
+    this.currentDate = utcParse({
+      year: this.currentDate.getUTCFullYear() - 1,
+      month: this.currentDate.getUTCMonth(),
+      day: 1
+    });
+  }
+  handleNextYear() {
+    this.currentDate = utcParse({
+      year: this.currentDate.getUTCFullYear() + 1,
+      month: this.currentDate.getUTCMonth(),
+      day: 1
+    });
+  }
+  handlePreviousYearRange() {
+    const currentYear = this.currentDate.getUTCFullYear();
+    this.currentDate = utcParse({ year: currentYear - 12, month: this.currentDate.getUTCMonth(), day: 1 });
+  }
+  handleNextYearRange() {
+    const currentYear = this.currentDate.getUTCFullYear();
+    this.currentDate = utcParse({ year: currentYear + 12, month: this.currentDate.getUTCMonth(), day: 1 });
+  }
+  /**
+   * Renders the calendar component
+   * @returns The rendered calendar template
+   */
+  render() {
+    switch (this.viewMode) {
+      case "month":
+        return this.renderMonthSelection();
+      case "year":
+        return this.renderYearSelection();
+      default:
+        return this.renderCalendarView();
+    }
+  }
+  renderMonthSelection() {
+    const months = this.localizedMonthNames;
+    const currentMonth = this.currentDate.getUTCMonth();
+    const currentYear = this.currentDate.getUTCFullYear();
+    return html`
+      <div class="month-selection">
+        <div class="header">
+          <span class="current-year">${currentYear}</span>
+          <div class="navigation">
+            <button @click=${() => this.handlePreviousYear()}>
+              <lynk-icon name="chevron-left" library="system"></lynk-icon>
+            </button>
+            <button @click=${() => this.handleNextYear()}>
+              <lynk-icon name="chevron-right" library="system"></lynk-icon>
+            </button>
+          </div>
+        </div>
+        <div class="months-grid">
+          ${months.map(
+      (m, index) => html`
+              <button
+                class=${classMap({
+        "month-button": true,
+        selected: index === currentMonth
+      })}
+                @click=${() => this.handleMonthSelect(index)}
+              >
+                ${m}
+              </button>
+            `
+    )}
+        </div>
+      </div>
+    `;
+  }
+  renderYearSelection() {
+    const currentYear = this.currentDate.getUTCFullYear();
+    const startYear = currentYear - 5;
+    const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+    return html`
+      <div class="year-selection">
+        <div class="header">
+          <span class="year-range">${startYear}-${startYear + 11}</span>
+          <div class="navigation">
+            <button @click=${() => this.handlePreviousYearRange()}>
+              <lynk-icon name="chevron-left" library="system"></lynk-icon>
+            </button>
+            <button @click=${() => this.handleNextYearRange()}>
+              <lynk-icon name="chevron-right" library="system"></lynk-icon>
+            </button>
+          </div>
+        </div>
+        <div class="years-grid">
+          ${years.map(
+      (year) => html`
+              <button
+                class=${classMap({
+        "year-button": true,
+        selected: year === currentYear
+      })}
+                @click=${() => this.handleYearSelect(year)}
+              >
+                ${year}
+              </button>
+            `
+    )}
+        </div>
+      </div>
+    `;
+  }
+  renderCalendarView() {
+    const year = this.currentDate.getUTCFullYear();
+    const month = this.currentDate.getUTCMonth();
+    const monthsArray = Array.from({ length: this.months }, (_, i) => utcParse({ year, month: month + i, day: 1 }));
+    let mainHeaderCenterContent;
+    if (this.months === 1) {
+      switch (this.captionLayout) {
+        case "buttons":
+          mainHeaderCenterContent = html`
+            <div class="calendar-heading">
+              <button @click=${this.handleMonthYearClick}>${this.localizedMonthNames[month]}</button>
+              <button @click=${this.handleYearClick}>${year}</button>
+            </div>
+          `;
+          break;
+        case "dropdown":
+          mainHeaderCenterContent = html`
+            <div class="calendar-heading">
+              <select @change=${(e) => this.handleMonthSelect(Number(e.target.value))}>
+                ${this.localizedMonthNames.map(
+            (name, index) => html`<option value=${index} ?selected=${index === month}>${name}</option>`
+          )}
+              </select>
+              <select @change=${(e) => this.handleYearSelect(Number(e.target.value))}>
+                ${Array.from({ length: 12 }, (_, i) => year - 5 + i).map(
+            (y) => html`<option value=${y} ?selected=${y === year}>${y}</option>`
+          )}
+              </select>
+            </div>
+          `;
+          break;
+        default:
+          mainHeaderCenterContent = html`
+            <div class="calendar-heading">${this.localizedMonthNames[month]} ${year}</div>
+          `;
+      }
+    } else {
+      const firstMonthDisplayed = monthsArray[0];
+      const lastMonthDisplayed = monthsArray[monthsArray.length - 1];
+      mainHeaderCenterContent = html`
+        <div part="heading" class="calendar-heading main-heading">
+          ${this.localizedMonthNames[firstMonthDisplayed.getUTCMonth()]} ${firstMonthDisplayed.getUTCFullYear()} –
+          ${this.localizedMonthNames[lastMonthDisplayed.getUTCMonth()]} ${lastMonthDisplayed.getUTCFullYear()}
+        </div>
+      `;
+    }
+    return html`
+      <div class="calendar">
+        <div class="calendar-header">
+          ${!this.disableNavigation ? html`
+                  <button
+                    part="button previous"
+                    class="navigation-button"
+                    @click=${this.handlePreviousMonth}
+                    aria-label="Previous month"
+                  >
+                    <lynk-icon name="chevron-left" library="system"></lynk-icon>
+                  </button>
+                ` : nothing}
+          ${mainHeaderCenterContent}
+          ${!this.disableNavigation ? html`
+                  <button
+                    part="button next"
+                    class="navigation-button"
+                    @click=${this.handleNextMonth}
+                    aria-label="Next month"
+                  >
+                    <lynk-icon name="chevron-right" library="system"></lynk-icon>
+                  </button>
+                ` : nothing}
+        </div>
+        <div class="calendar-months-row" style="display: flex; gap: 2em;">
+          ${monthsArray.map(
+      (date) => html`
+              <div class="calendar-month-container">${this.renderMonth(date.getUTCFullYear(), date.getUTCMonth())}</div>
+            `
+    )}
+        </div>
+      </div>
+    `;
+  }
+};
+LynkCalendar.styles = [component_styles_default, calendar_styles_default];
+__decorateClass([
+  state()
+], LynkCalendar.prototype, "currentDate", 2);
+__decorateClass([
+  state()
+], LynkCalendar.prototype, "focusedDate", 2);
+__decorateClass([
+  state()
+], LynkCalendar.prototype, "localeFormatter", 2);
+__decorateClass([
+  state()
+], LynkCalendar.prototype, "hoverDate", 2);
+__decorateClass([
+  state()
+], LynkCalendar.prototype, "viewMode", 2);
+__decorateClass([
+  property({ reflect: true })
+], LynkCalendar.prototype, "type", 2);
+__decorateClass([
+  property()
+], LynkCalendar.prototype, "value", 1);
+__decorateClass([
+  property({ type: Number })
+], LynkCalendar.prototype, "months", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-outside-days" })
+], LynkCalendar.prototype, "showOutsideDays", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-week-numbers" })
+], LynkCalendar.prototype, "showWeekNumbers", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "disable-navigation" })
+], LynkCalendar.prototype, "disableNavigation", 2);
+__decorateClass([
+  property({ type: Number, attribute: "first-day-of-week" })
+], LynkCalendar.prototype, "firstDayOfWeek", 2);
+__decorateClass([
+  property()
+], LynkCalendar.prototype, "min", 2);
+__decorateClass([
+  property()
+], LynkCalendar.prototype, "max", 2);
+__decorateClass([
+  property()
+], LynkCalendar.prototype, "locale", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkCalendar.prototype, "readonly", 2);
+__decorateClass([
+  property({ attribute: false })
+], LynkCalendar.prototype, "isDateDisallowed", 2);
+__decorateClass([
+  property({ attribute: false })
+], LynkCalendar.prototype, "weekNumberFormatter", 2);
+__decorateClass([
+  property({ attribute: "caption-layout" })
+], LynkCalendar.prototype, "captionLayout", 2);
+
+export {
+  LynkCalendar
+};