@nuraly/lumenui 0.2.1 → 0.2.2

package/dist/src/components/datepicker/interfaces/datepicker-controllers.interface.d.ts

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { DatePickerBaseController } from './base-controller.interface.js';
+import { INavigationDate, IDayPresentation } from '../datepicker.types.js';
+/**
+ * Calendar controller interface for managing calendar display and navigation
+ */
+export interface CalendarController extends DatePickerBaseController {
+    navigationDates: INavigationDate;
+    daysPresentation: IDayPresentation[];
+    navigateToMonth(year: number, month: number): void;
+    navigateToPreviousMonth(): void;
+    navigateToNextMonth(): void;
+    navigateToPreviousYear(): void;
+    navigateToNextYear(): void;
+    getCurrentMonthDays(): IDayPresentation[];
+    isDateInCurrentMonth(date: Date): boolean;
+    isDateToday(date: Date): boolean;
+    isDateSelected(date: Date): boolean;
+    isDateDisabled(date: Date): boolean;
+    isDateInRange(date: Date): boolean;
+    generateCalendarDays(year: number, month: number): IDayPresentation[];
+    updateCalendarDisplay(): void;
+}
+/**
+ * Date selection controller interface
+ */
+export interface DateSelectionController extends DatePickerBaseController {
+    selectDate(date: Date): void;
+    selectDateRange(startDate: Date, endDate: Date): void;
+    clearSelection(): void;
+    getSelectedDate(): Date | null;
+    getSelectedDateRange(): {
+        start: Date;
+        end: Date;
+    } | null;
+    getSelectedDates(): Date[];
+    isDateSelected(date: Date): boolean;
+    isValidSelection(date: Date): boolean;
+    formatSelectedDate(): string;
+    formatSelectedRange(): string;
+}
+/**
+ * Keyboard navigation controller interface
+ */
+export interface KeyboardController extends DatePickerBaseController {
+    handleKeyDown(event: KeyboardEvent): void;
+    navigateUp(): void;
+    navigateDown(): void;
+    navigateLeft(): void;
+    navigateRight(): void;
+    navigateToFirstDayOfWeek(): void;
+    navigateToLastDayOfWeek(): void;
+    navigateToFirstDayOfMonth(): void;
+    navigateToLastDayOfMonth(): void;
+    selectCurrentDate(): void;
+    closeCalendar(): void;
+}
+/**
+ * Focus management controller interface
+ */
+export interface FocusController extends DatePickerBaseController {
+    setFocusedDate(date: Date): void;
+    getFocusedDate(): Date | null;
+    focus(): void;
+    blur(): void;
+    focusCalendar(): void;
+    focusInput(): void;
+    setTabIndex(element: HTMLElement, index: number): void;
+    updateFocusableElements(): void;
+}
+/**
+ * Validation controller interface
+ */
+export interface ValidationController extends DatePickerBaseController {
+    validate(): boolean;
+    reset(): void;
+    getFormData(): {
+        [key: string]: string;
+    };
+    readonly isValid: boolean;
+    readonly validationMessage: string;
+    validateDate(date: Date): boolean;
+    validateDateRange(startDate: Date, endDate: Date): boolean;
+    validateMinMaxDate(date: Date): boolean;
+    validateDisabledDates(date: Date): boolean;
+    setValidationState(isValid: boolean, message?: string): void;
+    clearValidation(): void;
+}
+/**
+ * Calendar positioning controller interface
+ */
+export interface PositioningController extends DatePickerBaseController {
+    positionCalendar(): void | Promise<void>;
+    updatePosition(): void;
+    calculateOptimalPosition(): {
+        top: number;
+        left: number;
+        placement: string;
+    };
+    hasSpaceBelow(): boolean;
+    hasSpaceAbove(): boolean;
+    openCalendar(): void;
+    closeCalendar(): void;
+    toggleCalendar(): void;
+    handleClickOutside(event: MouseEvent): void;
+    handleScroll(): void;
+}
+//# sourceMappingURL=datepicker-controllers.interface.d.ts.map

