@spw-ds/spw-stencil-library 1.2.4 → 1.2.6

package/dist/cjs/spw-date-picker.cjs.entry.js

@@ -134,8 +134,23 @@ const SpwDatePicker = class {
             this.handleMaskedInput(event);
         };
         this.handleInputFocus = () => {
-            if (!this.disabled && this.datepickerInstance) {
-                this.datepickerInstance.show();
+            if (this.disabled)
+                return;
+            if (!this.datepickerInstance) {
+                this.initializeDatepicker();
+            }
+            if (this.datepickerInstance && typeof this.datepickerInstance.show === 'function') {
+                try {
+                    this.datepickerInstance.show();
+                }
+                catch (error) {
+                    console.warn("Erreur lors de l'ouverture du datepicker, réinitialisation...", error);
+                    this.datepickerInstance = null;
+                    this.initializeDatepicker();
+                    if (this.datepickerInstance && typeof this.datepickerInstance.show === 'function') {
+                        this.datepickerInstance.show();
+                    }
+                }
             }
         };
         this.handleKeyDown = (ev) => {
@@ -210,21 +225,36 @@ const SpwDatePicker = class {
         this.internalValue = start;
         this.lastInputValue = this.internalValue;
     }
+    connectedCallback() {
+        if (!this.datepickerInstance && this.inputElement) {
+            requestAnimationFrame(() => {
+                this.initializeDatepicker();
+            });
+        }
+    }
     componentDidLoad() {
+        var _a;
         this.initializeDatepicker();
         if (this.value) {
             const initialDate = new Date(this.value);
             if (!isNaN(initialDate.getTime())) {
-                this.datepickerInstance.setDate(initialDate, true);
-                this.inputElement.value = this.formatDate(initialDate);
-                this.internalValue = this.formatDate(initialDate);
+                (_a = this.datepickerInstance) === null || _a === void 0 ? void 0 : _a.setDate(initialDate, true);
+                if (this.inputElement) {
+                    this.inputElement.value = this.formatDate(initialDate);
+                    this.internalValue = this.formatDate(initialDate);
+                }
             }
         }
         this.internals.setFormValue(this.value ? this.value : null);
     }
     disconnectedCallback() {
         if (this.datepickerInstance && typeof this.datepickerInstance.remove === 'function') {
-            this.datepickerInstance.remove();
+            setTimeout(() => {
+                if (!this.el.isConnected && this.datepickerInstance) {
+                    this.datepickerInstance.remove();
+                    this.datepickerInstance = null;
+                }
+            }, 100);
         }
     }
     watchValue(newValue) {
@@ -355,7 +385,6 @@ const SpwDatePicker = class {
         let start = null;
         let end = null;
         siblings.forEach(pickerEl => {
-            // Accéder à l'attribut HTML pour déterminer si c'est le début ou la fin
             if (pickerEl.hasAttribute('is-start')) {
                 start = pickerEl;
             }
@@ -375,7 +404,6 @@ const SpwDatePicker = class {
         const startValue = start.value;
         const endValue = end.value;
         if (!startValue || !endValue) {
-            // Pas de range complet, supprimer le highlighting
             const allDates = this.datepickerInstance.calendar.querySelectorAll('.qs-square');
             allDates.forEach((dateEl) => {
                 dateEl.classList.remove('spw-date-range-start', 'spw-date-range-end', 'spw-date-range-middle');
@@ -386,34 +414,27 @@ const SpwDatePicker = class {
         const endDate = new Date(endValue);
         if (isNaN(startDate.getTime()) || isNaN(endDate.getTime()))
             return;
-        // Highlighter les dates dans le range
         const allDates = this.datepickerInstance.calendar.querySelectorAll('.qs-square:not(.qs-empty)');
         allDates.forEach((dateEl) => {
             const dateNum = parseInt(dateEl.textContent || '0', 10);
             if (!dateNum)
                 return;
-            // Récupérer le mois/année actuellement affiché
             const currentMonth = this.datepickerInstance.currentMonth;
             const currentYear = this.datepickerInstance.currentYear;
             const cellDate = new Date(currentYear, currentMonth, dateNum);
-            // Normaliser les dates pour comparer uniquement jour/mois/année (sans heures)
             const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
             const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
             const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
-            // Vérifier si cette date est dans le range
             if (cellDateOnly >= startDateOnly && cellDateOnly <= endDateOnly) {
                 if (cellDateOnly.getTime() === startDateOnly.getTime()) {
-                    // Date de début
                     dateEl.classList.add('spw-date-range-start');
                     dateEl.classList.remove('spw-date-range-middle', 'spw-date-range-end');
                 }
                 else if (cellDateOnly.getTime() === endDateOnly.getTime()) {
-                    // Date de fin
                     dateEl.classList.add('spw-date-range-end');
                     dateEl.classList.remove('spw-date-range-middle', 'spw-date-range-start');
                 }
                 else {
-                    // Date au milieu
                     dateEl.classList.add('spw-date-range-middle');
                     dateEl.classList.remove('spw-date-range-start', 'spw-date-range-end');
                 }
@@ -543,8 +564,16 @@ const SpwDatePicker = class {
         }
     }
     initializeDatepicker() {
-        if (!this.inputElement)
-            return;
+        var _a;
+        if (!this.inputElement) {
+            const shadowInput = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input[type="text"]');
+            if (shadowInput) {
+                this.inputElement = shadowInput;
+            }
+            else {
+                return;
+            }
+        }
         const options = {
             position: this.position,
             startDay: 1,
@@ -578,11 +607,9 @@ const SpwDatePicker = class {
                 this.internals.setFormValue(isoString);
                 this.dateChange.emit({ value: isoString, date: selectedDate });
                 this.updateRangeConstraints();
-                // Mettre à jour le highlighting visuel du range
                 setTimeout(() => {
                     var _a, _b;
                     this.highlightRangeInCalendar();
-                    // Mettre aussi à jour le highlighting sur l'autre datepicker s'il est ouvert
                     const { start, end } = this.getRangeSiblings();
                     const sibling = this.isStart ? end : start;
                     if (sibling && sibling.isOpen) {
@@ -596,7 +623,6 @@ const SpwDatePicker = class {
                 setTimeout(() => {
                     this.setupCalendarNavigation();
                     this.highlightRangeInCalendar();
-                    // Réappliquer plusieurs fois pour contrer js-datepicker
                     setTimeout(() => this.highlightRangeInCalendar(), 50);
                     setTimeout(() => this.highlightRangeInCalendar(), 150);
                 }, 100);
@@ -607,9 +633,6 @@ const SpwDatePicker = class {
             },
         };
         if (this.range && this.rangeId) {
-            // NOTE: On ne définit PAS options.id car js-datepicker applique alors des contraintes
-            // automatiques qui sont inversées. On gère nous-mêmes les contraintes.
-            // options.id = this.rangeId;
             const { start, end } = this.getRangeSiblings();
             if (this.isStart) {
                 if (end && end.value) {
@@ -635,7 +658,6 @@ const SpwDatePicker = class {
                 options.maxDate = new Date(this.maxDate);
         }
         if (this.datepickerInstance) {
-            // js-datepicker utilise remove() pour détruire l'instance
             if (typeof this.datepickerInstance.remove === 'function') {
                 this.datepickerInstance.remove();
             }
@@ -651,9 +673,7 @@ const SpwDatePicker = class {
                     this.internalValue = formattedDate;
                     this.lastInputValue = formattedDate;
                 }
-                catch (error) {
-                    // Si la date n'est pas valide avec les contraintes actuelles, on la laisse vide
-                }
+                catch (error) { }
             }
         }
     }
@@ -699,7 +719,7 @@ const SpwDatePicker = class {
             'spw-date-picker__input--open': this.isOpen,
         };
         const errorMessage = this.error || this.internalError;
-        return (index.h(index.Host, { key: '657ed1e69aaeb89fe38dd244e5744bf3caf5ca21' }, index.h("div", { key: 'dc957192b9d4b8c3eb9bd9f055a84c8ac67f6150', class: "spw-date-picker" }, this.label && index.h("spw-field-label", { key: '34adf8491363afcb0bce2aed2dfb72d4d3655b81', label: this.label, required: this.required }), this.assistiveText && (index.h("spw-field-message", { key: '098a6382c0558a436b17c605654c1edcb1447408', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), index.h("div", { key: '9d6684f543f9300f5bc528a6ee6a88d79f19c9fa', class: "spw-date-picker__input-container" }, index.h("input", { key: '56f8098297fada855c2672f7d3b4d926e7ac2e71', ref: el => (this.inputElement = el), id: this.uniqueId, type: "text", class: inputClass, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, required: this.required, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "aria-describedby": this.assistiveText || errorMessage ? `${this.uniqueId}-help ${this.uniqueId}-error` : undefined, "aria-invalid": this.hasError }), index.h("spw-icon", { key: 'c18e7b4405c18d553036c5fd0301aa9bf2403be8', icon: "fa-calendar", class: "spw-date-picker__icon" })), this.error && (index.h("spw-field-message", { key: '83103ba00956d37bc8369d220f1b80591d840fea', variant: "error", showIcon: this.showErrorIcon }, this.error)), this.hint && (index.h("spw-field-message", { key: 'fbcb99394e7fac065b25141b14f57247993efb09', variant: "hint", showIcon: this.showHintIcon }, this.hint)), this.success && (index.h("spw-field-message", { key: 'a0041903b10368ad8f2c9482603868565ab20ee2', variant: "success", showIcon: this.showSuccessIcon }, this.success)), this.warning && (index.h("spw-field-message", { key: 'd52fdb1f562529df9d9e10f7ee5c92e221a8debe', variant: "warning", showIcon: this.showWarningIcon }, this.warning)))));
+        return (index.h(index.Host, { key: 'eb66aebb637564da5d4e3c83cfe76d9d61e12e85' }, index.h("div", { key: '7984062a8d5c11c6876780431ff8bfd93bd935cc', class: "spw-date-picker" }, this.label && index.h("spw-field-label", { key: '494b6184491b96597c068dccba20a8f7d588b144', label: this.label, required: this.required }), this.assistiveText && (index.h("spw-field-message", { key: 'cac9fb61d6af9ddfc648a1483812a72fea20ed2b', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), index.h("div", { key: 'd54d9d938865e6594c7f58f62941a01014503ee5', class: "spw-date-picker__input-container" }, index.h("input", { key: 'a5495ee8d28f851e40c8139f1f2ced630f19d016', ref: el => (this.inputElement = el), id: this.uniqueId, type: "text", class: inputClass, value: this.internalValue, placeholder: this.placeholder, disabled: this.disabled, required: this.required, onFocus: this.handleInputFocus, onInput: this.handleInputChange, onKeyDown: this.handleKeyDown, "aria-describedby": this.assistiveText || errorMessage ? `${this.uniqueId}-help ${this.uniqueId}-error` : undefined, "aria-invalid": this.hasError }), index.h("spw-icon", { key: '0737358ffe36b3c05d8a767c7cfdf14832144c85', icon: "fa-calendar", class: "spw-date-picker__icon" })), this.error && (index.h("spw-field-message", { key: 'da0bf405570f245e40822174b0360537be5de8da', variant: "error", showIcon: this.showErrorIcon }, this.error)), this.hint && (index.h("spw-field-message", { key: '2f72f9c384714c9687abe5807ce1a42c94247357', variant: "hint", showIcon: this.showHintIcon }, this.hint)), this.success && (index.h("spw-field-message", { key: 'c6d8902f5c56a696eea582d60f0fc82baade5cf3', variant: "success", showIcon: this.showSuccessIcon }, this.success)), this.warning && (index.h("spw-field-message", { key: '297c8119472b719c145c10301f4bd37bc6812f35', variant: "warning", showIcon: this.showWarningIcon }, this.warning)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }