@nuraly/lumenui 0.2.1 → 0.2.2

package/dist/src/components/timepicker/test/timepicker_test.js

@@ -0,0 +1,218 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, 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 { html, fixture, expect, aTimeout } from '@open-wc/testing';
+import { TimeFormat, TimePickerSize, TimePickerVariant } from '../timepicker.types.js';
+suite('NrTimePickerElement', () => {
+    let element;
+    setup(() => __awaiter(void 0, void 0, void 0, function* () {
+        element = yield fixture(html `<nr-timepicker></nr-timepicker>`);
+    }));
+    suite('Basic functionality', () => {
+        test('should render successfully', () => {
+            expect(element).to.exist;
+            expect(element.tagName).to.equal('NR-TIMEPICKER');
+        });
+        test('should have default properties', () => {
+            expect(element.format).to.equal(TimeFormat.TwentyFourHour);
+            expect(element.showSeconds).to.be.false;
+            expect(element.disabled).to.be.false;
+            expect(element.readonly).to.be.false;
+            expect(element.required).to.be.false;
+        });
+        test('should have empty initial value', () => {
+            expect(element.value).to.equal('');
+        });
+    });
+    suite('Time format handling', () => {
+        test('should handle 24-hour format by default', () => __awaiter(void 0, void 0, void 0, function* () {
+            element.value = '14:30';
+            yield element.updateComplete;
+            expect(element.value).to.equal('14:30');
+        }));
+        test('should handle 12-hour format', () => __awaiter(void 0, void 0, void 0, function* () {
+            element.format = TimeFormat.TwelveHour;
+            element.value = '2:30 PM';
+            yield element.updateComplete;
+            expect(element.value).to.equal('2:30 PM');
+        }));
+        test('should format time with seconds when enabled', () => __awaiter(void 0, void 0, void 0, function* () {
+            element.showSeconds = true;
+            element.value = '14:30:45';
+            yield element.updateComplete;
+            expect(element.value).to.equal('14:30:45');
+        }));
+    });
+    suite('Time validation', () => {
+        test('should validate time within min/max range', () => __awaiter(void 0, void 0, void 0, function* () {
+            element.minTime = '09:00';
+            element.maxTime = '17:00';
+            yield element.updateComplete;
+            // Valid time within range
+            element.value = '12:00';
+            yield element.updateComplete;
+            expect(element.value).to.equal('12:00');
+        }));
+        test('should reject invalid time formats', () => __awaiter(void 0, void 0, void 0, function* () {
+            const invalidValue = 'invalid-time';
+            element.value = invalidValue;
+            yield element.updateComplete;
+            // Should not set invalid value
+            expect(element.value).to.not.equal(invalidValue);
+        }));
+    });
+    suite('Clock functionality', () => {
+        test('should open and close clock', () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            // Check initial state via DOM
+            let dropdown = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.time-picker__dropdown--open');
+            expect(dropdown).to.not.exist;
+            element.open();
+            yield element.updateComplete;
+            dropdown = (_b = element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.time-picker__dropdown--open');
+            expect(dropdown).to.exist;
+            element.close();
+            yield element.updateComplete;
+            dropdown = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.time-picker__dropdown--open');
+            expect(dropdown).to.not.exist;
+        }));
+        test('should toggle clock state via trigger button', () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            const trigger = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.time-picker__trigger');
+            // Initially closed
+            let dropdown = (_b = element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.time-picker__dropdown--open');
+            expect(dropdown).to.not.exist;
+            // Click to open
+            trigger.click();
+            yield element.updateComplete;
+            dropdown = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.time-picker__dropdown--open');
+            expect(dropdown).to.exist;
+            // Click to close
+            trigger.click();
+            yield element.updateComplete;
+            dropdown = (_d = element.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.time-picker__dropdown--open');
+            expect(dropdown).to.not.exist;
+        }));
+    });
+    suite('Time manipulation', () => {
+        test('should clear time value', () => __awaiter(void 0, void 0, void 0, function* () {
+            element.value = '12:00';
+            yield element.updateComplete;
+            element.clear();
+            yield element.updateComplete;
+            expect(element.value).to.equal('');
+        }));
+        test('should set current time', () => __awaiter(void 0, void 0, void 0, function* () {
+            element.setToNow();
+            yield element.updateComplete;
+            // Should have some value after setting to now
+            expect(element.value).to.not.equal('');
+            // Basic format check for 24-hour format
+            expect(element.value).to.match(/^\d{1,2}:\d{2}$/);
+        }));
+    });
+    suite('Event handling', () => {
+        test('should dispatch time-change event', () => __awaiter(void 0, void 0, void 0, function* () {
+            let eventFired = false;
+            let eventDetail = null;
+            element.addEventListener('nr-time-change', (e) => {
+                const customEvent = e;
+                eventFired = true;
+                eventDetail = customEvent.detail;
+            });
+            element.value = '15:30';
+            yield element.updateComplete;
+            // Allow time for event to be dispatched
+            yield aTimeout(10);
+            expect(eventFired).to.be.true;
+            expect(eventDetail).to.exist;
+        }));
+        test('should dispatch clock open/close events', () => __awaiter(void 0, void 0, void 0, function* () {
+            let openEventFired = false;
+            let closeEventFired = false;
+            element.addEventListener('nr-clock-open', () => {
+                openEventFired = true;
+            });
+            element.addEventListener('nr-clock-close', () => {
+                closeEventFired = true;
+            });
+            element.open();
+            yield element.updateComplete;
+            yield aTimeout(10);
+            expect(openEventFired).to.be.true;
+            element.close();
+            yield element.updateComplete;
+            yield aTimeout(10);
+            expect(closeEventFired).to.be.true;
+        }));
+    });
+    suite('Accessibility', () => {
+        test('should have proper ARIA attributes', () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            element.label = 'Select Time';
+            element.required = true;
+            yield element.updateComplete;
+            const input = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            expect(input).to.exist;
+            expect(input === null || input === void 0 ? void 0 : input.getAttribute('required')).to.exist;
+        }));
+        test('should support disabled state', () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            element.disabled = true;
+            yield element.updateComplete;
+            const input = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            expect(input === null || input === void 0 ? void 0 : input.hasAttribute('disabled')).to.be.true;
+        }));
+        test('should support readonly state', () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            element.readonly = true;
+            yield element.updateComplete;
+            const input = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input');
+            expect(input === null || input === void 0 ? void 0 : input.hasAttribute('readonly')).to.be.true;
+        }));
+    });
+    suite('Size and variant attributes', () => {
+        test('should apply size attribute to host', () => __awaiter(void 0, void 0, void 0, function* () {
+            element.size = TimePickerSize.Large;
+            yield element.updateComplete;
+            expect(element.hasAttribute('size')).to.be.true;
+            expect(element.getAttribute('size')).to.equal('large');
+        }));
+        test('should apply variant attribute to host', () => __awaiter(void 0, void 0, void 0, function* () {
+            element.variant = TimePickerVariant.Outlined;
+            yield element.updateComplete;
+            expect(element.hasAttribute('variant')).to.be.true;
+            expect(element.getAttribute('variant')).to.equal('outlined');
+        }));
+    });
+    suite('Controller integration', () => {
+        test('should have selection controller', () => {
+            // Access private controller for testing (cast to any to bypass TypeScript)
+            const controller = element.selectionController;
+            expect(controller).to.exist;
+            expect(typeof controller.selectTime).to.equal('function');
+        });
+        test('should have validation controller', () => {
+            const controller = element.validationController;
+            expect(controller).to.exist;
+            expect(typeof controller.validateConstraints).to.equal('function');
+        });
+        test('should have formatting controller', () => {
+            const controller = element.formattingController;
+            expect(controller).to.exist;
+            expect(typeof controller.formatForDisplay).to.equal('function');
+        });
+    });
+});
+//# sourceMappingURL=timepicker_test.js.map

