@nuralyui/datepicker 0.0.4 → 0.0.6

package/datepicker.component.js

@@ -0,0 +1,668 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { choose } from 'lit/directives/choose.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { styles } from './datepicker.style.js';
+import { DatePickerMode, DatePickerType, DatePickerSize, DatePickerVariant, DatePickerPlacement, } from './datepicker.types.js';
+import { DEFAULT_DATE_FORMAT, DEFAULT_LOCALE, INPUT_FIELD_ID, CALENDAR_CONTAINER_CLASS, DATE_PICKER_EVENTS, } from './datepicker.constant.js';
+import { DatePickerCalendarController, DatePickerSelectionController, DatePickerKeyboardController, DatePickerPositioningController, } from './controllers/index.js';
+import { SharedDropdownController } from '@nuralyui/common/controllers';
+import dayjs from 'dayjs';
+import { renderMonthsTemplate } from './templates/months.template.js';
+import { renderYearsTemplate } from './templates/years.template.js';
+import { renderDays } from './templates/days.template.js';
+import { capitalizeFirstLetter } from './utils/string.helper.js';
+import './utils/locale.helper.js';
+/**
+ * HyDatePicker - A comprehensive date picker component
+ *
+ * @element nr-datepicker
+ *
+ * @fires nr-date-change - Fired when a date is selected
+ * @fires nr-range-change - Fired when a date range is selected
+ * @fires nr-calendar-open - Fired when calendar is opened
+ * @fires nr-calendar-close - Fired when calendar 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
+ *
+ * @csspart input - The input field part
+ * @csspart calendar - The calendar container part
+ * @csspart header - The calendar header part
+ * @csspart days - The days grid part
+ * @csspart day - Individual day cell part
+ * @csspart months - The months grid part
+ * @csspart years - The years grid part
+ *
+ * @example
+ * ```html
+ * <nr-datepicker
+ *   label="Select Date"
+ *   field-format="DD/MM/YYYY"
+ *   @nr-date-change="${this.handleDateChange}">
+ * </nr-datepicker>
+ * ```
+ *
+ * @example Range picker
+ * ```html
+ * <nr-datepicker
+ *   range
+ *   label="Select Date Range"
+ *   @nr-range-change="${this.handleRangeChange}">
+ * </nr-datepicker>
+ * ```
+ */
+let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-input', 'nr-button', 'nr-icon', 'hy-select'];
+        // Controllers - following the delegation pattern
+        this.calendarController = new DatePickerCalendarController(this);
+        this.selectionController = new DatePickerSelectionController(this);
+        this.keyboardController = new DatePickerKeyboardController(this, this.calendarController, this.selectionController);
+        this.positioningController = new DatePickerPositioningController(this);
+        this.dropdownController = new SharedDropdownController(this);
+        // Core properties following the architecture pattern
+        this.name = '';
+        this.value = '';
+        this.dateValue = '';
+        this.defaultValue = '';
+        this.disabled = false;
+        this.required = false;
+        this.locale = DEFAULT_LOCALE;
+        this.fieldFormat = DEFAULT_DATE_FORMAT;
+        // Date picker specific properties
+        this.range = false;
+        // UI properties
+        this.type = DatePickerType.Single;
+        this.size = DatePickerSize.Medium;
+        this.variant = DatePickerVariant.Default;
+        this.placement = DatePickerPlacement.Auto;
+        this.label = '';
+        this.helper = '';
+        this.state = "default" /* INPUT_STATE.Default */;
+        this.useSelectDropdowns = false;
+        // Calendar state
+        this.openedCalendar = false;
+        this.mode = DatePickerMode.Day;
+        // Internal state  
+        this.currentMode = DatePickerMode.Day;
+        this.monthsShort = dayjs().localeData().monthsShort();
+        this.months = dayjs().localeData().months();
+        this.days = dayjs().localeData().weekdays();
+        this.weekdaysShort = dayjs().localeData().weekdaysShort();
+        this.inputFieldValue = '';
+        this.currentYear = new Date().getFullYear();
+        this.currentMonth = new Date().getMonth() + 1;
+        this.currentDay = new Date().getDate();
+        // Navigation dates for calendar display
+        this.navigationDates = {
+            start: {
+                year: this.currentYear,
+                month: this.currentMonth,
+                day: this.currentDay,
+            },
+        };
+        // Component constants
+        this.INPUT_TYPE = 'calendar';
+        // Navigation methods - delegates to controllers
+        this.handleMonthChange = (event) => {
+            const selectedMonth = parseInt(event.detail.value, 10);
+            this.handleMonthSelection(selectedMonth);
+        };
+        this.handleYearChange = (event) => {
+            const selectedYear = parseInt(event.detail.value, 10);
+            this.handleYearSelection(selectedYear);
+        };
+        this.prevMonth = () => this.calendarController.navigateToPreviousMonth();
+        this.nextMonth = () => this.calendarController.navigateToNextMonth();
+        this.prevYear = () => this.calendarController.navigateToPreviousYear();
+        this.nextYear = () => this.calendarController.navigateToNextYear();
+        this.selectMonth = (month) => {
+            this.currentMonth = month;
+            this.navigationDates.start.month = month;
+            this.currentMode = DatePickerMode.Day;
+            this.calendarController.updateCalendarDisplay();
+        };
+        this.selectYear = (year) => {
+            this.currentYear = year;
+            this.navigationDates.start.year = year;
+            this.currentMode = DatePickerMode.Day;
+            this.calendarController.updateCalendarDisplay();
+        };
+        this.selectDay = (dayPresentation) => {
+            const date = new Date(dayPresentation.year, dayPresentation.month, dayPresentation.date);
+            this.selectDate(date);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.initializeComponent();
+        // Add dropdown selection event listeners
+        this.addEventListener('month-selected', this.handleMonthSelected.bind(this));
+        this.addEventListener('year-selected', this.handleYearSelected.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Controllers handle their own cleanup
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.initializeRangeIfNeeded();
+        this.updateInputField();
+        this.setupDropdownController();
+    }
+    setupDropdownController() {
+        // The dropdown controller will be set up dynamically when needed
+        // since we have multiple dropdowns (month and year)
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        this.handlePropertyChanges(changedProperties);
+    }
+    /**
+     * Initialize component state
+     */
+    initializeComponent() {
+        // Set up event listeners for calendar close requests
+        this.addEventListener('calendar-close-request', () => {
+            this.positioningController.closeCalendar();
+        });
+    }
+    /**
+     * Initialize range properties if range mode is enabled
+     */
+    initializeRangeIfNeeded() {
+        if (this.range) {
+            this.endYear = this.currentYear;
+            this.endMonth = this.currentMonth;
+            this.endDay = this.currentDay;
+        }
+    }
+    /**
+     * Handle property changes with proper delegation
+     */
+    handlePropertyChanges(changedProperties) {
+        if (changedProperties.has('fieldFormat')) {
+            this.updateInputField();
+        }
+        if (changedProperties.has('openedCalendar') && this.openedCalendar) {
+            this.calendarController.updateCalendarDisplay();
+            // Calendar positioning is now handled by SharedDropdownController in openCalendar()
+        }
+        if (changedProperties.has('dateValue') && this.dateValue) {
+            this.handleDateValueChange();
+        }
+        if (this.hasDatePropertiesChanged(changedProperties)) {
+            this.updateInputField();
+            this.dispatchDateChange();
+        }
+        if (changedProperties.has('locale')) {
+            this.updateLocale(this.locale);
+        }
+    }
+    /**
+     * Check if date-related properties have changed
+     */
+    hasDatePropertiesChanged(changedProperties) {
+        return ((changedProperties.has('currentDay') && changedProperties.get('currentDay')) ||
+            (changedProperties.has('currentMonth') && changedProperties.get('currentMonth')) ||
+            (changedProperties.has('currentYear') && changedProperties.get('currentYear')));
+    }
+    /**
+     * Handle date value change
+     */
+    handleDateValueChange() {
+        const dateObj = dayjs(this.dateValue, this.fieldFormat, true);
+        if (dateObj.isValid()) {
+            const { years, months, date } = dateObj.toObject();
+            this.currentYear = years;
+            this.currentMonth = months + 1;
+            this.currentDay = date;
+            this.navigationDates = Object.assign(Object.assign({}, this.navigationDates), { start: { year: years, month: months + 1, day: date } });
+        }
+    }
+    // DatePickerHost interface implementation
+    getCurrentDate() {
+        return new Date(this.currentYear, this.currentMonth - 1, this.currentDay);
+    }
+    formatDate(date) {
+        return dayjs(date).format(this.fieldFormat);
+    }
+    parseDate(dateString) {
+        const parsed = dayjs(dateString, this.fieldFormat, true);
+        return parsed.isValid() ? parsed.toDate() : null;
+    }
+    // Delegation methods - following the architecture pattern
+    /**
+     * Get currently selected date - DELEGATES to selection controller
+     */
+    getSelectedDate() {
+        return this.selectionController.getSelectedDate();
+    }
+    /**
+     * Select a date - DELEGATES to selection controller
+     */
+    selectDate(date) {
+        this.selectionController.selectDate(date);
+    }
+    /**
+     * Clear selection - DELEGATES to selection controller
+     */
+    clearSelection() {
+        this.selectionController.clearSelection();
+    }
+    /**
+     * Open calendar - DELEGATES to dropdown controller for better positioning
+     */
+    openCalendar() {
+        console.log('openCalendar called');
+        this.openedCalendar = true;
+        this.requestUpdate();
+        // Wait for DOM update, then setup positioning
+        this.updateComplete.then(() => {
+            console.log('DOM updated, checking elements:', {
+                calendarContainer: !!this.calendarContainer,
+                dateInput: !!this.dateInput
+            });
+            if (this.calendarContainer && this.dateInput) {
+                console.log('Setting up dropdown controller');
+                this.dropdownController.setElements(this.calendarContainer, this.dateInput);
+                this.dropdownController.open();
+            }
+            else {
+                console.error('Elements not found:', {
+                    calendarContainer: this.calendarContainer,
+                    dateInput: this.dateInput
+                });
+            }
+        });
+    }
+    /**
+     * Close calendar - DELEGATES to dropdown controller
+     */
+    closeCalendar() {
+        this.openedCalendar = false;
+        this.dropdownController.close();
+    }
+    /**
+     * Toggle calendar - DELEGATES to dropdown controller
+     */
+    toggleCalendar() {
+        if (this.openedCalendar) {
+            this.closeCalendar();
+        }
+        else {
+            this.openCalendar();
+        }
+    }
+    /**
+     * Handle keyboard events - DELEGATES to keyboard controller
+     */
+    handleKeyDown(event) {
+        this.keyboardController.handleKeyDown(event);
+    }
+    // Utility methods
+    updateInputField() {
+        if (this.range) {
+            this.inputFieldValue = this.selectionController.formatSelectedRange();
+        }
+        else {
+            this.inputFieldValue = this.selectionController.formatSelectedDate();
+        }
+    }
+    dispatchDateChange() {
+        this.dispatchEvent(new CustomEvent(DATE_PICKER_EVENTS.DATE_CHANGE, {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.inputFieldValue },
+        }));
+    }
+    updateLocale(locale) {
+        dayjs.locale(locale);
+        this.monthsShort = dayjs().localeData().monthsShort();
+        this.months = dayjs().localeData().months();
+        this.days = dayjs().localeData().weekdays();
+        this.weekdaysShort = dayjs().localeData().weekdaysShort();
+    }
+    // Event handlers
+    inputChanged(event) {
+        this.inputFieldValue = event.detail.value;
+        // Additional input validation logic here
+    }
+    onFocus() {
+        this.dispatchEvent(new CustomEvent(DATE_PICKER_EVENTS.FOCUS, {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // Dropdown event handlers
+    handleMonthSelected(event) {
+        const customEvent = event;
+        const monthIndex = customEvent.detail.monthIndex;
+        this.selectMonth(monthIndex + 1); // selectMonth expects 1-based month
+    }
+    handleYearSelected(event) {
+        const customEvent = event;
+        const year = customEvent.detail.year;
+        this.selectYear(year);
+    }
+    // Direct selection handlers for dropdown templates
+    handleMonthSelection(monthIndex) {
+        this.selectMonth(monthIndex); // monthIndex is already 1-based from renderMonthDropdown
+    }
+    handleYearSelection(year) {
+        this.selectYear(year);
+    }
+    // Render methods following the multiple render pattern
+    render() {
+        return html `${choose(this.type, [
+            [DatePickerType.Single, () => this.renderSingle()],
+            [DatePickerType.Range, () => this.renderRange()],
+            [DatePickerType.Multiple, () => this.renderMultiple()],
+        ])}`;
+    }
+    renderSingle() {
+        return html `
+      <div
+        class="${classMap({
+            'datepicker-container': true,
+            'datepicker-disabled': this.disabled,
+            [`datepicker-size-${this.size}`]: true,
+            [`datepicker-variant-${this.variant}`]: true,
+        })}"
+        data-theme="${this.currentTheme}"
+      >
+        <nr-input
+          id="${INPUT_FIELD_ID}"
+          .type="${this.INPUT_TYPE}"
+          .value="${this.inputFieldValue}"
+          .size="${this.size}"
+          .state="${this.state}"
+          .disabled="${this.disabled}"
+          .required="${this.required}"
+          @input="${this.inputChanged}"
+          @focus="${this.onFocus}"
+          @click="${this.toggleCalendar}"
+          @keydown="${this.handleKeyDown}"
+          role="combobox"
+          aria-expanded="${this.openedCalendar}"
+          aria-haspopup="dialog"
+          aria-label="${this.label || 'Select date'}"
+        >
+          ${this.label ? html `<span slot="label">${this.label}</span>` : nothing}
+          ${this.helper ? html `<span slot="helper-text">${this.helper}</span>` : nothing}
+        </nr-input>
+        ${this.openedCalendar ? this.renderCalendar() : nothing}
+      </div>
+    `;
+    }
+    renderRange() {
+        // Range-specific rendering logic
+        return this.renderSingle(); // For now, use single rendering
+    }
+    renderMultiple() {
+        // Multiple selection rendering logic
+        return this.renderSingle(); // For now, use single rendering
+    }
+    renderCalendar() {
+        return html `
+      <div
+        class="${classMap({
+            [CALENDAR_CONTAINER_CLASS]: true,
+            'calendar-range': this.range && this.currentMode === DatePickerMode.Day,
+            [`placement-${this.placement}`]: true,
+        })}"
+        role="dialog"
+        aria-label="Calendar"
+        part="calendar"
+      >
+        <div class="calendar-header" part="header">
+          <nr-button
+            type="text"
+            class="header-prev-button prev-month"
+            .icon="${['angle-left']}"
+            @click="${this.prevMonth}"
+            aria-label="Previous month"
+          ></nr-button>
+          ${this.renderCalendarHeader()}
+          <nr-button
+            type="text"
+            class="header-next-button next-month"
+            .icon="${['angle-right']}"
+            @click="${this.nextMonth}"
+            aria-label="Next month"
+          ></nr-button>
+        </div>
+        <div class="calendar-content">
+          ${this.renderCalendarBody()}
+        </div>
+      </div>
+    `;
+    }
+    get monthOptions() {
+        return this.months.map((month, index) => ({
+            value: (index + 1).toString(),
+            label: capitalizeFirstLetter(month)
+        }));
+    }
+    get yearOptions() {
+        const currentYear = this.navigationDates.start.year;
+        const years = [];
+        for (let year = currentYear - 10; year <= currentYear + 10; year++) {
+            years.push({
+                value: year.toString(),
+                label: year.toString()
+            });
+        }
+        return years;
+    }
+    renderCalendarHeader() {
+        return html `
+      <div class="year-month-header">
+        ${this.currentMode !== DatePickerMode.Year
+            ? html `
+            <div class="month-selector">
+              <hy-select
+                .options="${this.monthOptions}"
+                .value="${this.navigationDates.start.month.toString()}"
+                .defaultValue="${[this.navigationDates.start.month.toString()]}"
+                @nr-change="${this.handleMonthChange}"
+                size="small"
+                class="month-select"
+                placeholder=""
+                .clearable=${false}
+                max-height="200px"
+              ></hy-select>
+            </div>
+          `
+            : nothing}
+
+        <div class="current-year-container">
+          <hy-select
+            .options="${this.yearOptions}"
+            .value="${this.navigationDates.start.year.toString()}"
+            .defaultValue="${[this.navigationDates.start.year.toString()]}"
+            @nr-change="${this.handleYearChange}"
+            size="small"
+            class="year-select"
+            placeholder=""
+            .clearable=${false}
+            max-height="200px"
+          ></hy-select>
+          <div class="year-icons-toggler">
+            <nr-button
+              class="next-year"
+              .icon="${['caret-up']}"
+              @click="${this.nextYear}"
+              aria-label="Next year"
+            ></nr-button>
+            <nr-button
+              class="previous-year"
+              .icon="${['caret-down']}"
+              @click="${this.prevYear}"
+              aria-label="Previous year"
+            ></nr-button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderCalendarBody() {
+        return html `${choose(this.currentMode, [
+            [DatePickerMode.Day, () => this.renderDays()],
+            [DatePickerMode.Month, () => this.renderMonths()],
+            [DatePickerMode.Year, () => this.renderYears()],
+        ])}`;
+    }
+    renderDays() {
+        const isRange = this.range && this.currentMode === DatePickerMode.Day;
+        return renderDays(this.weekdaysShort, this.navigationDates, (date) => this.selectDay(date), {
+            currentYear: this.currentYear,
+            currentMonth: this.currentMonth,
+            currentDay: this.currentDay,
+            endYear: this.endYear || this.currentYear,
+            endMonth: this.endMonth || this.currentMonth,
+            endDay: this.endDay || this.currentDay,
+        }, isRange, this.days);
+    }
+    renderMonths() {
+        return renderMonthsTemplate(this.monthsShort, this.currentMonth, this.selectMonth);
+    }
+    renderYears() {
+        return renderYearsTemplate(this.navigationDates.start.year, this.selectYear);
+    }
+};
+HyDatePickerElement.styles = styles;
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "value", void 0);
+__decorate([
+    property({ type: String, attribute: 'date-value' })
+], HyDatePickerElement.prototype, "dateValue", void 0);
+__decorate([
+    property({ type: String, attribute: 'default-value' })
+], HyDatePickerElement.prototype, "defaultValue", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyDatePickerElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyDatePickerElement.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "locale", void 0);
+__decorate([
+    property({ type: String, attribute: 'field-format' })
+], HyDatePickerElement.prototype, "fieldFormat", void 0);
+__decorate([
+    property({ type: Boolean })
+], HyDatePickerElement.prototype, "range", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-date' })
+], HyDatePickerElement.prototype, "minDate", void 0);
+__decorate([
+    property({ type: String, attribute: 'max-date' })
+], HyDatePickerElement.prototype, "maxDate", void 0);
+__decorate([
+    property({ type: Array, attribute: 'disabled-dates' })
+], HyDatePickerElement.prototype, "disabledDates", void 0);
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "placement", void 0);
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "helper", void 0);
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "state", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'use-select-dropdowns' })
+], HyDatePickerElement.prototype, "useSelectDropdowns", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean, attribute: 'opened-calendar' })
+], HyDatePickerElement.prototype, "openedCalendar", void 0);
+__decorate([
+    property({ type: String })
+], HyDatePickerElement.prototype, "mode", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "currentMode", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "monthsShort", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "months", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "days", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "weekdaysShort", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "inputFieldValue", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "currentYear", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "currentMonth", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "currentDay", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "endYear", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "endMonth", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "endDay", void 0);
+__decorate([
+    state()
+], HyDatePickerElement.prototype, "navigationDates", void 0);
+__decorate([
+    query(`#${INPUT_FIELD_ID}`)
+], HyDatePickerElement.prototype, "dateInput", void 0);
+__decorate([
+    query(`.${CALENDAR_CONTAINER_CLASS}`)
+], HyDatePickerElement.prototype, "calendarContainer", void 0);
+HyDatePickerElement = __decorate([
+    customElement('nr-datepicker')
+], HyDatePickerElement);
+export { HyDatePickerElement };
+//# sourceMappingURL=datepicker.component.js.map