@sumaris-net/ngx-components 2.4.154 → 2.4.156

package/fesm2020/sumaris-net.ngx-components.mjs

@@ -6543,12 +6543,12 @@ class MatDate {
 MatDate.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 MatDate.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MatDate, selector: "mat-date-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", placeholderChar: "placeholderChar", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", timezone: "timezone", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [
         DEFAULT_VALUE_ACCESSOR$5,
-    ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\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: datePattern} }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n  <mat-form-field [floatLabel]=\"floatLabel\"\n                  [appearance]=\"appearance\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           class=\"mat-input-element\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: mask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"_checkIfTouched()\"\n           (keyup.arrowDown)=\"openDatePicker()\"\n           (keyup.escape)=\"_preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input type=\"text\" [formControl]=\"formControl\" hidden\n           *ngIf=\"!mobile\"\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"_onDatePickerChange($event)\"\n           readonly>\n\n    <!-- Mobile -->\n    <input #matInput autocomplete=\"off\" type=\"text\"\n           class=\"mat-input-element\"\n           *ngIf=\"mobile\"\n           [formControl]=\"textControl\"\n           (focus)=\"_openDatePickerIfMobile($event)\"\n           (click)=\"_openDatePickerIfMobile($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n    <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n           *ngIf=\"mobile\"\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"_onDatePickerChange($event)\"\n           readonly>\n\n    <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n            (click)=\"openDatePicker()\"\n            [disabled]=\"disabled\">\n      <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n    </button>\n\n    <mat-datepicker #datePicker\n                    [touchUi]=\"mobile\"\n                    [disabled]=\"disabled\"\n                    [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      <mat-datepicker-actions *ngIf=\"mobile\">\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\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               [ngSwitch]=\"errorKey\">\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</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    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\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</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\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: datePattern} }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n  <mat-form-field [floatLabel]=\"floatLabel\"\n                  [appearance]=\"appearance\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           class=\"mat-input-element\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: mask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"_checkIfTouched()\"\n           (keyup.arrowDown)=\"openDatePicker()\"\n           (keyup.escape)=\"_preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input type=\"text\" [formControl]=\"formControl\" hidden\n           *ngIf=\"!mobile\"\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"_onDatePickerChange($event)\"\n           readonly>\n\n    <!-- Mobile -->\n    <input #matInput autocomplete=\"off\" type=\"text\"\n           class=\"mat-input-element\"\n           *ngIf=\"mobile\"\n           [formControl]=\"textControl\"\n           (focus)=\"_openDatePickerIfMobile($event)\"\n           (click)=\"_openDatePickerIfMobile($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n    <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n           *ngIf=\"mobile\"\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"_onDatePickerChange($event)\"\n           readonly>\n\n    <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n            (click)=\"openDatePicker()\"\n            [disabled]=\"disabled\">\n      <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n    </button>\n\n    <mat-datepicker #datePicker\n                    [touchUi]=\"mobile\"\n                    [disabled]=\"disabled\"\n                    [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      <mat-datepicker-actions *ngIf=\"mobile\">\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\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               [ngSwitch]=\"errorKey\">\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</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    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n  </mat-form-field>\n  \n  <!-- mat hint -->\n  <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\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</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i6$1.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i6$1.MatSuffix, selector: "[matSuffix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i10.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i10.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i10.MatDatepickerCancel, selector: "[matDatepickerCancel], [matDateRangePickerCancel]" }, { kind: "directive", type: i10.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i11.MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MatDate, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-field', providers: [
                         DEFAULT_VALUE_ACCESSOR$5,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\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: datePattern} }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n  <mat-form-field [floatLabel]=\"floatLabel\"\n                  [appearance]=\"appearance\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           class=\"mat-input-element\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: mask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"_checkIfTouched()\"\n           (keyup.arrowDown)=\"openDatePicker()\"\n           (keyup.escape)=\"_preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input type=\"text\" [formControl]=\"formControl\" hidden\n           *ngIf=\"!mobile\"\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"_onDatePickerChange($event)\"\n           readonly>\n\n    <!-- Mobile -->\n    <input #matInput autocomplete=\"off\" type=\"text\"\n           class=\"mat-input-element\"\n           *ngIf=\"mobile\"\n           [formControl]=\"textControl\"\n           (focus)=\"_openDatePickerIfMobile($event)\"\n           (click)=\"_openDatePickerIfMobile($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n    <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n           *ngIf=\"mobile\"\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"_onDatePickerChange($event)\"\n           readonly>\n\n    <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n            (click)=\"openDatePicker()\"\n            [disabled]=\"disabled\">\n      <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n    </button>\n\n    <mat-datepicker #datePicker\n                    [touchUi]=\"mobile\"\n                    [disabled]=\"disabled\"\n                    [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      <mat-datepicker-actions *ngIf=\"mobile\">\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\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               [ngSwitch]=\"errorKey\">\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</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    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\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</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field *ngIf=\"readonly; else writable\"\n                [floatLabel]=\"floatLabel\"\n                [appearance]=\"appearance\"\n                class=\"mat-form-field-disabled\">\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: datePattern} }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n\n  <mat-form-field [floatLabel]=\"floatLabel\"\n                  [appearance]=\"appearance\">\n\n    <mat-label>{{placeholder}}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    <input matInput #matInput autocomplete=\"off\" type=\"text\"\n           class=\"mat-input-element\"\n           *ngIf=\"!mobile\"\n           [formControl]=\"textControl\"\n           [textMask]=\"{mask: mask, keepCharPositions: true, placeholderChar: placeholderChar}\"\n           [placeholder]=\"'COMMON.DATE_PLACEHOLDER'|translate\"\n           (blur)=\"_checkIfTouched()\"\n           (keyup.arrowDown)=\"openDatePicker()\"\n           (keyup.escape)=\"_preventEvent($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           [appAutofocus]=\"autofocus\">\n    <input type=\"text\" [formControl]=\"formControl\" hidden\n           *ngIf=\"!mobile\"\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"_onDatePickerChange($event)\"\n           readonly>\n\n    <!-- Mobile -->\n    <input #matInput autocomplete=\"off\" type=\"text\"\n           class=\"mat-input-element\"\n           *ngIf=\"mobile\"\n           [formControl]=\"textControl\"\n           (focus)=\"_openDatePickerIfMobile($event)\"\n           (click)=\"_openDatePickerIfMobile($event)\"\n           [required]=\"required\"\n           [tabindex]=\"tabindex\"\n           readonly>\n    <input matInput type=\"text\" [formControl]=\"formControl\" hidden\n           *ngIf=\"mobile\"\n           [matDatepicker]=\"datePicker\"\n           [matDatepickerFilter]=\"datePickerFilter\"\n           (dateChange)=\"_onDatePickerChange($event)\"\n           readonly>\n\n    <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\"\n            (click)=\"openDatePicker()\"\n            [disabled]=\"disabled\">\n      <mat-icon>{{mobile?'date_range':'keyboard_arrow_down'}}</mat-icon>\n    </button>\n\n    <mat-datepicker #datePicker\n                    [touchUi]=\"mobile\"\n                    [disabled]=\"disabled\"\n                    [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      <mat-datepicker-actions *ngIf=\"mobile\">\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\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               [ngSwitch]=\"errorKey\">\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</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    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n  </mat-form-field>\n  \n  <!-- mat hint -->\n  <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\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</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.MomentDateAdapter }, { type: i1$1.TranslateService }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$2.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { mobile: [{
