@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/colorpicker/controllers/event.controller.js

@@ -0,0 +1,130 @@
+import { BaseColorPickerController } from './base.controller.js';
+/**
+ * Event controller manages all event handling for the colorpicker component
+ */
+export class ColorPickerEventController extends BaseColorPickerController {
+    constructor() {
+        super(...arguments);
+        this._outsideClickHandler = null;
+        this._escapeHandler = null;
+    }
+    /**
+     * Setup global event listeners
+     */
+    setupEventListeners() {
+        this._outsideClickHandler = this.handleOutsideClick.bind(this);
+        document.addEventListener('click', this._outsideClickHandler, true);
+        this._escapeHandler = this.handleEscapeKey.bind(this);
+        document.addEventListener('keydown', this._escapeHandler);
+    }
+    /**
+     * Remove global event listeners
+     */
+    removeEventListeners() {
+        if (this._outsideClickHandler) {
+            document.removeEventListener('click', this._outsideClickHandler, true);
+            this._outsideClickHandler = null;
+        }
+        if (this._escapeHandler) {
+            document.removeEventListener('keydown', this._escapeHandler);
+            this._escapeHandler = null;
+        }
+    }
+    /**
+     * Handle trigger click to toggle dropdown
+     */
+    handleTriggerClick(event) {
+        event.stopPropagation();
+        if (!this.host.disabled) {
+            const dropdownController = this.host.dropdownController;
+            if (dropdownController) {
+                dropdownController.toggle();
+            }
+        }
+    }
+    /**
+     * Handle clicks outside the component
+     */
+    handleOutsideClick(event) {
+        const composedPath = event.composedPath();
+        if (!composedPath.includes(this.host)) {
+            const dropdownController = this.host.dropdownController;
+            if (dropdownController) {
+                dropdownController.close();
+            }
+        }
+    }
+    /**
+     * Handle escape key to close dropdown
+     */
+    handleEscapeKey(event) {
+        if (event.key === 'Escape' && this.host.show) {
+            event.preventDefault();
+            const dropdownController = this.host.dropdownController;
+            if (dropdownController) {
+                dropdownController.close();
+            }
+        }
+    }
+    /**
+     * Handle color change from picker or default colors
+     */
+    handleColorChange(newColor) {
+        if (this.isValidColor(newColor) && this.host.color !== newColor) {
+            const previousColor = this.host.color;
+            this.host.color = newColor;
+            this.dispatchColorChangeEvent(newColor, previousColor);
+            this.requestUpdate();
+        }
+    }
+    /**
+     * Handle input change from text input
+     */
+    handleInputChange(event) {
+        const newColor = event.detail.value;
+        if (newColor && newColor !== this.host.color) {
+            this.handleColorChange(newColor);
+        }
+    }
+    /**
+     * Dispatch color change event
+     */
+    dispatchColorChangeEvent(newColor, previousColor) {
+        const detail = {
+            value: newColor,
+            previousValue: previousColor,
+            isValid: this.isValidColor(newColor),
+            color: newColor,
+        };
+        // Dispatch nr-color-change event (primary event)
+        this.dispatchEvent(new CustomEvent('nr-color-change', {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+        // Also dispatch hy-color-change for backwards compatibility
+        this.dispatchEvent(new CustomEvent('hy-color-change', {
+            bubbles: true,
+            composed: true,
+            detail,
+        }));
+        // Also dispatch the old event name for backwards compatibility
+        this.dispatchEvent(new CustomEvent('color-changed', {
+            bubbles: true,
+            composed: true,
+            detail: { value: newColor, color: newColor },
+        }));
+    }
+    /**
+     * Validate color format
+     */
+    isValidColor(color) {
+        try {
+            return CSS.supports('color', color);
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+}
+//# sourceMappingURL=event.controller.js.map

package/dist/src/components/colorpicker/controllers/index.d.ts

@@ -0,0 +1,4 @@
+export { BaseColorPickerController } from './base.controller.js';
+export { ColorPickerDropdownController } from './dropdown.controller.js';
+export { ColorPickerEventController } from './event.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/colorpicker/controllers/index.js

@@ -0,0 +1,4 @@
+export { BaseColorPickerController } from './base.controller.js';
+export { ColorPickerDropdownController } from './dropdown.controller.js';
+export { ColorPickerEventController } from './event.controller.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/colorpicker/interfaces/index.d.ts

@@ -0,0 +1,60 @@
+import type { LitElement } from 'lit';
+/**
+ * Interface for the ColorPicker host component
+ */
+export interface ColorPickerHost extends LitElement {
+    color: string;
+    show: boolean;
+    disabled: boolean;
+    defaultColorSets: string[];
+    size: string;
+    setupEventListeners?: () => void;
+    removeEventListeners?: () => void;
+}
+/**
+ * Dropdown position information
+ */
+export interface DropdownPosition {
+    top: number;
+    left: number;
+    width: number;
+    placement: 'top' | 'bottom';
+}
+/**
+ * Interface for dropdown controller
+ */
+export interface DropdownController {
+    readonly isOpen: boolean;
+    readonly position: DropdownPosition;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    calculatePosition(): void;
+}
+/**
+ * Interface for event controller
+ */
+export interface EventController {
+    setupEventListeners(): void;
+    removeEventListeners(): void;
+    handleTriggerClick(event: Event): void;
+    handleColorChange(newColor: string): void;
+    handleInputChange(event: CustomEvent): void;
+    isValidColor(color: string): boolean;
+}
+/**
+ * Color change event detail
+ */
+export interface ColorChangeEventDetail {
+    value: string;
+    previousValue: string;
+    isValid: boolean;
+    color: string;
+}
+/**
+ * Color click event detail (for default color sets)
+ */
+export interface ColorClickEventDetail {
+    value: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/colorpicker/interfaces/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+import { CalendarController } from '../interfaces/index.js';
+import { DatePickerHost } from '../interfaces/base-controller.interface.js';
+import { INavigationDate, IDayPresentation } from '../datepicker.types.js';
+/**
+ * Calendar controller for managing calendar display and navigation
+ * Handles month/year navigation, day generation, and calendar state
+ */
+export declare class DatePickerCalendarController implements CalendarController, ReactiveController {
+    readonly host: ReactiveControllerHost & DatePickerHost;
+    navigationDates: INavigationDate;
+    daysPresentation: IDayPresentation[];
+    constructor(host: ReactiveControllerHost & DatePickerHost, initialDate?: Date);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Navigate to specific month and year
+     */
+    navigateToMonth(year: number, month: number): void;
+    /**
+     * Navigate to previous month
+     */
+    navigateToPreviousMonth(): void;
+    /**
+     * Navigate to next month
+     */
+    navigateToNextMonth(): void;
+    /**
+     * Navigate to previous year
+     */
+    navigateToPreviousYear(): void;
+    /**
+     * Navigate to next year
+     */
+    navigateToNextYear(): void;
+    /**
+     * Get current month days presentation
+     */
+    getCurrentMonthDays(): IDayPresentation[];
+    /**
+     * Check if date is in current month
+     */
+    isDateInCurrentMonth(date: Date): boolean;
+    /**
+     * Check if date is today
+     */
+    isDateToday(date: Date): boolean;
+    /**
+     * Check if date is selected
+     */
+    isDateSelected(date: Date): boolean;
+    /**
+     * Check if date is disabled
+     */
+    isDateDisabled(date: Date): boolean;
+    /**
+     * Check if date is in range (for range picker)
+     */
+    isDateInRange(_date: Date): boolean;
+    /**
+     * Generate calendar days for given month and year
+     */
+    generateCalendarDays(year: number, month: number): IDayPresentation[];
+    /**
+     * Update calendar display with current navigation dates
+     */
+    updateCalendarDisplay(): void;
+    /**
+     * Handle errors that occur within the controller
+     */
+    handleError(error: Error, context: string): void;
+}
+//# sourceMappingURL=calendar.controller.d.ts.map

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

@@ -0,0 +1,225 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { getMonthDetails } from '../utils/month.helper.js';
+import dayjs from 'dayjs';
+/**
+ * Calendar controller for managing calendar display and navigation
+ * Handles month/year navigation, day generation, and calendar state
+ */
+export class DatePickerCalendarController {
+    constructor(host, initialDate) {
+        this.daysPresentation = [];
+        this.host = host;
+        this.host.addController(this);
+        const current = initialDate || new Date();
+        this.navigationDates = {
+            start: {
+                year: current.getFullYear(),
+                month: current.getMonth() + 1,
+                day: current.getDate(),
+            },
+        };
+    }
+    hostConnected() {
+        this.updateCalendarDisplay();
+    }
+    hostDisconnected() {
+        // Cleanup if needed
+    }
+    /**
+     * Navigate to specific month and year
+     */
+    navigateToMonth(year, month) {
+        var _a;
+        try {
+            this.navigationDates.start.year = year;
+            this.navigationDates.start.month = month;
+            this.updateCalendarDisplay();
+            this.host.requestUpdate();
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'navigateToMonth');
+        }
+    }
+    /**
+     * Navigate to previous month
+     */
+    navigateToPreviousMonth() {
+        var _a;
+        try {
+            let { year, month } = this.navigationDates.start;
+            month--;
+            if (month < 1) {
+                month = 12;
+                year--;
+            }
+            this.navigateToMonth(year, month);
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'navigateToPreviousMonth');
+        }
+    }
+    /**
+     * Navigate to next month
+     */
+    navigateToNextMonth() {
+        var _a;
+        try {
+            let { year, month } = this.navigationDates.start;
+            month++;
+            if (month > 12) {
+                month = 1;
+                year++;
+            }
+            this.navigateToMonth(year, month);
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'navigateToNextMonth');
+        }
+    }
+    /**
+     * Navigate to previous year
+     */
+    navigateToPreviousYear() {
+        var _a;
+        try {
+            const { year, month } = this.navigationDates.start;
+            this.navigateToMonth(year - 1, month);
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'navigateToPreviousYear');
+        }
+    }
+    /**
+     * Navigate to next year
+     */
+    navigateToNextYear() {
+        var _a;
+        try {
+            const { year, month } = this.navigationDates.start;
+            this.navigateToMonth(year + 1, month);
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'navigateToNextYear');
+        }
+    }
+    /**
+     * Get current month days presentation
+     */
+    getCurrentMonthDays() {
+        return this.daysPresentation;
+    }
+    /**
+     * Check if date is in current month
+     */
+    isDateInCurrentMonth(date) {
+        const { year, month } = this.navigationDates.start;
+        return date.getFullYear() === year && date.getMonth() + 1 === month;
+    }
+    /**
+     * Check if date is today
+     */
+    isDateToday(date) {
+        const today = new Date();
+        return (date.getFullYear() === today.getFullYear() &&
+            date.getMonth() === today.getMonth() &&
+            date.getDate() === today.getDate());
+    }
+    /**
+     * Check if date is selected
+     */
+    isDateSelected(date) {
+        if (!this.host.value)
+            return false;
+        try {
+            const selectedDate = this.host.parseDate(this.host.value);
+            if (!selectedDate)
+                return false;
+            return (date.getFullYear() === selectedDate.getFullYear() &&
+                date.getMonth() === selectedDate.getMonth() &&
+                date.getDate() === selectedDate.getDate());
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /**
+     * Check if date is disabled
+     */
+    isDateDisabled(date) {
+        if (this.host.disabled)
+            return true;
+        // Check min/max dates if available
+        if (this.host.minDate) {
+            const minDate = this.host.parseDate(this.host.minDate);
+            if (minDate && date < minDate)
+                return true;
+        }
+        if (this.host.maxDate) {
+            const maxDate = this.host.parseDate(this.host.maxDate);
+            if (maxDate && date > maxDate)
+                return true;
+        }
+        // Check disabled dates array if available
+        if (this.host.disabledDates) {
+            const dateString = this.host.formatDate(date);
+            return this.host.disabledDates.includes(dateString);
+        }
+        return false;
+    }
+    /**
+     * Check if date is in range (for range picker)
+     */
+    isDateInRange(_date) {
+        if (!this.host.range)
+            return false;
+        // Implementation depends on range selection logic
+        // This would need to be coordinated with DateSelectionController
+        return false;
+    }
+    /**
+     * Generate calendar days for given month and year
+     */
+    generateCalendarDays(year, month) {
+        var _a;
+        try {
+            const days = dayjs().localeData().weekdays();
+            return getMonthDetails(year, month - 1, days);
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'generateCalendarDays');
+            return [];
+        }
+    }
+    /**
+     * Update calendar display with current navigation dates
+     */
+    updateCalendarDisplay() {
+        var _a;
+        try {
+            const { year, month } = this.navigationDates.start;
+            this.daysPresentation = this.generateCalendarDays(year, month);
+            // Enhance days with additional state information
+            this.daysPresentation = this.daysPresentation.map(day => (Object.assign(Object.assign({}, day), { isToday: this.isDateToday(new Date(day.year, day.month, day.date)), isSelected: this.isDateSelected(new Date(day.year, day.month, day.date)), isDisabled: this.isDateDisabled(new Date(day.year, day.month, day.date)), isInRange: this.isDateInRange(new Date(day.year, day.month, day.date)) })));
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'updateCalendarDisplay');
+        }
+    }
+    /**
+     * Handle errors that occur within the controller
+     */
+    handleError(error, context) {
+        console.error(`DatePickerCalendarController error in ${context}:`, error);
+        // Dispatch custom error event if needed
+        this.host.dispatchEvent(new CustomEvent('datepicker-error', {
+            detail: { error, context, controller: 'calendar' },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+//# sourceMappingURL=calendar.controller.js.map

package/dist/src/components/datepicker/controllers/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { DatePickerCalendarController } from './calendar.controller.js';
+export { DatePickerSelectionController } from './selection.controller.js';
+export { DatePickerKeyboardController } from './keyboard.controller.js';
+export { DatePickerPositioningController } from './positioning.controller.js';
+export { MonthYearDropdownController } from './month-year-dropdown.controller.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/datepicker/controllers/index.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { DatePickerCalendarController } from './calendar.controller.js';
+export { DatePickerSelectionController } from './selection.controller.js';
+export { DatePickerKeyboardController } from './keyboard.controller.js';
+export { DatePickerPositioningController } from './positioning.controller.js';
+export { MonthYearDropdownController } from './month-year-dropdown.controller.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,96 @@
+/**
+ * @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';
+/**
+ * Keyboard navigation controller for datepicker
+ * Handles keyboard interactions and navigation within the calendar
+ */
+export declare class DatePickerKeyboardController implements KeyboardController, ReactiveController {
+    private calendarController;
+    private selectionController;
+    readonly host: ReactiveControllerHost & DatePickerHost;
+    private focusedDate;
+    constructor(host: ReactiveControllerHost & DatePickerHost, calendarController: DatePickerCalendarController, selectionController: DatePickerSelectionController);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handle keyboard events
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Navigate one day left
+     */
+    navigateLeft(): void;
+    /**
+     * Navigate one day right
+     */
+    navigateRight(): void;
+    /**
+     * Navigate one week up
+     */
+    navigateUp(): void;
+    /**
+     * Navigate one week down
+     */
+    navigateDown(): void;
+    /**
+     * Navigate to first day of current week
+     */
+    navigateToFirstDayOfWeek(): void;
+    /**
+     * Navigate to last day of current week
+     */
+    navigateToLastDayOfWeek(): void;
+    /**
+     * Navigate to first day of current month
+     */
+    navigateToFirstDayOfMonth(): void;
+    /**
+     * Navigate to last day of current month
+     */
+    navigateToLastDayOfMonth(): void;
+    /**
+     * Navigate to previous month
+     */
+    private navigateToPreviousMonth;
+    /**
+     * Navigate to next month
+     */
+    private navigateToNextMonth;
+    /**
+     * Navigate to previous year
+     */
+    private navigateToPreviousYear;
+    /**
+     * Navigate to next year
+     */
+    private navigateToNextYear;
+    /**
+     * Set focused date and update calendar if needed
+     */
+    private setFocusedDate;
+    /**
+     * Select the currently focused date
+     */
+    selectCurrentDate(): void;
+    /**
+     * Close the calendar
+     */
+    closeCalendar(): void;
+    /**
+     * Get currently focused date
+     */
+    getFocusedDate(): Date;
+    /**
+     * Handle errors that occur within the controller
+     */
+    handleError(error: Error, context: string): void;
+}
+//# sourceMappingURL=keyboard.controller.d.ts.map