package/dist/src/components/datepicker/interfaces/datepicker-controllers.interface.js

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

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

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { DatePickerBaseController, ErrorHandler, DatePickerHost } from './base-controller.interface.js';
+export { CalendarController, DateSelectionController, KeyboardController, FocusController, ValidationController, PositioningController, } from './datepicker-controllers.interface.js';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/src/components/datepicker/templates/days.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { DateRawObject, IDayPresentation, INavigationDate } from '../datepicker.types.js';
+export declare const renderDays: (weekdaysShort: string[], navigationDates: INavigationDate, selectDay: (date: IDayPresentation) => void, dateRawObject: DateRawObject, isRange: boolean, days: string[]) => TemplateResult;
+//# sourceMappingURL=days.template.d.ts.map

package/dist/src/components/datepicker/templates/days.template.js

@@ -0,0 +1,40 @@
+import { html } from 'lit';
+import { todayIsTheDay } from '../utils/day.helper.js';
+import { capitalizeFirstLetter } from '../utils/string.helper.js';
+import { getMonthDetails } from '../utils/month.helper.js';
+import dayjs from 'dayjs';
+import { classMap } from 'lit/directives/class-map.js';
+const today = dayjs();
+const currentYear = today.year();
+const currentDay = today.date();
+const currentMonth = today.month() + 1;
+export const renderDays = (weekdaysShort, navigationDates, selectDay, dateRawObject, isRange, days) => {
+    const daysPresentation = getMonthDetails(navigationDates.start.year, isRange ? navigationDates.start.month : navigationDates.start.month - 1, days);
+    const dayContainer = (day) => {
+        const active = todayIsTheDay(day, dateRawObject, isRange) && day.valid;
+        const isToday = currentYear === day.year && currentMonth === day.month + 1 && currentDay === day.date;
+        return html `<div
+      class="day-cell ${classMap({
+            'selected': active,
+            'disabled': !day.valid,
+            'today': isToday,
+            'in-range': isRange && active
+        })}"
+      @click=${() => selectDay(day)}
+      role="gridcell"
+      tabindex="-1"
+      aria-label="${day.date}"
+    >
+      ${day.date}
+    </div>`;
+    };
+    return html `<div class="days-grid" role="grid" aria-label="Calendar days">
+    <div class="weekdays-header" role="row">
+      ${weekdaysShort.map((shortDay) => html `<div class="weekday-header" role="columnheader">${capitalizeFirstLetter(shortDay)}</div>`)}
+    </div>
+    <div class="days-body" role="rowgroup">
+      ${daysPresentation === null || daysPresentation === void 0 ? void 0 : daysPresentation.map(dayContainer)}
+    </div>
+  </div>`;
+};
+//# sourceMappingURL=days.template.js.map

package/dist/src/components/datepicker/templates/dropdown.template.d.ts

@@ -0,0 +1,10 @@
+import { TemplateResult } from 'lit';
+/**
+ * Render month dropdown template
+ */
+export declare const renderMonthDropdown: (isOpen: boolean, currentMonth: number, months: string[], onMonthSelect: (monthIndex: number) => void) => TemplateResult;
+/**
+ * Render year dropdown template
+ */
+export declare const renderYearDropdown: (isOpen: boolean, currentYear: number, onYearSelect: (year: number) => void) => TemplateResult;
+//# sourceMappingURL=dropdown.template.d.ts.map

package/dist/src/components/datepicker/templates/dropdown.template.js

