@nuralyui/timepicker 0.1.1

package/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';
+describe('NrTimePickerElement', () => {
+    let element;
+    beforeEach(() => __awaiter(void 0, void 0, void 0, function* () {
+        element = yield fixture(html `<nr-timepicker></nr-timepicker>`);
+    }));
+    describe('Basic functionality', () => {
+        it('should render successfully', () => {
+            expect(element).to.exist;
+            expect(element.tagName).to.equal('NR-TIMEPICKER');
+        });
+        it('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;
+        });
+        it('should have empty initial value', () => {
+            expect(element.value).to.equal('');
+        });
+    });
+    describe('Time format handling', () => {
+        it('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');
+        }));
+        it('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');
+        }));
+        it('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');
+        }));
+    });
+    describe('Time validation', () => {
+        it('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');
+        }));
+        it('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);
+        }));
+    });
+    describe('Clock functionality', () => {
+        it('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;
+        }));
+        it('should toggle clock state via trigger button', () => __awaiter(void 0, void 0, void 0, function* () {
+            var _d, _e, _f, _g;
+            const trigger = (_d = element.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.time-picker__trigger');
+            // Initially closed
+            let dropdown = (_e = element.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.time-picker__dropdown--open');
+            expect(dropdown).to.not.exist;
+            // Click to open
+            trigger.click();
+            yield element.updateComplete;
+            dropdown = (_f = element.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('.time-picker__dropdown--open');
+            expect(dropdown).to.exist;
+            // Click to close
+            trigger.click();
+            yield element.updateComplete;
+            dropdown = (_g = element.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelector('.time-picker__dropdown--open');
+            expect(dropdown).to.not.exist;
+        }));
+    });
+    describe('Time manipulation', () => {
+        it('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('');
+        }));
+        it('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}$/);
+        }));
+    });
+    describe('Event handling', () => {
+        it('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;
+        }));
+        it('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;
+        }));
+    });
+    describe('Accessibility', () => {
+        it('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;
+        }));
+        it('should support disabled state', () => __awaiter(void 0, void 0, void 0, function* () {
+            var _b;
+            element.disabled = true;
+            yield element.updateComplete;
+            const input = (_b = element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('input');
+            expect(input === null || input === void 0 ? void 0 : input.hasAttribute('disabled')).to.be.true;
+        }));
+        it('should support readonly state', () => __awaiter(void 0, void 0, void 0, function* () {
+            var _c;
+            element.readonly = true;
+            yield element.updateComplete;
+            const input = (_c = element.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('input');
+            expect(input === null || input === void 0 ? void 0 : input.hasAttribute('readonly')).to.be.true;
+        }));
+    });
+    describe('Size and variant attributes', () => {
+        it('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');
+        }));
+        it('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');
+        }));
+    });
+    describe('Controller integration', () => {
+        it('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');
+        });
+        it('should have validation controller', () => {
+            const controller = element.validationController;
+            expect(controller).to.exist;
+            expect(typeof controller.validateConstraints).to.equal('function');
+        });
+        it('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/test/timepicker.test.js.map

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

package/timepicker.component.backup.d.ts

@@ -0,0 +1,165 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import { TimeValue, TimeFormat, TimePickerMode, TimePickerSize, TimePickerVariant, TimePickerState, TimePickerPlacement, TimePickerConfig } from './timepicker.types.js';
+import { TimePickerHost } from './interfaces/timepicker.interface.js';
+declare const NrTimePickerElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * NuralyUI Time Picker - A comprehensive time selection component
+ *
+ * @element nr-timepicker
+ *
+ * @fires nr-time-change - Fired when time is selected
+ * @fires nr-clock-open - Fired when clock dropdown is opened
+ * @fires nr-clock-close - Fired when clock dropdown is closed
+ * @fires nr-focus - Fired when component receives focus
+ * @fires nr-blur - Fired when component loses focus
+ * @fires nr-validation - Fired when validation state changes
+ *
+ * @slot label - Label content for the input field
+ * @slot helper-text - Helper text content below the input field
+ * @slot icon - Icon content for the input field trigger
+ *
+ * @csspart input - The input field part
+ * @csspart dropdown - The clock dropdown container part
+ * @csspart clock - The clock face part
+ * @csspart clock-hand - The clock hand part
+ * @csspart time-input - Individual time input parts (hours, minutes, seconds)
+ *
+ * @example Basic usage
+ * ```html
+ * <nr-timepicker
+ *   label="Select Time"
+ *   @nr-time-change="${this.handleTimeChange}">
+ * </nr-timepicker>
+ * ```
+ *
+ * @example 12-hour format with seconds
+ * ```html
+ * <nr-timepicker
+ *   format="12h"
+ *   show-seconds
+ *   label="Meeting Time">
+ * </nr-timepicker>
+ * ```
+ *
+ * @example With time constraints
+ * ```html
+ * <nr-timepicker
+ *   min-time="09:00"
+ *   max-time="17:00"
+ *   label="Business Hours">
+ * </nr-timepicker>
+ * ```
+ */
+export declare class NrTimePickerElement extends NrTimePickerElement_base implements TimePickerHost {
+    static styles: import("lit").CSSResult;
+    private selectionController;
+    private validationController;
+    private formattingController;
+    private dropdownController;
+    name: string;
+    value: string;
+    defaultValue: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    placeholder: string;
+    format: TimeFormat;
+    showSeconds: boolean;
+    showClock: boolean;
+    minuteInterval: number;
+    secondInterval: number;
+    minTime?: string;
+    maxTime?: string;
+    disabledTimes?: string[];
+    enabledTimes?: string[];
+    size: TimePickerSize;
+    variant: TimePickerVariant;
+    state: TimePickerState;
+    placement: TimePickerPlacement;
+    label: string;
+    helperText: string;
+    clockOpen: boolean;
+    clockMode: TimePickerMode;
+    private inputValue;
+    private currentMode;
+    private validationMessage;
+    private inputElement;
+    private clockContainer?;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    /**
+     * Initialize time picker with default values and constraints
+     */
+    private initializeTimePicker;
+    /**
+     * Handle property changes
+     */
+    private handlePropertyChanges;
+    /**
+     * Check if constraint properties changed
+     */
+    private hasConstraintPropertiesChanged;
+    /**
+     * Update validation constraints
+     */
+    private updateConstraints;
+    /**
+     * Set time from string value
+     */
+    private setTimeFromValue;
+    getCurrentTime(): TimeValue;
+    setTime(time: TimeValue): void;
+    formatTime(time: TimeValue): string;
+    parseTime(timeString: string): TimeValue | null;
+    getConfig(): TimePickerConfig;
+    validateTime(time: TimeValue): boolean;
+    /**
+     * Open the clock dropdown
+     */
+    openClock(): void;
+    /**
+     * Close the clock dropdown
+     */
+    closeClock(): void;
+    /**
+     * Toggle clock dropdown
+     */
+    toggleClock(): void;
+    /**
+     * Clear selected time
+     */
+    clear(): void;
+    private handleInputChange;
+    private handleInputFocus;
+    private handleInputBlur;
+    private handleTriggerClick;
+    private handleTimeSelection;
+    private handleModeChange;
+    private handleDigitalTimeChange;
+    private handleHourSelect;
+    private handleMinuteSelect;
+    private handleSecondSelect;
+    private handlePeriodToggle;
+    private updateInputValue;
+    protected render(): TemplateResult;
+    private renderLabel;
+    private renderInput;
+    private renderDropdown;
+    private renderColumnPicker;
+    private renderHourColumn;
+    private renderMinuteColumn;
+    private renderSecondColumn;
+    private renderClockNumbers;
+    private renderClockHand;
+    private renderModeButtons;
+    private renderDigitalInputs;
+    private renderPeriodToggle;
+    private renderHelperText;
+}
+export {};
+//# sourceMappingURL=timepicker.component.backup.d.ts.map