@sumaris-net/ngx-components 18.6.36 → 18.6.38

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

@@ -2764,14 +2764,18 @@ class SharedValidators {
             return null;
         };
     }
-    static validDate(control) {
-        const value = control.value;
-        const date = !value || isMoment(value) ? value : fromDateISOString(value);
-        if (date && (!date.isValid() || date.year() < 1900)) {
-            return { validDate: true };
-        }
-        return null;
+    static validDateTime(requiredTime = true) {
+        return (control) => {
+            const value = control.value;
+            const date = !value || isMoment(value) ? value : fromDateISOString(value);
+            if (date && (!date.isValid() || date.year() < 1900 || (requiredTime && DateUtils.isNoTime(date)))) {
+                return { validDate: true };
+            }
+            return null;
+        };
     }
+    static validDate = SharedValidators.validDateTime(true);
+    static validDateAllowNoTime = SharedValidators.validDateTime(false);
     static dateIsAfter(previousValue, errorParam, granularity) {
         return (control) => {
             const value = fromDateISOString(control.value);
@@ -5181,11 +5185,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 class StrReplacePipe {
-    transform(input, pattern, replacement) {
-        if (typeof input !== 'string' || isNilOrBlank(pattern) || isNil(replacement)) {
+    transform(input, searchValue, replacement) {
+        if (typeof input !== 'string' || isNilOrBlank(searchValue) || isNil(replacement)) {
             return input;
         }
-        return input.replace(pattern, replacement);
+        return input.replace(searchValue, replacement);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StrReplacePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
     static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StrReplacePipe, name: "replace" });
@@ -9613,6 +9617,9 @@ class MatDateTime {
     get required() {
         return this._required;
     }
+    get requiredTime() {
+        return this._required && !this.allowNoTime;
+    }
     set readonly(value) {
         this._readonly = value;
         this.markForCheck();
@@ -9750,7 +9757,6 @@ class MatDateTime {
         }
     }
     openTimePicker(event) {
-        console.log('TODO openTimePicker');
         if (!this.timePicker || this.disabled)
             return; // Skip
         this._preventEvent(event);
@@ -9813,8 +9819,15 @@ class MatDateTime {
         if (!control)
             return;
         // Add 'validDate' validator
-        if (!control.hasValidator(SharedValidators.validDate)) {
-            control.addValidators(SharedValidators.validDate);
+        {
+            const validator = this.allowNoTime ? SharedValidators.validDateAllowNoTime : SharedValidators.validDate;
+            const inverseValidator = this.allowNoTime ? SharedValidators.validDate : SharedValidators.validDateAllowNoTime;
+            if (!control.hasValidator(validator)) {
+                control.addValidators(validator);
+            }
+            if (control.hasValidator(inverseValidator)) {
+                control.removeValidators(inverseValidator);
+            }
         }
         // Add required validator (if need)
         if (required) {
@@ -9822,8 +9835,10 @@ class MatDateTime {
                 control.addValidators(Validators.required);
             }
         }
-        else if (control.hasValidator(Validators.required)) {
-            control.removeValidators(Validators.required);
+        else {
+            if (control.hasValidator(Validators.required)) {
+                control.removeValidators(Validators.required);
+            }
         }
     }
     _onDatePickerChange(event) {
@@ -9889,7 +9904,6 @@ class MatDateTime {
         this.openDatePicker(null, datePicker);
     }
     _openTimePickerIfMobile(event) {
-        console.log('TODO _openTimePickerIfMobile');
         if (!this.mobile || event?.defaultPrevented || this.disabled)
             return;
         // Open the picker
@@ -10124,11 +10138,11 @@ class MatDateTime {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatDateTime, selector: "mat-date-time-field", inputs: { placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], startDate: "startDate", datePickerFilter: "datePickerFilter", allowNoTime: ["allowNoTime", "allowNoTime", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$2], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "_matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (dateControl.invalid || _formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Desktop -->\n          @if (!mobile) {\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          } @else {\n            <!-- Mobile -->\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"compact ? 0 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (timeControl.invalid || _formControl.invalid)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if (mobile) {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              (click)=\"openTimePicker($event)\"\n              readonly\n            />\n          } @else {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"required\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n          }\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxMatTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          @if (!compact) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"_formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n            </button>\n          }\n          <ngx-mat-timepicker\n            #timePicker\n            (timeSet)=\"_onTimePickerChange($event)\"\n            [isEsc]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"!mobile\"\n            color=\"accent\"\n          ></ngx-mat-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n  </ion-button>\n</ng-template>\n\n<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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { 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: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", 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.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { 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: "component", type: i13.NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "directive", type: i13.NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MatDateTime, selector: "mat-date-time-field", inputs: { placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], startDate: "startDate", datePickerFilter: "datePickerFilter", allowNoTime: ["allowNoTime", "allowNoTime", booleanAttribute], appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$2], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "_matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (dateControl.invalid || _formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Mobile -->\n          @if (mobile) {\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"_formControl\"\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n            />\n          } @else {\n            <!-- Desktop -->\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"compact ? 0 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (timeControl.invalid || _formControl.invalid)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if (mobile) {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              (click)=\"openTimePicker($event)\"\n              readonly\n            />\n\n            <!-- Hide the final (hidden) input -->\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"required\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          } @else {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"requiredTime\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n            <!-- Hide the final (hidden) input -->\n            <input\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          }\n\n          @if (!compact) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"_formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n            </button>\n          }\n          <ngx-mat-timepicker\n            #timePicker\n            (timeSet)=\"_onTimePickerChange($event)\"\n            [isEsc]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"!mobile\"\n            color=\"accent\"\n          ></ngx-mat-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n  </ion-button>\n</ng-template>\n\n<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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.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.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { 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: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", 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.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { 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: "component", type: i13.NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "directive", type: i13.NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDateTime, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (dateControl.invalid || _formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Desktop -->\n          @if (!mobile) {\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          } @else {\n            <!-- Mobile -->\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"compact ? 0 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (timeControl.invalid || _formControl.invalid)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if (mobile) {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              (click)=\"openTimePicker($event)\"\n              readonly\n            />\n          } @else {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"required\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n          }\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxMatTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          @if (!compact) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"_formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n            </button>\n          }\n          <ngx-mat-timepicker\n            #timePicker\n            (timeSet)=\"_onTimePickerChange($event)\"\n            [isEsc]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"!mobile\"\n            color=\"accent\"\n          ></ngx-mat-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n  </ion-button>\n</ng-template>\n\n<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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
+            args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (dateControl.invalid || _formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Mobile -->\n          @if (mobile) {\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"_formControl\"\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n            />\n          } @else {\n            <!-- Desktop -->\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"compact ? 0 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"_formControl.touched && (timeControl.invalid || _formControl.invalid)\"\n        >\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if (mobile) {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              (click)=\"openTimePicker($event)\"\n              readonly\n            />\n\n            <!-- Hide the final (hidden) input -->\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"required\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          } @else {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"requiredTime\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n            <!-- Hide the final (hidden) input -->\n            <input\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          }\n\n          @if (!compact) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"_formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n            </button>\n          }\n          <ngx-mat-timepicker\n            #timePicker\n            (timeSet)=\"_onTimePickerChange($event)\"\n            [isEsc]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"!mobile\"\n            color=\"accent\"\n          ></ngx-mat-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n  </ion-button>\n</ng-template>\n\n<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\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}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}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i1$1.TranslateService }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -15146,7 +15160,8 @@ class Hotkeys {
                 const top = (await this.modalController.getTop()) || (await this.popoverController.getTop());
                 // If modal present, check its component name against hotkey element name (fix #181)
                 if (top && top.component['name'] !== merged.elementName) {
-                    e.preventDefault();
+                    if (merged.preventDefault)
+                        e.preventDefault();
                     return;
                 }
                 if (e instanceof KeyboardEvent && e.repeat)
@@ -43410,7 +43425,7 @@ class DateTimeTestPage {
     memoryMobile = true;
     memoryTimer;
     form;
-    mode = 'mobile';
+    mode = 'temp'; // 'mobile';
     appearance = 'fill';
     noTimeProperty = MOMENT_NO_TIME_PROPERTY;
     constructor(platform, formBuilder, cd) {
@@ -43511,11 +43526,11 @@ class DateTimeTestPage {
     }
     stringify = JSON.stringify;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i2$1.Platform }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-label>\n        <small>\n          <pre>{{ stringify(form.controls.empty.value) }}</pre>\n          <br/>\n          <pre>{{ stringify(form.controls.empty.errors) }}</pre>\n        </small>\n      </ion-label>\n      <mat-date-time-field\n        formControlName=\"empty\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [allowNoTime]=\"false\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button>OK</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                >\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          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                >\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ 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: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: DateDiffDurationPipe, name: "dateDiffDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Required, but allow no time</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-label>\n        <small>\n          <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}</pre\n          >\n        </small>\n      </ion-label>\n      <mat-date-time-field\n        formControlName=\"noTime\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [required]=\"true\"\n        [allowNoTime]=\"true\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button>OK</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                >\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          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                >\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ 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: "component", type: i2$1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: MatDateTime, selector: "mat-date-time-field", inputs: ["placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: DateDiffDurationPipe, name: "dateDiffDuration" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimeTestPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-data-time-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-label>\n        <small>\n          <pre>{{ stringify(form.controls.empty.value) }}</pre>\n          <br/>\n          <pre>{{ stringify(form.controls.empty.errors) }}</pre>\n        </small>\n      </ion-label>\n      <mat-date-time-field\n        formControlName=\"empty\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [allowNoTime]=\"false\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button>OK</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                >\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          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                >\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n" }]
+            args: [{ selector: 'app-data-time-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\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>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Required, but allow no time</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-label>\n        <small>\n          <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}</pre\n          >\n        </small>\n      </ion-label>\n      <mat-date-time-field\n        formControlName=\"noTime\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [required]=\"true\"\n        [allowNoTime]=\"true\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button>OK</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                >\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\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)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </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          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                >\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          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\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          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                >\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-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i2$1.Platform }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });
 
 class DateTestPage {