@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * Render month dropdown template
+ */
+export const renderMonthDropdown = (isOpen, currentMonth, months, onMonthSelect) => {
+    if (!isOpen)
+        return html ``;
+    return html `
+    <div class="month-dropdown dropdown-open">
+      <div class="dropdown-content">
+        ${months.map((month, index) => html `
+          <div 
+            class="dropdown-item ${classMap({ 'selected': index === currentMonth - 1 })}"
+            @click=${() => onMonthSelect(index)}
+          >
+            ${month.charAt(0).toUpperCase() + month.slice(1)}
+          </div>
+        `)}
+      </div>
+    </div>
+  `;
+};
+/**
+ * Render year dropdown template
+ */
+export const renderYearDropdown = (isOpen, currentYear, onYearSelect) => {
+    if (!isOpen)
+        return html ``;
+    // Generate years array (current year ± 10 years)
+    const years = [];
+    for (let year = currentYear - 10; year <= currentYear + 10; year++) {
+        years.push(year);
+    }
+    return html `
+    <div class="year-dropdown dropdown-open">
+      <div class="dropdown-content">
+        ${years.map(year => html `
+          <div 
+            class="dropdown-item ${classMap({ 'selected': year === currentYear })}"
+            @click=${() => onYearSelect(year)}
+          >
+            ${year}
+          </div>
+        `)}
+      </div>
+    </div>
+  `;
+};
+//# sourceMappingURL=dropdown.template.js.map

package/dist/src/components/datepicker/templates/headers.template.d.ts

@@ -0,0 +1,2 @@
+export declare const renderDayHeaderTemplate: () => import("lit-html").TemplateResult<1>[];
+//# sourceMappingURL=headers.template.d.ts.map

package/dist/src/components/datepicker/templates/headers.template.js

@@ -0,0 +1,5 @@
+import { html } from 'lit';
+export const renderDayHeaderTemplate = () => {
+    return ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map((shortDay) => html `<div class="day-header-item">${shortDay}</div>`);
+};
+//# sourceMappingURL=headers.template.js.map

package/dist/src/components/datepicker/templates/months.template.d.ts

@@ -0,0 +1,6 @@
+interface ClickHandler {
+    (index: number): void;
+}
+export declare const renderMonthsTemplate: (months: string[], currentMonth: number, clickHandler: ClickHandler) => import("lit-html").TemplateResult<1>;
+export {};
+//# sourceMappingURL=months.template.d.ts.map

package/dist/src/components/datepicker/templates/months.template.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+import { EMPTY_STRING } from '../datepicker.constant.js';
+export const renderMonthsTemplate = (months, currentMonth, clickHandler) => {
+    const monthContainer = (month, index) => {
+        const active = currentMonth - 1 === index ? 'month-active' : EMPTY_STRING;
+        return html ` <div class="month-container ${active}" @click=${() => clickHandler(index)}>${month}</div> `;
+    };
+    return html ` <div class="months-container">${months.map(monthContainer)}</div> `;
+};
+//# sourceMappingURL=months.template.js.map

package/dist/src/components/datepicker/templates/years.template.d.ts

@@ -0,0 +1,6 @@
+interface ClickHandler {
+    (year: number): void;
+}
+export declare const renderYearsTemplate: (currentYear: number, clickHandler: ClickHandler) => import("lit-html").TemplateResult<1>;
+export {};
+//# sourceMappingURL=years.template.d.ts.map

package/dist/src/components/datepicker/templates/years.template.js

@@ -0,0 +1,11 @@
+import { html } from 'lit';
+import { EMPTY_STRING } from '../datepicker.constant.js';
+export const renderYearsTemplate = (currentYear, clickHandler) => {
+    const yearRange = Array.from({ length: 12 }, (_v, i) => i + (currentYear - 6));
+    const yearContainer = (year) => {
+        const active = currentYear === year ? 'year-active' : EMPTY_STRING;
+        return html ` <div class="year-container ${active}" @click=${() => clickHandler(year)}>${year}</div> `;
+    };
+    return html ` <div class="years-container">${yearRange.map(yearContainer)}</div> `;
+};
+//# sourceMappingURL=years.template.js.map

package/dist/src/components/datepicker/test/datepicker_test.d.ts

@@ -0,0 +1,2 @@
+import '../datepicker.component';
+//# sourceMappingURL=datepicker_test.d.ts.map

package/dist/src/components/datepicker/test/datepicker_test.js