package/dist/src/components/timepicker/utils/time.utils.d.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TimeValue, TimePeriod, TimeFormat } from '../timepicker.types.js';
+/**
+ * Time utility functions for time picker component
+ */
+export declare class TimeUtils {
+    /**
+     * Create a new TimeValue object
+     */
+    static createTimeValue(hours: number, minutes: number, seconds?: number, period?: TimePeriod): TimeValue;
+    /**
+     * Parse time string to TimeValue
+     */
+    static parseTimeString(timeString: string, format?: TimeFormat): TimeValue | null;
+    /**
+     * Parse 24-hour format time string
+     */
+    private static parse24HourTime;
+    /**
+     * Parse 12-hour format time string
+     */
+    private static parse12HourTime;
+    /**
+     * Format TimeValue to string
+     */
+    static formatTimeValue(time: TimeValue, format?: TimeFormat, showSeconds?: boolean): string;
+    /**
+     * Format time in 24-hour format
+     */
+    private static format24HourTime;
+    /**
+     * Format time in 12-hour format
+     */
+    private static format12HourTime;
+    /**
+     * Get current time as TimeValue
+     */
+    static getCurrentTime(): TimeValue;
+    /**
+     * Compare two TimeValue objects
+     */
+    static compareTime(time1: TimeValue, time2: TimeValue): number;
+    /**
+     * Check if two TimeValue objects are equal
+     */
+    static isTimeEqual(time1: TimeValue, time2: TimeValue): boolean;
+    /**
+     * Validate 24-hour time components
+     */
+    private static isValidTime24;
+    /**
+     * Validate 12-hour time components
+     */
+    private static isValidTime12;
+    /**
+     * Add time to a TimeValue
+     */
+    static addTime(time: TimeValue, hoursToAdd: number, minutesToAdd: number, secondsToAdd?: number): TimeValue;
+    /**
+     * Generate time options for dropdowns
+     */
+    static generateTimeOptions(interval?: number, format?: TimeFormat, showSeconds?: boolean): Array<{
+        value: string;
+        label: string;
+    }>;
+    /**
+     * Round time to nearest interval
+     */
+    static roundToInterval(time: TimeValue, intervalMinutes: number): TimeValue;
+    /**
+     * Check if time is within range
+     */
+    static isTimeInRange(time: TimeValue, minTime: TimeValue | null, maxTime: TimeValue | null): boolean;
+    /**
+     * Convert Date object to TimeValue
+     */
+    static dateToTimeValue(date: Date): TimeValue;
+    /**
+     * Convert TimeValue to Date object (using current date)
+     */
+    static timeValueToDate(time: TimeValue, baseDate?: Date): Date;
+}
+//# sourceMappingURL=time.utils.d.ts.map

