snice 1.14.3 → 2.1.0

package/components/date-picker/snice-date-picker.ts

@@ -0,0 +1,777 @@
+import { element, property, query, on, watch, dispatch, ready } from 'snice';
+import css from './snice-date-picker.css?inline';
+import type { DatePickerSize, DatePickerVariant, DateFormat, SniceDatePickerElement, DatePickerValue } from './snice-date-picker.types';
+
+@element('snice-date-picker')
+export class SniceDatePicker extends HTMLElement implements SniceDatePickerElement {
+  @property({ reflect: true })
+  size: DatePickerSize = 'medium';
+
+  @property({ reflect: true })
+  variant: DatePickerVariant = 'outlined';
+
+  @property({ reflect: true })
+  value = '';
+  
+  // Track input separately to prevent cursor jumps during typing
+  private inputValue = '';
+
+  @property({ reflect: true })
+  format: DateFormat = 'mm/dd/yyyy';
+
+  @property({ reflect: true })
+  placeholder = '';
+
+  @property({ reflect: true })
+  label = '';
+
+  @property({ attribute: 'helper-text', reflect: true })
+  helperText = '';
+
+  @property({ attribute: 'error-text', reflect: true })
+  errorText = '';
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
+  @property({ type: Boolean, reflect: true })
+  required = false;
+
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
+
+  @property({ type: Boolean, reflect: true })
+  clearable = false;
+
+  @property({ reflect: true })
+  min = '';
+
+  @property({ reflect: true })
+  max = '';
+
+  @property({ reflect: true })
+  name = '';
+
+  @property({ type: Boolean, attribute: 'show-calendar', reflect: true })
+  showCalendar = false;
+
+  @property({ type: Number, attribute: 'first-day-of-week', reflect: true })
+  firstDayOfWeek = 0; // 0 = Sunday
+
+  @query('.input')
+  input?: HTMLInputElement;
+
+  @query('.calendar')
+  calendar?: HTMLElement;
+
+  @query('.clear-button')
+  clearButton?: HTMLButtonElement;
+
+  @query('.calendar-toggle')
+  calendarToggle?: HTMLButtonElement;
+
+  @query('.day--selected')
+  selectedDayButton?: HTMLButtonElement;
+
+  @query('.day:not(.day--empty):not(.day--disabled)')
+  firstDayButton?: HTMLButtonElement;
+
+  private selectedDate: Date | null = null;
+  private viewDate = new Date();
+  
+  private monthNames = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+  ];
+
+  private dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  css() {
+    return css;
+  }
+
+  html() {
+    return /*html*/`
+      <div class="date-picker-wrapper">
+        ${this.label ? /*html*/`
+          <label class="label ${this.required ? 'label--required' : ''}">
+            ${this.label}
+          </label>
+        ` : ''}
+        
+        <div class="input-container">
+          <input
+            class="input 
+              input--${this.size} 
+              input--${this.variant}
+              ${this.invalid ? 'input--invalid' : ''}
+              ${this.clearable ? 'input--clearable' : ''}"
+            type="text"
+            value="${this.inputValue || this.getFormattedValue()}"
+            placeholder="${this.placeholder || this.getPlaceholderForFormat()}"
+            ${this.disabled ? 'disabled' : ''}
+            ${this.readonly ? 'readonly' : ''}
+            ${this.required ? 'required' : ''}
+            ${this.name ? `name="${this.name}"` : ''}
+            part="input"
+            autocomplete="off"
+          />
+          
+          <button
+            class="calendar-toggle"
+            type="button"
+            aria-label="Open calendar"
+            tabindex="-1"
+            part="calendar-toggle"
+            ${this.disabled ? 'disabled' : ''}
+          >
+            <svg viewBox="0 0 24 24" width="18" height="18">
+              <path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" fill="currentColor"/>
+            </svg>
+          </button>
+          
+          <button
+            class="clear-button"
+            type="button"
+            aria-label="Clear"
+            tabindex="-1"
+            part="clear"
+            style="display: none;"
+          >
+            <svg viewBox="0 0 24 24" width="16" height="16">
+              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
+            </svg>
+          </button>
+          
+          <div class="calendar" part="calendar" hidden>
+            <div class="calendar-header">
+              <button class="nav-button" type="button" data-nav="prev-month" aria-label="Previous month">
+                <svg viewBox="0 0 24 24" width="20" height="20">
+                  <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" fill="currentColor"/>
+                </svg>
+              </button>
+              
+              <div class="calendar-title">
+                <button class="month-button" type="button" data-nav="month-picker">
+                  ${this.monthNames[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}
+                </button>
+              </div>
+              
+              <button class="nav-button" type="button" data-nav="next-month" aria-label="Next month">
+                <svg viewBox="0 0 24 24" width="20" height="20">
+                  <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor"/>
+                </svg>
+              </button>
+            </div>
+            
+            <div class="calendar-weekdays">
+              ${this.getDayHeaders()}
+            </div>
+            
+            <div class="calendar-days">
+              ${this.getDaysGrid()}
+            </div>
+            
+            <div class="calendar-footer">
+              <button class="today-button" type="button" data-nav="today">
+                Today
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        ${this.errorText ? /*html*/`
+          <span class="error-text" part="error-text">${this.errorText}</span>
+        ` : this.helperText ? /*html*/`
+          <span class="helper-text" part="helper-text">${this.helperText}</span>
+        ` : /*html*/`
+          <span class="helper-text" part="helper-text">&nbsp;</span>
+        `}
+      </div>
+    `;
+  }
+
+  @ready()
+  init() {
+    this.parseInitialValue();
+    this.updateClearButton();
+    this.setupCalendarClickOutside();
+    
+    if (this.input) {
+      this.input.disabled = this.disabled;
+      this.input.readOnly = this.readonly;
+      this.input.required = this.required;
+      
+      if (this.invalid) {
+        this.input.setAttribute('aria-invalid', 'true');
+        this.input.classList.add('input--invalid');
+      }
+    }
+  }
+
+  private parseInitialValue() {
+    if (this.value) {
+      const date = this.parseDate(this.value);
+      if (date) {
+        this.selectedDate = date;
+        this.viewDate = new Date(date);
+        this.inputValue = this.formatDate(date);
+      } else {
+        this.inputValue = this.value;
+      }
+    }
+  }
+
+  private parseDate(dateString: string): Date | null {
+    if (!dateString) return null;
+    
+    if (this.format === 'mmmm dd, yyyy') {
+      const monthNameRegex = /^([A-Za-z]+)\s+(\d{1,2}),\s+(\d{4})$/;
+      const match = dateString.match(monthNameRegex);
+      if (match) {
+        const [, monthName, day, year] = match;
+        const monthIndex = this.monthNames.findIndex(m => m.toLowerCase() === monthName.toLowerCase());
+        if (monthIndex >= 0) {
+          const date = new Date(parseInt(year), monthIndex, parseInt(day));
+          if (!isNaN(date.getTime())) {
+            return date;
+          }
+        }
+      }
+      return null;
+    }
+    
+    let date = new Date(dateString);
+    if (!isNaN(date.getTime())) {
+      return date;
+    }
+    
+    const parts = dateString.split(/[-\/]/);
+    if (parts.length !== 3) return null;
+    
+    let year: number, month: number, day: number;
+    
+    switch (this.format) {
+      case 'mm/dd/yyyy':
+      case 'mm-dd-yyyy':
+        [month, day, year] = parts.map(Number);
+        break;
+      case 'dd/mm/yyyy':
+      case 'dd-mm-yyyy':
+        [day, month, year] = parts.map(Number);
+        break;
+      case 'yyyy-mm-dd':
+      case 'yyyy/mm/dd':
+        [year, month, day] = parts.map(Number);
+        break;
+      default:
+        return null;
+    }
+    
+    if (year && month && day) {
+      date = new Date(year, month - 1, day);
+      if (!isNaN(date.getTime())) {
+        return date;
+      }
+    }
+    
+    return null;
+  }
+
+  private formatDate(date: Date): string {
+    if (!date) return '';
+    
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1;
+    const day = date.getDate();
+    
+    const mm = month.toString().padStart(2, '0');
+    const dd = day.toString().padStart(2, '0');
+    const yyyy = year.toString();
+    
+    switch (this.format) {
+      case 'mm/dd/yyyy':
+        return `${mm}/${dd}/${yyyy}`;
+      case 'dd/mm/yyyy':
+        return `${dd}/${mm}/${yyyy}`;
+      case 'yyyy-mm-dd':
+        return `${yyyy}-${mm}-${dd}`;
+      case 'yyyy/mm/dd':
+        return `${yyyy}/${mm}/${dd}`;
+      case 'dd-mm-yyyy':
+        return `${dd}-${mm}-${yyyy}`;
+      case 'mm-dd-yyyy':
+        return `${mm}-${dd}-${yyyy}`;
+      case 'mmmm dd, yyyy':
+        return `${this.monthNames[date.getMonth()]} ${dd}, ${yyyy}`;
+      default:
+        return `${mm}/${dd}/${yyyy}`;
+    }
+  }
+
+  private getFormattedValue(): string {
+    return this.selectedDate ? this.formatDate(this.selectedDate) : this.value;
+  }
+
+  private getPlaceholderForFormat(): string {
+    switch (this.format) {
+      case 'mm/dd/yyyy':
+        return 'MM/DD/YYYY';
+      case 'dd/mm/yyyy':
+        return 'DD/MM/YYYY';
+      case 'yyyy-mm-dd':
+        return 'YYYY-MM-DD';
+      case 'yyyy/mm/dd':
+        return 'YYYY/MM/DD';
+      case 'dd-mm-yyyy':
+        return 'DD-MM-YYYY';
+      case 'mm-dd-yyyy':
+        return 'MM-DD-YYYY';
+      case 'mmmm dd, yyyy':
+        return 'Month DD, YYYY';
+      default:
+        return 'MM/DD/YYYY';
+    }
+  }
+
+  private getDayHeaders(): string {
+    const days = [...this.dayNames];
+    // Rotate array based on firstDayOfWeek (0=Sunday, 1=Monday, etc.)
+    for (let i = 0; i < this.firstDayOfWeek; i++) {
+      days.push(days.shift()!);
+    }
+    return days.map(day => `<div class="weekday">${day}</div>`).join('');
+  }
+
+  private getDaysGrid(): string {
+    const year = this.viewDate.getFullYear();
+    const month = this.viewDate.getMonth();
+    
+    // First day of the month
+    const firstDay = new Date(year, month, 1);
+    // Last day of the month
+    const lastDay = new Date(year, month + 1, 0);
+    
+    // Calculate starting position based on first day of week preference
+    let startingDayOfWeek = firstDay.getDay() - this.firstDayOfWeek;
+    if (startingDayOfWeek < 0) startingDayOfWeek += 7;
+    
+    const daysInMonth = lastDay.getDate();
+    const today = new Date();
+    const isToday = (date: Date) => 
+      date.getDate() === today.getDate() && 
+      date.getMonth() === today.getMonth() && 
+      date.getFullYear() === today.getFullYear();
+    
+    const isSelected = (date: Date) =>
+      this.selectedDate &&
+      date.getDate() === this.selectedDate.getDate() &&
+      date.getMonth() === this.selectedDate.getMonth() &&
+      date.getFullYear() === this.selectedDate.getFullYear();
+    
+    const isDisabled = (date: Date) => {
+      if (this.min) {
+        const minDate = this.parseDate(this.min);
+        if (minDate && date < minDate) return true;
+      }
+      if (this.max) {
+        const maxDate = this.parseDate(this.max);
+        if (maxDate && date > maxDate) return true;
+      }
+      return false;
+    };
+
+    let html = '';
+    
+    // Empty cells for days before month starts
+    for (let i = 0; i < startingDayOfWeek; i++) {
+      html += '<div class="day day--empty"></div>';
+    }
+    
+    // Days of the month
+    for (let day = 1; day <= daysInMonth; day++) {
+      const date = new Date(year, month, day);
+      const classes = ['day'];
+      
+      if (isToday(date)) classes.push('day--today');
+      if (isSelected(date)) classes.push('day--selected');
+      if (isDisabled(date)) classes.push('day--disabled');
+      
+      html += `
+        <button 
+          class="${classes.join(' ')}" 
+          type="button" 
+          data-date="${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}"
+          ${isDisabled(date) ? 'disabled' : ''}
+          aria-label="${this.formatDate(date)}"
+        >
+          ${day}
+        </button>
+      `;
+    }
+    
+    return html;
+  }
+
+  private updateInputValue() {
+    if (this.input && document.activeElement !== this.input) {
+      const displayValue = this.getFormattedValue();
+      this.input.value = displayValue;
+      this.inputValue = displayValue;
+    }
+    this.updateClearButton();
+  }
+
+  private isCompleteDate(value: string): boolean {
+    if (this.format === 'mmmm dd, yyyy') {
+      return /^[A-Za-z]+\s+\d{1,2},\s+\d{4}$/.test(value);
+    }
+    
+    const separators = (value.match(/[\/\-]/g) || []).length;
+    return separators >= 2 && value.length >= 8;
+  }
+
+  private updateClearButton() {
+    if (this.clearButton && this.clearable) {
+      const shouldShow = this.selectedDate && !this.disabled && !this.readonly;
+      this.clearButton.style.display = shouldShow ? '' : 'none';
+      this.clearButton.classList.toggle('clear-button--visible', !!shouldShow);
+    }
+  }
+
+  private updateCalendarGrid() {
+    const calendarDays = this.calendar?.querySelector('.calendar-days');
+    const calendarTitle = this.calendar?.querySelector('.month-button');
+    
+    if (calendarDays) {
+      calendarDays.innerHTML = this.getDaysGrid();
+    }
+    
+    if (calendarTitle) {
+      calendarTitle.textContent = `${this.monthNames[this.viewDate.getMonth()]} ${this.viewDate.getFullYear()}`;
+    }
+  }
+
+  private setupCalendarClickOutside() {
+    document.addEventListener('click', (e) => {
+      if (!this.contains(e.target as Node) && this.showCalendar) {
+        this.close();
+      }
+    });
+  }
+
+  @on('input', '.input')
+  handleInput(e: Event) {
+    const target = e.target as HTMLInputElement;
+    
+    this.inputValue = target.value;
+    
+    const date = this.parseDate(target.value);
+    if (date && this.isCompleteDate(target.value)) {
+      this.selectedDate = date;
+      this.viewDate = new Date(date);
+      if (this.showCalendar) {
+        this.updateCalendarGrid();
+      }
+    }
+    
+    this.updateClearButton();
+    this.dispatchInputEvent();
+  }
+
+  @on('change', '.input')
+  handleChange(e: Event) {
+    const target = e.target as HTMLInputElement;
+    
+    const date = this.parseDate(target.value);
+    if (date) {
+      this.selectedDate = date;
+      this.value = this.formatDate(date);
+      this.inputValue = this.value;
+      if (this.input) {
+        this.input.value = this.value;
+      }
+    } else if (target.value) {
+      this.selectedDate = null;
+      this.value = target.value;
+      this.inputValue = target.value;
+    } else {
+      this.selectedDate = null;
+      this.value = '';
+      this.inputValue = '';
+    }
+    
+    this.updateClearButton();
+    this.dispatchChangeEvent();
+  }
+
+  @on('focus', '.input')
+  handleFocus() {
+    this.dispatchFocusEvent();
+  }
+
+  @on('click', '.input')
+  handleInputClick() {
+    if (!this.showCalendar && !this.disabled && !this.readonly) {
+      this.open();
+    }
+  }
+
+  @on('blur', '.input')
+  handleBlur() {
+    this.dispatchBlurEvent();
+  }
+
+  @on('click', '.calendar-toggle')
+  handleCalendarToggle() {
+    if (this.showCalendar) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  @on('click', '.clear-button')
+  handleClear() {
+    this.clear();
+  }
+
+  @on('click', '.calendar')
+  handleCalendarClick(e: Event) {
+    e.stopPropagation();
+    const target = e.target as HTMLElement;
+    
+    if (target.closest('[data-date]')) {
+      const dateString = target.closest('[data-date]')?.getAttribute('data-date');
+      if (dateString) {
+        const date = new Date(dateString);
+        this.selectDate(date);
+      }
+    } else if (target.closest('[data-nav]')) {
+      const nav = target.closest('[data-nav]')?.getAttribute('data-nav');
+      this.handleNavigation(nav!);
+    }
+  }
+
+  @on('keydown', '.input')
+  handleKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if (!this.showCalendar) {
+        this.open();
+      }
+    } else if (e.key === 'Escape' && this.showCalendar) {
+      this.close();
+      this.focus();
+    }
+  }
+
+  private handleNavigation(nav: string) {
+    switch (nav) {
+      case 'prev-month':
+        this.viewDate.setMonth(this.viewDate.getMonth() - 1);
+        this.updateCalendarGrid();
+        break;
+      case 'next-month':
+        this.viewDate.setMonth(this.viewDate.getMonth() + 1);
+        this.updateCalendarGrid();
+        break;
+      case 'today':
+        this.goToToday();
+        break;
+    }
+  }
+
+  @watch('value')
+  handleValueChange() {
+    const date = this.parseDate(this.value);
+    this.selectedDate = date;
+    if (date) {
+      this.viewDate = new Date(date);
+    }
+    this.updateInputValue();
+    if (this.showCalendar) {
+      this.updateCalendarGrid();
+    }
+  }
+
+  // Manual DOM manipulation required since Snice is imperative
+  @watch('show-calendar')
+  handleShowCalendarChange() {
+    console.log('showCalendar changed:', this.calendar);
+    if (this.calendar) {
+      if (this.showCalendar) {
+        this.calendar.removeAttribute('hidden');
+        this.dispatchOpenEvent();
+        // Focus selected date or first available date for accessibility
+        setTimeout(() => {
+          (this.selectedDayButton || this.firstDayButton)?.focus();
+        }, 100);
+      } else {
+        this.calendar.setAttribute('hidden', '');
+        this.dispatchCloseEvent();
+      }
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    if (this.input) {
+      this.input.disabled = this.disabled;
+    }
+    if (this.calendarToggle) {
+      this.calendarToggle.disabled = this.disabled;
+    }
+    this.updateClearButton();
+  }
+
+  @watch('readonly')
+  handleReadonlyChange() {
+    if (this.input) {
+      this.input.readOnly = this.readonly;
+    }
+    this.updateClearButton();
+  }
+
+  @watch('invalid')
+  handleInvalidChange() {
+    if (this.input) {
+      this.input.setAttribute('aria-invalid', String(this.invalid));
+      this.input.classList.toggle('input--invalid', this.invalid);
+    }
+  }
+
+  @watch('format')
+  handleFormatChange() {
+    this.updateInputValue();
+  }
+
+  @dispatch('@snice/datepicker-input', { bubbles: true, composed: true })
+  private dispatchInputEvent() {
+    return { value: this.value, datePicker: this };
+  }
+
+  @dispatch('@snice/datepicker-change', { bubbles: true, composed: true })
+  private dispatchChangeEvent() {
+    return { 
+      value: this.value,
+      date: this.selectedDate,
+      formatted: this.selectedDate ? this.formatDate(this.selectedDate) : '',
+      iso: this.selectedDate ? this.selectedDate.toISOString().split('T')[0] : '',
+      datePicker: this 
+    };
+  }
+
+  @dispatch('@snice/datepicker-focus', { bubbles: true, composed: true })
+  private dispatchFocusEvent() {
+    return { datePicker: this };
+  }
+
+  @dispatch('@snice/datepicker-blur', { bubbles: true, composed: true })
+  private dispatchBlurEvent() {
+    return { datePicker: this };
+  }
+
+  @dispatch('@snice/datepicker-open', { bubbles: true, composed: true })
+  private dispatchOpenEvent() {
+    return { datePicker: this };
+  }
+
+  @dispatch('@snice/datepicker-close', { bubbles: true, composed: true })
+  private dispatchCloseEvent() {
+    return { datePicker: this };
+  }
+
+  @dispatch('@snice/datepicker-clear', { bubbles: true, composed: true })
+  private dispatchClearEvent() {
+    return { datePicker: this };
+  }
+
+  @dispatch('@snice/datepicker-select', { bubbles: true, composed: true })
+  private dispatchSelectEvent(date: Date) {
+    return { 
+      date,
+      formatted: this.formatDate(date),
+      iso: date.toISOString().split('T')[0],
+      datePicker: this 
+    };
+  }
+
+  focus() {
+    this.input?.focus();
+  }
+
+  blur() {
+    this.input?.blur();
+  }
+
+  clear() {
+    this.selectedDate = null;
+    this.value = '';
+    this.updateInputValue();
+    this.dispatchClearEvent();
+    this.dispatchChangeEvent();
+    this.focus();
+  }
+
+  open() {
+    if (!this.disabled && !this.readonly) {
+      this.showCalendar = true;
+      if (this.selectedDate) {
+        this.viewDate = new Date(this.selectedDate);
+      }
+      this.updateCalendarGrid();
+      
+      if (this.calendar) {
+        this.calendar.removeAttribute('hidden');
+      }
+      this.dispatchOpenEvent();
+    }
+  }
+
+  close() {
+    this.showCalendar = false;
+    
+    if (this.calendar) {
+      this.calendar.setAttribute('hidden', '');
+    }
+    this.dispatchCloseEvent();
+  }
+
+  selectDate(date: Date) {
+    this.selectedDate = date;
+    this.value = this.formatDate(date);
+    this.viewDate = new Date(date);
+    this.updateInputValue();
+    this.updateCalendarGrid();
+    this.dispatchSelectEvent(date);
+    this.dispatchChangeEvent();
+    this.close();
+    this.focus();
+  }
+
+  goToMonth(year: number, month: number) {
+    this.viewDate = new Date(year, month, 1);
+    this.updateCalendarGrid();
+  }
+
+  goToToday() {
+    const today = new Date();
+    this.selectDate(today);
+  }
+
+  checkValidity() {
+    return this.input?.checkValidity() ?? true;
+  }
+
+  reportValidity() {
+    return this.input?.reportValidity() ?? true;
+  }
+
+  setCustomValidity(message: string) {
+    this.input?.setCustomValidity(message);
+  }
+}