@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/timepicker/controllers/validation.controller.js

@@ -0,0 +1,200 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TimeUtils } from '../utils/time.utils.js';
+/**
+ * Controller for handling time validation logic
+ */
+export class TimePickerValidationController {
+    constructor(host) {
+        this.host = host;
+        this.constraints = {};
+    }
+    /**
+     * Set validation constraints
+     */
+    setConstraints(constraints) {
+        this.constraints = Object.assign({}, constraints);
+    }
+    /**
+     * Get current constraints
+     */
+    getConstraints() {
+        return Object.assign({}, this.constraints);
+    }
+    /**
+     * Validate time against all constraints
+     */
+    validateConstraints(time) {
+        return (this.isTimeInBounds(time) &&
+            !this.isTimeDisabled(time) &&
+            this.isTimeEnabled(time));
+    }
+    /**
+     * Check if time is within min/max bounds
+     */
+    isTimeInBounds(time) {
+        let minTime = null;
+        let maxTime = null;
+        // Parse min time constraint
+        if (this.constraints.minTime) {
+            const config = this.host.getConfig();
+            minTime = TimeUtils.parseTimeString(this.constraints.minTime, config.format);
+        }
+        // Parse max time constraint
+        if (this.constraints.maxTime) {
+            const config = this.host.getConfig();
+            maxTime = TimeUtils.parseTimeString(this.constraints.maxTime, config.format);
+        }
+        return TimeUtils.isTimeInRange(time, minTime, maxTime);
+    }
+    /**
+     * Check if time is explicitly disabled
+     */
+    isTimeDisabled(time) {
+        if (!this.constraints.disabledTimes || this.constraints.disabledTimes.length === 0) {
+            return false;
+        }
+        const timeString = this.host.formatTime(time);
+        return this.constraints.disabledTimes.includes(timeString);
+    }
+    /**
+     * Check if time is in enabled times list (if specified)
+     */
+    isTimeEnabled(time) {
+        // If no enabled times specified, all times are enabled (except disabled ones)
+        if (!this.constraints.enabledTimes || this.constraints.enabledTimes.length === 0) {
+            return true;
+        }
+        const timeString = this.host.formatTime(time);
+        return this.constraints.enabledTimes.includes(timeString);
+    }
+    /**
+     * Get validation message for a time
+     */
+    getValidationMessage(time) {
+        if (!this.isTimeInBounds(time)) {
+            return this.getBoundsValidationMessage(time);
+        }
+        if (this.isTimeDisabled(time)) {
+            return 'This time is not available';
+        }
+        if (!this.isTimeEnabled(time)) {
+            return 'This time is not in the allowed time range';
+        }
+        return '';
+    }
+    /**
+     * Get bounds validation message
+     */
+    getBoundsValidationMessage(time) {
+        const config = this.host.getConfig();
+        let message = '';
+        if (this.constraints.minTime && this.constraints.maxTime) {
+            message = `Time must be between ${this.constraints.minTime} and ${this.constraints.maxTime}`;
+        }
+        else if (this.constraints.minTime) {
+            const minTime = TimeUtils.parseTimeString(this.constraints.minTime, config.format);
+            if (minTime && TimeUtils.compareTime(time, minTime) < 0) {
+                message = `Time must be after ${this.constraints.minTime}`;
+            }
+        }
+        else if (this.constraints.maxTime) {
+            const maxTime = TimeUtils.parseTimeString(this.constraints.maxTime, config.format);
+            if (maxTime && TimeUtils.compareTime(time, maxTime) > 0) {
+                message = `Time must be before ${this.constraints.maxTime}`;
+            }
+        }
+        return message;
+    }
+    /**
+     * Validate time format
+     */
+    validateTimeFormat(timeString) {
+        const config = this.host.getConfig();
+        const parsedTime = TimeUtils.parseTimeString(timeString, config.format);
+        return parsedTime !== null;
+    }
+    /**
+     * Get validation result with details
+     */
+    getValidationResult(time) {
+        const errors = [];
+        if (!this.isTimeInBounds(time)) {
+            errors.push(this.getBoundsValidationMessage(time));
+        }
+        if (this.isTimeDisabled(time)) {
+            errors.push('This time is disabled');
+        }
+        if (!this.isTimeEnabled(time)) {
+            errors.push('This time is not in the allowed range');
+        }
+        return {
+            isValid: errors.length === 0,
+            message: errors.length > 0 ? errors[0] : '',
+            errors,
+        };
+    }
+    /**
+     * Find nearest valid time
+     */
+    findNearestValidTime(time) {
+        if (this.validateConstraints(time)) {
+            return time;
+        }
+        // Try nearby times (within 1 hour range)
+        for (let minuteOffset = 1; minuteOffset <= 60; minuteOffset++) {
+            // Try adding minutes
+            const laterTime = TimeUtils.addTime(time, 0, minuteOffset, 0);
+            if (this.validateConstraints(laterTime)) {
+                return laterTime;
+            }
+            // Try subtracting minutes
+            const earlierTime = TimeUtils.addTime(time, 0, -minuteOffset, 0);
+            if (this.validateConstraints(earlierTime)) {
+                return earlierTime;
+            }
+        }
+        return null;
+    }
+    /**
+     * Check if current time selection is valid
+     */
+    isCurrentSelectionValid() {
+        const selectedTime = this.host.getCurrentTime();
+        return this.validateConstraints(selectedTime);
+    }
+    /**
+     * Set min time constraint
+     */
+    setMinTime(minTime) {
+        this.constraints.minTime = minTime || undefined;
+    }
+    /**
+     * Set max time constraint
+     */
+    setMaxTime(maxTime) {
+        this.constraints.maxTime = maxTime || undefined;
+    }
+    /**
+     * Set disabled times
+     */
+    setDisabledTimes(disabledTimes) {
+        this.constraints.disabledTimes = [...disabledTimes];
+    }
+    /**
+     * Set enabled times
+     */
+    setEnabledTimes(enabledTimes) {
+        this.constraints.enabledTimes = [...enabledTimes];
+    }
+    /**
+     * Clear all constraints
+     */
+    clearConstraints() {
+        this.constraints = {};
+    }
+}
+//# sourceMappingURL=validation.controller.js.map

