@spw-ds/spw-stencil-library 1.2.3 → 1.2.5

package/dist/collection/components/spw-date-picker/spw-date-picker.js

@@ -102,8 +102,23 @@ export class SpwDatePicker {
             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) => {
@@ -178,21 +193,36 @@ export class SpwDatePicker {
         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) {
-            this.datepickerInstance.destroy();
+        if (this.datepickerInstance && typeof this.datepickerInstance.remove === 'function') {
+            setTimeout(() => {
+                if (!this.el.isConnected && this.datepickerInstance) {
+                    this.datepickerInstance.remove();
+                    this.datepickerInstance = null;
+                }
+            }, 100);
         }
     }
     watchValue(newValue) {
@@ -213,12 +243,29 @@ export class SpwDatePicker {
             this.lastInputValue = '';
         }
         this.internals.setFormValue(newValue ? newValue : null);
+        this.updateRangeConstraints();
     }
     watchDisabled(isDisabled) {
         if (this.inputElement) {
             this.inputElement.disabled = isDisabled;
         }
     }
+    watchMinDate(newMinDate) {
+        if (this.datepickerInstance && newMinDate) {
+            this.datepickerInstance.setMin(new Date(newMinDate));
+        }
+        else if (this.datepickerInstance) {
+            this.datepickerInstance.setMin(undefined);
+        }
+    }
+    watchMaxDate(newMaxDate) {
+        if (this.datepickerInstance && newMaxDate) {
+            this.datepickerInstance.setMax(new Date(newMaxDate));
+        }
+        else if (this.datepickerInstance) {
+            this.datepickerInstance.setMax(undefined);
+        }
+    }
     /** Méthode pour ouvrir le datepicker */
     async open() {
         if (this.datepickerInstance) {
@@ -250,6 +297,48 @@ export class SpwDatePicker {
         }
         return { start: null, end: null };
     }
+    /** Méthode pour mettre à jour les contraintes min/max du datepicker */
+    async updateConstraints(minDate, maxDate) {
+        if (!this.datepickerInstance)
+            return;
+        if (minDate !== undefined) {
+            if (typeof this.datepickerInstance.setMin === 'function') {
+                this.datepickerInstance.setMin(minDate);
+            }
+            else {
+                this.datepickerInstance.minDate = minDate;
+            }
+        }
+        if (maxDate !== undefined) {
+            if (typeof this.datepickerInstance.setMax === 'function') {
+                this.datepickerInstance.setMax(maxDate);
+            }
+            else {
+                this.datepickerInstance.maxDate = maxDate;
+            }
+        }
+        if (this.isOpen && this.datepickerInstance.calendar) {
+            this.datepickerInstance.hide();
+            setTimeout(() => {
+                this.datepickerInstance.show();
+            }, 0);
+        }
+    }
+    /** Méthode pour réinitialiser le datepicker */
+    async resetInput() {
+        this.value = '';
+        this.internalValue = '';
+        this.lastInputValue = '';
+        this.internals.setFormValue(null);
+        if (this.inputElement) {
+            this.inputElement.value = '';
+        }
+        if (this.datepickerInstance) {
+            this.datepickerInstance.setDate(undefined, true);
+        }
+        this.dateChange.emit({ value: '', date: null });
+        this.updateRangeConstraints();
+    }
     toISODateString(date) {
         const year = date.getFullYear();
         const month = `${date.getMonth() + 1}`.padStart(2, '0');
@@ -264,30 +353,90 @@ export class SpwDatePicker {
         let start = null;
         let end = null;
         siblings.forEach(pickerEl => {
-            const picker = pickerEl;
-            if (picker.isStart) {
-                start = picker;
+            if (pickerEl.hasAttribute('is-start')) {
+                start = pickerEl;
             }
             else {
-                end = picker;
+                end = pickerEl;
             }
         });
         return { start, end };
     }
-    updateRangeConstraints() {
+    highlightRangeInCalendar() {
+        var _a;
+        if (!this.range || !this.rangeId || !((_a = this.datepickerInstance) === null || _a === void 0 ? void 0 : _a.calendar))
+            return;
+        const { start, end } = this.getRangeSiblings();
+        if (!start || !end)
+            return;
+        const startValue = start.value;
+        const endValue = end.value;
+        if (!startValue || !endValue) {
+            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');
+            });
+            return;
+        }
+        const startDate = new Date(startValue);
+        const endDate = new Date(endValue);
+        if (isNaN(startDate.getTime()) || isNaN(endDate.getTime()))
+            return;
+        const allDates = this.datepickerInstance.calendar.querySelectorAll('.qs-square:not(.qs-empty)');
+        allDates.forEach((dateEl) => {
+            const dateNum = parseInt(dateEl.textContent || '0', 10);
+            if (!dateNum)
+                return;
+            const currentMonth = this.datepickerInstance.currentMonth;
+            const currentYear = this.datepickerInstance.currentYear;
+            const cellDate = new Date(currentYear, currentMonth, dateNum);
+            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());
+            if (cellDateOnly >= startDateOnly && cellDateOnly <= endDateOnly) {
+                if (cellDateOnly.getTime() === startDateOnly.getTime()) {
+                    dateEl.classList.add('spw-date-range-start');
+                    dateEl.classList.remove('spw-date-range-middle', 'spw-date-range-end');
+                }
+                else if (cellDateOnly.getTime() === endDateOnly.getTime()) {
+                    dateEl.classList.add('spw-date-range-end');
+                    dateEl.classList.remove('spw-date-range-middle', 'spw-date-range-start');
+                }
+                else {
+                    dateEl.classList.add('spw-date-range-middle');
+                    dateEl.classList.remove('spw-date-range-start', 'spw-date-range-end');
+                }
+            }
+            else {
+                dateEl.classList.remove('spw-date-range-start', 'spw-date-range-end', 'spw-date-range-middle');
+            }
+        });
+    }
+    async updateRangeConstraints() {
+        var _a, _b;
         if (!this.range || !this.rangeId)
             return;
         const { start, end } = this.getRangeSiblings();
-        if (this.isStart && end && end.datepickerInstance) {
+        if (this.isStart && end) {
+            await ((_a = end.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(end));
             const startDate = this.value ? new Date(this.value) : null;
             if (startDate && !isNaN(startDate.getTime())) {
-                end.datepickerInstance.setMin(startDate);
+                await end.updateConstraints(startDate, undefined);
+            }
+            else {
+                const endMinDate = end.minDate ? new Date(end.minDate) : undefined;
+                await end.updateConstraints(endMinDate, undefined);
             }
         }
-        else if (!this.isStart && start && start.datepickerInstance) {
+        if (!this.isStart && start) {
+            await ((_b = start.componentOnReady) === null || _b === void 0 ? void 0 : _b.call(start));
             const endDate = this.value ? new Date(this.value) : null;
             if (endDate && !isNaN(endDate.getTime())) {
-                start.datepickerInstance.setMax(endDate);
+                await start.updateConstraints(undefined, endDate);
+            }
+            else {
+                const startMaxDate = start.maxDate ? new Date(start.maxDate) : undefined;
+                await start.updateConstraints(undefined, startMaxDate);
             }
         }
     }
@@ -383,8 +532,16 @@ export class SpwDatePicker {
         }
     }
     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,
@@ -418,11 +575,25 @@ export class SpwDatePicker {
                 this.internals.setFormValue(isoString);
                 this.dateChange.emit({ value: isoString, date: selectedDate });
                 this.updateRangeConstraints();
+                setTimeout(() => {
+                    var _a, _b;
+                    this.highlightRangeInCalendar();
+                    const { start, end } = this.getRangeSiblings();
+                    const sibling = this.isStart ? end : start;
+                    if (sibling && sibling.isOpen) {
+                        (_b = (_a = sibling).highlightRangeInCalendar) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    }
+                }, 50);
             },
             onShow: () => {
                 this.isOpen = true;
                 this.datePickerOpen.emit();
-                setTimeout(() => this.setupCalendarNavigation(), 100);
+                setTimeout(() => {
+                    this.setupCalendarNavigation();
+                    this.highlightRangeInCalendar();
+                    setTimeout(() => this.highlightRangeInCalendar(), 50);
+                    setTimeout(() => this.highlightRangeInCalendar(), 150);
+                }, 100);
             },
             onHide: () => {
                 this.isOpen = false;
@@ -430,18 +601,21 @@ export class SpwDatePicker {
             },
         };
         if (this.range && this.rangeId) {
-            options.id = this.rangeId;
             const { start, end } = this.getRangeSiblings();
-            if (this.isStart && end && end.value) {
-                const endDate = new Date(end.value);
-                if (!isNaN(endDate.getTime())) {
-                    options.maxDate = endDate;
+            if (this.isStart) {
+                if (end && end.value) {
+                    const endDate = new Date(end.value);
+                    if (!isNaN(endDate.getTime())) {
+                        options.maxDate = endDate;
+                    }
                 }
             }
-            else if (!this.isStart && start && start.value) {
-                const startDate = new Date(start.value);
-                if (!isNaN(startDate.getTime())) {
-                    options.minDate = startDate;
+            else {
+                if (start && start.value) {
+                    const startDate = new Date(start.value);
+                    if (!isNaN(startDate.getTime())) {
+                        options.minDate = startDate;
+                    }
                 }
             }
         }
@@ -452,17 +626,22 @@ export class SpwDatePicker {
                 options.maxDate = new Date(this.maxDate);
         }
         if (this.datepickerInstance) {
-            this.datepickerInstance.destroy();
+            if (typeof this.datepickerInstance.remove === 'function') {
+                this.datepickerInstance.remove();
+            }
         }
         this.datepickerInstance = datepicker(this.inputElement, options);
         if (this.value) {
             const initialDate = new Date(this.value);
             if (!isNaN(initialDate.getTime())) {
-                this.datepickerInstance.setDate(initialDate, true);
-                const formattedDate = this.formatDate(initialDate);
-                this.inputElement.value = formattedDate;
-                this.internalValue = formattedDate;
-                this.lastInputValue = formattedDate;
+                try {
+                    this.datepickerInstance.setDate(initialDate, true);
+                    const formattedDate = this.formatDate(initialDate);
+                    this.inputElement.value = formattedDate;
+                    this.internalValue = formattedDate;
+                    this.lastInputValue = formattedDate;
+                }
+                catch (error) { }
             }
         }
     }
@@ -508,7 +687,7 @@ export class SpwDatePicker {
             'spw-date-picker__input--open': this.isOpen,
         };
         const errorMessage = this.error || this.internalError;
-        return (h(Host, { key: 'c594604e093d2d31454b752490eecc36869a5766' }, h("div", { key: 'a629c9dcd1439479dc66d786aff09e4ab6100b52', class: "spw-date-picker" }, this.label && h("spw-field-label", { key: '048362c15405921c6b7ac56c5aceecb70b926c41', label: this.label, required: this.required }), this.assistiveText && (h("spw-field-message", { key: 'a234e8de64439499c3ca672248bbfc0e1112d90b', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'd0d46cc77a17598ae291edc61514ebf5c65bbca8', class: "spw-date-picker__input-container" }, h("input", { key: '055c041eb75fcdddec77cb4392717268ad34a6d6', 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 }), h("spw-icon", { key: '3715f7fea8a0638588acb9bc8cdc0ea9472c25cb', icon: "fa-calendar", class: "spw-date-picker__icon" })), this.error && (h("spw-field-message", { key: 'ac5aac1c1f5f9cce1ab6e8d4fbe27f622f6b7d51', variant: "error", showIcon: this.showErrorIcon }, this.error)), this.hint && (h("spw-field-message", { key: 'a30427e0364ea095c99085a68998dfb3d5398079', variant: "hint", showIcon: this.showHintIcon }, this.hint)), this.success && (h("spw-field-message", { key: 'd859c7f8f242d326895611d788b7e21df65595a7', variant: "success", showIcon: this.showSuccessIcon }, this.success)), this.warning && (h("spw-field-message", { key: 'b737141f66e877afb98df4adc668f9d6d6baa8cd', variant: "warning", showIcon: this.showWarningIcon }, this.warning)))));
+        return (h(Host, { key: 'eb66aebb637564da5d4e3c83cfe76d9d61e12e85' }, h("div", { key: '7984062a8d5c11c6876780431ff8bfd93bd935cc', class: "spw-date-picker" }, this.label && h("spw-field-label", { key: '494b6184491b96597c068dccba20a8f7d588b144', label: this.label, required: this.required }), this.assistiveText && (h("spw-field-message", { key: 'cac9fb61d6af9ddfc648a1483812a72fea20ed2b', class: "spw-tw-mb-2 -spw-tw-mt-1", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: 'd54d9d938865e6594c7f58f62941a01014503ee5', class: "spw-date-picker__input-container" }, 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 }), h("spw-icon", { key: '0737358ffe36b3c05d8a767c7cfdf14832144c85', icon: "fa-calendar", class: "spw-date-picker__icon" })), this.error && (h("spw-field-message", { key: 'da0bf405570f245e40822174b0360537be5de8da', variant: "error", showIcon: this.showErrorIcon }, this.error)), this.hint && (h("spw-field-message", { key: '2f72f9c384714c9687abe5807ce1a42c94247357', variant: "hint", showIcon: this.showHintIcon }, this.hint)), this.success && (h("spw-field-message", { key: 'c6d8902f5c56a696eea582d60f0fc82baade5cf3', variant: "success", showIcon: this.showSuccessIcon }, this.success)), this.warning && (h("spw-field-message", { key: '297c8119472b719c145c10301f4bd37bc6812f35', variant: "warning", showIcon: this.showWarningIcon }, this.warning)))));
     }
     static get is() { return "spw-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -542,7 +721,7 @@ export class SpwDatePicker {
                 "getter": false,
                 "setter": false,
                 "attribute": "value",
-                "reflect": false
+                "reflect": true
             },
             "placeholder": {
                 "type": "string",
@@ -1161,6 +1340,52 @@ export class SpwDatePicker {
                     "text": "M\u00E9thode pour r\u00E9cup\u00E9rer le range de dates",
                     "tags": []
                 }
+            },
+            "updateConstraints": {
+                "complexType": {
+                    "signature": "(minDate?: Date, maxDate?: Date) => Promise<void>",
+                    "parameters": [{
+                            "name": "minDate",
+                            "type": "Date",
+                            "docs": ""
+                        }, {
+                            "name": "maxDate",
+                            "type": "Date",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9thode pour mettre \u00E0 jour les contraintes min/max du datepicker",
+                    "tags": []
+                }
+            },
+            "resetInput": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "M\u00E9thode pour r\u00E9initialiser le datepicker",
+                    "tags": []
+                }
             }
         };
     }
@@ -1172,6 +1397,12 @@ export class SpwDatePicker {
             }, {
                 "propName": "disabled",
                 "methodName": "watchDisabled"
+            }, {
+                "propName": "minDate",
+                "methodName": "watchMinDate"
+            }, {
+                "propName": "maxDate",
+                "methodName": "watchMaxDate"
             }];
     }
     static get attachInternalsMemberName() { return "internals"; }