@sumaris-net/ngx-components 1.14.3 → 1.15.0

package/bundles/sumaris-net.ngx-components.umd.js

@@ -2092,7 +2092,7 @@
         { type: i1$2.TranslateService }
     ]; };
 
-    var moment$6 = momentImported__namespace;
+    var moment$7 = momentImported__namespace;
     var DateDiffDurationPipe = /** @class */ (function () {
         function DateDiffDurationPipe(dateAdapter, translate) {
             var _this = this;
@@ -2109,10 +2109,10 @@
             return this.format(startDate, endDate);
         };
         DateDiffDurationPipe.prototype.format = function (startDate, endDate) {
-            var duration = moment$6.duration(endDate.diff(startDate));
+            var duration = moment$7.duration(endDate.diff(startDate));
             if (duration.asMinutes() < 0)
                 return '';
-            var timeDuration = moment$6(0)
+            var timeDuration = moment$7(0)
                 .hour(duration.hours())
                 .minute(duration.minutes());
             var days = Math.floor(duration.asDays());
@@ -2572,7 +2572,7 @@
         { type: i0.Pipe, args: [{ name: 'fileSize' },] }
     ];
 
-    var moment$5 = momentImported__namespace;
+    var moment$6 = momentImported__namespace;
     var tz = momentTZImported__namespace;
     var DATE_UNIX_TIMESTAMP = 'X';
     var DATE_UNIX_MS_TIMESTAMP = 'x';
@@ -2601,18 +2601,19 @@
          * 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.
          */
-        DateUtils.resetTime = function (value, timezone) {
+        DateUtils.resetTime = function (value, timezone, keepLocalTime) {
             if (!value)
                 return undefined;
             var 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');
         };
         return DateUtils;
@@ -2635,32 +2636,32 @@
         if (!value || momentImported.isMoment(value))
             return value;
         // Parse the input value, as a ISO date time
-        var date = moment$5(value, DATE_ISO_PATTERN);
+        var 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;
-        var duration = moment$5.duration(value, unit);
+        var duration = moment$6.duration(value, unit);
         // fix 990+ ms
         if (duration.milliseconds() >= 990) {
             duration.add(1000 - duration.milliseconds(), 'ms');
@@ -3160,7 +3161,7 @@
         ngInit: [{ type: i0.Output }]
     };
 
-    var moment$4 = momentImported__namespace;
+    var moment$5 = momentImported__namespace;
     // @dynamic
     var SharedValidators = /** @class */ (function () {
         function SharedValidators() {
@@ -3177,14 +3178,6 @@
             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];
         };
-        SharedValidators.validDate = function (control) {
-            var value = control.value;
-            var 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;
-        };
         SharedValidators.latitude = function (control) {
             var value = control.value;
             if (isNotNil(value) && (value < -90 || value > 90)) {
@@ -3249,6 +3242,14 @@
                 return null;
             };
         };
+        SharedValidators.validDate = function (control) {
+            var value = control.value;
+            var 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;
+        };
         SharedValidators.dateIsAfter = function (previousValue, errorParam, granularity) {
             return function (control) {
                 var value = fromDateISOString(control.value);
@@ -3259,6 +3260,16 @@
                 return null;
             };
         };
+        SharedValidators.dateIsBefore = function (maxValue, errorParam, granularity) {
+            return function (control) {
+                var value = fromDateISOString(control.value);
+                if (isNotNil(value) && isNotNil(maxValue) && value.isSameOrAfter(maxValue, granularity)) {
+                    // Return the error
+                    return { dateIsBefore: { maxDate: errorParam } };
+                }
+                return null;
+            };
+        };
         SharedValidators.dateRangeEnd = function (startDateFieldName, msg) {
             var errorCode = msg ? 'msg' : 'dateRange';
             var error = msg ? { msg: msg } : { dateRange: true };
@@ -3354,6 +3365,7 @@
         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',
@@ -5331,6 +5343,7 @@
     var ɵ0$9 = noop$6;
     var MatDate = /** @class */ (function () {
         function MatDate(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
+            this.platform = platform;
             this.dateAdapter = dateAdapter;
             this.translate = translate;
             this.formBuilder = formBuilder;
@@ -5340,21 +5353,29 @@
             this._onChangeCallback = noop$6;
             this._onTouchedCallback = noop$6;
             this._subscription = new rxjs.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.locale = (translate.currentLang || translate.defaultLang).substr(0, 2);
         }
+        Object.defineProperty(MatDate.prototype, "readonly", {
+            get: function () {
+                return this._readonly;
+            },
+            set: function (value) {
+                this._readonly = value;
+                this.markForCheck();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(MatDate.prototype, "tabindex", {
             get: function () {
                 return this._tabindex;
@@ -5371,71 +5392,69 @@
         });
         Object.defineProperty(MatDate.prototype, "value", {
             get: function () {
-                return toDateISOString(this._value);
+                return this.formControl.value;
             },
             enumerable: false,
             configurable: true
         });
         MatDate.prototype.ngOnInit = function () {
             var _this = this;
+            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 === i1.Validators.required);
-            // Redirect errors from main control, into day sub control
-            var $error = new rxjs.BehaviorSubject(null);
-            this.dayControl = this.formBuilder.control(null, function () { return $error.getValue(); });
-            // Add custom 'validDate' validator
-            this.formControl.setValidators(this.required ? [i1.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 === i1.Validators.required) {
+                this.formControl.setValidators(this.required ? [i1.Validators.required, SharedValidators.validDate] : SharedValidators.validDate);
+            }
+            else {
+                this.formControl.setValidators(this.required ? [this.formControl.validator, i1.Validators.required, SharedValidators.validDate] :
+                    [this.formControl.validator, SharedValidators.validDate]);
+            }
+            this.dayControl = this.formBuilder.control(null, function () { return _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(function (pattern) { return _this.updatePattern(pattern); }));
             this._subscription.add(this.dayControl.valueChanges
                 .subscribe(function (value) { return _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(operators.filter(function () { return !_this.readonly && !_this.writing && !_this.disabling; })) // Skip
-                .subscribe(function (status) {
-                if (status === 'INVALID') {
-                    $error.next(_this.formControl.errors);
-                }
-                else if (status === 'VALID') {
-                    $error.next(null);
-                }
-                _this.dayControl.updateValueAndValidity({ onlySelf: true, emitEvent: false });
+                .pipe(operators.filter(function (_) { return !_this.readonly && !_this._writing && !_this._disabling; }) // Skip
+            )
+                .subscribe(function () {
+                _this.dayControl.updateValueAndValidity({ emitEvent: false });
                 _this.markForCheck();
             }));
             this.updateTabIndex();
-            this.writing = false;
+            this._writing = false;
         };
         MatDate.prototype.ngOnDestroy = function () {
             this._subscription.unsubscribe();
         };
-        MatDate.prototype.writeValue = function (obj) {
-            if (this.writing)
-                return;
-            // console.debug('[mat-date] writeValue:', obj);
-            if (isNilOrBlank(obj)) {
-                this.writing = true;
+        MatDate.prototype.writeValue = function (valueStr) {
+            if (this._writing)
+                return; // Skip
+            this._writing = true;
+            // DEBUG
+            // console.debug("[mat-date] writeValue() with:", valueStr);
+            var 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
+                var day = value.clone().startOf('day');
+                var 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();
         };
         MatDate.prototype.registerOnChange = function (fn) {
@@ -5445,37 +5464,36 @@
             this._onTouchedCallback = fn;
         };
         MatDate.prototype.setDisabledState = function (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();
         };
         MatDate.prototype.onDatePickerChange = function (event) {
-            if (this.writing || !(event && event.value))
-                return; // Skip if call by self
-            this.writing = true;
-            var date = event.value;
-            date = typeof date === 'string' && this.dateAdapter.parse(date, DATE_ISO_PATTERN) || date;
-            var 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
-            var 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 && !momentImported.isMoment(event.value))) {
+                console.warn('Invalid MatDatepicker event. Skipping', event);
+                return; // Skip
+            }
+            var date = event.value && event.value
+                .locale(this.locale) // set as time as locale time
+                .minute(0).seconds(0).millisecond(0) // Reset hour
+                .utc(true);
+            var dateStr = date && 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
+                });
+            }
         };
         MatDate.prototype.openDatePickerIfMobile = function (event, datePicker) {
             return __awaiter(this, void 0, void 0, function () {
@@ -5526,6 +5544,13 @@
                 }
             });
         };
+        MatDate.prototype.clear = function () {
+            this.dayControl.patchValue(null, { emitEvent: false });
+            this.formControl.setValue(null, { emitEvent: false });
+            this._onChangeCallback(null);
+            this.markAsTouched();
+            this.markAsDirty();
+        };
         /* -- private method -- */
         MatDate.prototype.updatePattern = function (pattern) {
             pattern = pattern !== 'COMMON.DATE_PATTERN' ? pattern : 'L';
@@ -5535,35 +5560,28 @@
                 this.markForCheck();
             }
         };
-        MatDate.prototype.onFormChange = function (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, '');
-            }
-            var 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
-            var 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);
-        };
         MatDate.prototype.checkIfTouched = function () {
             if (this.dayControl.touched) {
-                this.markForCheck();
                 this._onTouchedCallback();
+                this.markForCheck();
+            }
+        };
+        MatDate.prototype.onFormChange = function (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
+            var date = dayStr && this.dateAdapter.parse(dayStr, this.dayPattern) || null;
+            // Reset time
+            date = date && date.minute(0).seconds(0).millisecond(0)
+                .utc(); // Convert local date into utc (avoid TZ offset to be in the final string)
+            // Set model value
+            this.emitChange(date);
+            this._writing = false;
         };
         MatDate.prototype.waitKeyboardHide = function (waitKeyboardDelay) {
             return __awaiter(this, void 0, void 0, function () {
@@ -5579,8 +5597,8 @@
                         case 1:
                             // Wait hide occur
                             _a.sent();
-                            if (!(this.keyboardHideDelay > 0 && waitKeyboardDelay)) return [3 /*break*/, 3];
-                            return [4 /*yield*/, sleep(this.keyboardHideDelay)];
+                            if (!(this._keyboardHideDelay > 0 && waitKeyboardDelay)) return [3 /*break*/, 3];
+                            return [4 /*yield*/, sleep(this._keyboardHideDelay)];
                         case 2:
                             _a.sent();
                             _a.label = 3;
@@ -5589,6 +5607,18 @@
                 });
             });
         };
+        MatDate.prototype.emitChange = function (value) {
+            // Get the model value
+            var 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();
+            }
+        };
         MatDate.prototype.updateTabIndex = function () {
             var _this = this;
             if (isNil(this._tabindex) || this._tabindex === -1)
@@ -5601,6 +5631,14 @@
                 _this.markForCheck();
             });
         };
+        MatDate.prototype.markAsTouched = function (opts) {
+            this.dayControl.markAsTouched(opts);
+            this._onTouchedCallback();
+            this.markForCheck();
+        };
+        MatDate.prototype.markAsDirty = function (opts) {
+            this.formControl.markAsDirty(opts);
+        };
         MatDate.prototype.markForCheck = function () {
             this.cd.markForCheck();
         };
@@ -5609,7 +5647,7 @@
     MatDate.decorators = [
         { type: i0.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,
                     ],
@@ -5627,19 +5665,19 @@
         { type: i1.FormGroupDirective, decorators: [{ type: i0.Optional }] }
     ]; };
     MatDate.propDecorators = {
-        disabled: [{ type: i0.Input }],
         formControl: [{ type: i0.Input }],
         formControlName: [{ type: i0.Input }],
         placeholder: [{ type: i0.Input }],
         floatLabel: [{ type: i0.Input }],
-        readonly: [{ type: i0.Input }],
         required: [{ type: i0.Input }],
+        mobile: [{ type: i0.Input }],
         compact: [{ type: i0.Input }],
         placeholderChar: [{ type: i0.Input }],
         autofocus: [{ type: i0.Input }],
-        tabindex: [{ type: i0.Input }],
         startDate: [{ type: i0.Input }],
         clearable: [{ type: i0.Input }],
+        readonly: [{ type: i0.Input }],
+        tabindex: [{ type: i0.Input }],
         datePicker: [{ type: i0.ViewChild, args: ['datePicker',] }],
         matInputs: [{ type: i0.ViewChildren, args: ['matInput',] }]
     };
@@ -5652,8 +5690,7 @@
     var DAY_MASK$1 = [/\d/, /\d/, '/', /\d/, /\d/, '/', /\d/, /\d/, /\d/, /\d/];
     var HOUR_REGEXP = /^[012][0-9][:][012345][0-9]$/;
     var HOUR_MASK$1 = [/[012]/, /\d/, ':', /[012345]/, /\d/];
-    var noop$5 = function () {
-    };
+    var noop$5 = function () { };
     var ɵ0$8 = noop$5;
     var MatDateTime = /** @class */ (function () {
         function MatDateTime(platform, dateAdapter, translate, formBuilder, cd, keyboard, formGroupDir) {
@@ -5667,8 +5704,8 @@
             this._onChangeCallback = noop$5;
             this._onTouchedCallback = noop$5;
             this._subscription = new rxjs.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;
@@ -5715,7 +5752,7 @@
         MatDateTime.prototype.ngOnInit = function () {
             var _this = this;
             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>.');
@@ -5742,19 +5779,19 @@
                 .subscribe(function (event) { return _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(operators.filter(function (_) { return !_this.readonly && !_this.writing && !_this.disabling; }) // Skip
+                .pipe(operators.filter(function (_) { return !_this.readonly && !_this._writing && !_this._disabling; }) // Skip
             )
                 .subscribe(function () { return _this.markForCheck(); }));
             this.updateTabIndex();
-            this.writing = false;
+            this._writing = false;
         };
         MatDateTime.prototype.ngOnDestroy = function () {
             this._subscription.unsubscribe();
         };
         MatDateTime.prototype.writeValue = function (valueStr) {
-            if (this.writing)
+            if (this._writing)
                 return; // Skip
-            this.writing = true;
+            this._writing = true;
             // DEBUG
             // console.debug("[mat-date-time] writeValue() with:", valueStr);
             var value = fromDateISOString(valueStr);
@@ -5763,10 +5800,10 @@
                 this.timeFormControl.patchValue(null, { emitEvent: false });
             }
             else {
-                // Parse day
+                // Format day
                 var day = value.clone().startOf('day');
                 var dayStr = this.dateAdapter.format(day, this.dayPattern);
-                // Parse time
+                // Format time
                 // - Format hh
                 var hour = value.hour();
                 hour = hour < 10 ? ('0' + hour) : hour;
@@ -5778,46 +5815,9 @@
                 this.dateFormControl.patchValue(dayStr, { emitEvent: false });
                 this.timeFormControl.patchValue(timeStr, { emitEvent: false });
             }
-            this.writing = false;
+            this._writing = false;
             this.markForCheck();
         };
-        MatDateTime.prototype.onFormChange = function (event) {
-            if (this.writing)
-                return; // Skip if call by self
-            this.writing = true;
-            var dayStr = this.dateFormControl.value;
-            var time = this.timeFormControl.value;
-            // DEBUG
-            //console.debug(`[mat-date-time] onFormChange() from event: ${event} - controls values: `, [dayStr, time]);
-            var 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
-            var day = dayStr && this.dateAdapter.parse(dayStr, this.dayPattern) || null;
-            // Parse time
-            var hourParts = (time || '').split(':');
-            var hour = parseInt(hourParts[0] || 0);
-            var minutes = parseInt(hourParts[1] || 0);
-            var 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;
-        };
         MatDateTime.prototype.registerOnChange = function (fn) {
             this._onChangeCallback = fn;
         };
@@ -5825,9 +5825,9 @@
             this._onTouchedCallback = fn;
         };
         MatDateTime.prototype.setDisabledState = function (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 });
@@ -5836,7 +5836,7 @@
                 this.dateFormControl.enable({ emitEvent: false });
                 this.timeFormControl.enable({ emitEvent: false });
             }
-            this.disabling = false;
+            this._disabling = false;
             this.markForCheck();
         };
         MatDateTime.prototype.onDatePickerChange = function (event) {
@@ -5961,6 +5961,43 @@
                 this.markForCheck();
             }
         };
+        MatDateTime.prototype.onFormChange = function (event) {
+            if (this._writing)
+                return; // Skip if call by self
+            this._writing = true;
+            var dayStr = this.dateFormControl.value;
+            var time = this.timeFormControl.value;
+            // DEBUG
+            //console.debug(`[mat-date-time] onFormChange() from event: ${event} - controls values: `, [dayStr, time]);
+            var 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
+            var day = dayStr && this.dateAdapter.parse(dayStr, this.dayPattern) || null;
+            // Parse time
+            var hourParts = (time || '').split(':');
+            var hour = parseInt(hourParts[0] || 0);
+            var minutes = parseInt(hourParts[1] || 0);
+            var 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;
+        };
         MatDateTime.prototype.waitKeyboardHide = function (waitKeyboardDelay) {
             return __awaiter(this, void 0, void 0, function () {
                 return __generator(this, function (_a) {
@@ -5975,8 +6012,8 @@
                         case 1:
                             // Wait hide occur
                             _a.sent();
-                            if (!(this.keyboardHideDelay > 0 && waitKeyboardDelay)) return [3 /*break*/, 3];
-                            return [4 /*yield*/, sleep(this.keyboardHideDelay)];
+                            if (!(this._keyboardHideDelay > 0 && waitKeyboardDelay)) return [3 /*break*/, 3];
+                            return [4 /*yield*/, sleep(this._keyboardHideDelay)];
                         case 2:
                             _a.sent();
                             _a.label = 3;
@@ -6009,9 +6046,9 @@
                 _this.markForCheck();
             });
         };
-        MatDateTime.prototype.markAsTouched = function () {
-            this.dateFormControl.markAsTouched();
-            this.timeFormControl.markAsTouched();
+        MatDateTime.prototype.markAsTouched = function (opts) {
+            this.dateFormControl.markAsTouched(opts);
+            this.timeFormControl.markAsTouched(opts);
             this._onTouchedCallback();
             this.markForCheck();
         };
@@ -6026,7 +6063,7 @@
     MatDateTime.decorators = [
         { type: i0.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,
                     ],
@@ -11529,7 +11566,7 @@
         onRefresh: [{ type: i0.Input }]
     };
 
-    var moment$3 = momentImported__namespace;
+    var moment$4 = momentImported__namespace;
     var SETTINGS_STORAGE_KEY = 'settings';
     var SETTINGS_TRANSIENT_PROPERTIES = ['mobile', 'touchUi' /*deprecated*/];
     // fixme: this constant points to static environment
@@ -11831,11 +11868,11 @@
             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);
         };
@@ -12029,7 +12066,7 @@
             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) {
                 var tagIndex = page.title.indexOf('</small>');
@@ -17673,7 +17710,7 @@
     ]; };
     var templateObject_1$3, templateObject_2$3, templateObject_3$2, templateObject_4$2, templateObject_5$1;
 
