@api-client/ui 0.5.5 → 0.5.7

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

@@ -0,0 +1,288 @@
+export interface DateRange {
+  start: Date | null
+  end: Date | null
+}
+
+export interface CalendarDay {
+  date: Date
+  isCurrentMonth: boolean
+  isToday: boolean
+  isSelected: boolean
+  isInRange: boolean
+  isRangeStart: boolean
+  isRangeEnd: boolean
+  isDisabled: boolean
+}
+
+export interface CalendarMonth {
+  year: number
+  month: number // 0-indexed (0 = January)
+  days: CalendarDay[]
+  weekdays: string[]
+}
+
+/**
+ * Get the current date with time set to midnight
+ */
+export function today(): Date {
+  const now = new Date()
+  return new Date(now.getFullYear(), now.getMonth(), now.getDate())
+}
+
+/**
+ * Create a new date with time set to midnight
+ */
+export function normalizeDate(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate())
+}
+
+/**
+ * Check if two dates are the same day
+ */
+export function isSameDay(date1: Date, date2: Date): boolean {
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  )
+}
+
+/**
+ * Check if a date is between two other dates (inclusive)
+ */
+export function isBetween(date: Date, start: Date, end: Date): boolean {
+  const normalizedDate = normalizeDate(date)
+  const normalizedStart = normalizeDate(start)
+  const normalizedEnd = normalizeDate(end)
+  return normalizedDate >= normalizedStart && normalizedDate <= normalizedEnd
+}
+
+/**
+ * Add months to a date
+ */
+export function addMonths(date: Date, months: number): Date {
+  const result = new Date(date)
+  result.setMonth(result.getMonth() + months)
+  return result
+}
+
+/**
+ * Add days to a date
+ */
+export function addDays(date: Date, days: number): Date {
+  const result = new Date(date)
+  result.setDate(result.getDate() + days)
+  return result
+}
+
+/**
+ * Get the first day of the month
+ */
+export function getFirstDayOfMonth(year: number, month: number): Date {
+  return new Date(year, month, 1)
+}
+
+/**
+ * Get the last day of the month
+ */
+export function getLastDayOfMonth(year: number, month: number): Date {
+  return new Date(year, month + 1, 0)
+}
+
+/**
+ * Get the number of days in a month
+ */
+export function getDaysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+/**
+ * Get weekday names for the current locale
+ */
+export function getWeekdayNames(locale?: string): string[] {
+  const formatter = new Intl.DateTimeFormat(locale, { weekday: 'short' })
+  const days: string[] = []
+
+  // Start from Sunday and get all 7 days
+  const date = new Date(2024, 0, 7) // January 7, 2024 is a Sunday
+  for (let i = 0; i < 7; i++) {
+    days.push(formatter.format(new Date(date.getTime() + i * 24 * 60 * 60 * 1000)))
+  }
+
+  return days
+}
+
+/**
+ * Get month names for the current locale
+ */
+export function getMonthNames(locale?: string): string[] {
+  const formatter = new Intl.DateTimeFormat(locale, { month: 'short' })
+  const months: string[] = []
+
+  for (let i = 0; i < 12; i++) {
+    months.push(formatter.format(new Date(2024, i, 1)))
+  }
+
+  return months
+}
+
+/**
+ * Format a date according to locale
+ */
+export function formatDate(date: Date, locale?: string, options?: Intl.DateTimeFormatOptions): string {
+  const defaultOptions: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  }
+
+  return new Intl.DateTimeFormat(locale, { ...defaultOptions, ...options }).format(date)
+}
+
+/**
+ * Parse a date string in various formats
+ */
+export function parseDate(dateString: string): Date | null {
+  if (!dateString) return null
+
+  // Try ISO format first
+  const isoDate = new Date(dateString)
+  if (!isNaN(isoDate.getTime())) {
+    return normalizeDate(isoDate)
+  }
+
+  // Try other common formats
+  const formats = [
+    /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/, // MM/DD/YYYY or M/D/YYYY
+    /^(\d{1,2})-(\d{1,2})-(\d{4})$/, // MM-DD-YYYY or M-D-YYYY
+    /^(\d{4})-(\d{1,2})-(\d{1,2})$/, // YYYY-MM-DD or YYYY-M-D
+  ]
+
+  for (const format of formats) {
+    const match = dateString.match(format)
+    if (match) {
+      const [, part1, part2, part3] = match
+      let year: number, month: number, day: number
+
+      if (format === formats[2]) {
+        // YYYY-MM-DD
+        year = parseInt(part1, 10)
+        month = parseInt(part2, 10) - 1 // Convert to 0-indexed
+        day = parseInt(part3, 10)
+      } else {
+        // MM/DD/YYYY or MM-DD-YYYY
+        year = parseInt(part3, 10)
+        month = parseInt(part1, 10) - 1 // Convert to 0-indexed
+        day = parseInt(part2, 10)
+      }
+
+      const date = new Date(year, month, day)
+      if (!isNaN(date.getTime())) {
+        return date
+      }
+    }
+  }
+
+  return null
+}
+
+/**
+ * Generate calendar data for a specific month
+ */
+export function generateCalendarMonth(
+  year: number,
+  month: number,
+  selectedDate?: Date | null,
+  selectedRange?: DateRange | null,
+  disabledDates?: Date[],
+  locale?: string
+): CalendarMonth {
+  const firstDay = getFirstDayOfMonth(year, month)
+  const todayDate = today()
+
+  // Get the first day of the week (0 = Sunday, 1 = Monday)
+  const firstDayOfWeek = firstDay.getDay()
+
+  // Calculate start date (might be from previous month)
+  const startDate = addDays(firstDay, -firstDayOfWeek)
+
+  // Calculate end date (might be from next month)
+  const daysToShow = 42 // 6 weeks * 7 days
+  const endDate = addDays(startDate, daysToShow - 1)
+
+  const days: CalendarDay[] = []
+  const currentDate = new Date(startDate)
+
+  while (currentDate <= endDate) {
+    const isCurrentMonth = currentDate.getMonth() === month
+    const isToday = isSameDay(currentDate, todayDate)
+    const isSelected = selectedDate ? isSameDay(currentDate, selectedDate) : false
+
+    let isInRange = false
+    let isRangeStart = false
+    let isRangeEnd = false
+
+    if (selectedRange?.start && selectedRange?.end) {
+      isRangeStart = isSameDay(currentDate, selectedRange.start)
+      isRangeEnd = isSameDay(currentDate, selectedRange.end)
+      isInRange = isBetween(currentDate, selectedRange.start, selectedRange.end)
+    }
+
+    const isDisabled = disabledDates?.some((disabledDate) => isSameDay(currentDate, disabledDate)) || false
+
+    days.push({
+      date: new Date(currentDate),
+      isCurrentMonth,
+      isToday,
+      isSelected,
+      isInRange,
+      isRangeStart,
+      isRangeEnd,
+      isDisabled,
+    })
+
+    currentDate.setDate(currentDate.getDate() + 1)
+  }
+
+  return {
+    year,
+    month,
+    days,
+    weekdays: getWeekdayNames(locale),
+  }
+}
+
+/**
+ * Get the ISO string for a date (YYYY-MM-DD format)
+ */
+export function toISODateString(date: Date): string {
+  return date.toISOString().split('T')[0]
+}
+
+/**
+ * Create a date from ISO string (YYYY-MM-DD format)
+ */
+export function fromISODateString(isoString: string): Date | null {
+  const match = isoString.match(/^(\d{4})-(\d{2})-(\d{2})$/)
+  if (!match) return null
+
+  const [, year, month, day] = match
+  return new Date(parseInt(year, 10), parseInt(month, 10) - 1, parseInt(day, 10))
+}
+
+/**
+ * Validate if a date range is valid (start <= end)
+ */
+export function isValidRange(range: DateRange): boolean {
+  if (!range.start || !range.end) return true
+  return range.start <= range.end
+}
+
+/**
+ * Get the number of days between two dates
+ */
+export function getDaysBetween(start: Date, end: Date): number {
+  const startTime = normalizeDate(start).getTime()
+  const endTime = normalizeDate(end).getTime()
+  return Math.abs(Math.floor((endTime - startTime) / (24 * 60 * 60 * 1000)))
+}

