ngx-ode-ui 4.8.0-dev.0develop-b2school.13 → 4.8.0-dev.0develop-b2school.14

package/fesm2020/ngx-ode-ui.mjs

@@ -1,7 +1,8 @@
 import * as i0 from '@angular/core';
 import { Injectable, forwardRef, EventEmitter, Component, ViewChild, Input, Output, HostBinding, Directive, Pipe, TemplateRef, ContentChild, ChangeDetectionStrategy, HostListener, ContentChildren, Injector, NgModule } from '@angular/core';
-import { throwError, Observable, Subject } from 'rxjs';
+import { throwError, Observable, Subject, fromEvent } from 'rxjs';
 import { OdeComponent } from 'ngx-ode-core';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgModel, FormsModule } from '@angular/forms';
 import Flatpickr from 'flatpickr';
@@ -12,7 +13,6 @@ import * as i2$1 from 'ngx-ode-sijil';
 import { NgxOdeSijilModule } from 'ngx-ode-sijil';
 import * as i2$2 from 'ngx-infinite-scroll';
 import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 class DynamicModuleImportsService {
     constructor() {
@@ -202,6 +202,7 @@ class DatepickerComponent extends OdeComponent {
         this.changeDate = new EventEmitter();
         this.onChangeCallback = NOOP;
         this.onTouchedCallback = NOOP;
+        this.onInputChangeObserver = null;
     }
     get value() {
         return this.innerValue;
@@ -250,28 +251,48 @@ 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 input handler for manual entry with debounce
+            this.onInputChangeObserver = fromEvent(this.datePickerInst.altInput, 'input')
+                .pipe(debounceTime(300))
+                .subscribe(() => {
+                // when user input a date manually, we try to parse it and set it as selected date
+                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() {
         super.ngOnDestroy();
         this.datePickerInst.destroy();
+        if (this.onInputChangeObserver) {
+            this.onInputChangeObserver.unsubscribe();
+        }
     }
     writeValue(value) {
         if (value !== this.innerValue && this.datePickerInst) {