@@ -0,0 +1,134 @@
+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 { expect, fixture, html } from '@open-wc/testing';
+import '../datepicker.component';
+import { HyDatePickerElement } from '../datepicker.component';
+import { DatePickerMode } from '../datepicker.types';
+suite('HyDatePickerElement', () => {
+    test('should be defined', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        expect(el).to.be.instanceOf(HyDatePickerElement);
+    }));
+    test('should open the calendar when input is focused', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        const input = el.shadowRoot.querySelector('nr-input');
+        input.dispatchEvent(new Event('focus'));
+        expect(el.openedCalendar).to.be.true;
+    }));
+    test('should close the calendar when clicking outside', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        el.openedCalendar = true;
+        document.body.click();
+        expect(el.openedCalendar).to.be.false;
+    }));
+    test('should move to next month', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        const currentMonth = 1;
+        el.navigationDates = { start: { month: currentMonth, day: 1, year: 2023 } };
+        el.openedCalendar = true;
+        yield el.updateComplete;
+        const nextMonthButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.next-month');
+        nextMonthButton.click();
+        expect(el.navigationDates.start.month).to.equal(currentMonth + 1);
+    }));
+    test('should move to previous month', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        const currentMonth = 2;
+        el.navigationDates = { start: { month: currentMonth, day: 1, year: 2023 } };
+        el.openedCalendar = true;
+        yield el.updateComplete;
+        const previousMonthButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.prev-month');
+        previousMonthButton.click();
+        expect(el.navigationDates.start.month).to.equal(currentMonth - 1);
+    }));
+    test('should move to next year when displaying last month and click next month', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        const currentYear = 2023;
+        el.navigationDates = { start: { month: 12, day: 1, year: currentYear } };
+        el.openedCalendar = true;
+        yield el.updateComplete;
+        const nextMonthButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.next-month');
+        nextMonthButton.click();
+        expect(el.navigationDates.start.month).to.equal(1);
+        expect(el.navigationDates.start.year).to.equal(currentYear + 1);
+    }));
+    test('should move to previous year when displaying first month and click next month', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        const currentYear = 2023;
+        el.navigationDates = { start: { month: 1, day: 1, year: currentYear } };
+        el.openedCalendar = true;
+        yield el.updateComplete;
+        const previousMonthButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.prev-month');
+        previousMonthButton.click();
+        expect(el.navigationDates.start.month).to.equal(12);
+        expect(el.navigationDates.start.year).to.equal(currentYear - 1);
+    }));
+    test('should move to previous year', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        const currentYear = 2023;
+        el.navigationDates = { start: { month: 2, day: 1, year: currentYear } };
+        el.openedCalendar = true;
+        yield el.updateComplete;
+        const previousYearButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.previous-year');
+        previousYearButton.click();
+        expect(el.navigationDates.start.year).to.equal(currentYear - 1);
+    }));
+    test('should move to next year', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        const currentyear = 2023;
+        el.navigationDates = { start: { month: 2, day: 1, year: currentyear } };
+        el.openedCalendar = true;
+        yield el.updateComplete;
+        const nextYearButton = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.next-year');
+        nextYearButton.click();
+        expect(el.navigationDates.start.year).to.equal(currentyear + 1);
+    }));
+    test('should select a date correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        el.navigationDates = { start: { month: 2, day: 20, year: 2023 } };
+        el.openedCalendar = true;
+        yield el.updateComplete;
+        const days = el.shadowRoot.querySelectorAll('.day-container:not(.day-invalid)');
+        const dayInTheMonth = 2;
+        days[dayInTheMonth].click();
+        yield el.updateComplete;
+        // Access the input field value through the input element instead of private property
+        const input = el.shadowRoot.querySelector('hy-input');
+        expect(input.value).to.equal(`03/02/2023`);
+    }));
+    test('should select a month correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        el.openedCalendar = true;
+        el.mode = DatePickerMode.Month;
+        yield el.updateComplete;
+        const months = el.shadowRoot.querySelectorAll('.month-container');
+        const monthIndex = 1;
+        months[monthIndex].click();
+        expect(el.navigationDates.start.month).to.equal(monthIndex + 1);
+    }));
+    test('should select a year correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        const el = yield fixture(html `<nr-datepicker></nr-datepicker>`);
+        el.openedCalendar = true;
+        el.mode = DatePickerMode.Year;
+        yield el.updateComplete;
+        const years = el.shadowRoot.querySelectorAll('.year-container');
+        const yearIndex = 1;
+        years[yearIndex].click();
+        const yearValue = years[yearIndex].textContent;
+        expect(el.navigationDates.start.year).to.equal(+yearValue);
+    }));
+});
+//# sourceMappingURL=datepicker_test.js.map