-    var moment$2 = momentImported__namespace;
+    var moment$3 = momentImported__namespace;
     var PlatformService = /** @class */ (function (_super) {
         __extends(PlatformService, _super);
         function PlatformService(platform, cdkPlatform, toastController, translate, dateAdapter, entitiesStorage, settings, networkService, accountService, configService, cache, storage, audioProvider, environment, statusBar, keyboard, splashScreen, browser, downloader) {
@@ -17933,16 +17970,16 @@
                     }
                     // 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(function (data) {
@@ -29883,13 +29920,13 @@
         { type: i1.FormBuilder }
     ]; };
 
-    var moment$1 = momentImported__namespace;
+    var moment$2 = momentImported__namespace;
     var SwipeTestPage = /** @class */ (function () {
         function SwipeTestPage(formBuilder, dateFormatPipe) {
             this.formBuilder = formBuilder;
             this.dateFormatPipe = dateFormatPipe;
             this.$dates = new rxjs.BehaviorSubject(undefined);
-            this._today = moment$1().startOf('day');
+            this._today = moment$2().startOf('day');
             this.form = formBuilder.group({
                 empty: [null, i1.Validators.required],
                 date: [null, i1.Validators.compose([i1.Validators.required, SharedValidators.validDate])],
@@ -29903,7 +29940,7 @@
             var _this = this;
             var dates = [];
             for (var 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();
@@ -29950,7 +29987,7 @@
         { type: DateFormatPipe }
     ]; };
 
-    var moment = momentImported__namespace;
+    var moment$1 = momentImported__namespace;
     var DateTimeTestPage = /** @class */ (function () {
         function DateTimeTestPage(platform, formBuilder, cd) {
             this.platform = platform;
@@ -29986,7 +30023,7 @@
                 var now, data;
                 var _this = this;
                 return __generator(this, function (_a) {
-                    now = moment();
+                    now = moment$1();
                     data = {
                         empty: toDateISOString(now.clone().add(2, 'hours')),
                         enable: toDateISOString(now),
@@ -30262,9 +30299,111 @@
         { type: i1.FormBuilder }
     ]; };
 
+    var moment = momentImported__namespace;
+    var DateTestPage = /** @class */ (function () {
+        function DateTestPage(platform, formBuilder, cd) {
+            this.platform = platform;
+            this.formBuilder = formBuilder;
+            this.cd = cd;
+            this.showLogPanel = true;
+            this.logContent = '';
+            this.memoryHide = false;
+            this.memoryMobile = true;
+            this.stringify = JSON.stringify;
+            this.form = formBuilder.group({
+                empty: [null, i1.Validators.required],
+                enable: [null, i1.Validators.required],
+                disable: [null, i1.Validators.required],
+                readonly: [null]
+            }, {
+                validators: SharedFormGroupValidators.dateRange('empty', 'enable')
+            });
+            var disableControl = this.form.get('disable');
+            disableControl.disable();
+            // Copy the 'enable' value, into the disable control
+            this.form.get('enable').valueChanges.subscribe(function (value) { return disableControl.setValue(value); });
+            var mobile = platform.is('mobile');
+            this.showLogPanel = this.showLogPanel || mobile;
+        }
+        DateTestPage.prototype.ngOnInit = function () {
+            var _this = this;
+            setTimeout(function () { return _this.loadData(); }, 250);
+        };
+        // Load the form with data
+        DateTestPage.prototype.loadData = function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var now, data;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    now = moment();
+                    data = {
+                        empty: toDateISOString(now.clone().add(2, 'hours')),
+                        enable: toDateISOString(now),
+                        disable: now,
+                        readonly: now
+                    };
+                    this.form.setValue(data);
+                    this.log('[test-page] Data loaded: ' + JSON.stringify(data));
+                    this.form.get('empty').valueChanges
+                        .pipe(operators.debounceTime(300))
+                        .subscribe(function (value) { return _this.log('[test-page] Value n°1: ' + JSON.stringify(value)); });
+                    this.form.get('enable').valueChanges
+                        .pipe(operators.debounceTime(300))
+                        .subscribe(function (value) { return _this.log('[test-page] Value n°2: ' + JSON.stringify(value)); });
+                    return [2 /*return*/];
+                });
+            });
+        };
+        DateTestPage.prototype.doSubmit = function (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);
+            }
+        };
+        DateTestPage.prototype.log = function (message) {
+            console.debug(message);
+            if (this.showLogPanel) {
+                this.logContent += message + '<br/>';
+                this.cd.markForCheck();
+            }
+        };
+        DateTestPage.prototype.clearLogPanel = function () {
+            this.logContent = '';
+            this.cd.markForCheck();
+        };
+        DateTestPage.prototype.startMemoryTimer = function () {
+            var _this = this;
+            this.memoryTimer = setInterval(function () {
+                _this.memoryHide = !_this.memoryHide;
+            }, 50);
+        };
+        DateTestPage.prototype.stopMemoryTimer = function () {
+            clearInterval(this.memoryTimer);
+            this.memoryTimer = null;
+            this.memoryHide = false;
+        };
+        return DateTestPage;
+    }());
+    DateTestPage.decorators = [
+        { type: i0.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        <!-- 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      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n"
+                },] }
+    ];
+    DateTestPage.ctorParameters = function () { return [
+        { type: i1$5.Platform },
+        { type: i1.FormBuilder },
+        { type: i0.ChangeDetectorRef }
+    ]; };
+
     var 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' },