package/dist/src/components/timepicker/interfaces/timepicker.interface.d.ts

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TimeValue, TimePickerConfig } from '../timepicker.types.js';
+/**
+ * Base controller interface for time picker host
+ */
+export interface TimePickerHost {
+    /**
+     * Get current time value
+     */
+    getCurrentTime(): TimeValue;
+    /**
+     * Set time value
+     */
+    setTime(time: TimeValue): void;
+    /**
+     * Format time value to string
+     */
+    formatTime(time: TimeValue): string;
+    /**
+     * Parse time string to TimeValue
+     */
+    parseTime(timeString: string): TimeValue | null;
+    /**
+     * Get time picker configuration
+     */
+    getConfig(): TimePickerConfig;
+    /**
+     * Validate time value
+     */
+    validateTime(time: TimeValue): boolean;
+    /**
+     * Request component update
+     */
+    requestUpdate(): void;
+}
+/**
+ * Time selection controller interface
+ */
+export interface TimeSelectionController {
+    /**
+     * Select time value
+     */
+    selectTime(time: TimeValue): void;
+    /**
+     * Get selected time
+     */
+    getSelectedTime(): TimeValue | null;
+    /**
+     * Clear selection
+     */
+    clearSelection(): void;
+    /**
+     * Check if time is selected
+     */
+    isTimeSelected(time: TimeValue): boolean;
+}
+/**
+ * Time validation controller interface
+ */
+export interface TimeValidationController {
+    /**
+     * Validate time constraints
+     */
+    validateConstraints(time: TimeValue): boolean;
+    /**
+     * Check if time is within min/max bounds
+     */
+    isTimeInBounds(time: TimeValue): boolean;
+    /**
+     * Check if time is disabled
+     */
+    isTimeDisabled(time: TimeValue): boolean;
+    /**
+     * Get validation message
+     */
+    getValidationMessage(time: TimeValue): string;
+}
+/**
+ * Time formatting controller interface
+ */
+export interface TimeFormattingController {
+    /**
+     * Format time to display string
+     */
+    formatForDisplay(time: TimeValue): string;
+    /**
+     * Format time to input value
+     */
+    formatForInput(time: TimeValue): string;
+    /**
+     * Parse input value to time
+     */
+    parseInputValue(value: string): TimeValue | null;
+    /**
+     * Get time format pattern
+     */
+    getFormatPattern(): string;
+}
+//# sourceMappingURL=timepicker.interface.d.ts.map

package/dist/src/components/timepicker/interfaces/timepicker.interface.js

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

package/dist/src/components/timepicker/test/timepicker_test.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=timepicker_test.d.ts.map

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/timepicker.component.d.ts

@@ -10,7 +10,7 @@ export interface TimePickerHost extends LitElement, DropdownHost {
     validateTime(time: TimeValue): boolean;
     requestUpdate(): void;
 }
-declare const NrTimePickerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const NrTimePickerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * A comprehensive time picker component that supports both 12-hour and 24-hour formats,
  * with optional seconds display and extensive customization options.
@@ -26,6 +26,7 @@ declare const NrTimePickerElement_base: (new (...args: any[]) => import("@nuraly
  * ```
  */
 export declare class NrTimePickerElement extends NrTimePickerElement_base implements TimePickerHost {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult[];
     value: string;
     name: string;

package/dist/src/components/timepicker/timepicker.component.js

@@ -672,6 +672,7 @@ let NrTimePickerElement = class NrTimePickerElement extends NuralyUIBaseMixin(Li
         return this.formattingController.parseInputValue(timeString);
     }
 };
+NrTimePickerElement.useShadowDom = true;
 NrTimePickerElement.styles = [timePickerStyles];
 __decorate([
     property({ type: String })