package/dist/src/components/datepicker/utils/day.helper.d.ts

@@ -0,0 +1,5 @@
+import { DateRawObject, IDayInfo, IDayPresentation } from '../datepicker.types.js';
+export declare const getDayDetails: ({ dayIndex, month, year, numberOfDays, firstDay, days }: IDayInfo) => IDayPresentation;
+export declare const getNumberOfDays: (year: number, month: number) => number;
+export declare const todayIsTheDay: (day: IDayPresentation, dateRawObject: DateRawObject, isRange: boolean) => boolean;
+//# sourceMappingURL=day.helper.d.ts.map

package/dist/src/components/datepicker/utils/day.helper.js

@@ -0,0 +1,53 @@
+export const getDayDetails = ({ dayIndex, month, year, numberOfDays, firstDay, days }) => {
+    const date = dayIndex - firstDay;
+    const day = dayIndex % 7;
+    let prevMonth = month - 1;
+    let prevYear = year;
+    if (prevMonth < 0) {
+        prevMonth = 11;
+        prevYear--;
+    }
+    const prevMonthNumberOfDays = getNumberOfDays(prevYear, prevMonth);
+    const _date = (date < 0 ? prevMonthNumberOfDays + date : date % numberOfDays) + 1;
+    const valid = date >= 0 && date < numberOfDays ? 1 : 0;
+    const timestamp = new Date(year, month, _date).getTime();
+    let _month = month;
+    let _year = year;
+    if (date > 0 && date >= numberOfDays) {
+        _month += 1;
+        if (_month > 11) {
+            _month = 0;
+            _year++;
+        }
+    }
+    else if (date < 0) {
+        _month -= 1;
+        if (_month < 0) {
+            _month = 11;
+            _year--;
+        }
+    }
+    return {
+        date: _date,
+        day,
+        valid,
+        timestamp,
+        dayString: days[day],
+        month: _month,
+        year: _year,
+    };
+};
+export const getNumberOfDays = (year, month) => {
+    return 32 - new Date(year, month, 32).getDate();
+};
+export const todayIsTheDay = (day, dateRawObject, isRange) => {
+    let isTheDate = false;
+    if (!isRange) {
+        isTheDate =
+            day.year === dateRawObject.currentYear &&
+                dateRawObject.currentMonth === day.month + 1 &&
+                day.date === dateRawObject.currentDay;
+    }
+    return isTheDate;
+};
+//# sourceMappingURL=day.helper.js.map

package/dist/src/components/datepicker/utils/formatter.d.ts

@@ -0,0 +1,2 @@
+export declare function oneToTwoDigit(num: number): string;
+//# sourceMappingURL=formatter.d.ts.map

package/dist/src/components/datepicker/utils/formatter.js

@@ -0,0 +1,9 @@
+export function oneToTwoDigit(num) {
+    if (num < 10) {
+        return "0" + num;
+    }
+    else {
+        return num.toString();
+    }
+}
+//# sourceMappingURL=formatter.js.map

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './day.helper.js';
+export * from './formatter.js';
+export * from './locale.helper.js';
+export * from './month.helper.js';
+export * from './string.helper.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export * from './day.helper.js';
+export * from './formatter.js';
+export * from './locale.helper.js';
+export * from './month.helper.js';
+export * from './string.helper.js';
+//# sourceMappingURL=index.js.map