@@ -30289,6 +30428,11 @@
             pathMatch: 'full',
             component: DateTimeTestPage
         },
+        {
+            path: 'date',
+            pathMatch: 'full',
+            component: DateTestPage
+        },
         {
             path: 'latlong',
             pathMatch: 'full',
@@ -30332,6 +30476,7 @@
                     ],
                     declarations: [
                         DateTimeTestPage,
+                        DateTestPage,
                         AutocompleteTestPage,
                         LatLongTestPage,
                         NumpadTestPage,
@@ -30343,6 +30488,7 @@
                         SharedMaterialModule,
                         i3.RouterModule,
                         DateTimeTestPage,
+                        DateTestPage,
                         AutocompleteTestPage,
                         LatLongTestPage,
                         NumpadTestPage,
@@ -31419,10 +31565,11 @@
     exports["ɵg"] = UserSettingsValidatorService;
     exports["ɵh"] = LocalSettingsValidatorService;
     exports["ɵi"] = AppIconComponent;
-    exports["ɵj"] = NumpadTestPage;
-    exports["ɵk"] = MatBadgeIconTestPage;
-    exports["ɵl"] = ToastTestingModule;
-    exports["ɵm"] = ToastTestingPage;
+    exports["ɵj"] = DateTestPage;
+    exports["ɵk"] = NumpadTestPage;
+    exports["ɵl"] = MatBadgeIconTestPage;
+    exports["ɵm"] = ToastTestingModule;
+    exports["ɵn"] = ToastTestingPage;
 
     Object.defineProperty(exports, '__esModule', { value: true });