@nuraly/lumenui 0.1.0 → 0.2.2

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

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