@nuraly/lumenui 0.2.1 → 0.3.2

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

@@ -0,0 +1,247 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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 {
+    constructor(host) {
+        this.isCalendarOpen = false;
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        this.setupEventListeners();
+    }
+    hostDisconnected() {
+        this.cleanupEventListeners();
+    }
+    /**
+     * Setup global event listeners
+     */
+    setupEventListeners() {
+        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
+     */
+    cleanupEventListeners() {
+        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
+     */
+    positionCalendar() {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            if (!this.isCalendarOpen)
+                return;
+            try {
+                yield this.host.requestUpdate();
+                yield new Promise(resolve => setTimeout(resolve, 0)); // Wait for DOM update
+                const hostElement = this.host;
+                const dateInput = (_a = hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-input');
+                const calendarContainer = (_b = hostElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.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) {
+                (_c = this.handleError) === null || _c === void 0 ? void 0 : _c.call(this, error, 'positionCalendar');
+            }
+        });
+    }
+    /**
+     * Update calendar position
+     */
+    updatePosition() {
+        if (this.isCalendarOpen) {
+            this.positionCalendar();
+        }
+    }
+    /**
+     * Calculate optimal position for calendar
+     */
+    calculateOptimalPosition() {
+        var _a, _b;
+        const hostElement = this.host;
+        const dateInput = (_a = hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-input');
+        const calendarContainer = (_b = hostElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.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() {
+        var _a, _b;
+        const hostElement = this.host;
+        const dateInput = (_a = hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-input');
+        const calendarContainer = (_b = hostElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.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() {
+        var _a, _b;
+        const hostElement = this.host;
+        const dateInput = (_a = hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-input');
+        const calendarContainer = (_b = hostElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.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() {
+        var _a;
+        try {
+            this.isCalendarOpen = true;
+            this.host.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) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'openCalendar');
+        }
+    }
+    /**
+     * Close the calendar
+     */
+    closeCalendar() {
+        var _a;
+        try {
+            this.isCalendarOpen = false;
+            this.host.openedCalendar = false;
+            this.host.dispatchEvent(new CustomEvent(DATE_PICKER_EVENTS.CALENDAR_CLOSE, {
+                bubbles: true,
+                composed: true,
+            }));
+            this.host.requestUpdate();
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'closeCalendar');
+        }
+    }
+    /**
+     * Toggle calendar open/close state
+     */
+    toggleCalendar() {
+        if (this.isCalendarOpen) {
+            this.closeCalendar();
+        }
+        else {
+            this.openCalendar();
+        }
+    }
+    /**
+     * Handle click outside calendar
+     */
+    handleClickOutside(event) {
+        if (!this.isCalendarOpen)
+            return;
+        const hostElement = this.host;
+        const composedPath = event.composedPath();
+        // Check if click was inside the host element
+        if (!composedPath.includes(hostElement)) {
+            this.closeCalendar();
+        }
+    }
+    /**
+     * Handle scroll events
+     */
+    handleScroll() {
+        if (this.isCalendarOpen) {
+            // Reposition calendar on scroll
+            requestAnimationFrame(() => {
+                this.positionCalendar();
+            });
+        }
+    }
+    /**
+     * Check if calendar is currently open
+     */
+    get isOpen() {
+        return this.isCalendarOpen;
+    }
+    /**
+     * Handle errors that occur within the controller
+     */
+    handleError(error, context) {
+        console.error(`DatePickerPositioningController error in ${context}:`, error);
+        this.host.dispatchEvent(new CustomEvent('datepicker-error', {
+            detail: { error, context, controller: 'positioning' },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+//# sourceMappingURL=positioning.controller.js.map

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

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { DateSelectionController } from '../interfaces/index.js';
+import { DatePickerHost } from '../interfaces/base-controller.interface.js';
+/**
+ * Date selection controller for managing date selection logic
+ * Handles single date, date range, and multiple date selections
+ */
+export declare class DatePickerSelectionController implements DateSelectionController, ReactiveController {
+    readonly host: ReactiveControllerHost & DatePickerHost;
+    private selectedDates;
+    private selectedRange;
+    constructor(host: ReactiveControllerHost & DatePickerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Initialize selection state from host value
+     */
+    private initializeFromHostValue;
+    /**
+     * Select a single date
+     */
+    selectDate(date: Date): void;
+    /**
+     * Handle range selection logic
+     */
+    private handleRangeSelection;
+    /**
+     * Generate array of dates between start and end (inclusive)
+     */
+    private generateDateRange;
+    /**
+     * Select a date range
+     */
+    selectDateRange(startDate: Date, endDate: Date): void;
+    /**
+     * Clear all selections
+     */
+    clearSelection(): void;
+    /**
+     * Get selected date (single selection)
+     */
+    getSelectedDate(): Date | null;
+    /**
+     * Get selected date range
+     */
+    getSelectedDateRange(): {
+        start: Date;
+        end: Date;
+    } | null;
+    /**
+     * Get all selected dates
+     */
+    getSelectedDates(): Date[];
+    /**
+     * Check if a date is selected
+     */
+    isDateSelected(date: Date): boolean;
+    /**
+     * Check if a date selection is valid
+     */
+    isValidSelection(date: Date): boolean;
+    /**
+     * Format selected date as string
+     */
+    formatSelectedDate(): string;
+    /**
+     * Format selected range as string
+     */
+    formatSelectedRange(): string;
+    /**
+     * Update host component value
+     */
+    private updateHostValue;
+    /**
+     * Dispatch single date selection event
+     */
+    private dispatchSelectionEvent;
+    /**
+     * Dispatch range selection event
+     */
+    private dispatchRangeEvent;
+    /**
+     * Handle errors that occur within the controller
+     */
+    handleError(error: Error, context: string): void;
+}
+//# sourceMappingURL=selection.controller.d.ts.map

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

@@ -0,0 +1,267 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { DATE_PICKER_EVENTS } from '../datepicker.constant.js';
+/**
+ * Date selection controller for managing date selection logic
+ * Handles single date, date range, and multiple date selections
+ */
+export class DatePickerSelectionController {
+    constructor(host) {
+        this.selectedDates = [];
+        this.selectedRange = null;
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        // Initialize selection from host value
+        this.initializeFromHostValue();
+    }
+    hostDisconnected() {
+        // Cleanup if needed
+    }
+    /**
+     * Initialize selection state from host value
+     */
+    initializeFromHostValue() {
+        if (this.host.value || this.host.dateValue) {
+            const dateString = this.host.value || this.host.dateValue;
+            const date = this.host.parseDate(dateString);
+            if (date) {
+                this.selectedDates = [date];
+            }
+        }
+    }
+    /**
+     * Select a single date
+     */
+    selectDate(date) {
+        var _a;
+        try {
+            if (!this.isValidSelection(date)) {
+                return;
+            }
+            if (this.host.range) {
+                this.handleRangeSelection(date);
+            }
+            else {
+                this.selectedDates = [date];
+                this.updateHostValue();
+                this.dispatchSelectionEvent(date);
+            }
+            this.host.requestUpdate();
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'selectDate');
+        }
+    }
+    /**
+     * Handle range selection logic
+     */
+    handleRangeSelection(date) {
+        if (!this.selectedRange || this.selectedRange.end) {
+            // Start new range
+            this.selectedRange = { start: date, end: date };
+            this.selectedDates = [date];
+        }
+        else {
+            // Complete the range
+            const startDate = this.selectedRange.start;
+            if (date >= startDate) {
+                this.selectedRange.end = date;
+            }
+            else {
+                this.selectedRange = { start: date, end: startDate };
+            }
+            this.selectedDates = this.generateDateRange(this.selectedRange.start, this.selectedRange.end);
+            this.dispatchRangeEvent(this.selectedRange.start, this.selectedRange.end);
+        }
+        this.updateHostValue();
+    }
+    /**
+     * Generate array of dates between start and end (inclusive)
+     */
+    generateDateRange(start, end) {
+        const dates = [];
+        const current = new Date(start);
+        while (current <= end) {
+            dates.push(new Date(current));
+            current.setDate(current.getDate() + 1);
+        }
+        return dates;
+    }
+    /**
+     * Select a date range
+     */
+    selectDateRange(startDate, endDate) {
+        var _a;
+        try {
+            if (!this.isValidSelection(startDate) || !this.isValidSelection(endDate)) {
+                return;
+            }
+            // Ensure start is before end
+            if (startDate > endDate) {
+                [startDate, endDate] = [endDate, startDate];
+            }
+            this.selectedRange = { start: startDate, end: endDate };
+            this.selectedDates = this.generateDateRange(startDate, endDate);
+            this.updateHostValue();
+            this.dispatchRangeEvent(startDate, endDate);
+            this.host.requestUpdate();
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'selectDateRange');
+        }
+    }
+    /**
+     * Clear all selections
+     */
+    clearSelection() {
+        var _a;
+        try {
+            this.selectedDates = [];
+            this.selectedRange = null;
+            this.updateHostValue();
+            this.host.requestUpdate();
+            // Dispatch clear event
+            this.host.dispatchEvent(new CustomEvent(DATE_PICKER_EVENTS.DATE_CHANGE, {
+                detail: { value: '', dates: [], type: 'clear' },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'clearSelection');
+        }
+    }
+    /**
+     * Get selected date (single selection)
+     */
+    getSelectedDate() {
+        return this.selectedDates.length > 0 ? this.selectedDates[0] : null;
+    }
+    /**
+     * Get selected date range
+     */
+    getSelectedDateRange() {
+        return this.selectedRange;
+    }
+    /**
+     * Get all selected dates
+     */
+    getSelectedDates() {
+        return [...this.selectedDates];
+    }
+    /**
+     * Check if a date is selected
+     */
+    isDateSelected(date) {
+        return this.selectedDates.some(selectedDate => selectedDate.getFullYear() === date.getFullYear() &&
+            selectedDate.getMonth() === date.getMonth() &&
+            selectedDate.getDate() === date.getDate());
+    }
+    /**
+     * Check if a date selection is valid
+     */
+    isValidSelection(date) {
+        // Check if date is disabled
+        if (this.host.disabled)
+            return false;
+        // Check min/max dates
+        if (this.host.minDate) {
+            const minDate = this.host.parseDate(this.host.minDate);
+            if (minDate && date < minDate)
+                return false;
+        }
+        if (this.host.maxDate) {
+            const maxDate = this.host.parseDate(this.host.maxDate);
+            if (maxDate && date > maxDate)
+                return false;
+        }
+        // Check disabled dates
+        if (this.host.disabledDates) {
+            const dateString = this.host.formatDate(date);
+            if (this.host.disabledDates.includes(dateString))
+                return false;
+        }
+        return true;
+    }
+    /**
+     * Format selected date as string
+     */
+    formatSelectedDate() {
+        const selectedDate = this.getSelectedDate();
+        return selectedDate ? this.host.formatDate(selectedDate) : '';
+    }
+    /**
+     * Format selected range as string
+     */
+    formatSelectedRange() {
+        if (!this.selectedRange)
+            return '';
+        const startStr = this.host.formatDate(this.selectedRange.start);
+        const endStr = this.host.formatDate(this.selectedRange.end);
+        return `${startStr} - ${endStr}`;
+    }
+    /**
+     * Update host component value
+     */
+    updateHostValue() {
+        if (this.host.range && this.selectedRange) {
+            // For range selection, update both value and dateValue
+            const rangeString = this.formatSelectedRange();
+            this.host.value = rangeString;
+            this.host.dateValue = rangeString;
+        }
+        else {
+            const dateString = this.formatSelectedDate();
+            this.host.value = dateString;
+            this.host.dateValue = dateString;
+        }
+    }
+    /**
+     * Dispatch single date selection event
+     */
+    dispatchSelectionEvent(date) {
+        this.host.dispatchEvent(new CustomEvent(DATE_PICKER_EVENTS.DATE_CHANGE, {
+            detail: {
+                value: this.formatSelectedDate(),
+                date,
+                dates: this.selectedDates,
+                type: 'single'
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Dispatch range selection event
+     */
+    dispatchRangeEvent(startDate, endDate) {
+        this.host.dispatchEvent(new CustomEvent(DATE_PICKER_EVENTS.RANGE_CHANGE, {
+            detail: {
+                value: this.formatSelectedRange(),
+                startDate,
+                endDate,
+                dates: this.selectedDates,
+                type: 'range'
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Handle errors that occur within the controller
+     */
+    handleError(error, context) {
+        console.error(`DatePickerSelectionController error in ${context}:`, error);
+        this.host.dispatchEvent(new CustomEvent('datepicker-error', {
+            detail: { error, context, controller: 'selection' },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+//# sourceMappingURL=selection.controller.js.map

package/dist/src/components/datepicker/interfaces/base-controller.interface.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Base controller interface for all datepicker controllers
+ */
+export interface DatePickerBaseController {
+    readonly host: DatePickerHost;
+    handleError?(error: Error, context: string): void;
+}
+/**
+ * Error handler interface
+ */
+export interface ErrorHandler {
+    handleError(error: Error, context: string): void;
+}
+/**
+ * Host interface defining the datepicker component's API
+ */
+export interface DatePickerHost {
+    value: string;
+    dateValue: string;
+    defaultValue: string;
+    disabled: boolean;
+    required: boolean;
+    range: boolean;
+    locale: string;
+    fieldFormat: string;
+    minDate?: string;
+    maxDate?: string;
+    disabledDates?: string[];
+    requestUpdate(): void;
+    dispatchEvent(event: Event): boolean;
+    getCurrentDate(): Date;
+    formatDate(date: Date): string;
+    parseDate(dateString: string): Date | null;
+}
+//# sourceMappingURL=base-controller.interface.d.ts.map

package/dist/src/components/datepicker/interfaces/base-controller.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=base-controller.interface.js.map