@@ -30381,7 +30381,8 @@ class AppEditor {
         }
     }
     setError(value, opts) {
-        if (this.errorSubject.value !== value) {
+        // Compare using '!=' to detect null and undefined as same value
+        if (this.errorSubject.value != value) {
             this.errorSubject.next(value);
             if (!opts || opts.emitEvent !== false)
                 this.markForCheck();
@@ -36089,7 +36090,8 @@ class DateTimeTestPage {
             enable: [null, Validators.required],
             disable: [null, Validators.required],
             noTime: [null, Validators.required],
-            readonly: [null]
+            readonly: [null],
+            hint: [null]
         }, {
             validators: SharedFormGroupValidators.dateRange('empty', 'enable')
         });
@@ -36158,10 +36160,10 @@ class DateTimeTestPage {
     }
 }
 DateTimeTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i2$1.Platform }, { token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTimeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, 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=\"auto\">\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=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"emptyRequired\"\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-time-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-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty value + required -->\n        <ion-col>\n\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\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-time-field formControlName=\"emptyRequired\"\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-time-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-time-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-time-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-time-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-time-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-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty required value -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\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-time-field formControlName=\"emptyRequired\"\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-time-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-time-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-time-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-time-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-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- NoTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value (No time)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"noTime\"\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-time-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-time-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-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["formControl", "formControlName", "required", "placeholder", "floatLabel", "appearance", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }] });
+DateTimeTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, 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=\"auto\">\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=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"emptyRequired\"\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-time-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-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty value + required -->\n        <ion-col>\n\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\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-time-field formControlName=\"emptyRequired\"\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-time-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-time-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-time-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-time-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-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        \n        <!-- Hint -->\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Hint\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"hint\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                <mat-hint>Some hint</mat-hint>\n              </mat-date-time-field>\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-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty required value -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\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-time-field formControlName=\"emptyRequired\"\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-time-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-time-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-time-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-time-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-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- NoTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value (No time)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"noTime\"\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-time-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-time-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-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Hint -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Hint\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"hint\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                <mat-hint>Some hint</mat-hint>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["formControl", "formControlName", "required", "placeholder", "floatLabel", "appearance", "mobile", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "datePickerFilter", "readonly", "tabindex"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateTimeTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-data-time-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=\"auto\">\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=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"emptyRequired\"\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-time-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-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty value + required -->\n        <ion-col>\n\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\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-time-field formControlName=\"emptyRequired\"\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-time-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-time-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-time-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-time-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-time-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-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty required value -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\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-time-field formControlName=\"emptyRequired\"\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-time-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-time-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-time-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-time-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-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- NoTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value (No time)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"noTime\"\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-time-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-time-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-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n" }]
+            args: [{ selector: 'app-data-time-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=\"auto\">\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=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"memoryMobile\">\n              Mobile ?\n            </mat-checkbox>\n          </mat-form-field>\n        </ion-col>\n        <ion-col>\n          <mat-date-time-field formControlName=\"emptyRequired\"\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-time-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-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty value + required -->\n        <ion-col>\n\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\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-time-field formControlName=\"emptyRequired\"\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-time-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-time-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-time-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-time-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-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n        \n        <!-- Hint -->\n        <ion-col size=\"3\">\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Hint\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"hint\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"true\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                <mat-hint>Some hint</mat-hint>\n              </mat-date-time-field>\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-time-field formControlName=\"empty\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Empty required value -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value + required\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-time-field formControlName=\"emptyRequired\"\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-time-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-time-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-time-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-time-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-time-field>\n\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- NoTime  -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  With value (No time)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.noTime.value) + ' noTime:' + (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"noTime\"\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-time-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-time-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-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n        <!-- Hint -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Hint\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-time-field formControlName=\"hint\"\n                                   placeholder=\"Date/Time\"\n                                   [mobile]=\"false\"\n                                   [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                <mat-hint>Some hint</mat-hint>\n              </mat-date-time-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </form>\n\n</ion-content>\n" }]
         }], ctorParameters: function () { return [{ type: i2$1.Platform }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }]; } });
 
 class EntityTestClass {
@@ -36373,7 +36375,8 @@ class DateTestPage {
             enable: [null, Validators.required],
             disable: [null, Validators.required],
             readonly: [null],
-            timezone: [null]
+            timezone: [null],
+            hint: [null]
         }, {
             validators: SharedFormGroupValidators.dateRange('empty', 'enable')
         });
