@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/datepicker/controllers/keyboard.controller.js

@@ -0,0 +1,246 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { KEYBOARD_KEYS } from '../datepicker.constant.js';
+/**
+ * Keyboard navigation controller for datepicker
+ * Handles keyboard interactions and navigation within the calendar
+ */
+export class DatePickerKeyboardController {
+    constructor(host, calendarController, selectionController) {
+        this.calendarController = calendarController;
+        this.selectionController = selectionController;
+        this.host = host;
+        this.host.addController(this);
+        this.focusedDate = new Date();
+    }
+    hostConnected() {
+        // Initialize focused date
+        const selectedDate = this.selectionController.getSelectedDate();
+        this.focusedDate = selectedDate || new Date();
+    }
+    hostDisconnected() {
+        // Cleanup if needed
+    }
+    /**
+     * Handle keyboard events
+     */
+    handleKeyDown(event) {
+        var _a;
+        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) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'handleKeyDown');
+        }
+    }
+    /**
+     * Navigate one day left
+     */
+    navigateLeft() {
+        const newDate = new Date(this.focusedDate);
+        newDate.setDate(newDate.getDate() - 1);
+        this.setFocusedDate(newDate);
+    }
+    /**
+     * Navigate one day right
+     */
+    navigateRight() {
+        const newDate = new Date(this.focusedDate);
+        newDate.setDate(newDate.getDate() + 1);
+        this.setFocusedDate(newDate);
+    }
+    /**
+     * Navigate one week up
+     */
+    navigateUp() {
+        const newDate = new Date(this.focusedDate);
+        newDate.setDate(newDate.getDate() - 7);
+        this.setFocusedDate(newDate);
+    }
+    /**
+     * Navigate one week down
+     */
+    navigateDown() {
+        const newDate = new Date(this.focusedDate);
+        newDate.setDate(newDate.getDate() + 7);
+        this.setFocusedDate(newDate);
+    }
+    /**
+     * Navigate to first day of current week
+     */
+    navigateToFirstDayOfWeek() {
+        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() {
+        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() {
+        const newDate = new Date(this.focusedDate);
+        newDate.setDate(1);
+        this.setFocusedDate(newDate);
+    }
+    /**
+     * Navigate to last day of current month
+     */
+    navigateToLastDayOfMonth() {
+        const newDate = new Date(this.focusedDate);
+        newDate.setMonth(newDate.getMonth() + 1, 0);
+        this.setFocusedDate(newDate);
+    }
+    /**
+     * Navigate to previous month
+     */
+    navigateToPreviousMonth() {
+        const newDate = new Date(this.focusedDate);
+        newDate.setMonth(newDate.getMonth() - 1);
+        this.setFocusedDate(newDate);
+        this.calendarController.navigateToPreviousMonth();
+    }
+    /**
+     * Navigate to next month
+     */
+    navigateToNextMonth() {
+        const newDate = new Date(this.focusedDate);
+        newDate.setMonth(newDate.getMonth() + 1);
+        this.setFocusedDate(newDate);
+        this.calendarController.navigateToNextMonth();
+    }
+    /**
+     * Navigate to previous year
+     */
+    navigateToPreviousYear() {
+        const newDate = new Date(this.focusedDate);
+        newDate.setFullYear(newDate.getFullYear() - 1);
+        this.setFocusedDate(newDate);
+        this.calendarController.navigateToPreviousYear();
+    }
+    /**
+     * Navigate to next year
+     */
+    navigateToNextYear() {
+        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
+     */
+    setFocusedDate(date) {
+        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() {
+        if (this.selectionController.isValidSelection(this.focusedDate)) {
+            this.selectionController.selectDate(this.focusedDate);
+        }
+    }
+    /**
+     * Close the calendar
+     */
+    closeCalendar() {
+        // 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() {
+        return new Date(this.focusedDate);
+    }
+    /**
+     * Handle errors that occur within the controller
+     */
+    handleError(error, context) {
+        console.error(`DatePickerKeyboardController error in ${context}:`, error);
+        this.host.dispatchEvent(new CustomEvent('datepicker-error', {
+            detail: { error, context, controller: 'keyboard' },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+//# sourceMappingURL=keyboard.controller.js.map

package/dist/src/components/datepicker/controllers/month-year-dropdown.controller.d.ts

@@ -0,0 +1,48 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Simple month/year dropdown controller for datepicker
+ * Manages the dropdown state for month and year selection
+ */
+export declare class MonthYearDropdownController implements ReactiveController {
+    private _host;
+    private _isMonthDropdownOpen;
+    private _isYearDropdownOpen;
+    constructor(host: ReactiveControllerHost & HTMLElement & {
+        dispatchEvent(event: Event): boolean;
+    });
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Get month dropdown state
+     */
+    get isMonthDropdownOpen(): boolean;
+    /**
+     * Get year dropdown state
+     */
+    get isYearDropdownOpen(): boolean;
+    /**
+     * Toggle month dropdown
+     */
+    toggleMonthDropdown(): void;
+    /**
+     * Toggle year dropdown
+     */
+    toggleYearDropdown(): void;
+    /**
+     * Close all dropdowns
+     */
+    closeAllDropdowns(): void;
+    /**
+     * Select a month (will be handled by the host component)
+     */
+    selectMonth(monthIndex: number): void;
+    /**
+     * Select a year (will be handled by the host component)
+     */
+    selectYear(year: number): void;
+    /**
+     * Handle document click to close dropdowns when clicking outside
+     */
+    private handleDocumentClick;
+}
+//# sourceMappingURL=month-year-dropdown.controller.d.ts.map

package/dist/src/components/datepicker/controllers/month-year-dropdown.controller.js

@@ -0,0 +1,92 @@
+/**
+ * Simple month/year dropdown controller for datepicker
+ * Manages the dropdown state for month and year selection
+ */
+export class MonthYearDropdownController {
+    constructor(host) {
+        this._isMonthDropdownOpen = false;
+        this._isYearDropdownOpen = false;
+        this._host = host;
+        this._host.addController(this);
+    }
+    hostConnected() {
+        // Setup click outside listener to close dropdowns
+        document.addEventListener('click', this.handleDocumentClick.bind(this));
+    }
+    hostDisconnected() {
+        document.removeEventListener('click', this.handleDocumentClick.bind(this));
+    }
+    /**
+     * Get month dropdown state
+     */
+    get isMonthDropdownOpen() {
+        return this._isMonthDropdownOpen;
+    }
+    /**
+     * Get year dropdown state
+     */
+    get isYearDropdownOpen() {
+        return this._isYearDropdownOpen;
+    }
+    /**
+     * Toggle month dropdown
+     */
+    toggleMonthDropdown() {
+        this._isYearDropdownOpen = false; // Close year dropdown
+        this._isMonthDropdownOpen = !this._isMonthDropdownOpen;
+        this._host.requestUpdate();
+    }
+    /**
+     * Toggle year dropdown
+     */
+    toggleYearDropdown() {
+        this._isMonthDropdownOpen = false; // Close month dropdown
+        this._isYearDropdownOpen = !this._isYearDropdownOpen;
+        this._host.requestUpdate();
+    }
+    /**
+     * Close all dropdowns
+     */
+    closeAllDropdowns() {
+        this._isMonthDropdownOpen = false;
+        this._isYearDropdownOpen = false;
+        this._host.requestUpdate();
+    }
+    /**
+     * Select a month (will be handled by the host component)
+     */
+    selectMonth(monthIndex) {
+        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) {
+        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
+     */
+    handleDocumentClick(event) {
+        const target = event.target;
+        // Check if click is outside the datepicker component
+        if (!this._host.contains(target)) {
+            this.closeAllDropdowns();
+        }
+    }
+}
+//# sourceMappingURL=month-year-dropdown.controller.js.map

package/dist/src/components/datepicker/controllers/positioning.controller.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @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';
+/**
+ * Positioning controller for datepicker calendar
+ * Handles calendar positioning, opening, closing, and click outside detection
+ */
+export declare class DatePickerPositioningController implements PositioningController, ReactiveController {
+    readonly host: ReactiveControllerHost & DatePickerHost;
+    private isCalendarOpen;
+    private clickOutsideHandler?;
+    private scrollHandler?;
+    constructor(host: ReactiveControllerHost & DatePickerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Setup global event listeners
+     */
+    private setupEventListeners;
+    /**
+     * Cleanup global event listeners
+     */
+    private cleanupEventListeners;
+    /**
+     * Position the calendar relative to the input
+     */
+    positionCalendar(): Promise<void>;
+    /**
+     * Update calendar position
+     */
+    updatePosition(): void;
+    /**
+     * Calculate optimal position for calendar
+     */
+    calculateOptimalPosition(): {
+        top: number;
+        left: number;
+        placement: string;
+    };
+    /**
+     * Check if there's space below the input
+     */
+    hasSpaceBelow(): boolean;
+    /**
+     * Check if there's space above the input
+     */
+    hasSpaceAbove(): boolean;
+    /**
+     * Open the calendar
+     */
+    openCalendar(): void;
+    /**
+     * Close the calendar
+     */
+    closeCalendar(): void;
+    /**
+     * Toggle calendar open/close state
+     */
+    toggleCalendar(): void;
+    /**
+     * Handle click outside calendar
+     */
+    handleClickOutside(event: MouseEvent): void;
+    /**
+     * Handle scroll events
+     */
+    handleScroll(): void;
+    /**
+     * Check if calendar is currently open
+     */
+    get isOpen(): boolean;
+    /**
+     * Handle errors that occur within the controller
+     */
+    handleError(error: Error, context: string): void;
+}
+//# sourceMappingURL=positioning.controller.d.ts.map