@sumaris-net/ngx-components 1.14.3 → 1.15.2

package/fesm2015/sumaris-net.ngx-components.js

@@ -1733,7 +1733,7 @@ DateFormatPipe.ctorParameters = () => [
     { type: TranslateService }
 ];
 
-const moment$6 = momentImported;
+const moment$7 = momentImported;
 class DateDiffDurationPipe {
     constructor(dateAdapter, translate) {
         this.dateAdapter = dateAdapter;
@@ -1749,10 +1749,10 @@ class DateDiffDurationPipe {
         return this.format(startDate, endDate);
     }
     format(startDate, endDate) {
-        const duration = moment$6.duration(endDate.diff(startDate));
+        const duration = moment$7.duration(endDate.diff(startDate));
         if (duration.asMinutes() < 0)
             return '';
-        const timeDuration = moment$6(0)
+        const timeDuration = moment$7(0)
             .hour(duration.hours())
             .minute(duration.minutes());
         const days = Math.floor(duration.asDays());
@@ -2196,7 +2196,7 @@ FileSizePipe.decorators = [
     { type: Pipe, args: [{ name: 'fileSize' },] }
 ];
 
-const moment$5 = momentImported;
+const moment$6 = momentImported;
 const tz = momentTZImported;
 const DATE_UNIX_TIMESTAMP = 'X';
 const DATE_UNIX_MS_TIMESTAMP = 'x';
@@ -2225,18 +2225,19 @@ class DateUtils {
      * Same implementation as the Java class Dates.resetTime() (see any SUMARiS like Pod)
      * @param value
      * @param timezone a timezone (see https://momentjs.com/timezone/)
+     * @param keepLocalTime if true, only the timezone (and offset) is updated, keeping the local time same. Consequently, it will now point to a different point in time if the offset has changed.
      */
-    static resetTime(value, timezone) {
+    static resetTime(value, timezone, keepLocalTime) {
         if (!value)
             return undefined;
         const date = fromDateISOString(value);
         // No timezone
         if (!timezone) {
-            return moment$5(date).startOf('day');
+            return date.clone().startOf('day');
         }
         // Use timezone
-        moment$5(date)
-            .tz(timezone, true)
+        return date.clone() // clone the original date
+            .tz(timezone, keepLocalTime)
             .startOf('day');
     }
 }
@@ -2258,32 +2259,32 @@ function fromDateISOString(value) {
     if (!value || isMoment(value))
         return value;
     // Parse the input value, as a ISO date time
-    const date = moment$5(value, DATE_ISO_PATTERN);
+    const date = moment$6(value, DATE_ISO_PATTERN);
     if (date.isValid())
         return date;
     // Not valid: trying to convert from unix timestamp
     if (typeof value === 'string') {
         console.warn('Wrong date format - Trying to convert from local time: ' + value);
         if (value.length === 10) {
-            return moment$5(value, DATE_UNIX_TIMESTAMP);
+            return moment$6(value, DATE_UNIX_TIMESTAMP);
         }
         else if (value.length === 13) {
-            return moment$5(value, DATE_UNIX_MS_TIMESTAMP);
+            return moment$6(value, DATE_UNIX_MS_TIMESTAMP);
         }
     }
     console.warn('Unable to parse date: ' + value);
     return undefined;
 }
 function fromUnixTimestamp(timeInSec) {
-    return moment$5(timeInSec, DATE_UNIX_TIMESTAMP);
+    return moment$6(timeInSec, DATE_UNIX_TIMESTAMP);
 }
 function fromUnixMsTimestamp(timeInMs) {
-    return moment$5(timeInMs, DATE_UNIX_MS_TIMESTAMP);
+    return moment$6(timeInMs, DATE_UNIX_MS_TIMESTAMP);
 }
 function toDuration(value, unit) {
     if (!value)
         return undefined;
-    const duration = moment$5.duration(value, unit);
+    const duration = moment$6.duration(value, unit);
     // fix 990+ ms
     if (duration.milliseconds() >= 990) {
         duration.add(1000 - duration.milliseconds(), 'ms');
@@ -2706,7 +2707,7 @@ NgInitDirective.propDecorators = {
     ngInit: [{ type: Output }]
 };
 
-const moment$4 = momentImported;
+const moment$5 = momentImported;
 // @dynamic
 class SharedValidators {
     static getDoubleRegexp(maxDecimals) {
@@ -2721,14 +2722,6 @@ class SharedValidators {
         this._REGEXP_CACHE.DOUBLE_BY_MAX_DECIMALS[maxDecimals] = new RegExp(`^[-]?[0-9]+([.,][0-9]{1,${maxDecimals}})?$`);
         return this._REGEXP_CACHE.DOUBLE_BY_MAX_DECIMALS[maxDecimals];
     }
-    static validDate(control) {
-        const value = control.value;
-        const date = !value || moment$4.isMoment(value) ? value : moment$4(control.value, DATE_ISO_PATTERN);
-        if (date && (!date.isValid() || date.year() < 1970)) {
-            return { validDate: true };
-        }
-        return null;
-    }
     static latitude(control) {
         const value = control.value;
         if (isNotNil(value) && (value < -90 || value > 90)) {
@@ -2793,6 +2786,14 @@ class SharedValidators {
             return null;
         };
     }
+    static validDate(control) {
+        const value = control.value;
+        const date = !value || moment$5.isMoment(value) ? value : moment$5(control.value, DATE_ISO_PATTERN);
+        if (date && (!date.isValid() || date.year() < 1970)) {
+            return { validDate: true };
+        }
+        return null;
+    }
     static dateIsAfter(previousValue, errorParam, granularity) {
         return (control) => {
             const value = fromDateISOString(control.value);
@@ -2803,6 +2804,16 @@ class SharedValidators {
             return null;
         };
     }
+    static dateIsBefore(maxValue, errorParam, granularity) {
+        return (control) => {
+            const value = fromDateISOString(control.value);
+            if (isNotNil(value) && isNotNil(maxValue) && value.isSameOrAfter(maxValue, granularity)) {
+                // Return the error
+                return { dateIsBefore: { maxDate: errorParam } };
+            }
+            return null;
+        };
+    }
     static dateRangeEnd(startDateFieldName, msg) {
         const errorCode = msg ? 'msg' : 'dateRange';
         const error = msg ? { msg } : { dateRange: true };
@@ -2897,6 +2908,7 @@ SharedValidators.I18N_ERROR_KEYS = {
     pubkey: 'ERROR.FIELD_NOT_VALID_PUBKEY',
     validDate: 'ERROR.FIELD_NOT_VALID_DATE',
     dateIsAfter: 'ERROR.FIELD_NOT_VALID_DATE_AFTER',
+    dateIsBefore: 'ERROR.FIELD_NOT_VALID_DATE_BEFORE',
     dateRange: 'ERROR.FIELD_NOT_VALID_DATE_RANGE',
     dateMinDuration: 'ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION',
     dateMaxDuration: 'ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION',
@@ -4737,6 +4749,7 @@ const noop$6 = () => { };
 const ɵ0$9 = noop$6;
 class MatDate {
     constructor(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
+        this.platform = platform;
         this.dateAdapter = dateAdapter;
         this.translate = translate;
         this.formBuilder = formBuilder;
@@ -4746,21 +4759,26 @@ class MatDate {
         this._onChangeCallback = noop$6;
         this._onTouchedCallback = noop$6;
         this._subscription = new Subscription();
-        this.writing = true;
-        this.disabling = false;
+        this._writing = true;
+        this._disabling = false;
+        this._readonly = false;
         this.dayMask = DAY_MASK$2;
-        this.disabled = false;
         this.floatLabel = 'auto';
-        this.readonly = false;
         this.compact = false;
         this.placeholderChar = DEFAULT_PLACEHOLDER_CHAR;
         this.autofocus = false;
+        this.startDate = null;
         this.clearable = false;
-        // Workaround because ion-datetime has issue (do not returned a ISO date)
-        this.mobile = platform.is('mobile');
-        this.keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
+        this.timezone = null;
         this.locale = (translate.currentLang || translate.defaultLang).substr(0, 2);
     }
+    set readonly(value) {
+        this._readonly = value;
+        this.markForCheck();
+    }
+    get readonly() {
+        return this._readonly;
+    }
     set tabindex(value) {
         if (this._tabindex !== value) {
             this._tabindex = value;
@@ -4771,67 +4789,68 @@ class MatDate {
         return this._tabindex;
     }
     get value() {
-        return toDateISOString(this._value);
+        return this.formControl.value;
     }
     ngOnInit() {
+        this.mobile = isNil(this.mobile) ? this.platform.is('mobile') : this.mobile;
+        this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
         if (!this.formControl)
             throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-field>.');
         this.required = toBoolean(this.required, this.formControl.validator === Validators.required);
-        // Redirect errors from main control, into day sub control
-        const $error = new BehaviorSubject(null);
-        this.dayControl = this.formBuilder.control(null, () => $error.getValue());
-        // Add custom 'validDate' validator
-        this.formControl.setValidators(this.required ? [Validators.required, SharedValidators.validDate] : SharedValidators.validDate);
+        // Add 'validDate' validator (when existing validator are null or required, to be sure to keep it)
+        if (!this.formControl.validator || this.formControl.validator === Validators.required) {
+            this.formControl.setValidators(this.required ? [Validators.required, SharedValidators.validDate] : SharedValidators.validDate);
+        }
+        else {
+            this.formControl.setValidators(this.required ? [this.formControl.validator, Validators.required, SharedValidators.validDate] :
+                [this.formControl.validator, SharedValidators.validDate]);
+        }
+        this.dayControl = this.formBuilder.control(null, () => this.formControl.errors);
         // Get patterns to display date
-        this.updatePattern(this.translate.instant('COMMON.DATE_PATTERN'));
         this._subscription.add(this.translate.get('COMMON.DATE_PATTERN')
             .subscribe((pattern) => this.updatePattern(pattern)));
         this._subscription.add(this.dayControl.valueChanges
             .subscribe((value) => this.onFormChange(value)));
-        // Listen status changes outside the component (e.g. when setErrors() is calling on the formControl)
+        // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
         this._subscription.add(this.formControl.statusChanges
-            .pipe(filter(() => !this.readonly && !this.writing && !this.disabling)) // Skip
-            .subscribe((status) => {
-            if (status === 'INVALID') {
-                $error.next(this.formControl.errors);
-            }
-            else if (status === 'VALID') {
-                $error.next(null);
-            }
-            this.dayControl.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+            .pipe(filter((_) => !this.readonly && !this._writing && !this._disabling) // Skip
+        )
+            .subscribe(() => {
+            this.dayControl.updateValueAndValidity({ emitEvent: false });
             this.markForCheck();
         }));
         this.updateTabIndex();
-        this.writing = false;
+        this._writing = false;
     }
     ngOnDestroy() {
         this._subscription.unsubscribe();
     }
-    writeValue(obj) {
-        if (this.writing)
-            return;
-        // console.debug('[mat-date] writeValue:', obj);
-        if (isNilOrBlank(obj)) {
-            this.writing = true;
+    writeValue(valueStr) {
+        if (this._writing)
+            return; // Skip
+        this._writing = true;
+        // DEBUG
+        // console.debug("[mat-date] writeValue() with:", valueStr);
+        const value = fromDateISOString(valueStr);
+        if (!value || !value.isValid()) {
             this.dayControl.patchValue(null, { emitEvent: false });
-            this._value = undefined;
             if (this.formControl.value) {
                 this.formControl.patchValue(null, { emitEvent: false });
                 this._onChangeCallback(null);
             }
-            this.writing = false;
-            this.markForCheck();
-            return;
         }
-        this._value = this.dateAdapter.parse(obj, DATE_ISO_PATTERN);
-        if (!this._value) { // invalid date
-            return;
+        else {
+            // Format day
+            // Move to the expected TZ (keeping local hour - e.g. midnight)
+            let day = value && this.timezone ? value.clone().tz(this.timezone) : value.clone();
+            // Reset hour
+            day = day.startOf('day');
+            const dayStr = this.dateAdapter.format(day, this.dayPattern);
+            // Update control
+            this.dayControl.patchValue(dayStr, { emitEvent: false });
         }
-        this.writing = true;
-        // Set form value
-        this.dayControl.patchValue(this.dateAdapter.format(this._value.clone().startOf('day'), this.dayPattern), { emitEvent: false });
-        this.writing = false;
+        this._writing = false;
         this.markForCheck();
     }
     registerOnChange(fn) {
@@ -4841,37 +4860,39 @@ class MatDate {
         this._onTouchedCallback = fn;
     }
     setDisabledState(isDisabled) {
-        if (this.disabling)
+        if (this._disabling)
             return;
-        this.disabling = true;
-        this.disabled = isDisabled;
+        this._disabling = true;
         if (isDisabled) {
-            this.dayControl.disable({ onlySelf: true, emitEvent: false });
+            this.dayControl.disable({ emitEvent: false });
         }
         else {
-            this.dayControl.enable({ onlySelf: true, emitEvent: false });
+            this.dayControl.enable({ emitEvent: false });
         }
-        this.disabling = false;
+        this._disabling = false;
         this.markForCheck();
     }
     onDatePickerChange(event) {
-        if (this.writing || !(event && event.value))
-            return; // Skip if call by self
-        this.writing = true;
-        let date = event.value;
-        date = typeof date === 'string' && this.dateAdapter.parse(date, DATE_ISO_PATTERN) || date;
-        let day;
-        // avoid to have TZ offset
-        date = date && date.utc(true).hour(0).minute(0).seconds(0).millisecond(0);
-        day = date && date.clone().startOf('day');
-        // update day value
-        this.dayControl.setValue(date && this.dateAdapter.format(day, this.dayPattern), { emitEvent: false });
-        // Get the model value
-        const dateStr = date && this.dateAdapter.format(date, DATE_ISO_PATTERN).replace('+00:00', 'Z');
-        this.formControl.patchValue(dateStr, { emitEvent: false });
-        this.writing = false;
-        this.markForCheck();
-        this._onChangeCallback(dateStr);
+        // Make sure event is valid
+        if (!event || (event.value !== null && !isMoment(event.value))) {
+            console.warn('Invalid MatDatepicker event. Skipping', event);
+            return; // Skip
+        }
+        let dateStr = null;
+        if (event.value) {
+            let date = event.value
+                .locale(this.locale) // set as time as locale time
+                .minute(0).seconds(0).millisecond(0) // Reset hour
+                .utc(true);
+            dateStr = this.dateAdapter.format(date, this.dayPattern) || null;
+        }
+        if (this.dayControl.value !== dateStr) {
+            // DEBUG
+            console.debug("[mat-date] onDatePickerChange() new value:", dateStr);
+            this.dayControl.setValue(dateStr, {
+                emitEvent: true // Will call onFormChange
+            });
+        }
     }
     openDatePickerIfMobile(event, datePicker) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -4912,6 +4933,13 @@ class MatDate {
             }
         });
     }
+    clear() {
+        this.dayControl.patchValue(null, { emitEvent: false });
+        this.formControl.setValue(null, { emitEvent: false });
+        this._onChangeCallback(null);
+        this.markAsTouched();
+        this.markAsDirty();
+    }
     /* -- private method -- */
     updatePattern(pattern) {
         pattern = pattern !== 'COMMON.DATE_PATTERN' ? pattern : 'L';
@@ -4921,36 +4949,30 @@ class MatDate {
             this.markForCheck();
         }
     }
-    onFormChange(dayValue) {
-        if (this.writing)
-            return; // Skip if call by self
-        this.writing = true;
-        // Make to remove placeholder chars
-        while (dayValue && dayValue.indexOf(this.placeholderChar) !== -1) {
-            dayValue = dayValue.replace(this.placeholderChar, '');
-        }
-        let date;
-        // Parse day string
-        date = dayValue && this.dateAdapter.parse(dayValue, this.dayPattern) || null;
-        // Reset time
-        date = date && date.utc(true).hour(0).minute(0).seconds(0).millisecond(0);
-        // update date picker
-        this._value = date && this.dateAdapter.parse(date.clone(), DATE_ISO_PATTERN);
-        // Get the model value
-        const dateStr = date && date.isValid() && this.dateAdapter.format(date, DATE_ISO_PATTERN).replace('+00:00', 'Z') || date;
-        //console.debug("[mat-date-time] Setting date: ", dateStr);
-        this.formControl.patchValue(dateStr, { emitEvent: false });
-        //this.formControl.updateValueAndValidity();
-        this.writing = false;
-        this.markForCheck();
-        this._onChangeCallback(dateStr);
-    }
     checkIfTouched() {
         if (this.dayControl.touched) {
-            this.markForCheck();
             this._onTouchedCallback();
+            this.markForCheck();
         }
     }
+    onFormChange(dayStr) {
+        if (this._writing)
+            return; // Skip if call by self
+        this._writing = true;
+        // Make to remove placeholder chars
+        while (dayStr && dayStr.indexOf(this.placeholderChar) !== -1) {
+            dayStr = dayStr.replace(this.placeholderChar, '');
+        }
+        // Parse day
+        let date = dayStr && this.dateAdapter.parse(dayStr, this.dayPattern);
+        // Move to the expected TZ (keeping local hour - e.g. midnight)
+        date = date && (this.timezone ? date.tz(this.timezone, true) : date);
+        date = date && date.startOf('day') // Reset hrou
+            .utc(); // Convert local date into utc (avoid TZ offset to be in the final string)
+        // Set model value
+        this.emitChange(date);
+        this._writing = false;
+    }
     waitKeyboardHide(waitKeyboardDelay) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.keyboard || !this.keyboard.isVisible)
@@ -4960,11 +4982,23 @@ class MatDate {
             // Wait hide occur
             yield this.keyboard.onKeyboardHide().pipe(first()).toPromise();
             // Wait an additional delay if need (depending on the OS)
-            if (this.keyboardHideDelay > 0 && waitKeyboardDelay) {
-                yield sleep(this.keyboardHideDelay);
+            if (this._keyboardHideDelay > 0 && waitKeyboardDelay) {
+                yield sleep(this._keyboardHideDelay);
             }
         });
     }
+    emitChange(value) {
+        // Get the model value
+        const dateStr = toDateISOString(value) || null;
+        if (this.formControl.value !== dateStr) {
+            // DEBUG
+            //console.debug('[matèdate-time] Emit new value: ' + dateStr);
+            // Changes comes from inside function: use the callback
+            this._onChangeCallback(dateStr);
+            // Check if need to update controls
+            this.checkIfTouched();
+        }
+    }
     updateTabIndex() {
         if (isNil(this._tabindex) || this._tabindex === -1)
             return; // skip
@@ -4976,6 +5010,14 @@ class MatDate {
             this.markForCheck();
         });
     }
+    markAsTouched(opts) {
+        this.dayControl.markAsTouched(opts);
+        this._onTouchedCallback();
+        this.markForCheck();
+    }
+    markAsDirty(opts) {
+        this.formControl.markAsDirty(opts);
+    }
     markForCheck() {
         this.cd.markForCheck();
     }
@@ -4983,7 +5025,7 @@ class MatDate {
 MatDate.decorators = [
     { type: Component, args: [{
                 selector: 'mat-date-field',
-                template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly else writable\">\n  <input matInput hidden type=\"text\" readonly=\"true\" [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix><ng-content select=\"[matPrefix]\"></ng-content></div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"dayControl\"\n           [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowdown)=\"openDatePicker($event, datePicker)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"dayControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final control -->\n    <input matInput type=\"text\"\n           [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"writeValue(null)\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <mat-error *ngIf=\"formControl.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('validDate')\" translate>ERROR.FIELD_NOT_VALID_DATE</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('dateIsAfter')\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('dateRange')\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n    <mat-error *ngIf=\"!formControl.hasError('dateRange') && formControl.hasError('dateMaxDuration')\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n    <mat-error *ngIf=\"!formControl.hasError('dateRange') && formControl.hasError('dateMinDuration')\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n    <mat-error *ngIf=\"formControl.hasError('msg')\">{{formControl.errors.msg}}</mat-error>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  [startAt]=\"startDate\"></mat-datepicker>\n\n  <ng-template #iconDesktop>\n    <mat-icon>keyboard_arrow_down</mat-icon>\n  </ng-template>\n\n  <ng-template #iconDate>\n    <mat-icon>date_range</mat-icon>\n  </ng-template>\n\n</ng-template>\n\n",
+                template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field [floatLabel]=\"floatLabel\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"dayControl\"\n           [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"checkIfTouched()\"\n           (keyup.arrowdown)=\"openDatePicker($event, datePicker)\"\n           (keyup.escape)=\"preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           *ngIf=\"mobile\"\n           [formControl]=\"dayControl\"\n           (click)=\"openDatePickerIfMobile($event, datePicker)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n\n    <!-- Hide the final input -->\n    <input matInput type=\"text\" [formControl]=\"formControl\"\n           hidden\n           [matDatepicker]=\"datePicker\"\n           (dateChange)=\"onDatePickerChange($event)\">\n\n    <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\">\n      <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n    </button>\n    <button matSuffix mat-icon-button tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear()\"\n            [hidden]=\"formControl.disabled || !formControl.value\">\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <!-- errors -->\n    <mat-error *ngIf=\"formControl.touched && formControl.errors|mapKeys|arrayFirst; let errorKey\">\n      <ng-container [ngSwitch]=\"errorKey\">\n        <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n        <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n        <span *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</span>\n        <span *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</span>\n        <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        <span *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</span>\n      </ng-container>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n\n  <mat-datepicker #datePicker\n                  [touchUi]=\"mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  [startAt]=\"startDate\"></mat-datepicker>\n\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n",
                 providers: [
                     DEFAULT_VALUE_ACCESSOR$5,
                 ],
@@ -5001,19 +5043,20 @@ MatDate.ctorParameters = () => [
     { type: FormGroupDirective, decorators: [{ type: Optional }] }
 ];
 MatDate.propDecorators = {
-    disabled: [{ type: Input }],
     formControl: [{ type: Input }],
     formControlName: [{ type: Input }],
     placeholder: [{ type: Input }],
     floatLabel: [{ type: Input }],
-    readonly: [{ type: Input }],
     required: [{ type: Input }],
+    mobile: [{ type: Input }],
     compact: [{ type: Input }],
     placeholderChar: [{ type: Input }],
     autofocus: [{ type: Input }],
-    tabindex: [{ type: Input }],
     startDate: [{ type: Input }],
     clearable: [{ type: Input }],
+    timezone: [{ type: Input }],
+    readonly: [{ type: Input }],
+    tabindex: [{ type: Input }],
     datePicker: [{ type: ViewChild, args: ['datePicker',] }],
     matInputs: [{ type: ViewChildren, args: ['matInput',] }]
 };
@@ -5026,8 +5069,7 @@ const DEFAULT_VALUE_ACCESSOR$4 = {
 const DAY_MASK$1 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
 const HOUR_REGEXP = /^[012][0-9][:][012345][0-9]$/;
 const HOUR_MASK$1 = [/[012]/, /\d/, ':', /[012345]/, /\d/];
-const noop$5 = () => {
-};
+const noop$5 = () => { };
 const ɵ0$8 = noop$5;
 class MatDateTime {
     constructor(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
@@ -5041,8 +5083,8 @@ class MatDateTime {
         this._onChangeCallback = noop$5;
         this._onTouchedCallback = noop$5;
         this._subscription = new Subscription();
-        this.writing = true;
-        this.disabling = false;
+        this._writing = true;
+        this._disabling = false;
         this._readonly = false;
         this.dayMask = DAY_MASK$1;
         this.hourMask = HOUR_MASK$1;
@@ -5075,7 +5117,7 @@ class MatDateTime {
     }
     ngOnInit() {
         this.mobile = isNil(this.mobile) ? this.platform.is('mobile') : this.mobile;
-        this.keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
+        this._keyboardHideDelay = this.mobile && KEYBOARD_HIDE_DELAY_MS || 0;
         this.formControl = this.formControl || this.formControlName && this.formGroupDir && this.formGroupDir.form.get(this.formControlName);
         if (!this.formControl)
             throw new Error('Missing mandatory attribute \'formControl\' or \'formControlName\' in <mat-date-time-field>.');
@@ -5102,19 +5144,19 @@ class MatDateTime {
             .subscribe((event) => this.onFormChange(event)));
         // Listen status changes (when done outside the component  - e.g. when setErrors() is calling on the formControl)
         this._subscription.add(this.formControl.statusChanges
-            .pipe(filter((_) => !this.readonly && !this.writing && !this.disabling) // Skip
+            .pipe(filter((_) => !this.readonly && !this._writing && !this._disabling) // Skip
         )
             .subscribe(() => this.markForCheck()));
         this.updateTabIndex();
-        this.writing = false;
+        this._writing = false;
     }
     ngOnDestroy() {
         this._subscription.unsubscribe();
     }
     writeValue(valueStr) {
-        if (this.writing)
+        if (this._writing)
             return; // Skip
-        this.writing = true;
+        this._writing = true;
         // DEBUG
         // console.debug("[mat-date-time] writeValue() with:", valueStr);
         const value = fromDateISOString(valueStr);
@@ -5123,10 +5165,10 @@ class MatDateTime {
             this.timeFormControl.patchValue(null, { emitEvent: false });
         }
         else {
-            // Parse day
+            // Format day
             const day = value.clone().startOf('day');
             const dayStr = this.dateAdapter.format(day, this.dayPattern);
-            // Parse time
+            // Format time
             // - Format hh
             let hour = value.hour();
             hour = hour < 10 ? ('0' + hour) : hour;
@@ -5138,46 +5180,9 @@ class MatDateTime {
             this.dateFormControl.patchValue(dayStr, { emitEvent: false });
             this.timeFormControl.patchValue(timeStr, { emitEvent: false });
         }
-        this.writing = false;
+        this._writing = false;
         this.markForCheck();
     }
-    onFormChange(event) {
-        if (this.writing)
-            return; // Skip if call by self
-        this.writing = true;
-        let dayStr = this.dateFormControl.value;
-        const time = this.timeFormControl.value;
-        // DEBUG
-        //console.debug(`[mat-date-time] onFormChange() from event: ${event} - controls values: `, [dayStr, time]);
-        const incompleteValue = isNilOrBlank(time) !== isNilOrBlank(dayStr);
-        if (incompleteValue || this.dateFormControl.invalid || this.timeFormControl.invalid) {
-            this.formControl.markAsPending({ onlySelf: true });
-            this.formControl.setErrors(Object.assign(Object.assign(Object.assign({ validDate: incompleteValue }, this.formControl.errors), this.dateFormControl.errors), this.timeFormControl.errors));
-            this.formControl.markAsDirty();
-            // Reset the value
-            //this.emitChange(null);
-            this.writing = false;
-            return;
-        }
-        // Make to remove placeholder chars
-        while (dayStr && dayStr.indexOf(this.placeholderChar) !== -1) {
-            dayStr = dayStr.replace(this.placeholderChar, '');
-        }
-        // Parse day
-        const day = dayStr && this.dateAdapter.parse(dayStr, this.dayPattern) || null;
-        // Parse time
-        const hourParts = (time || '').split(':');
-        const hour = parseInt(hourParts[0] || 0);
-        const minutes = parseInt(hourParts[1] || 0);
-        const dateTime = day && day
-            .locale(this.locale) // set as time as locale time
-            .hour(hour).minute(minutes) // Set local hour
-            .seconds(0).millisecond(0) // Reset seconds/millisecond
-            .utc(); // Convert to UTC (avoid TZ offset in final string)
-        // Set model value
-        this.emitChange(dateTime);
-        this.writing = false;
-    }
     registerOnChange(fn) {
         this._onChangeCallback = fn;
     }
@@ -5185,9 +5190,9 @@ class MatDateTime {
         this._onTouchedCallback = fn;
     }
     setDisabledState(isDisabled) {
-        if (this.disabling)
+        if (this._disabling)
             return; // Skip
-        this.disabling = true;
+        this._disabling = true;
         if (isDisabled) {
             this.dateFormControl.disable({ emitEvent: false });
             this.timeFormControl.disable({ emitEvent: false });
@@ -5196,7 +5201,7 @@ class MatDateTime {
             this.dateFormControl.enable({ emitEvent: false });
             this.timeFormControl.enable({ emitEvent: false });
         }
-        this.disabling = false;
+        this._disabling = false;
         this.markForCheck();
     }
     onDatePickerChange(event) {
@@ -5302,6 +5307,43 @@ class MatDateTime {
             this.markForCheck();
         }
     }
+    onFormChange(event) {
+        if (this._writing)
+            return; // Skip if call by self
+        this._writing = true;
+        let dayStr = this.dateFormControl.value;
+        const time = this.timeFormControl.value;
+        // DEBUG
+        //console.debug(`[mat-date-time] onFormChange() from event: ${event} - controls values: `, [dayStr, time]);
+        const incompleteValue = isNilOrBlank(time) !== isNilOrBlank(dayStr);
+        if (incompleteValue || this.dateFormControl.invalid || this.timeFormControl.invalid) {
+            this.formControl.markAsPending({ onlySelf: true });
+            this.formControl.setErrors(Object.assign(Object.assign(Object.assign({ validDate: incompleteValue }, this.formControl.errors), this.dateFormControl.errors), this.timeFormControl.errors));
+            this.formControl.markAsDirty();
+            // Reset the value
+            //this.emitChange(null);
+            this._writing = false;
+            return;
+        }
+        // Make to remove placeholder chars
+        while (dayStr && dayStr.indexOf(this.placeholderChar) !== -1) {
+            dayStr = dayStr.replace(this.placeholderChar, '');
+        }
+        // Parse day
+        const day = dayStr && this.dateAdapter.parse(dayStr, this.dayPattern) || null;
+        // Parse time
+        const hourParts = (time || '').split(':');
+        const hour = parseInt(hourParts[0] || 0);
+        const minutes = parseInt(hourParts[1] || 0);
+        const dateTime = day && day
+            .locale(this.locale) // set as time as locale time
+            .hour(hour).minute(minutes) // Set local hour
+            .seconds(0).millisecond(0) // Reset seconds/millisecond
+            .utc(); // Convert to UTC (avoid TZ offset in final string)
+        // Set model value
+        this.emitChange(dateTime);
+        this._writing = false;
+    }
     waitKeyboardHide(waitKeyboardDelay) {
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.keyboard || !this.keyboard.isVisible)
@@ -5311,8 +5353,8 @@ class MatDateTime {
             // Wait hide occur
             yield this.keyboard.onKeyboardHide().pipe(first()).toPromise();
             // Wait an additional delay if need (depending on the OS)
-            if (this.keyboardHideDelay > 0 && waitKeyboardDelay) {
-                yield sleep(this.keyboardHideDelay);
+            if (this._keyboardHideDelay > 0 && waitKeyboardDelay) {
+                yield sleep(this._keyboardHideDelay);
             }
         });
     }
@@ -5339,9 +5381,9 @@ class MatDateTime {
             this.markForCheck();
         });
     }
-    markAsTouched() {
-        this.dateFormControl.markAsTouched();
-        this.timeFormControl.markAsTouched();
+    markAsTouched(opts) {
+        this.dateFormControl.markAsTouched(opts);
+        this.timeFormControl.markAsTouched(opts);
         this._onTouchedCallback();
         this.markForCheck();
     }
@@ -5355,7 +5397,7 @@ class MatDateTime {
 MatDateTime.decorators = [
     { type: Component, args: [{
                 selector: 'mat-date-time-field',
-                template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n\n          <mat-label>{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"dateFormControl\"\n                 [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n                 [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n                 (blur)=\"checkIfTouched()\"\n                 (keyup.arrowdown)=\"openDatePicker($event, datePicker)\"\n                 (keyup.escape)=\"preventEvent($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 [appAutofocus]=\"autofocus\">\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"dateFormControl\"\n                 (click)=\"openDatePickerIfMobile($event, datePicker)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 readonly>\n          <input matInput type=\"text\" [formControl]=\"formControl\"\n                 hidden\n                 [matDatepicker]=\"datePicker\"\n                 (dateChange)=\"onDatePickerChange($event)\">\n\n          <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix #datePickerButton2 (click)=\"openDatePicker($event, datePicker)\" [disabled]=\"formControl.disabled\">\n            <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n          </button>\n          <button matSuffix mat-icon-button tabindex=\"-1\"\n                  type=\"button\"\n                  *ngIf=\"clearable\"\n                  (click)=\"clear()\"\n                  [hidden]=\"formControl.disabled || !formControl.value\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\"\n                        [disabled]=\"formControl.disabled\"\n                        [startAt]=\"startDate\"></mat-datepicker>\n        <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\" >\n          <!-- errors -->\n          <ng-container [ngSwitch]=\"formControl.touched && formControl.errors|mapKeys|arrayFirst\">\n            <mat-error *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            <mat-error *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</mat-error>\n            <mat-error *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            <mat-error *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            <mat-error *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            <mat-error *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</mat-error>\n          </ng-container>\n          <ng-content select=\"mat-error\"></ng-content>\n\n          <!-- mat hint -->\n          <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n            <div class=\"mat-form-field-hint-spacer\"></div>\n            <ng-content select=\"mat-hint\"></ng-content>\n          </div>\n        </div>\n\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && (timeFormControl.invalid || formControl.invalid)\">\n          <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n          <input matInput #matInput type=\"text\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"timeFormControl\"\n                 autocomplete=\"off\"\n                 min=\"0\" max=\"23\"\n                 [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n                 [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n                 [required]=\"required\"\n                 (keyup.arrowdown)=\"openTimePicker($event)\"\n                 (keyup.escape)=\"preventEvent($event)\"\n                 (blur)=\"checkIfTouched()\"\n                 [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n          <input matInput #matInput type=\"text\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"timeFormControl\"\n                 (click)=\"openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <input matInput type=\"text\"\n                 [formControl]=\"timeFormControl\"\n                 hidden\n                 [ngxTimepicker]=\"timePicker\"\n                 [format]=\"24\">\n\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && !mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePicker($event)\" >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePickerIfMobile($event)\">\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n                                   (timeSet)=\"onTimePickerChange($event)\"\n                                   [ESC]=\"!mobile\"\n                                   [defaultTime]=\"'00:00'\"\n                                   [cancelBtnTmpl]=\"timePickerCancelButton\"\n                                   [confirmBtnTmpl]=\"timePickerOkButton\"\n                                   [preventOverlayClick]=\"mobile\"\n                                   [enableKeyboardInput]=\"false\"\n                                   [disableAnimation]=\"true\">\n            <!-- cancel button -->\n            <ng-template #timePickerCancelButton>\n              <ion-button fill=\"clear\" color=\"dark\">\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n            </ng-template>\n\n            <!-- confirm button -->\n            <ng-template #timePickerOkButton>\n              <ion-button fill=\"solid\" color=\"tertiary\">\n                <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n              </ion-button>\n            </ng-template>\n\n          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n",
+                template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                class=\"mat-form-field-disabled\">\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\"\n         readonly\n         [placeholder]=\"placeholder\"\n         [formControl]=\"formControl\">\n  <ion-text>{{formControl.value|dateFormat: {pattern: displayPattern} }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable >\n  <ion-grid class=\"ion-no-padding\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && formControl.invalid\">\n\n          <mat-label>{{placeholder}}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"dateFormControl\"\n                 [textMask]=\"{mask: dayMask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n                 [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n                 (blur)=\"checkIfTouched()\"\n                 (keyup.arrowdown)=\"openDatePicker($event, datePicker)\"\n                 (keyup.escape)=\"preventEvent($event)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 [appAutofocus]=\"autofocus\">\n          <input matInput #matInput autocomplete=\"off\" type=\"text\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"dateFormControl\"\n                 (click)=\"openDatePickerIfMobile($event, datePicker)\"\n                 [required]=\"required\"\n                 [tabindex]=\"tabindex\"\n                 readonly>\n\n          <!-- Hide the final input -->\n          <input matInput type=\"text\" [formControl]=\"formControl\"\n                 hidden\n                 [matDatepicker]=\"datePicker\"\n                 (dateChange)=\"onDatePickerChange($event)\">\n\n          <button type=\"button\" mat-icon-button tabindex=\"-1\" matSuffix\n                  (click)=\"openDatePicker($event, datePicker)\"\n                  [disabled]=\"formControl.disabled\">\n            <div *ngIf=\"mobile; then iconDate; else iconDesktop\"></div>\n          </button>\n          <button matSuffix mat-icon-button tabindex=\"-1\"\n                  type=\"button\"\n                  *ngIf=\"clearable\"\n                  (click)=\"clear()\"\n                  [hidden]=\"formControl.disabled || !formControl.value\">\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\"\n                        [disabled]=\"formControl.disabled\"\n                        [startAt]=\"startDate\"></mat-datepicker>\n        <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\" >\n          <!-- errors -->\n          <ng-container [ngSwitch]=\"formControl.touched && formControl.errors|mapKeys|arrayFirst\">\n            <mat-error *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            <mat-error *ngSwitchCase=\"'dateIsAfter'\">{{'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}</mat-error>\n            <mat-error *ngSwitchCase=\"'dateIsBefore'\">{{'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}</mat-error>\n            <mat-error *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            <mat-error *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            <mat-error *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            <mat-error *ngSwitchCase=\"'msg'\">{{(formControl.errors.msg?.key || formControl.errors.msg) | translate: formControl.errors.msg?.params}}</mat-error>\n          </ng-container>\n          <ng-content select=\"mat-error\"></ng-content>\n\n          <!-- mat hint -->\n          <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n            <div class=\"mat-form-field-hint-spacer\"></div>\n            <ng-content select=\"mat-hint\"></ng-content>\n          </div>\n        </div>\n\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\n        <mat-form-field [floatLabel]=\"floatLabel\"\n                        [class.mat-form-field-invalid]=\"formControl.touched && (timeFormControl.invalid || formControl.invalid)\">\n          <mat-label *ngIf=\"placeholder && floatLabel != 'never'\" translate>COMMON.TIME</mat-label>\n          <input matInput #matInput type=\"text\"\n                 *ngIf=\"!mobile\"\n                 [formControl]=\"timeFormControl\"\n                 autocomplete=\"off\"\n                 min=\"0\" max=\"23\"\n                 [textMask]=\"{mask: hourMask, keepCharPositions: true, placeholderChar: placeholderChar, guide: true}\"\n                 [placeholder]=\"'COMMON.TIME_PLACEHOLDER'|translate\"\n                 [required]=\"required\"\n                 (keyup.arrowdown)=\"openTimePicker($event)\"\n                 (keyup.escape)=\"preventEvent($event)\"\n                 (blur)=\"checkIfTouched()\"\n                 [tabindex]=\"tabindex !== undefined ? tabindex+1 : undefined\">\n\n          <input matInput #matInput type=\"text\"\n                 *ngIf=\"mobile\"\n                 [formControl]=\"timeFormControl\"\n                 (click)=\"openTimePickerIfMobile($event)\"\n                 readonly>\n\n          <input matInput type=\"text\"\n                 [formControl]=\"timeFormControl\"\n                 hidden\n                 [ngxTimepicker]=\"timePicker\"\n                 [format]=\"24\">\n\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && !mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePicker($event)\" >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button matSuffix type=\"button\" mat-icon-button\n                  tabindex=\"-1\"\n                  *ngIf=\"!compact && mobile\"\n                  [disabled]=\"formControl.disabled\"\n                  (click)=\"openTimePickerIfMobile($event)\">\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker #timePicker [@.disabled]=\"true\"\n                                   (timeSet)=\"onTimePickerChange($event)\"\n                                   [ESC]=\"!mobile\"\n                                   [defaultTime]=\"'00:00'\"\n                                   [cancelBtnTmpl]=\"timePickerCancelButton\"\n                                   [confirmBtnTmpl]=\"timePickerOkButton\"\n                                   [preventOverlayClick]=\"mobile\"\n                                   [enableKeyboardInput]=\"false\"\n                                   [disableAnimation]=\"true\">\n            <!-- cancel button -->\n            <ng-template #timePickerCancelButton>\n              <ion-button fill=\"clear\" color=\"dark\">\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n            </ng-template>\n\n            <!-- confirm button -->\n            <ng-template #timePickerOkButton>\n              <ion-button fill=\"solid\" color=\"tertiary\">\n                <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n              </ion-button>\n            </ng-template>\n\n          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n",
                 providers: [
                     DEFAULT_VALUE_ACCESSOR$4,
                 ],
@@ -10251,7 +10293,7 @@ SelectPeerModal.propDecorators = {
     onRefresh: [{ type: Input }]
 };
 
-const moment$3 = momentImported;
+const moment$4 = momentImported;
 const SETTINGS_STORAGE_KEY = 'settings';
 const SETTINGS_TRANSIENT_PROPERTIES = ['mobile', 'touchUi' /*deprecated*/];
 // fixme: this constant points to static environment
@@ -10494,11 +10536,11 @@ class LocalSettingsService extends StartableService {
         if (!feature) {
             feature = {
                 name: featureName.toLowerCase(),
-                lastSyncDate: moment$3().toISOString()
+                lastSyncDate: moment$4().toISOString()
             };
         }
         else {
-            feature.lastSyncDate = moment$3().toISOString();
+            feature.lastSyncDate = moment$4().toISOString();
         }
         this.saveOfflineFeature(feature);
     }
@@ -10659,7 +10701,7 @@ class LocalSettingsService extends StartableService {
         if (!page || !page.title || !page.path)
             throw Error('Missing required argument \'page\', \'page.path\' or \'page.title\'');
         // Set time
-        page.time = page.time || moment$3();
+        page.time = page.time || moment$4();
         // Clean the title (remove <small> tags)
         if (!opts || opts.removeTitleSmallTag !== false) {
             const tagIndex = page.title.indexOf('</small>');
@@ -15486,7 +15528,7 @@ ConfigService.ctorParameters = () => [
     { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [APP_CONFIG_OPTIONS,] }] }
 ];
 
-const moment$2 = momentImported;
+const moment$3 = momentImported;
 class PlatformService extends StartableService {
     constructor(platform, cdkPlatform, toastController, translate, dateAdapter, entitiesStorage, settings, networkService, accountService, configService, cache, storage, audioProvider, environment, statusBar, keyboard, splashScreen, browser, downloader) {
         super(platform);
@@ -15710,16 +15752,16 @@ class PlatformService extends StartableService {
                 }
                 // config moment lib
                 try {
-                    moment$2.locale(event.lang);
+                    moment$3.locale(event.lang);
                     console.debug('[platform] Use locale {' + event.lang + '}');
                 }
                 // If error, fallback to en
                 catch (err) {
-                    moment$2.locale('en');
+                    moment$3.locale('en');
                     console.warn('[platform] Unknown local for moment lib. Using default [en]');
                 }
                 // Config date adapter
-                this.dateAdapter.setLocale(moment$2.locale());
+                this.dateAdapter.setLocale(moment$3.locale());
             }
         });
         this.settings.onChange.subscribe(data => {
@@ -25806,13 +25848,13 @@ LatLongTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
-const moment$1 = momentImported;
+const moment$2 = momentImported;
 class SwipeTestPage {
     constructor(formBuilder, dateFormatPipe) {
         this.formBuilder = formBuilder;
         this.dateFormatPipe = dateFormatPipe;
         this.$dates = new BehaviorSubject(undefined);
-        this._today = moment$1().startOf('day');
+        this._today = moment$2().startOf('day');
         this.form = formBuilder.group({
             empty: [null, Validators.required],
             date: [null, Validators.compose([Validators.required, SharedValidators.validDate])],
@@ -25825,7 +25867,7 @@ class SwipeTestPage {
     ngOnInit() {
         const dates = [];
         for (let d = 0; d < 7; d++) {
-            dates[d] = moment$1(this._today).add(d - 3, 'day');
+            dates[d] = moment$2(this._today).add(d - 3, 'day');
         }
         this.$dates.next(dates);
         this.loadData();
@@ -25866,7 +25908,7 @@ SwipeTestPage.ctorParameters = () => [
     { type: DateFormatPipe }
 ];
 
-const moment = momentImported;
+const moment$1 = momentImported;
 class DateTimeTestPage {
     constructor(platform, formBuilder, cd) {
         this.platform = platform;
@@ -25898,7 +25940,7 @@ class DateTimeTestPage {
     // Load the form with data
     loadData() {
         return __awaiter(this, void 0, void 0, function* () {
-            const now = moment();
+            const now = moment$1();
             const data = {
                 empty: toDateISOString(now.clone().add(2, 'hours')),
                 enable: toDateISOString(now),
@@ -26142,9 +26184,110 @@ NumpadTestPage.ctorParameters = () => [
     { type: FormBuilder }
 ];
 
+const moment = momentImported;
+class DateTestPage {
+    constructor(platform, formBuilder, cd) {
+        this.platform = platform;
+        this.formBuilder = formBuilder;
+        this.cd = cd;
+        this.showLogPanel = true;
+        this.logContent = '';
+        this.memoryHide = false;
+        this.memoryMobile = true;
+        this.timezone = 'Indian/Mahe';
+        this.stringify = JSON.stringify;
+        this.form = formBuilder.group({
+            empty: [null, Validators.required],
+            enable: [null, Validators.required],
+            disable: [null, Validators.required],
+            readonly: [null],
+            timezone: [null]
+        }, {
+            validators: SharedFormGroupValidators.dateRange('empty', 'enable')
+        });
+        const disableControl = this.form.get('disable');
+        disableControl.disable();
+        // Copy the 'enable' value, into the disable control
+        this.form.get('enable').valueChanges.subscribe(value => disableControl.setValue(value));
+        const mobile = platform.is('mobile');
+        this.showLogPanel = this.showLogPanel || mobile;
+    }
+    ngOnInit() {
+        setTimeout(() => this.loadData(), 250);
+    }
+    // Load the form with data
+    loadData() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const now = moment();
+            const nowAtMahe = now.clone().tz(this.timezone).startOf('day');
+            const data = {
+                empty: toDateISOString(now.clone().add(2, 'hours')),
+                enable: toDateISOString(now),
+                disable: now.clone(),
+                readonly: now.clone(),
+                timezone: nowAtMahe
+            };
+            this.form.setValue(data);
+            this.log('[test-page] Data loaded: ' + JSON.stringify(data));
+            this.form.get('empty').valueChanges
+                .pipe(debounceTime(300))
+                .subscribe(value => this.log('[test-page] Value n°1: ' + JSON.stringify(value)));
+            this.form.get('enable').valueChanges
+                .pipe(debounceTime(300))
+                .subscribe(value => this.log('[test-page] Value n°2: ' + JSON.stringify(value)));
+            this.form.get('timezone').valueChanges
+                .pipe(debounceTime(300))
+                .subscribe(value => this.log('[test-page] Value with timezone: ' + JSON.stringify(value)));
+        });
+    }
+    doSubmit(event) {
+        this.form.markAllAsTouched();
+        this.log('[test-page] Form content: ' + JSON.stringify(this.form.value));
+        this.log('[test-page] Form status: ' + this.form.status);
+        if (this.form.invalid) {
+            this.log('[test-page] Form errors: ' + JSON.stringify(this.form.errors));
+            // DEBUG
+            AppFormUtils.logFormErrors(this.form);
+        }
+    }
+    log(message) {
+        console.debug(message);
+        if (this.showLogPanel) {
+            this.logContent += message + '<br/>';
+            this.cd.markForCheck();
+        }
+    }
+    clearLogPanel() {
+        this.logContent = '';
+        this.cd.markForCheck();
+    }
+    startMemoryTimer() {
+        this.memoryTimer = setInterval(() => {
+            this.memoryHide = !this.memoryHide;
+        }, 50);
+    }
+    stopMemoryTimer() {
+        clearInterval(this.memoryTimer);
+        this.memoryTimer = null;
+        this.memoryHide = false;
+    }
+}
+DateTestPage.decorators = [
+    { type: Component, args: [{
+                selector: 'app-data-test',
+                template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\">\n\n  <form class=\"form-container\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n\n    <ion-grid>\n\n      <!-- debugging memory leak -->\n      <ion-row><ion-col><ion-text><h4>Debug memory leak</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col size=\"2\">\n          <ion-button *ngIf=\"!memoryTimer\" (click)=\"startMemoryTimer()\">Start timer</ion-button>\n          <ion-button *ngIf=\"memoryTimer\" (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n        </ion-col>\n        <ion-col size=\"2\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [value]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-field formControlName=\"empty\"\n                               *ngIf=\"!memoryHide\"\n                               placeholder=\"Date/Time\"\n                               [required]=\"true\"\n                               [mobile]=\"memoryMobile\"\n                               [clearable]=\"true\">\n            <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n          </mat-date-field>\n        </ion-col>\n      </ion-row>\n\n      <!-- Mobile mode -->\n      <ion-row><ion-col><ion-text><h4>Mobile mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n      <!-- debug console -->\n      <ion-row>\n        <!-- buttons -->\n        <ion-col size=\"2\">\n          <!-- submit form -->\n          <ion-button (click)=\"doSubmit($event)\"\n                      fill=\"outline\">\n            <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n\n          <!-- clear log  -->\n          <ion-button (click)=\"clearLogPanel()\"\n                      fill=\"outline\">\n            <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n          </ion-button>\n        </ion-col>\n        <ion-col size=\"10\" *ngIf=\"showLogPanel\">\n          <ion-text color=\"primary\">Log:<br/></ion-text>\n          <div class=\"ion-padding-start\">\n            <ion-text color=\"medium\">\n              <small [innerHTML]=\"logContent\"></small>\n            </ion-text>\n          </div>\n        </ion-col>\n      </ion-row>\n\n      <!-- Desktop mode -->\n      <ion-row><ion-col><ion-text><h4>Desktop mode</h4></ion-text></ion-col></ion-row>\n      <ion-row>\n        <ion-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.empty.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Enable  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.enable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"enable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Disable -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Disable\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.disable.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"disable\"\n                                   placeholder=\"Date/Time\"\n                                   [required]=\"true\"\n                                   [mobile]=\"false\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- TimeZone  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  TimeZone\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>timezone=\"{{timezone}}\" value=\"{{stringify(form.controls.timezone.value)}}\"</pre></small>\n                  <pre>Should display using the browser TZ,<br/>but serialize/deserialize for the given TZ</pre>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field #readonlyField formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"false\"\n                              [clearable]=\"true\"\n                              timezone=\"Indian/Mahe\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Readonly  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Readonly toggle\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.readonly.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-checkbox (change)=\"readonlyField.readonly=$event.checked\" [checked]=\"readonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #readonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date/Time\"\n                                   [readonly]=\"true\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n"
+            },] }
+];
+DateTestPage.ctorParameters = () => [
+    { type: Platform },
+    { type: FormBuilder },
+    { type: ChangeDetectorRef }
+];
+
 const SHARED_MATERIAL_TESTING_PAGES = [
     { label: 'Shared Material components', divider: true },
     { label: 'Date/Time field', page: '/testing/shared/datetime' },
+    { label: 'Date field', page: '/testing/shared/date' },
     { label: 'Autocomplete field', page: '/testing/shared/autocomplete' },
     { label: 'Lat/Long field', page: '/testing/shared/latlong' },
     { label: 'Numeric pad component', page: '/testing/shared/numpad' },
@@ -26169,6 +26312,11 @@ const routes$4 = [
         pathMatch: 'full',
         component: DateTimeTestPage
     },
+    {
+        path: 'date',
+        pathMatch: 'full',
+        component: DateTestPage
+    },
     {
         path: 'latlong',
         pathMatch: 'full',
@@ -26209,6 +26357,7 @@ MaterialTestingModule.decorators = [
                 ],
                 declarations: [
                     DateTimeTestPage,
+                    DateTestPage,
                     AutocompleteTestPage,
                     LatLongTestPage,
                     NumpadTestPage,
@@ -26220,6 +26369,7 @@ MaterialTestingModule.decorators = [
                     SharedMaterialModule,
                     RouterModule,
                     DateTimeTestPage,
+                    DateTestPage,
                     AutocompleteTestPage,
                     LatLongTestPage,
                     NumpadTestPage,
@@ -26814,5 +26964,5 @@ CoreTestingModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetPipe, Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBadgeIconDirective, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuService, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedAsyncValidators, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBadgeIconModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedValidators, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UserEvent, UserEventFilter, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isControlHasInput, isCordova, isDesktop, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindow, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForTrue, waitIdle, waitWhilePending, ɵ0$b as ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, AppIconComponent as ɵi, NumpadTestPage as ɵj, MatBadgeIconTestPage as ɵk, ToastTestingModule as ɵl, ToastTestingPage as ɵm };
+export { APP_ABOUT_DEVELOPERS, APP_ABOUT_PARTNERS, APP_CONFIG_OPTIONS, APP_FORM_ERROR_I18N_KEYS, APP_GRAPHQL_TYPE_POLICIES, APP_HOME_BUTTONS, APP_LOCALES, APP_LOCAL_SETTINGS, APP_LOCAL_SETTINGS_OPTIONS, APP_LOCAL_STORAGE_TYPE_POLICIES, APP_MENU_ITEMS, APP_TESTING_PAGES, AboutModal, Account, AccountPage, AccountService, AccountToStringPipe, ActionsColumnComponent, AdminModule, AdminRoutingModule, Alerts, AnimationState, AppEditor, AppEditorOptions, AppEntityEditor, AppForm, AppFormField, AppFormProvider, AppFormUtils, AppGestureConfig, AppGraphQLModule, AppHelpModal, AppInMemoryTable, AppInstallUpgradeCard, AppListForm, AppLoadingSpinner, AppMenuModule, AppNullForm, AppPropertiesForm, AppTabEditor, AppTabEditorOptions, AppTable, AppTableDataSourceOptions, AppTableUtils, AppValidatorService, AppendToInputDirective, ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayLengthPipe, ArrayPluckPipe, AudioProvider, AuthForm, AuthGuardService, AuthModal, AutocompleteTestPage, AutofocusDirective, Base58, BaseEntityService, BaseGraphqlService, BaseGraphqlServiceOptions, BaseReferential, Beans, CORE_CONFIG_OPTIONS, CORE_TESTING_PAGES, CellValueChangeListener, ChipsTestPage, Color, ColorScale, ComponentDirtyGuard, ConfigService, Configuration, CoreModule, CoreTestingModule, CryptoService, DATE_ISO_PATTERN, DATE_UNIX_MS_TIMESTAMP, DATE_UNIX_TIMESTAMP, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLACEHOLDER_CHAR, DEFAULT_REQUIRED_COLUMNS, DateDiffDurationPipe, DateFormatPipe, DateFromNowPipe, DateTimeTestPage, DateUtils, Department, DepartmentToStringPipe, DragAndDropDirective, DurationPipe, ENTITIES_STORAGE_KEY_PREFIX, ENVIRONMENT, EmptyArrayPipe, EntitiesService, EntitiesStorage, EntitiesTableDataSource, Entity, EntityClass, EntityClasses, EntityFilter, EntityFilterUtils, EntityMetadataComponent, EntityStore, EntityUtils, Environment, ErrorCodes, EvenPipe, FileResponse, FileService, FileSizePipe, FilesUtils, FormArrayHelper, FormButtonsBarComponent, FormButtonsBarToken, FormErrorTranslatePipe, FormErrorTranslator, FormFieldValuesHolder, FormGetArrayPipe, FormGetControlPipe, FormGetPipe, Fragments, GraphqlService, HAMMER_PRESS_TIME, HAMMER_TAP_TIME, HighlightPipe, HomePage, Hotkeys, HotkeysDialogComponent, InMemoryEntitiesService, IsLoginAccountPipe, IsNilOrBlankPipe, IsNotNilOrBlankPipe, IsNotOnFieldModePipe, IsOnFieldModePipe, JobUtils, KEYBOARD_HIDE_DELAY_MS, LAT_LONG_DEFAULT_MAX_DECIMALS, LAT_LONG_PATTERNS, LatLongFormatPipe, LatLongTestPage, LatitudeFormatPipe, LocalSettingsService, LongitudeFormatPipe, MINIFY_ENTITY_FOR_LOCAL_STORAGE, MINIFY_ENTITY_FOR_POD, MapGetPipe, MapKeysPipe, MapValuesPipe, MatAutocompleteConfigHolder, MatAutocompleteField, MatBadgeIconDirective, MatBooleanField, MatChipsField, MatDate, MatDateShort, MatDateTime, MatDuration, MatLatLongField, MatNumpadComponent, MatNumpadContainerComponent, MatNumpadContent, MatPaginatorI18n, MatStepperI18n, MatSwipeField, MaterialTestingModule, MathAbsPipe, MenuComponent, MenuItems, MenuService, ModalToolbarComponent, NetworkService, NgInitDirective, NgVarDirective, NotEmptyArrayPipe, NumberFormatPipe, NumpadDirective, OddPipe, PRIORITIZED_AUTHORITIES, PUBKEY_REGEXP, Peer, Person, PersonFilter, PersonFragments, PersonService, PersonToStringPipe, PersonUtils, PersonValidatorService, PlatformService, ProgressBarService, ProgressInterceptor, PropertyGetPipe, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS, Referential, ReferentialFilter, ReferentialRef, ReferentialUtils, ReferentialValidatorService, RegisterConfirmPage, SETTINGS_DISPLAY_COLUMNS, SETTINGS_FILTER, SETTINGS_PAGE_SIZE, SETTINGS_SORTED_COLUMN, SETTINGS_STORAGE_KEY, SETTINGS_TRANSIENT_PROPERTIES, SHARED_MATERIAL_TESTING_PAGES, SHARED_TESTING_PAGES, SPACE_PLACEHOLDER_CHAR, SelectPeerModal, SettingsPage, SharedAsyncValidators, SharedDirectivesModule, SharedFormArrayValidators, SharedFormGroupValidators, SharedHotkeysModule, SharedMatAutocompleteModule, SharedMatBadgeIconModule, SharedMatBooleanModule, SharedMatChipsModule, SharedMatDateTimeModule, SharedMatDurationModule, SharedMatLatLongModule, SharedMatNumpadModule, SharedMatSwipeModule, SharedMaterialModule, SharedModule, SharedPipesModule, SharedRoutingModule, SharedTestingModule, SharedTestsPage, SharedValidators, SocialModule, Software, StartableService, StatusById, StatusIds, StatusList, StrIncludesPipe, StrLengthPipe, SwipeTestPage, TableSelectColumnsComponent, TableTestPage, TableTestingModule, TextForm, TextPopover, TextPopoverTestingModule, TextPopoverTestingPage, ToStringPipe, Toasts, ToolbarComponent, ToolbarToken, TranslatablePipe, TranslateContextPipe, TranslateContextService, UploadFile, UploadFileComponent, UploadFilePopover, UploadFileTestingModule, UploadFileTestingPage, UserEvent, UserEventFilter, UserEventService, UserEventTypes, UserEventsTable, UserSettings, UsersPage, accountToString, adaptValueToControl, addValueInArray, arrayDistinct, arrayGroupBy, arraySize, asInputElement, canHaveFocus, capitalizeFirstLetter, chainPromises, changeCaseToUnderscore, clearValueInArray, copyEntity2Form, createPromiseEvent, createPromiseEventEmitter, departmentToString, departmentsToString, disableControls, emitPromiseEvent, entityToString, equals, equalsOrNil, fadeInAnimation, fadeInOutAnimation, filterFalse, filterNotNil, filterNumberInput, filterTrue, firstArrayValue, firstFalse, firstFalsePromise, firstNotNil, firstNotNilPromise, firstTrue, firstTruePromise, focusInput, focusNextInput, focusPreviousInput, formatLatitude, formatLongitude, fromDateISOString, fromScrollEndEvent, fromUnixMsTimestamp, fromUnixTimestamp, getCaretPosition, getColorContrast, getColorShade, getColorTint, getConnectionType, getControlFromPath, getFocusableInputElements, getFormErrors, getFormValueFromEntity, getProperty, getPropertyByPath, getPropertyByPathAsString, getRandomImage, hexToRgb, hexToRgbArray, isAndroid, isControlHasInput, isCordova, isDesktop, isEmptyArray, isIOS, isInputElement, isInstanceOf, isInt, isMobile, isNil, isNilOrBlank, isNilOrNaN, isNotEmptyArray, isNotNil, isNotNilOrBlank, isNotNilOrNaN, isNotNilString, isNumber, isNumberRange, isProgressEvent, isResponseEvent, isTouchUi, isWindow, joinProperties, joinPropertiesPath, logFormErrors, markAllAsTouched, markAsUntouched, markControlAsTouched, markFormGroupAsTouched, matchMedia, matchUpperCase, mergeLoadResult, mixHex, moveInputCaretToSeparator, noTrailingSlash, notNilOrDefault, nullIfUndefined, parseLatitudeOrLongitude, propertiesPathComparator, propertyComparator, propertyPathComparator, referentialToString, referentialsToString, remove, removeAll, removeDiacritics, removeDuplicatesFromArray, removeEnd, removeValueInArray, replaceAll, resetCalculatedValue, resizeArray, rgbArrayToHex, rgbToHex, round, scrollFactory, selectInputContent, selectInputRange, setCalculatedValue, setTabIndex, sleep, slideInOutAnimation, slideUpDownAnimation, sort, splitById, splitByProperty, startsWithUpperCase, suggestFromArray, suggestFromStringArray, tabindexComparator, testUserAgent, toBoolean, toDateISOString, toDuration, toFloat, toInt, toNotNil, toNumber, trimEmptyToNull, uncapitalizeFirstLetter, updateValueAndValidity, waitFor, waitForTrue, waitIdle, waitWhilePending, ɵ0$b as ɵ0, CustomReuseStrategy as ɵa, MatNumpadDomService as ɵb, isFocusableElement as ɵc, RegisterForm as ɵd, AccountValidatorService as ɵe, RegisterModal as ɵf, UserSettingsValidatorService as ɵg, LocalSettingsValidatorService as ɵh, AppIconComponent as ɵi, DateTestPage as ɵj, NumpadTestPage as ɵk, MatBadgeIconTestPage as ɵl, ToastTestingModule as ɵm, ToastTestingPage as ɵn };
 //# sourceMappingURL=sumaris-net.ngx-components.js.map