@@ -36444,10 +36447,10 @@ class DateTestPage {
     }
 }
 DateTestPage.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateTestPage, deps: [{ token: i1$2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateTestPage, selector: "app-data-test", ngImport: i0, 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 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\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=\"auto\">\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=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"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\"\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\"\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        <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 (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"emptyRequired\"\n                              placeholder=\"Date\"\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\"\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\"\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\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 formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"true\"\n                              [clearable]=\"true\"\n                              [timezone]=\"timezone\">\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)=\"mobileReadonlyField.readonly=$event.checked\" [checked]=\"mobileReadonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #mobileReadonlyField formControlName=\"readonly\"\n                              placeholder=\"Date\"\n                              [readonly]=\"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      </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      <hr/>\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\"\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-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"emptyRequired\"\n                              placeholder=\"Date\"\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\"\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\"\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 formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"false\"\n                              [clearable]=\"true\"\n                              [timezone]=\"timezone\">\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)=\"desktopReadonlyField.readonly=$event.checked\" [checked]=\"desktopReadonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #desktopReadonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date\"\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\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }] });
+DateTestPage.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateTestPage, selector: "app-data-test", ngImport: i0, 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 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\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=\"auto\">\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=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"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\"\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\"\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        <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 (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"emptyRequired\"\n                              placeholder=\"Date\"\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\"\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\"\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\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 formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"true\"\n                              [clearable]=\"true\"\n                              [timezone]=\"timezone\">\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)=\"mobileReadonlyField.readonly=$event.checked\" [checked]=\"mobileReadonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #mobileReadonlyField formControlName=\"readonly\"\n                              placeholder=\"Date\"\n                              [readonly]=\"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        <!-- Hint -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Hint\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"hint\"\n                              placeholder=\"Date\"\n                              [mobile]=\"true\"\n                              [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                <mat-hint>Some hint</mat-hint>\n              </mat-date-field>\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      <hr/>\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\"\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-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"emptyRequired\"\n                              placeholder=\"Date\"\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\"\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\"\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 formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"false\"\n                              [clearable]=\"true\"\n                              [timezone]=\"timezone\">\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)=\"desktopReadonlyField.readonly=$event.checked\" [checked]=\"desktopReadonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #desktopReadonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date\"\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        <!-- Hint -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Hint\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"hint\"\n                               placeholder=\"Date\"\n                               [mobile]=\"false\"\n                               [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                <mat-hint>Some hint</mat-hint>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n    </ion-grid>\n\n  </form>\n</ion-content>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { kind: "component", type: i2$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2$1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2$1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i2$1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i2$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "directive", type: i2$1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6$1.MatPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: MatDate, selector: "mat-date-field", inputs: ["mobile", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "required", "compact", "placeholderChar", "autofocus", "startDate", "clearable", "timezone", "datePickerFilter", "readonly", "tabindex"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: 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 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\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=\"auto\">\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=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"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\"\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\"\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        <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 (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"emptyRequired\"\n                              placeholder=\"Date\"\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\"\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\"\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\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 formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"true\"\n                              [clearable]=\"true\"\n                              [timezone]=\"timezone\">\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)=\"mobileReadonlyField.readonly=$event.checked\" [checked]=\"mobileReadonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #mobileReadonlyField formControlName=\"readonly\"\n                              placeholder=\"Date\"\n                              [readonly]=\"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      </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      <hr/>\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\"\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-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"emptyRequired\"\n                              placeholder=\"Date\"\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\"\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\"\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 formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"false\"\n                              [clearable]=\"true\"\n                              [timezone]=\"timezone\">\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)=\"desktopReadonlyField.readonly=$event.checked\" [checked]=\"desktopReadonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #desktopReadonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date\"\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\n  </form>\n</ion-content>\n" }]
+            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 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\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=\"auto\">\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=\"4\">\n          <mat-form-field floatLabel=\"never\">\n            <input matInput type=\"text\" hidden>\n            <mat-checkbox (change)=\"memoryMobile=$event.checked\" [checked]=\"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\"\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\"\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        <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 (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"emptyRequired\"\n                              placeholder=\"Date\"\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\"\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\"\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\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 formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"true\"\n                              [clearable]=\"true\"\n                              [timezone]=\"timezone\">\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)=\"mobileReadonlyField.readonly=$event.checked\" [checked]=\"mobileReadonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #mobileReadonlyField formControlName=\"readonly\"\n                              placeholder=\"Date\"\n                              [readonly]=\"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        <!-- Hint -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Hint\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"hint\"\n                              placeholder=\"Date\"\n                              [mobile]=\"true\"\n                              [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                <mat-hint>Some hint</mat-hint>\n              </mat-date-field>\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      <hr/>\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\"\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-col>\n\n          <!-- Empty value -->\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Empty value (required)\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.emptyRequired.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"emptyRequired\"\n                              placeholder=\"Date\"\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\"\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\"\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 formControlName=\"timezone\"\n                              placeholder=\"Date\"\n                              [mobile]=\"false\"\n                              [clearable]=\"true\"\n                              [timezone]=\"timezone\">\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)=\"desktopReadonlyField.readonly=$event.checked\" [checked]=\"desktopReadonlyField.readonly\">\n              </mat-checkbox>\n\n              <mat-date-field #desktopReadonlyField formControlName=\"readonly\"\n                                   placeholder=\"Date\"\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        <!-- Hint -->\n        <ion-col>\n          <ion-card>\n            <ion-card-header>\n              <ion-card-title>\n                <ion-label color=\"primary\">\n                  Hint\n                </ion-label>\n              </ion-card-title>\n              <ion-card-subtitle>\n                <ion-text color=\"medium\">\n                  <small><pre>{{stringify(form.controls.hint.value)}}</pre></small>\n                </ion-text>\n              </ion-card-subtitle>\n            </ion-card-header>\n            <ion-card-content>\n              <mat-date-field formControlName=\"hint\"\n                               placeholder=\"Date\"\n                               [mobile]=\"false\"\n                               [clearable]=\"true\">\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                <mat-hint>Some hint</mat-hint>\n              </mat-date-field>\n            </ion-card-content>\n          </ion-card>\n        </ion-col>\n\n      </ion-row>\n    </ion-grid>\n\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }]; } });
 
 class ObservableTestPage {