package/dist/src/components/timepicker/utils/time.utils.js

@@ -0,0 +1,235 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TimePeriod, TimeFormat } from '../timepicker.types.js';
+import { TIME_BOUNDARIES } from '../timepicker.constants.js';
+/**
+ * Time utility functions for time picker component
+ */
+export class TimeUtils {
+    /**
+     * Create a new TimeValue object
+     */
+    static createTimeValue(hours, minutes, seconds = 0, period) {
+        return {
+            hours: Math.max(0, Math.min(hours, 23)),
+            minutes: Math.max(0, Math.min(minutes, 59)),
+            seconds: Math.max(0, Math.min(seconds, 59)),
+            period,
+        };
+    }
+    /**
+     * Parse time string to TimeValue
+     */
+    static parseTimeString(timeString, format = TimeFormat.TwentyFourHour) {
+        if (!(timeString === null || timeString === void 0 ? void 0 : timeString.trim())) {
+            return null;
+        }
+        const cleanTime = timeString.trim().toUpperCase();
+        if (format === TimeFormat.TwelveHour) {
+            return this.parse12HourTime(cleanTime);
+        }
+        else {
+            return this.parse24HourTime(cleanTime);
+        }
+    }
+    /**
+     * Parse 24-hour format time string
+     */
+    static parse24HourTime(timeString) {
+        const match = timeString.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
+        if (!match) {
+            return null;
+        }
+        const hours = Number.parseInt(match[1], 10);
+        const minutes = Number.parseInt(match[2], 10);
+        const seconds = match[3] ? Number.parseInt(match[3], 10) : 0;
+        if (!this.isValidTime24(hours, minutes, seconds)) {
+            return null;
+        }
+        return this.createTimeValue(hours, minutes, seconds);
+    }
+    /**
+     * Parse 12-hour format time string
+     */
+    static parse12HourTime(timeString) {
+        const match = timeString.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?\s?(AM|PM)$/);
+        if (!match) {
+            return null;
+        }
+        let hours = Number.parseInt(match[1], 10);
+        const minutes = Number.parseInt(match[2], 10);
+        const seconds = match[3] ? Number.parseInt(match[3], 10) : 0;
+        const period = match[4];
+        if (!this.isValidTime12(hours, minutes, seconds)) {
+            return null;
+        }
+        // Convert to 24-hour format for internal storage
+        if (period === TimePeriod.PM && hours !== 12) {
+            hours += 12;
+        }
+        else if (period === TimePeriod.AM && hours === 12) {
+            hours = 0;
+        }
+        return this.createTimeValue(hours, minutes, seconds, period);
+    }
+    /**
+     * Format TimeValue to string
+     */
+    static formatTimeValue(time, format = TimeFormat.TwentyFourHour, showSeconds = false) {
+        if (!time) {
+            return '';
+        }
+        if (format === TimeFormat.TwelveHour) {
+            return this.format12HourTime(time, showSeconds);
+        }
+        else {
+            return this.format24HourTime(time, showSeconds);
+        }
+    }
+    /**
+     * Format time in 24-hour format
+     */
+    static format24HourTime(time, showSeconds) {
+        const hours = time.hours.toString().padStart(2, '0');
+        const minutes = time.minutes.toString().padStart(2, '0');
+        if (showSeconds) {
+            const seconds = time.seconds.toString().padStart(2, '0');
+            return `${hours}:${minutes}:${seconds}`;
+        }
+        return `${hours}:${minutes}`;
+    }
+    /**
+     * Format time in 12-hour format
+     */
+    static format12HourTime(time, showSeconds) {
+        let hours = time.hours;
+        const minutes = time.minutes.toString().padStart(2, '0');
+        const period = hours >= 12 ? TimePeriod.PM : TimePeriod.AM;
+        // Convert to 12-hour format
+        if (hours === 0) {
+            hours = 12;
+        }
+        else if (hours > 12) {
+            hours -= 12;
+        }
+        const hoursStr = hours.toString();
+        if (showSeconds) {
+            const seconds = time.seconds.toString().padStart(2, '0');
+            return `${hoursStr}:${minutes}:${seconds} ${period}`;
+        }
+        return `${hoursStr}:${minutes} ${period}`;
+    }
+    /**
+     * Get current time as TimeValue
+     */
+    static getCurrentTime() {
+        const now = new Date();
+        return this.createTimeValue(now.getHours(), now.getMinutes(), now.getSeconds());
+    }
+    /**
+     * Compare two TimeValue objects
+     */
+    static compareTime(time1, time2) {
+        const totalSeconds1 = time1.hours * 3600 + time1.minutes * 60 + time1.seconds;
+        const totalSeconds2 = time2.hours * 3600 + time2.minutes * 60 + time2.seconds;
+        return totalSeconds1 - totalSeconds2;
+    }
+    /**
+     * Check if two TimeValue objects are equal
+     */
+    static isTimeEqual(time1, time2) {
+        return this.compareTime(time1, time2) === 0;
+    }
+    /**
+     * Validate 24-hour time components
+     */
+    static isValidTime24(hours, minutes, seconds = 0) {
+        return (hours >= TIME_BOUNDARIES.MIN_HOUR_24 &&
+            hours <= TIME_BOUNDARIES.MAX_HOUR_24 &&
+            minutes >= TIME_BOUNDARIES.MIN_MINUTE &&
+            minutes <= TIME_BOUNDARIES.MAX_MINUTE &&
+            seconds >= TIME_BOUNDARIES.MIN_SECOND &&
+            seconds <= TIME_BOUNDARIES.MAX_SECOND);
+    }
+    /**
+     * Validate 12-hour time components
+     */
+    static isValidTime12(hours, minutes, seconds = 0) {
+        return (hours >= TIME_BOUNDARIES.MIN_HOUR_12 &&
+            hours <= TIME_BOUNDARIES.MAX_HOUR_12 &&
+            minutes >= TIME_BOUNDARIES.MIN_MINUTE &&
+            minutes <= TIME_BOUNDARIES.MAX_MINUTE &&
+            seconds >= TIME_BOUNDARIES.MIN_SECOND &&
+            seconds <= TIME_BOUNDARIES.MAX_SECOND);
+    }
+    /**
+     * Add time to a TimeValue
+     */
+    static addTime(time, hoursToAdd, minutesToAdd, secondsToAdd = 0) {
+        let totalSeconds = time.hours * 3600 + time.minutes * 60 + time.seconds;
+        totalSeconds += hoursToAdd * 3600 + minutesToAdd * 60 + secondsToAdd;
+        // Handle overflow/underflow
+        totalSeconds = ((totalSeconds % 86400) + 86400) % 86400;
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+        return this.createTimeValue(hours, minutes, seconds);
+    }
+    /**
+     * Generate time options for dropdowns
+     */
+    static generateTimeOptions(interval = 15, format = TimeFormat.TwentyFourHour, showSeconds = false) {
+        const options = [];
+        for (let hour = 0; hour < 24; hour++) {
+            for (let minute = 0; minute < 60; minute += interval) {
+                const timeValue = this.createTimeValue(hour, minute, 0);
+                const formatted = this.formatTimeValue(timeValue, format, showSeconds);
+                options.push({
+                    value: formatted,
+                    label: formatted,
+                });
+            }
+        }
+        return options;
+    }
+    /**
+     * Round time to nearest interval
+     */
+    static roundToInterval(time, intervalMinutes) {
+        const totalMinutes = time.hours * 60 + time.minutes;
+        const roundedMinutes = Math.round(totalMinutes / intervalMinutes) * intervalMinutes;
+        const hours = Math.floor(roundedMinutes / 60) % 24;
+        const minutes = roundedMinutes % 60;
+        return this.createTimeValue(hours, minutes, time.seconds);
+    }
+    /**
+     * Check if time is within range
+     */
+    static isTimeInRange(time, minTime, maxTime) {
+        if (minTime && this.compareTime(time, minTime) < 0) {
+            return false;
+        }
+        if (maxTime && this.compareTime(time, maxTime) > 0) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Convert Date object to TimeValue
+     */
+    static dateToTimeValue(date) {
+        return this.createTimeValue(date.getHours(), date.getMinutes(), date.getSeconds());
+    }
+    /**
+     * Convert TimeValue to Date object (using current date)
+     */
+    static timeValueToDate(time, baseDate) {
+        const date = baseDate ? new Date(baseDate) : new Date();
+        date.setHours(time.hours, time.minutes, time.seconds, 0);
+        return date;
+    }
+}
+//# sourceMappingURL=time.utils.js.map

package/dist/src/components/toast/controllers/base.controller.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { ReactiveControllerHost } from 'lit';
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Base interface for toast controllers
+ */
+export interface ToastControllerHost extends ReactiveControllerHost {
+    requestUpdate(): void;
+    dispatchEvent(event: Event): boolean;
+}
+/**
+ * Abstract base controller for toast component controllers
+ */
+export declare abstract class BaseToastController extends BaseComponentController<ToastControllerHost> {
+}
+//# sourceMappingURL=base.controller.d.ts.map

package/dist/src/components/toast/controllers/base.controller.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { BaseComponentController } from '@nuralyui/common/controllers';
+/**
+ * Abstract base controller for toast component controllers
+ */
+export class BaseToastController extends BaseComponentController {
+}
+//# sourceMappingURL=base.controller.js.map

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { BaseToastController } from './base.controller.js';
+export type { ToastControllerHost } from './base.controller.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/src/components/tooltips/demo/tooltips-demo.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import '../tooltips.component';
+export declare class ElMeenuElement extends LitElement {
+    float: string;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'hy-tooltips-demo': ElMeenuElement;
+    }
+}
+//# sourceMappingURL=tooltips-demo.d.ts.map