package/src/md/date-picker/ui-date-picker-input.ts

@@ -0,0 +1,333 @@
+import { LitElement, html, TemplateResult } from 'lit'
+import { customElement, property, state, query } from 'lit/decorators.js'
+import { inputStyles } from './internals/DatePicker.styles.js'
+import { formatDate, parseDate } from './internals/DatePickerUtils.js'
+import type { DateSelectEvent } from './internals/DatePickerCalendar.js'
+import './internals/DatePickerCalendar.js'
+import '../../md/text-field/ui-outlined-text-field.js'
+import '../../md/icons/ui-icon.js'
+
+/**
+ * A docked date picker that opens from a text field input.
+ * Ideal for forms and date selection in medium to large layouts.
+ *
+ * ## Features
+ * - Text field input with calendar dropdown
+ * - Keyboard navigation support (Arrow Down, Enter, Escape)
+ * - Custom date formatting
+ * - Input validation and error handling
+ * - Min/max date constraints
+ * - Disabled dates support
+ * - Accessible design with proper ARIA attributes
+ * - CSS Anchor Positioning API for dropdown placement
+ *
+ * ## Events
+ *
+ * ### `change`
+ * Fired when the selected date changes.
+ *
+ * **Detail:**
+ * ```typescript
+ * {
+ *   value: Date | null,
+ *   formattedValue: string
+ * }
+ * ```
+ *
+ * ## Usage
+ *
+ * ### Basic usage
+ * ```html
+ * <ui-date-picker-input
+ *   label="Select date"
+ *   name="birthDate"
+ *   placeholder="MM/DD/YYYY"
+ *   .value=${new Date()}
+ *   @change=${this.handleDateChange}
+ * ></ui-date-picker-input>
+ * ```
+ *
+ * ### With validation
+ * ```html
+ * <ui-date-picker-input
+ *   label="Birth date"
+ *   name="birthDate"
+ *   required
+ *   .error=${this.hasError}
+ *   .errorMessage=${"Please select a valid date"}
+ *   .minDate=${new Date('1900-01-01')}
+ *   .maxDate=${new Date()}
+ * ></ui-date-picker-input>
+ * ```
+ *
+ * ### Custom date format
+ * ```html
+ * <ui-date-picker-input
+ *   label="Birth date"
+ *   .dateFormat=${date => date.toLocaleDateString('en-GB')}
+ * ></ui-date-picker-input>
+ * ```
+ *
+ * ### With disabled dates
+ * ```html
+ * <ui-date-picker-input
+ *   label="Appointment date"
+ *   .disabledDates=${[new Date('2024-12-25'), new Date('2024-01-01')]}
+ * ></ui-date-picker-input>
+ * ```
+ */
+@customElement('ui-date-picker-input')
+export class UiDatePickerInput extends LitElement {
+  static override styles = inputStyles
+  static override shadowRootOptions: ShadowRootInit = {
+    mode: 'open',
+    delegatesFocus: true,
+  }
+
+  /**
+   * The label for the input field
+   */
+  @property({ type: String }) accessor label = ''
+
+  /**
+   * The name attribute for the input field (for form handling)
+   */
+  @property({ type: String }) accessor name = ''
+
+  /**
+   * Placeholder text for the input
+   */
+  @property({ type: String }) accessor placeholder = 'MM/DD/YYYY'
+
+  /**
+   * The currently selected date
+   */
+  @property({ type: Object }) accessor value: Date | null = null
+
+  /**
+   * Whether the date picker is disabled
+   */
+  @property({ type: Boolean }) accessor disabled = false
+
+  /**
+   * Whether the input is required
+   */
+  @property({ type: Boolean }) accessor required = false
+
+  /**
+   * Error message to display
+   */
+  @property({ type: String }) accessor errorMessage = ''
+
+  /**
+   * Whether the input has an error state
+   */
+  @property({ type: Boolean }) accessor error = 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
+   */
+  @property({ type: String }) accessor locale: string | undefined = undefined
+
+  /**
+   * Custom date format function
+   */
+  @property({ type: Object }) accessor dateFormat: ((date: Date) => string) | undefined = undefined
+
+  @state() private accessor isOpen = false
+
+  @state() private accessor inputValue = ''
+
+  @query('ui-outlined-text-field') private accessor textField!: HTMLElement
+
+  constructor() {
+    super()
+    // Initialize boolean properties to false as per Lit best practices
+    this.disabled = false
+    this.required = false
+    this.error = false
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this.updateInputValue()
+    document.addEventListener('click', this.handleDocumentClick.bind(this))
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+    document.removeEventListener('click', this.handleDocumentClick.bind(this))
+  }
+
+  override willUpdate(changedProperties: Map<string | number | symbol, unknown>): void {
+    if (changedProperties.has('value')) {
+      this.updateInputValue()
+    }
+  }
+
+  override updated(changedProperties: Map<string | number | symbol, unknown>): void {
+    if (changedProperties.has('isOpen') && this.isOpen) {
+      // Set anchor name on text field for CSS Anchor Positioning API
+      if (this.textField) {
+        // Using setProperty since anchorName is not in TypeScript types yet
+        this.textField.style.setProperty('anchor-name', '--ui-date-picker-anchor')
+      }
+    }
+  }
+
+  private updateInputValue(): void {
+    if (this.value) {
+      this.inputValue = this.dateFormat ? this.dateFormat(this.value) : formatDate(this.value, this.locale)
+    } else {
+      this.inputValue = ''
+    }
+  }
+
+  private handleDocumentClick(event: Event): void {
+    if (!this.contains(event.target as Node)) {
+      this.isOpen = false
+    }
+  }
+
+  private handleInputClick(): void {
+    if (!this.disabled) {
+      this.isOpen = !this.isOpen
+    }
+  }
+
+  private handleInputChange(event: Event): void {
+    const target = event.target as HTMLInputElement
+    this.inputValue = target.value
+
+    const parsedDate = parseDate(this.inputValue)
+    if (parsedDate) {
+      this.value = parsedDate
+      this.dispatchChangeEvent()
+    }
+  }
+
+  private handleCalendarDateSelect(event: CustomEvent<DateSelectEvent>): void {
+    this.value = event.detail.date
+    this.isOpen = false
+    this.dispatchChangeEvent()
+  }
+
+  private handleCalendarDateCancel(): void {
+    this.isOpen = false
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'Escape':
+        this.isOpen = false
+        break
+      case 'ArrowDown':
+        if (!this.isOpen) {
+          event.preventDefault()
+          this.isOpen = true
+        }
+        break
+      case 'Enter':
+        if (this.isOpen) {
+          event.preventDefault()
+          this.isOpen = false
+        }
+        break
+    }
+  }
+
+  private dispatchChangeEvent(): void {
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: {
+          value: this.value,
+          formattedValue: this.inputValue,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  private renderCalendarIcon(): TemplateResult {
+    return html`
+      <ui-icon slot="suffix" icon="calendarToday" @click=${this.handleInputClick} class="calendar-icon"></ui-icon>
+    `
+  }
+
+  private renderDropdown(): TemplateResult | null {
+    if (!this.isOpen) return null
+
+    const currentDate = this.value || new Date()
+
+    return html`
+      <div class="dropdown-container">
+        <ui-date-picker-calendar
+          .year=${currentDate.getFullYear()}
+          .month=${currentDate.getMonth()}
+          .selectedDate=${this.value}
+          .minDate=${this.minDate}
+          .maxDate=${this.maxDate}
+          .disabledDates=${this.disabledDates}
+          .locale=${this.locale}
+          showActions
+          @date-select=${this.handleCalendarDateSelect}
+          @date-cancel=${this.handleCalendarDateCancel}
+        ></ui-date-picker-calendar>
+      </div>
+    `
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <div class="input-container">
+        ${this.isOpen ? html`<div class="backdrop" @click=${() => (this.isOpen = false)}></div>` : ''}
+        <ui-outlined-text-field
+          .label=${this.label}
+          .name=${this.name}
+          .placeholder=${this.placeholder}
+          .value=${this.inputValue}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          ?invalid=${this.error}
+          .invalidText=${this.errorMessage}
+          readonly
+          @click=${this.handleInputClick}
+          @input=${this.handleInputChange}
+          @keydown=${this.handleKeyDown}
+        >
+          ${this.renderCalendarIcon()}
+        </ui-outlined-text-field>
+        ${this.renderDropdown()}
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-date-picker-input': UiDatePickerInput
+  }
+
+  interface HTMLElementEventMap {
+    change: CustomEvent<{
+      value: Date | null
+      formattedValue: string
+    }>
+  }
+}