ngx-ode-ui 4.7.0 → 4.7.2

package/fesm2020/ngx-ode-ui.mjs

@@ -7,7 +7,7 @@ import { NG_VALUE_ACCESSOR, NgModel, FormsModule } from '@angular/forms';
 import Flatpickr from 'flatpickr';
 import French from 'flatpickr/dist/l10n/fr.js';
 import * as i1 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule, getLocaleId, DatePipe } from '@angular/common';
 import * as i2$1 from 'ngx-ode-sijil';
 import { NgxOdeSijilModule } from 'ngx-ode-sijil';
 import * as i2$2 from 'ngx-infinite-scroll';
@@ -202,6 +202,8 @@ class DatepickerComponent extends OdeComponent {
         this.changeDate = new EventEmitter();
         this.onChangeCallback = NOOP;
         this.onTouchedCallback = NOOP;
+        this.onInputChangeObserver = null;
+        this.debounceTimer = null;
     }
     get value() {
         return this.innerValue;
@@ -250,23 +252,37 @@ class DatepickerComponent extends OdeComponent {
             altInput: !this.disabled,
             altFormat: 'd/m/Y',
             dateFormat: 'Y-m-d',
-            allowInput: false,
+            allowInput: true,
             enableTime: this.enableTime,
             minDate: this.minDate,
             maxDate: this.maxDate,
             clickOpens: false,
             wrap: true,
-            locale: datePickerLocale
+            locale: datePickerLocale,
+            onChange: (selectedDates, dateStr) => {
+                this.value = dateStr;
+            },
+            onClose: () => {
+                this.onTouchedCallback();
+            }
         };
         this.datePickerInst = new Flatpickr(this.datePickerElement.nativeElement, options);
         if (!this.disabled) {
+            // Add click handler for the alt input
             this.datePickerInst.altInput.addEventListener('click', e => {
                 if (!this.readonly) {
                     this.datePickerInst.toggle();
                 }
             });
+            // Add blur handler for manual entry
+            this.datePickerInst.altInput.addEventListener('blur', e => {
+                const inputDate = this.datePickerInst.parseDate(this.datePickerInst.altInput.value, options.altFormat);
+                if (inputDate) {
+                    this.datePickerInst.setDate(inputDate, true);
+                }
+            });
         }
-        // Force updating the date input readonly attribute :
+        // Force updating the date input readonly attribute
         this.readonly = this._readonly;
     }
     ngOnDestroy() {
@@ -2645,8 +2661,21 @@ class LocalizedDatePipe {
     constructor(bundlesService) {
         this.bundlesService = bundlesService;
     }
-    transform(value, pattern = 'mediumDate') {
-        const datePipe = new DatePipe(this.bundlesService.currentLanguage);
+    transform(value, pattern = "mediumDate") {
+        let targetLanguage = this.bundlesService.currentLanguage || "en";
+        try {
+            // If targetLanguage and angular current locale are different, fall back angular locale to "en"
+            if (getLocaleId(targetLanguage) !== targetLanguage) {
+                targetLanguage = "en";
+            }
+        }
+        catch (e) {
+            // getLocaleId(targetLanguage) can throw an error when locale is not recognized
+            // In such a case, fall back to "en"
+            targetLanguage = "en";
+        }
+        // Use angular locale formatting for localized dates
+        const datePipe = new DatePipe(targetLanguage);
         return datePipe.transform(value, pattern);
     }
 }