@api-client/ui 0.5.5 → 0.5.6

package/src/md/date-picker/internals/DatePickerCalendar.ts

@@ -0,0 +1,697 @@
+import { LitElement, html, TemplateResult, nothing } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import { calendarStyles } from './DatePicker.styles.js'
+import {
+  CalendarMonth,
+  CalendarDay,
+  DateRange,
+  generateCalendarMonth,
+  addMonths,
+  getMonthNames,
+  isSameDay,
+  formatDate,
+} from './DatePickerUtils.js'
+import '../../../md/icons/ui-icon.js'
+import '../../../md/button/ui-button.js'
+import '../../../md/icon-button/ui-icon-button.js'
+
+export interface DateSelectEvent {
+  date: Date
+  formattedDate: string
+}
+
+export interface DateRangeSelectEvent {
+  range: DateRange
+  formattedRange: {
+    start: string | null
+    end: string | null
+  }
+}
+
+export interface DateRangeConfirmEvent {
+  range: DateRange | null
+  formattedRange: {
+    start: string | null
+    end: string | null
+  }
+}
+
+export interface DateCancelEvent {
+  reason?: string
+}
+
+/**
+ * A calendar grid component for date selection.
+ * Supports single date selection and date range selection.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <ui-date-picker-calendar></ui-date-picker-calendar>
+ * ```
+ *
+ * ### Single date selection
+ * ```html
+ * <ui-date-picker-calendar
+ *   .selectedDate=${new Date()}
+ *   @date-select=${this.handleDateSelect}
+ * ></ui-date-picker-calendar>
+ * ```
+ *
+ * ### Date range selection
+ * ```html
+ * <ui-date-picker-calendar
+ *   .rangeSelection=${true}
+ *   .selectedRange=${{ start: new Date(), end: null }}
+ *   @date-range-select=${this.handleRangeSelect}
+ * ></ui-date-picker-calendar>
+ * ```
+ */
+@customElement('ui-date-picker-calendar')
+export class UiDatePickerCalendar extends LitElement {
+  static override styles = calendarStyles
+
+  /**
+   * The currently displayed year
+   */
+  @property({ type: Number }) accessor year = new Date().getFullYear()
+
+  /**
+   * The currently displayed month (0-indexed)
+   */
+  @property({ type: Number }) accessor month = new Date().getMonth()
+
+  /**
+   * The currently selected date for single selection mode
+   */
+  @property({ type: Object }) accessor selectedDate: Date | null = null
+
+  /**
+   * The selected date range for range selection mode
+   */
+  @property({ type: Object }) accessor selectedRange: DateRange | null = null
+
+  /**
+   * Enable range selection mode
+   */
+  @property({ type: Boolean }) accessor rangeSelection = false
+
+  /**
+   * Minimum selectable date
+   */
+  @property({ type: Object }) accessor minDate: Date | undefined = undefined
+
+  /**
+   * Maximum selectable date
+   */
+  @property({ type: Object }) accessor maxDate: Date | undefined = undefined
+
+  /**
+   * Array of disabled dates
+   */
+  @property({ type: Array }) accessor disabledDates: Date[] | undefined = undefined
+
+  /**
+   * Locale for date formatting and month/day names
+   */
+  @property({ type: String }) accessor locale: string | undefined = undefined
+
+  /**
+   * Whether to show navigation controls
+   */
+  @property({ type: Boolean }) accessor showNavigation = true
+
+  /**
+   * Whether to show action buttons (OK/Cancel)
+   */
+  @property({ type: Boolean }) accessor showActions = false
+
+  /**
+   * Text for the OK button
+   */
+  @property({ type: String }) accessor okButtonText = 'OK'
+
+  /**
+   * Text for the Cancel button
+   */
+  @property({ type: String }) accessor cancelButtonText = 'Cancel'
+
+  @state() private accessor _calendarData: CalendarMonth | undefined = undefined
+
+  @state() private accessor _rangeStart: Date | undefined = undefined
+
+  @state() private accessor _monthNames: string[] = []
+
+  @state() private accessor _showMonthDropdown = false
+
+  @state() private accessor _showYearDropdown = false
+
+  @state() private accessor _pendingDate: Date | null = null
+
+  @state() private accessor _pendingRange: DateRange | null = null
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this._updateCalendar()
+    this._updateMonthNames()
+    document.addEventListener('keydown', this._handleDocumentKeyDown.bind(this))
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+    document.removeEventListener('keydown', this._handleDocumentKeyDown.bind(this))
+  }
+
+  override updated(changedProperties: Map<string | number | symbol, unknown>): void {
+    if (changedProperties.has('_showYearDropdown') && this._showYearDropdown) {
+      // Scroll selected year into view
+      this._scrollSelectedYearIntoView()
+    }
+  }
+
+  private _scrollSelectedYearIntoView(): void {
+    // Wait for next frame to ensure DOM is updated
+    requestAnimationFrame(() => {
+      const selectedYearButton = this.shadowRoot?.querySelector('.year-option.selected') as HTMLElement
+      if (selectedYearButton) {
+        selectedYearButton.scrollIntoView({
+          behavior: 'auto',
+          block: 'center',
+        })
+      }
+    })
+  }
+
+  override willUpdate(changedProperties: Map<string | number | symbol, unknown>): void {
+    if (
+      changedProperties.has('year') ||
+      changedProperties.has('month') ||
+      changedProperties.has('selectedDate') ||
+      changedProperties.has('selectedRange') ||
+      changedProperties.has('disabledDates') ||
+      changedProperties.has('locale')
+    ) {
+      this._updateCalendar()
+    }
+
+    if (changedProperties.has('locale')) {
+      this._updateMonthNames()
+    }
+  }
+
+  private _updateCalendar(): void {
+    this._calendarData = generateCalendarMonth(
+      this.year,
+      this.month,
+      this.selectedDate,
+      this.selectedRange,
+      this.disabledDates,
+      this.locale
+    )
+  }
+
+  private _updateMonthNames(): void {
+    this._monthNames = getMonthNames(this.locale)
+  }
+
+  private _navigateMonth(delta: number): void {
+    const newDate = addMonths(new Date(this.year, this.month), delta)
+    this.year = newDate.getFullYear()
+    this.month = newDate.getMonth()
+  }
+
+  private _handlePrevMonth(): void {
+    this._navigateMonth(-1)
+  }
+
+  private _handleNextMonth(): void {
+    this._navigateMonth(1)
+  }
+
+  private _handlePrevYear(): void {
+    this.year = this.year - 1
+  }
+
+  private _handleNextYear(): void {
+    this.year = this.year + 1
+  }
+
+  private _handleMonthClick(): void {
+    this._showMonthDropdown = !this._showMonthDropdown
+    this._showYearDropdown = false
+  }
+
+  private _handleYearClick(): void {
+    this._showYearDropdown = !this._showYearDropdown
+    this._showMonthDropdown = false
+  }
+
+  private _handleMonthSelect(selectedMonth: number): void {
+    this.month = selectedMonth
+    this._showMonthDropdown = false
+  }
+
+  private _handleYearSelect(selectedYear: number): void {
+    this.year = selectedYear
+    this._showYearDropdown = false
+  }
+
+  private _closeDropdowns(): void {
+    this._showMonthDropdown = false
+    this._showYearDropdown = false
+  }
+
+  private _handleDocumentKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this._closeDropdowns()
+    }
+  }
+
+  private _handleDayClick(day: CalendarDay): void {
+    if (day.isDisabled) return
+
+    if (this.rangeSelection) {
+      this._handleRangeSelection(day.date)
+    } else {
+      this._handleSingleSelection(day.date)
+    }
+  }
+
+  private _handleSingleSelection(date: Date): void {
+    if (this.showActions) {
+      // Use pending state when actions are enabled
+      this._pendingDate = date
+    } else {
+      // Immediate selection when no actions
+      this.selectedDate = date
+
+      const event: DateSelectEvent = {
+        date,
+        formattedDate: formatDate(date, this.locale),
+      }
+
+      this.dispatchEvent(
+        new CustomEvent('date-select', {
+          detail: event,
+          bubbles: true,
+          composed: true,
+        })
+      )
+    }
+  }
+
+  private _handleRangeSelection(date: Date): void {
+    if (!this._rangeStart || (this.selectedRange?.start && this.selectedRange?.end)) {
+      // Start new range
+      this._rangeStart = date
+      const newRange = { start: date, end: null }
+
+      if (this.showActions) {
+        // Use pending state when actions are enabled
+        this._pendingRange = newRange
+      } else {
+        this.selectedRange = newRange
+      }
+    } else {
+      // Complete range
+      const start = this._rangeStart
+      const end = date
+
+      // Ensure start is before end
+      const sortedRange: DateRange = start <= end ? { start, end } : { start: end, end: start }
+
+      this._rangeStart = undefined
+
+      if (this.showActions) {
+        // Use pending state when actions are enabled
+        this._pendingRange = sortedRange
+      } else {
+        // Immediate selection when no actions
+        this.selectedRange = sortedRange
+
+        const event: DateRangeSelectEvent = {
+          range: sortedRange,
+          formattedRange: {
+            start: sortedRange.start ? formatDate(sortedRange.start, this.locale) : null,
+            end: sortedRange.end ? formatDate(sortedRange.end, this.locale) : null,
+          },
+        }
+
+        this.dispatchEvent(
+          new CustomEvent('date-range-select', {
+            detail: event,
+            bubbles: true,
+            composed: true,
+          })
+        )
+      }
+    }
+  }
+
+  private _isDateDisabled(date: Date): boolean {
+    if (this.minDate && date < this.minDate) return true
+    if (this.maxDate && date > this.maxDate) return true
+    if (this.disabledDates?.some((disabledDate) => isSameDay(date, disabledDate))) return true
+    return false
+  }
+
+  private _handleConfirm(): void {
+    if (this.rangeSelection) {
+      if (this._pendingRange) {
+        this.selectedRange = this._pendingRange
+
+        const event: DateRangeConfirmEvent = {
+          range: this._pendingRange,
+          formattedRange: {
+            start: this._pendingRange.start ? formatDate(this._pendingRange.start, this.locale) : null,
+            end: this._pendingRange.end ? formatDate(this._pendingRange.end, this.locale) : null,
+          },
+        }
+
+        this.dispatchEvent(
+          new CustomEvent('date-range-confirm', {
+            detail: event,
+            bubbles: true,
+            composed: true,
+          })
+        )
+      }
+    } else {
+      if (this._pendingDate) {
+        this.selectedDate = this._pendingDate
+
+        const event: DateSelectEvent = {
+          date: this._pendingDate,
+          formattedDate: formatDate(this._pendingDate, this.locale),
+        }
+
+        this.dispatchEvent(
+          new CustomEvent('date-select', {
+            detail: event,
+            bubbles: true,
+            composed: true,
+          })
+        )
+      }
+    }
+  }
+
+  private _handleCancel(): void {
+    // Reset pending state
+    this._pendingDate = null
+    this._pendingRange = null
+    this._rangeStart = undefined
+
+    const event: DateCancelEvent = {
+      reason: 'user_cancelled',
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('date-cancel', {
+        detail: event,
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  private _renderNavigation(): TemplateResult {
+    const monthName = this._monthNames[this.month] || ''
+
+    return html`
+      <div class="header">
+        <div class="month-year">
+          <div class="month-selector">
+            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
+              ? html`
+                  <ui-icon-button
+                    class="nav-button month-nav"
+                    size="xs"
+                    @click=${this._handlePrevMonth}
+                    aria-label="Previous month"
+                    title="Previous month"
+                  >
+                    <ui-icon icon="chevronLeft"></ui-icon>
+                  </ui-icon-button>
+                `
+              : ''}
+            <ui-button
+              class="month-button"
+              color="text"
+              size="xs"
+              @click=${this._handleMonthClick}
+              aria-label="Select month"
+              aria-expanded=${this._showMonthDropdown}
+              trailingIcon
+            >
+              ${monthName}
+              <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
+            </ui-button>
+            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
+              ? html`
+                  <ui-icon-button
+                    class="nav-button month-nav"
+                    size="xs"
+                    @click=${this._handleNextMonth}
+                    aria-label="Next month"
+                    title="Next month"
+                  >
+                    <ui-icon icon="chevronRight"></ui-icon>
+                  </ui-icon-button>
+                `
+              : ''}
+          </div>
+          <div class="year-selector">
+            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
+              ? html`
+                  <ui-icon-button
+                    class="nav-button year-nav"
+                    size="xs"
+                    @click=${this._handlePrevYear}
+                    aria-label="Previous year"
+                    title="Previous year"
+                  >
+                    <ui-icon icon="chevronLeft"></ui-icon>
+                  </ui-icon-button>
+                `
+              : ''}
+            <ui-button
+              class="year-button"
+              color="text"
+              size="xs"
+              @click=${this._handleYearClick}
+              aria-label="Select year"
+              aria-expanded=${this._showYearDropdown}
+              trailingIcon
+            >
+              ${this.year}
+              <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
+            </ui-button>
+            ${this.showNavigation && !this._showMonthDropdown && !this._showYearDropdown
+              ? html`
+                  <ui-icon-button
+                    class="nav-button year-nav"
+                    size="xs"
+                    @click=${this._handleNextYear}
+                    aria-label="Next year"
+                    title="Next year"
+                  >
+                    <ui-icon icon="chevronRight"></ui-icon>
+                  </ui-icon-button>
+                `
+              : ''}
+          </div>
+        </div>
+      </div>
+    `
+  }
+
+  private _renderWeekdays(): TemplateResult {
+    if (!this._calendarData) return html``
+
+    return html`
+      <div class="weekdays">
+        ${this._calendarData.weekdays.map((weekday) => html`<div class="weekday">${weekday}</div>`)}
+      </div>
+    `
+  }
+
+  private _renderDay(day: CalendarDay): TemplateResult {
+    const isPendingSelected = this.showActions && this._pendingDate && isSameDay(day.date, this._pendingDate)
+    const isPendingRangeStart =
+      this.showActions && this._pendingRange?.start && isSameDay(day.date, this._pendingRange.start)
+    const isPendingRangeEnd = this.showActions && this._pendingRange?.end && isSameDay(day.date, this._pendingRange.end)
+    const isPendingInRange =
+      this.showActions &&
+      this._pendingRange?.start &&
+      this._pendingRange?.end &&
+      day.date >= this._pendingRange.start &&
+      day.date <= this._pendingRange.end &&
+      !isPendingRangeStart &&
+      !isPendingRangeEnd
+
+    // Determine button color based on selection state
+    let color: 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal' = 'text'
+
+    if (this.showActions) {
+      if (isPendingRangeStart || isPendingRangeEnd || isPendingSelected) {
+        color = 'filled'
+      } else if (isPendingInRange) {
+        color = 'text'
+      }
+    } else {
+      if (day.isRangeStart || day.isRangeEnd || day.isSelected) {
+        color = 'filled'
+      } else if (day.isInRange) {
+        color = 'text'
+      }
+    }
+
+    if (day.isToday && color === 'text') {
+      color = 'outlined'
+    }
+
+    const classes = {
+      'day-cell': true,
+      'other-month': !day.isCurrentMonth,
+      'today': day.isToday,
+      'in-range': this.showActions ? !!isPendingInRange : day.isInRange,
+      'range-start': this.showActions ? !!isPendingRangeStart : day.isRangeStart,
+      'range-end': this.showActions ? !!isPendingRangeEnd : day.isRangeEnd,
+      'has-complete-range': this.showActions
+        ? !!(this._pendingRange?.start && this._pendingRange?.end)
+        : !!(this.selectedRange?.start && this.selectedRange?.end),
+    }
+
+    return html`
+      <div class=${classMap(classes)}>
+        <ui-button
+          class="day-button"
+          color=${color}
+          size="s"
+          data-date=${day.date.toISOString().split('T')[0]}
+          tabindex=${day.isToday && !(day.isDisabled || this._isDateDisabled(day.date)) ? '0' : '-1'}
+          aria-label=${formatDate(day.date, this.locale)}
+          @click=${() => this._handleDayClick(day)}
+          ?disabled=${day.isDisabled || this._isDateDisabled(day.date)}
+        >
+          ${day.date.getDate()}
+        </ui-button>
+      </div>
+    `
+  }
+
+  private _renderDays(): TemplateResult {
+    if (!this._calendarData) return html``
+
+    return html`<div class="days">${this._calendarData.days.map((day) => this._renderDay(day))}</div>`
+  }
+
+  private _renderActions(): TemplateResult | typeof nothing {
+    if (!this.showActions) return nothing
+
+    const hasSelection = this.rangeSelection ? this._pendingRange?.start : this._pendingDate
+
+    return html`
+      <div class="actions">
+        <ui-button size="s" color="text" @click=${this._handleCancel}>${this.cancelButtonText}</ui-button>
+        <ui-button size="s" color="text" @click=${this._handleConfirm} ?disabled=${!hasSelection}>
+          ${this.okButtonText}
+        </ui-button>
+      </div>
+    `
+  }
+
+  private _renderMonthDropdown(): TemplateResult {
+    return html`
+      <div class="dropdown-view">
+        <div class="month-list">
+          ${this._monthNames.map(
+            (monthName, index) => html`
+              <ui-button
+                class="month-option ${index === this.month ? 'selected' : ''}"
+                color=${index === this.month ? 'filled' : 'text'}
+                size="s"
+                @click=${() => this._handleMonthSelect(index)}
+                aria-label=${monthName}
+              >
+                ${monthName}
+              </ui-button>
+            `
+          )}
+        </div>
+      </div>
+    `
+  }
+
+  private _renderYearDropdown(): TemplateResult {
+    const currentYear = this.year
+    const startYear = currentYear - 50
+    const endYear = currentYear + 50
+    const years: number[] = []
+
+    for (let year = startYear; year <= endYear; year++) {
+      years.push(year)
+    }
+
+    return html`
+      <div class="dropdown-view">
+        <div class="year-grid">
+          ${years.map(
+            (year) => html`
+              <ui-button
+                class="year-option ${year === this.year ? 'selected' : ''}"
+                color=${year === this.year ? 'filled' : 'text'}
+                size="s"
+                @click=${() => this._handleYearSelect(year)}
+                aria-label=${year.toString()}
+              >
+                ${year}
+              </ui-button>
+            `
+          )}
+        </div>
+      </div>
+    `
+  }
+
+  override render(): TemplateResult {
+    // Show dropdown views instead of calendar when dropdowns are open
+    if (this._showMonthDropdown) {
+      return html`
+        <div class="calendar" role="grid" aria-label="Calendar">
+          ${this._renderNavigation()} ${this._renderMonthDropdown()}
+        </div>
+      `
+    }
+
+    if (this._showYearDropdown) {
+      return html`
+        <div class="calendar" role="grid" aria-label="Calendar">
+          ${this._renderNavigation()} ${this._renderYearDropdown()}
+        </div>
+      `
+    }
+
+    // Default calendar view
+    return html`
+      <div class="calendar" role="grid" aria-label="Calendar">
+        ${this._renderNavigation()} ${this._renderWeekdays()} ${this._renderDays()} ${this._renderActions()}
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-date-picker-calendar': UiDatePickerCalendar
+  }
+
+  interface HTMLElementEventMap {
+    'date-select': CustomEvent<DateSelectEvent>
+    'date-range-select': CustomEvent<DateRangeSelectEvent>
+    'date-range-confirm': CustomEvent<DateRangeConfirmEvent>
+    'date-cancel': CustomEvent<DateCancelEvent>
+  }
+}