@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/datepicker/controllers/keyboard.controller.ts

@@ -0,0 +1,290 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { KeyboardController } from '../interfaces/index.js';
+import { DatePickerHost } from '../interfaces/base-controller.interface.js';
+import { DatePickerCalendarController } from './calendar.controller.js';
+import { DatePickerSelectionController } from './selection.controller.js';
+import { KEYBOARD_KEYS } from '../datepicker.constant.js';
+
+/**
+ * Keyboard navigation controller for datepicker
+ * Handles keyboard interactions and navigation within the calendar
+ */
+export class DatePickerKeyboardController implements KeyboardController, ReactiveController {
+  public readonly host: ReactiveControllerHost & DatePickerHost;
+  private focusedDate: Date;
+
+  constructor(
+    host: ReactiveControllerHost & DatePickerHost,
+    private calendarController: DatePickerCalendarController,
+    private selectionController: DatePickerSelectionController
+  ) {
+    this.host = host;
+    this.host.addController(this);
+    this.focusedDate = new Date();
+  }
+
+  hostConnected(): void {
+    // Initialize focused date
+    const selectedDate = this.selectionController.getSelectedDate();
+    this.focusedDate = selectedDate || new Date();
+  }
+
+  hostDisconnected(): void {
+    // Cleanup if needed
+  }
+
+  /**
+   * Handle keyboard events
+   */
+  handleKeyDown(event: KeyboardEvent): void {
+    try {
+      switch (event.key) {
+        case KEYBOARD_KEYS.ARROW_LEFT:
+          event.preventDefault();
+          this.navigateLeft();
+          break;
+        
+        case KEYBOARD_KEYS.ARROW_RIGHT:
+          event.preventDefault();
+          this.navigateRight();
+          break;
+        
+        case KEYBOARD_KEYS.ARROW_UP:
+          event.preventDefault();
+          this.navigateUp();
+          break;
+        
+        case KEYBOARD_KEYS.ARROW_DOWN:
+          event.preventDefault();
+          this.navigateDown();
+          break;
+        
+        case KEYBOARD_KEYS.HOME:
+          event.preventDefault();
+          this.navigateToFirstDayOfWeek();
+          break;
+        
+        case KEYBOARD_KEYS.END:
+          event.preventDefault();
+          this.navigateToLastDayOfWeek();
+          break;
+        
+        case KEYBOARD_KEYS.PAGE_UP:
+          event.preventDefault();
+          if (event.shiftKey) {
+            this.navigateToPreviousYear();
+          } else {
+            this.navigateToPreviousMonth();
+          }
+          break;
+        
+        case KEYBOARD_KEYS.PAGE_DOWN:
+          event.preventDefault();
+          if (event.shiftKey) {
+            this.navigateToNextYear();
+          } else {
+            this.navigateToNextMonth();
+          }
+          break;
+        
+        case KEYBOARD_KEYS.ENTER:
+        case ' ':
+          event.preventDefault();
+          this.selectCurrentDate();
+          break;
+        
+        case KEYBOARD_KEYS.ESCAPE:
+          event.preventDefault();
+          this.closeCalendar();
+          break;
+        
+        default:
+          // Handle other keys if needed
+          break;
+      }
+      
+      this.host.requestUpdate();
+    } catch (error) {
+      this.handleError?.(error as Error, 'handleKeyDown');
+    }
+  }
+
+  /**
+   * Navigate one day left
+   */
+  navigateLeft(): void {
+    const newDate = new Date(this.focusedDate);
+    newDate.setDate(newDate.getDate() - 1);
+    this.setFocusedDate(newDate);
+  }
+
+  /**
+   * Navigate one day right
+   */
+  navigateRight(): void {
+    const newDate = new Date(this.focusedDate);
+    newDate.setDate(newDate.getDate() + 1);
+    this.setFocusedDate(newDate);
+  }
+
+  /**
+   * Navigate one week up
+   */
+  navigateUp(): void {
+    const newDate = new Date(this.focusedDate);
+    newDate.setDate(newDate.getDate() - 7);
+    this.setFocusedDate(newDate);
+  }
+
+  /**
+   * Navigate one week down
+   */
+  navigateDown(): void {
+    const newDate = new Date(this.focusedDate);
+    newDate.setDate(newDate.getDate() + 7);
+    this.setFocusedDate(newDate);
+  }
+
+  /**
+   * Navigate to first day of current week
+   */
+  navigateToFirstDayOfWeek(): void {
+    const newDate = new Date(this.focusedDate);
+    const dayOfWeek = newDate.getDay();
+    newDate.setDate(newDate.getDate() - dayOfWeek);
+    this.setFocusedDate(newDate);
+  }
+
+  /**
+   * Navigate to last day of current week
+   */
+  navigateToLastDayOfWeek(): void {
+    const newDate = new Date(this.focusedDate);
+    const dayOfWeek = newDate.getDay();
+    newDate.setDate(newDate.getDate() + (6 - dayOfWeek));
+    this.setFocusedDate(newDate);
+  }
+
+  /**
+   * Navigate to first day of current month
+   */
+  navigateToFirstDayOfMonth(): void {
+    const newDate = new Date(this.focusedDate);
+    newDate.setDate(1);
+    this.setFocusedDate(newDate);
+  }
+
+  /**
+   * Navigate to last day of current month
+   */
+  navigateToLastDayOfMonth(): void {
+    const newDate = new Date(this.focusedDate);
+    newDate.setMonth(newDate.getMonth() + 1, 0);
+    this.setFocusedDate(newDate);
+  }
+
+  /**
+   * Navigate to previous month
+   */
+  private navigateToPreviousMonth(): void {
+    const newDate = new Date(this.focusedDate);
+    newDate.setMonth(newDate.getMonth() - 1);
+    this.setFocusedDate(newDate);
+    this.calendarController.navigateToPreviousMonth();
+  }
+
+  /**
+   * Navigate to next month
+   */
+  private navigateToNextMonth(): void {
+    const newDate = new Date(this.focusedDate);
+    newDate.setMonth(newDate.getMonth() + 1);
+    this.setFocusedDate(newDate);
+    this.calendarController.navigateToNextMonth();
+  }
+
+  /**
+   * Navigate to previous year
+   */
+  private navigateToPreviousYear(): void {
+    const newDate = new Date(this.focusedDate);
+    newDate.setFullYear(newDate.getFullYear() - 1);
+    this.setFocusedDate(newDate);
+    this.calendarController.navigateToPreviousYear();
+  }
+
+  /**
+   * Navigate to next year
+   */
+  private navigateToNextYear(): void {
+    const newDate = new Date(this.focusedDate);
+    newDate.setFullYear(newDate.getFullYear() + 1);
+    this.setFocusedDate(newDate);
+    this.calendarController.navigateToNextYear();
+  }
+
+  /**
+   * Set focused date and update calendar if needed
+   */
+  private setFocusedDate(date: Date): void {
+    this.focusedDate = date;
+
+    // Check if we need to navigate to a different month
+    const currentMonth = this.calendarController.navigationDates.start.month;
+    const currentYear = this.calendarController.navigationDates.start.year;
+    
+    if (date.getMonth() + 1 !== currentMonth || date.getFullYear() !== currentYear) {
+      this.calendarController.navigateToMonth(date.getFullYear(), date.getMonth() + 1);
+    }
+  }
+
+  /**
+   * Select the currently focused date
+   */
+  selectCurrentDate(): void {
+    if (this.selectionController.isValidSelection(this.focusedDate)) {
+      this.selectionController.selectDate(this.focusedDate);
+    }
+  }
+
+  /**
+   * Close the calendar
+   */
+  closeCalendar(): void {
+    // This would typically be handled by a positioning controller
+    // For now, we'll dispatch an event
+    this.host.dispatchEvent(
+      new CustomEvent('calendar-close-request', {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  /**
+   * Get currently focused date
+   */
+  getFocusedDate(): Date {
+    return new Date(this.focusedDate);
+  }
+
+  /**
+   * Handle errors that occur within the controller
+   */
+  handleError(error: Error, context: string): void {
+    console.error(`DatePickerKeyboardController error in ${context}:`, error);
+    this.host.dispatchEvent(
+      new CustomEvent('datepicker-error', {
+        detail: { error, context, controller: 'keyboard' },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+}

package/components/ui/nuraly-ui/src/components/datepicker/controllers/month-year-dropdown.controller.ts

@@ -0,0 +1,108 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+
+/**
+ * Simple month/year dropdown controller for datepicker
+ * Manages the dropdown state for month and year selection
+ */
+export class MonthYearDropdownController implements ReactiveController {
+  private _host: ReactiveControllerHost & HTMLElement & { dispatchEvent(event: Event): boolean };
+  private _isMonthDropdownOpen: boolean = false;
+  private _isYearDropdownOpen: boolean = false;
+
+  constructor(host: ReactiveControllerHost & HTMLElement & { dispatchEvent(event: Event): boolean }) {
+    this._host = host;
+    this._host.addController(this);
+  }
+
+  hostConnected(): void {
+    // Setup click outside listener to close dropdowns
+    document.addEventListener('click', this.handleDocumentClick.bind(this));
+  }
+
+  hostDisconnected(): void {
+    document.removeEventListener('click', this.handleDocumentClick.bind(this));
+  }
+
+  /**
+   * Get month dropdown state
+   */
+  get isMonthDropdownOpen(): boolean {
+    return this._isMonthDropdownOpen;
+  }
+
+  /**
+   * Get year dropdown state
+   */
+  get isYearDropdownOpen(): boolean {
+    return this._isYearDropdownOpen;
+  }
+
+  /**
+   * Toggle month dropdown
+   */
+  toggleMonthDropdown(): void {
+    this._isYearDropdownOpen = false; // Close year dropdown
+    this._isMonthDropdownOpen = !this._isMonthDropdownOpen;
+    this._host.requestUpdate();
+  }
+
+  /**
+   * Toggle year dropdown
+   */
+  toggleYearDropdown(): void {
+    this._isMonthDropdownOpen = false; // Close month dropdown
+    this._isYearDropdownOpen = !this._isYearDropdownOpen;
+    this._host.requestUpdate();
+  }
+
+  /**
+   * Close all dropdowns
+   */
+  closeAllDropdowns(): void {
+    this._isMonthDropdownOpen = false;
+    this._isYearDropdownOpen = false;
+    this._host.requestUpdate();
+  }
+
+  /**
+   * Select a month (will be handled by the host component)
+   */
+  selectMonth(monthIndex: number): void {
+    this._isMonthDropdownOpen = false;
+    this._host.requestUpdate();
+    
+    // Dispatch event for the host to handle
+    this._host.dispatchEvent(new CustomEvent('month-selected', {
+      detail: { monthIndex },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  /**
+   * Select a year (will be handled by the host component)  
+   */
+  selectYear(year: number): void {
+    this._isYearDropdownOpen = false;
+    this._host.requestUpdate();
+    
+    // Dispatch event for the host to handle
+    this._host.dispatchEvent(new CustomEvent('year-selected', {
+      detail: { year },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  /**
+   * Handle document click to close dropdowns when clicking outside
+   */
+  private handleDocumentClick(event: Event): void {
+    const target = event.target as HTMLElement;
+    
+    // Check if click is outside the datepicker component
+    if (!this._host.contains(target)) {
+      this.closeAllDropdowns();
+    }
+  }
+}

package/components/ui/nuraly-ui/src/components/datepicker/controllers/positioning.controller.ts

@@ -0,0 +1,278 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { PositioningController } from '../interfaces/index.js';
+import { DatePickerHost } from '../interfaces/base-controller.interface.js';
+import { DATE_PICKER_EVENTS, CALENDAR_Z_INDEX } from '../datepicker.constant.js';
+
+/**
+ * Positioning controller for datepicker calendar
+ * Handles calendar positioning, opening, closing, and click outside detection
+ */
+export class DatePickerPositioningController implements PositioningController, ReactiveController {
+  public readonly host: ReactiveControllerHost & DatePickerHost;
+  private isCalendarOpen = false;
+  private clickOutsideHandler?: (event: MouseEvent) => void;
+  private scrollHandler?: () => void;
+
+  constructor(host: ReactiveControllerHost & DatePickerHost) {
+    this.host = host;
+    this.host.addController(this);
+  }
+
+  hostConnected(): void {
+    this.setupEventListeners();
+  }
+
+  hostDisconnected(): void {
+    this.cleanupEventListeners();
+  }
+
+  /**
+   * Setup global event listeners
+   */
+  private setupEventListeners(): void {
+    this.clickOutsideHandler = this.handleClickOutside.bind(this);
+    this.scrollHandler = this.handleScroll.bind(this);
+    
+    document.addEventListener('click', this.clickOutsideHandler);
+    document.addEventListener('scroll', this.scrollHandler);
+    window.addEventListener('resize', this.scrollHandler);
+  }
+
+  /**
+   * Cleanup global event listeners
+   */
+  private cleanupEventListeners(): void {
+    if (this.clickOutsideHandler) {
+      document.removeEventListener('click', this.clickOutsideHandler);
+    }
+    if (this.scrollHandler) {
+      document.removeEventListener('scroll', this.scrollHandler);
+      window.removeEventListener('resize', this.scrollHandler);
+    }
+  }
+
+  /**
+   * Position the calendar relative to the input
+   */
+  async positionCalendar(): Promise<void> {
+    if (!this.isCalendarOpen) return;
+
+    try {
+      await this.host.requestUpdate();
+      await new Promise(resolve => setTimeout(resolve, 0)); // Wait for DOM update
+
+      const hostElement = this.host as any;
+      const dateInput = hostElement.shadowRoot?.querySelector('#date-input');
+      const calendarContainer = hostElement.shadowRoot?.querySelector('.calendar-container');
+
+      if (!dateInput || !calendarContainer) return;
+
+      const position = this.calculateOptimalPosition();
+      
+      calendarContainer.style.position = 'fixed';
+      calendarContainer.style.top = `${position.top}px`;
+      calendarContainer.style.left = `${position.left}px`;
+      calendarContainer.style.zIndex = String(CALENDAR_Z_INDEX);
+      
+      // Add placement class for styling
+      calendarContainer.classList.remove('placement-top', 'placement-bottom');
+      calendarContainer.classList.add(`placement-${position.placement}`);
+    } catch (error) {
+      this.handleError?.(error as Error, 'positionCalendar');
+    }
+  }
+
+  /**
+   * Update calendar position
+   */
+  updatePosition(): void {
+    if (this.isCalendarOpen) {
+      this.positionCalendar();
+    }
+  }
+
+  /**
+   * Calculate optimal position for calendar
+   */
+  calculateOptimalPosition(): { top: number; left: number; placement: string } {
+    const hostElement = this.host as any;
+    const dateInput = hostElement.shadowRoot?.querySelector('#date-input');
+    const calendarContainer = hostElement.shadowRoot?.querySelector('.calendar-container');
+
+    if (!dateInput || !calendarContainer) {
+      return { top: 0, left: 0, placement: 'bottom' };
+    }
+
+    const inputRect = dateInput.getBoundingClientRect();
+    const calendarRect = calendarContainer.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+
+    let top = inputRect.bottom;
+    let left = inputRect.left;
+    let placement = 'bottom';
+
+    // Check if there's enough space below
+    if (inputRect.bottom + calendarRect.height > viewportHeight && this.hasSpaceAbove()) {
+      top = inputRect.top - calendarRect.height;
+      placement = 'top';
+    }
+
+    // Ensure calendar doesn't overflow horizontally
+    if (left + calendarRect.width > viewportWidth) {
+      left = viewportWidth - calendarRect.width - 10; // 10px margin
+    }
+
+    // Ensure calendar doesn't go off-screen to the left
+    if (left < 10) {
+      left = 10;
+    }
+
+    return { top, left, placement };
+  }
+
+  /**
+   * Check if there's space below the input
+   */
+  hasSpaceBelow(): boolean {
+    const hostElement = this.host as any;
+    const dateInput = hostElement.shadowRoot?.querySelector('#date-input');
+    const calendarContainer = hostElement.shadowRoot?.querySelector('.calendar-container');
+
+    if (!dateInput || !calendarContainer) return false;
+
+    const inputRect = dateInput.getBoundingClientRect();
+    const calendarHeight = calendarContainer.getBoundingClientRect().height;
+    const availableSpace = window.innerHeight - inputRect.bottom;
+
+    return availableSpace >= calendarHeight;
+  }
+
+  /**
+   * Check if there's space above the input
+   */
+  hasSpaceAbove(): boolean {
+    const hostElement = this.host as any;
+    const dateInput = hostElement.shadowRoot?.querySelector('#date-input');
+    const calendarContainer = hostElement.shadowRoot?.querySelector('.calendar-container');
+
+    if (!dateInput || !calendarContainer) return false;
+
+    const inputRect = dateInput.getBoundingClientRect();
+    const calendarHeight = calendarContainer.getBoundingClientRect().height;
+
+    return inputRect.top >= calendarHeight;
+  }
+
+  /**
+   * Open the calendar
+   */
+  openCalendar(): void {
+    try {
+      this.isCalendarOpen = true;
+      (this.host as any).openedCalendar = true;
+      
+      // Position calendar after DOM update
+      requestAnimationFrame(() => {
+        this.positionCalendar();
+      });
+
+      this.host.dispatchEvent(
+        new CustomEvent(DATE_PICKER_EVENTS.CALENDAR_OPEN, {
+          bubbles: true,
+          composed: true,
+        })
+      );
+
+      this.host.requestUpdate();
+    } catch (error) {
+      this.handleError?.(error as Error, 'openCalendar');
+    }
+  }
+
+  /**
+   * Close the calendar
+   */
+  closeCalendar(): void {
+    try {
+      this.isCalendarOpen = false;
+      (this.host as any).openedCalendar = false;
+
+      this.host.dispatchEvent(
+        new CustomEvent(DATE_PICKER_EVENTS.CALENDAR_CLOSE, {
+          bubbles: true,
+          composed: true,
+        })
+      );
+
+      this.host.requestUpdate();
+    } catch (error) {
+      this.handleError?.(error as Error, 'closeCalendar');
+    }
+  }
+
+  /**
+   * Toggle calendar open/close state
+   */
+  toggleCalendar(): void {
+    if (this.isCalendarOpen) {
+      this.closeCalendar();
+    } else {
+      this.openCalendar();
+    }
+  }
+
+  /**
+   * Handle click outside calendar
+   */
+  handleClickOutside(event: MouseEvent): void {
+    if (!this.isCalendarOpen) return;
+
+    const hostElement = this.host as any;
+    const composedPath = event.composedPath();
+    
+    // Check if click was inside the host element
+    if (!composedPath.includes(hostElement)) {
+      this.closeCalendar();
+    }
+  }
+
+  /**
+   * Handle scroll events
+   */
+  handleScroll(): void {
+    if (this.isCalendarOpen) {
+      // Reposition calendar on scroll
+      requestAnimationFrame(() => {
+        this.positionCalendar();
+      });
+    }
+  }
+
+  /**
+   * Check if calendar is currently open
+   */
+  get isOpen(): boolean {
+    return this.isCalendarOpen;
+  }
+
+  /**
+   * Handle errors that occur within the controller
+   */
+  handleError(error: Error, context: string): void {
+    console.error(`DatePickerPositioningController error in ${context}:`, error);
+    this.host.dispatchEvent(
+      new CustomEvent('datepicker-error', {
+        detail: { error, context, controller: 'positioning' },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+}