@sumaris-net/ngx-components 2.7.3-rc27 → 2.7.3-rc29

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

@@ -7607,10 +7607,15 @@ class MatDate {
         // Open the picker
         this.openDatePicker();
     }
-    _checkIfTouched(opts) {
+    _onBlur() {
         if (this.textControl.touched) {
             // Auto fill data in case of partial input
             this.writeValue(this.formControl.value);
+        }
+        this._checkIfTouched();
+    }
+    _checkIfTouched(opts) {
+        if (this.textControl.touched) {
             this._onTouchedCallback();
             if (!opts || opts.emitEvent !== false) {
                 this.markForCheck();
@@ -7726,11 +7731,11 @@ class MatDate {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i1$1.TranslateService }, { token: i1$3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i1$3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: MatDate, selector: "mat-date-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", timezone: "timezone", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$3], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n  >\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      type=\"text\"\n      *ngIf=\"!mobile\"\n      [maskito]=\"maskitoOptions\"\n      [formControl]=\"textControl\"\n      (blur)=\"_checkIfTouched()\"\n      (keyup.arrowDown)=\"openDatePicker()\"\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      *ngIf=\"!mobile\"\n      [matDatepicker]=\"datePicker\"\n      [matDatepickerFilter]=\"datePickerFilter\"\n      (dateChange)=\"_onDatePickerChange($event)\"\n      readonly\n    />\n\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      *ngIf=\"mobile\"\n      [formControl]=\"textControl\"\n      [required]=\"required\"\n      [tabindex]=\"tabindex\"\n      readonly\n    />\n    <input\n      matInput\n      type=\"text\"\n      [formControl]=\"formControl\"\n      hidden\n      *ngIf=\"mobile\"\n      [matDatepicker]=\"datePicker\"\n      [matDatepickerFilter]=\"datePickerFilter\"\n      (dateChange)=\"_onDatePickerChange($event)\"\n      readonly\n    />\n\n    <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n      <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n    </button>\n\n    <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      <mat-datepicker-actions *ngIf=\"mobile\">\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      *ngIf=\"clearable\"\n      (click)=\"clear()\"\n      [hidden]=\"formControl.disabled || !formControl.value\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <!-- errors -->\n    <mat-error\n      *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\"\n      [ngSwitch]=\"errorKey\"\n    >\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n      <span *ngSwitchCase=\"'dateIsAfter'\">\n        {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n      </span>\n      <span *ngSwitchCase=\"'dateIsBefore'\">\n        {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n      </span>\n      <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n      <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n      <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n      <span *ngSwitchCase=\"'msg'\">\n        {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n      </span>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <!-- mat hint -->\n  <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.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: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.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.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.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: "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: "14.0.0", version: "17.1.3", type: MatDate, selector: "mat-date-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", timezone: "timezone", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$3], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n  >\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      type=\"text\"\n      *ngIf=\"!mobile\"\n      [maskito]=\"maskitoOptions\"\n      [formControl]=\"textControl\"\n      (blur)=\"_onBlur()\"\n      (keyup.arrowDown)=\"openDatePicker()\"\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      *ngIf=\"!mobile\"\n      [matDatepicker]=\"datePicker\"\n      [matDatepickerFilter]=\"datePickerFilter\"\n      (dateChange)=\"_onDatePickerChange($event)\"\n      readonly\n    />\n\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      *ngIf=\"mobile\"\n      [formControl]=\"textControl\"\n      [required]=\"required\"\n      [tabindex]=\"tabindex\"\n      readonly\n    />\n    <input\n      matInput\n      type=\"text\"\n      [formControl]=\"formControl\"\n      hidden\n      *ngIf=\"mobile\"\n      [matDatepicker]=\"datePicker\"\n      [matDatepickerFilter]=\"datePickerFilter\"\n      (dateChange)=\"_onDatePickerChange($event)\"\n      readonly\n    />\n\n    <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n      <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n    </button>\n\n    <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      <mat-datepicker-actions *ngIf=\"mobile\">\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      *ngIf=\"clearable\"\n      (click)=\"clear()\"\n      [hidden]=\"formControl.disabled || !formControl.value\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <!-- errors -->\n    <mat-error\n      *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\"\n      [ngSwitch]=\"errorKey\"\n    >\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n      <span *ngSwitchCase=\"'dateIsAfter'\">\n        {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n      </span>\n      <span *ngSwitchCase=\"'dateIsBefore'\">\n        {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n      </span>\n      <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n      <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n      <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n      <span *ngSwitchCase=\"'msg'\">\n        {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n      </span>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <!-- mat hint -->\n  <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.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: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.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.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.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: "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: "17.1.3", ngImport: i0, type: MatDate, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-date-field', providers: [DEFAULT_VALUE_ACCESSOR$3], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n  >\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      type=\"text\"\n      *ngIf=\"!mobile\"\n      [maskito]=\"maskitoOptions\"\n      [formControl]=\"textControl\"\n      (blur)=\"_checkIfTouched()\"\n      (keyup.arrowDown)=\"openDatePicker()\"\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      *ngIf=\"!mobile\"\n      [matDatepicker]=\"datePicker\"\n      [matDatepickerFilter]=\"datePickerFilter\"\n      (dateChange)=\"_onDatePickerChange($event)\"\n      readonly\n    />\n\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      *ngIf=\"mobile\"\n      [formControl]=\"textControl\"\n      [required]=\"required\"\n      [tabindex]=\"tabindex\"\n      readonly\n    />\n    <input\n      matInput\n      type=\"text\"\n      [formControl]=\"formControl\"\n      hidden\n      *ngIf=\"mobile\"\n      [matDatepicker]=\"datePicker\"\n      [matDatepickerFilter]=\"datePickerFilter\"\n      (dateChange)=\"_onDatePickerChange($event)\"\n      readonly\n    />\n\n    <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n      <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n    </button>\n\n    <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      <mat-datepicker-actions *ngIf=\"mobile\">\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      *ngIf=\"clearable\"\n      (click)=\"clear()\"\n      [hidden]=\"formControl.disabled || !formControl.value\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <!-- errors -->\n    <mat-error\n      *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\"\n      [ngSwitch]=\"errorKey\"\n    >\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n      <span *ngSwitchCase=\"'dateIsAfter'\">\n        {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n      </span>\n      <span *ngSwitchCase=\"'dateIsBefore'\">\n        {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n      </span>\n      <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n      <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n      <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n      <span *ngSwitchCase=\"'msg'\">\n        {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n      </span>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <!-- mat hint -->\n  <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"] }]
+            args: [{ selector: 'mat-date-field', providers: [DEFAULT_VALUE_ACCESSOR$3], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n\n  <div matSuffix>\n    <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n  </div>\n</mat-form-field>\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n  >\n    <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    <input\n      matInput\n      #matInput\n      autocomplete=\"off\"\n      type=\"text\"\n      *ngIf=\"!mobile\"\n      [maskito]=\"maskitoOptions\"\n      [formControl]=\"textControl\"\n      (blur)=\"_onBlur()\"\n      (keyup.arrowDown)=\"openDatePicker()\"\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      *ngIf=\"!mobile\"\n      [matDatepicker]=\"datePicker\"\n      [matDatepickerFilter]=\"datePickerFilter\"\n      (dateChange)=\"_onDatePickerChange($event)\"\n      readonly\n    />\n\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      *ngIf=\"mobile\"\n      [formControl]=\"textControl\"\n      [required]=\"required\"\n      [tabindex]=\"tabindex\"\n      readonly\n    />\n    <input\n      matInput\n      type=\"text\"\n      [formControl]=\"formControl\"\n      hidden\n      *ngIf=\"mobile\"\n      [matDatepicker]=\"datePicker\"\n      [matDatepickerFilter]=\"datePickerFilter\"\n      (dateChange)=\"_onDatePickerChange($event)\"\n      readonly\n    />\n\n    <button matSuffix type=\"button\" mat-icon-button tabindex=\"-1\" (click)=\"openDatePicker()\" [disabled]=\"disabled\">\n      <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n    </button>\n\n    <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      <mat-datepicker-actions *ngIf=\"mobile\">\n        <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n          <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n        </ion-button>\n        <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n          <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n        </ion-button>\n      </mat-datepicker-actions>\n    </mat-datepicker>\n\n    <button\n      matSuffix\n      mat-icon-button\n      tabindex=\"-1\"\n      type=\"button\"\n      *ngIf=\"clearable\"\n      (click)=\"clear()\"\n      [hidden]=\"formControl.disabled || !formControl.value\"\n    >\n      <mat-icon>close</mat-icon>\n    </button>\n\n    <!-- errors -->\n    <mat-error\n      *ngIf=\"formControl.touched && formControl.errors | mapKeys | arrayFirst; let errorKey\"\n      [ngSwitch]=\"errorKey\"\n    >\n      <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n      <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE</span>\n      <span *ngSwitchCase=\"'dateIsAfter'\">\n        {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n      </span>\n      <span *ngSwitchCase=\"'dateIsBefore'\">\n        {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n      </span>\n      <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n      <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n      <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n      <span *ngSwitchCase=\"'msg'\">\n        {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n      </span>\n    </mat-error>\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n\n  <!-- mat hint -->\n  <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i1$1.TranslateService }, { type: i1$3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i1$3.FormGroupDirective, decorators: [{
                     type: Optional
                 }] }], propDecorators: { mobile: [{
@@ -8131,7 +8136,7 @@ class MatDateTime {
         // Open the picker
         this.openTimePicker(event);
     }
-    _checkIfTouched() {
+    _onBlur() {
         if (this.dateControl.touched || this.timeControl.touched) {
             const dateStr = this.dateControl.value;
             // Auto fill data time/in case of partial input
@@ -8153,6 +8158,12 @@ class MatDateTime {
                 }
                 this.writeValue(date);
             }
+        }
+        // Check if touched
+        this._checkIfTouched();
+    }
+    _checkIfTouched() {
+        if (this.dateControl.touched || this.timeControl.touched) {
             this._onTouchedCallback();
             this.markForCheck();
         }
@@ -8321,11 +8332,11 @@ class MatDateTime {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", 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: "14.0.0", version: "17.1.3", type: MatDateTime, selector: "mat-date-time-field", inputs: { subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$2], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], 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<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n  <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\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          <!--          (focusin)=\"mobile && _preventEvent($event)\"-->\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Desktop -->\n          <input\n            matInput\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-input-element\"\n            [maskito]=\"maskitoDateOptions\"\n            *ngIf=\"!mobile\"\n            [formControl]=\"dateControl\"\n            (blur)=\"_checkIfTouched()\"\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            *ngIf=\"!mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\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            *ngIf=\"mobile\"\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            *ngIf=\"mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\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          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear($event)\"\n            [hidden]=\"formControl.disabled || !formControl.value\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{ 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        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\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          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input\n            matInput\n            #matInput\n            type=\"text\"\n            [formControl]=\"timeControl\"\n            *ngIf=\"!mobile\"\n            [maskito]=\"maskitoTimeOptions\"\n            class=\"mat-input-element\"\n            autocomplete=\"off\"\n            min=\"0\"\n            max=\"23\"\n            [required]=\"required\"\n            (keyup.arrowDown)=\"openTimePicker($event)\"\n            (keyup.escape)=\"_preventEvent($event)\"\n            (blur)=\"_checkIfTouched()\"\n            [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n          />\n\n          <input\n            #matInput\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"timeControl\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n            readonly\n          />\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && !mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"openTimePicker($event)\"\n          >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n          >\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.disabled]=\"true\"\n            (timeSet)=\"_onTimePickerChange($event)\"\n            [ESC]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"false\"\n            [disableAnimation]=\"true\"\n          >\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          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n    [ngSwitch]=\"_getDisplayedMessages()\"\n  >\n    <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n      <!-- errors -->\n      <mat-error\n        *ngIf=\"\n          formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n          let errorKey;\n          else: parentError\n        \"\n        [ngSwitch]=\"errorKey\"\n      >\n        <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n        <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n        <span *ngSwitchCase=\"'dateIsAfter'\">\n          {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n        </span>\n        <span *ngSwitchCase=\"'dateIsBefore'\">\n          {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n        </span>\n        <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        <span *ngSwitchCase=\"'msg'\">\n          {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n        </span>\n      </mat-error>\n      <ng-template #parentError>\n        <ng-content select=\"mat-error\"></ng-content>\n      </ng-template>\n    </div>\n    <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n      <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", 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.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}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}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.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: i1$2.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: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.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.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.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: "component", type: i12.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: MatDateTime, selector: "mat-date-time-field", inputs: { subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR$2], queries: [{ propertyName: "matError", first: true, predicate: MatError, descendants: true }], 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<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n  <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\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          <!--          (focusin)=\"mobile && _preventEvent($event)\"-->\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Desktop -->\n          <input\n            matInput\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-input-element\"\n            [maskito]=\"maskitoDateOptions\"\n            *ngIf=\"!mobile\"\n            [formControl]=\"dateControl\"\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            *ngIf=\"!mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\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            *ngIf=\"mobile\"\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            *ngIf=\"mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\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          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear($event)\"\n            [hidden]=\"formControl.disabled || !formControl.value\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{ 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        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\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          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input\n            matInput\n            #matInput\n            type=\"text\"\n            [formControl]=\"timeControl\"\n            *ngIf=\"!mobile\"\n            [maskito]=\"maskitoTimeOptions\"\n            class=\"mat-input-element\"\n            autocomplete=\"off\"\n            min=\"0\"\n            max=\"23\"\n            [required]=\"required\"\n            (keyup.arrowDown)=\"openTimePicker($event)\"\n            (keyup.escape)=\"_preventEvent($event)\"\n            (blur)=\"_checkIfTouched()\"\n            [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n          />\n\n          <input\n            #matInput\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"timeControl\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n            readonly\n          />\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && !mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"openTimePicker($event)\"\n          >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n          >\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.disabled]=\"true\"\n            (timeSet)=\"_onTimePickerChange($event)\"\n            [ESC]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"false\"\n            [disableAnimation]=\"true\"\n          >\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          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n    [ngSwitch]=\"_getDisplayedMessages()\"\n  >\n    <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n      <!-- errors -->\n      <mat-error\n        *ngIf=\"\n          formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n          let errorKey;\n          else: parentError\n        \"\n        [ngSwitch]=\"errorKey\"\n      >\n        <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n        <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n        <span *ngSwitchCase=\"'dateIsAfter'\">\n          {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n        </span>\n        <span *ngSwitchCase=\"'dateIsBefore'\">\n          {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n        </span>\n        <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        <span *ngSwitchCase=\"'msg'\">\n          {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n        </span>\n      </mat-error>\n      <ng-template #parentError>\n        <ng-content select=\"mat-error\"></ng-content>\n      </ng-template>\n    </div>\n    <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n      <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", 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.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}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}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i1$2.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: i1$2.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: i1$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1$2.IonRow, selector: "ion-row" }, { kind: "component", type: i1$2.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.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: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.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: "component", type: i12.NgxMaterialTimepickerComponent, selector: "ngx-material-timepicker", inputs: ["cancelBtnTmpl", "editableHintTmpl", "confirmBtnTmpl", "ESC", "enableKeyboardInput", "preventOverlayClick", "disableAnimation", "appendToInput", "hoursOnly", "defaultTime", "timepickerClass", "theme", "min", "max", "ngxMaterialTimepickerTheme", "format", "minutesGap"], outputs: ["timeSet", "opened", "closed", "hourSelected", "timeChanged"] }, { kind: "directive", type: i12.TimepickerDirective, selector: "[ngxTimepicker]", inputs: ["format", "min", "max", "ngxTimepicker", "value", "disabled", "disableClick"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateTime, decorators: [{
             type: Component,
-            args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR$2], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n  <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\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          <!--          (focusin)=\"mobile && _preventEvent($event)\"-->\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Desktop -->\n          <input\n            matInput\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-input-element\"\n            [maskito]=\"maskitoDateOptions\"\n            *ngIf=\"!mobile\"\n            [formControl]=\"dateControl\"\n            (blur)=\"_checkIfTouched()\"\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            *ngIf=\"!mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\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            *ngIf=\"mobile\"\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            *ngIf=\"mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\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          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear($event)\"\n            [hidden]=\"formControl.disabled || !formControl.value\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{ 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        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\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          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input\n            matInput\n            #matInput\n            type=\"text\"\n            [formControl]=\"timeControl\"\n            *ngIf=\"!mobile\"\n            [maskito]=\"maskitoTimeOptions\"\n            class=\"mat-input-element\"\n            autocomplete=\"off\"\n            min=\"0\"\n            max=\"23\"\n            [required]=\"required\"\n            (keyup.arrowDown)=\"openTimePicker($event)\"\n            (keyup.escape)=\"_preventEvent($event)\"\n            (blur)=\"_checkIfTouched()\"\n            [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n          />\n\n          <input\n            #matInput\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"timeControl\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n            readonly\n          />\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && !mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"openTimePicker($event)\"\n          >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n          >\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.disabled]=\"true\"\n            (timeSet)=\"_onTimePickerChange($event)\"\n            [ESC]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"false\"\n            [disableAnimation]=\"true\"\n          >\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          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n    [ngSwitch]=\"_getDisplayedMessages()\"\n  >\n    <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n      <!-- errors -->\n      <mat-error\n        *ngIf=\"\n          formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n          let errorKey;\n          else: parentError\n        \"\n        [ngSwitch]=\"errorKey\"\n      >\n        <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n        <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n        <span *ngSwitchCase=\"'dateIsAfter'\">\n          {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n        </span>\n        <span *ngSwitchCase=\"'dateIsBefore'\">\n          {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n        </span>\n        <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        <span *ngSwitchCase=\"'msg'\">\n          {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n        </span>\n      </mat-error>\n      <ng-template #parentError>\n        <ng-content select=\"mat-error\"></ng-content>\n      </ng-template>\n    </div>\n    <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n      <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", 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.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}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}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.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<mat-form-field\n  *ngIf=\"readonly; else writable\"\n  [floatLabel]=\"floatLabel | asFloatLabelType\"\n  [appearance]=\"appearance\"\n  class=\"mat-form-field-disabled\"\n>\n  <div matPrefix>\n    <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n  </div>\n\n  <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n  <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n  <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n</mat-form-field>\n\n<!-- writable + time -->\n<ng-template #writable>\n  <ion-grid class=\"ion-no-padding\" [class.fill]=\"appearance !== 'outline'\">\n    <ion-row class=\"ion-no-padding no-wrap\" nowrap>\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\">\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          <!--          (focusin)=\"mobile && _preventEvent($event)\"-->\n          <mat-label *ngIf=\"floatLabel !== 'never' && !!placeholder\">{{ placeholder }}</mat-label>\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          <!-- Desktop -->\n          <input\n            matInput\n            #matInput\n            autocomplete=\"off\"\n            type=\"text\"\n            class=\"mat-input-element\"\n            [maskito]=\"maskitoDateOptions\"\n            *ngIf=\"!mobile\"\n            [formControl]=\"dateControl\"\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            *ngIf=\"!mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\n          />\n\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            *ngIf=\"mobile\"\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            *ngIf=\"mobile\"\n            [matDatepicker]=\"datePicker\"\n            [matDatepickerFilter]=\"datePickerFilter\"\n            (dateChange)=\"_onDatePickerChange($event)\"\n            readonly\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          <button\n            matSuffix\n            mat-icon-button\n            tabindex=\"-1\"\n            type=\"button\"\n            *ngIf=\"clearable\"\n            (click)=\"clear($event)\"\n            [hidden]=\"formControl.disabled || !formControl.value\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          <mat-datepicker-actions *ngIf=\"mobile\">\n            <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n              <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n            </ion-button>\n            <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n              <ion-label>{{ 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        </mat-datepicker>\n\n        <!-- cancel button -->\n        <ng-template #dateHeader>\n          <ion-button fill=\"clear\" color=\"dark\">\n            <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n          </ion-button>\n        </ng-template>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\">\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          <mat-label *ngIf=\"placeholder && floatLabel !== 'never'\" translate>COMMON.TIME</mat-label>\n\n          <input\n            matInput\n            #matInput\n            type=\"text\"\n            [formControl]=\"timeControl\"\n            *ngIf=\"!mobile\"\n            [maskito]=\"maskitoTimeOptions\"\n            class=\"mat-input-element\"\n            autocomplete=\"off\"\n            min=\"0\"\n            max=\"23\"\n            [required]=\"required\"\n            (keyup.arrowDown)=\"openTimePicker($event)\"\n            (keyup.escape)=\"_preventEvent($event)\"\n            (blur)=\"_checkIfTouched()\"\n            [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n          />\n\n          <input\n            #matInput\n            type=\"text\"\n            class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n            *ngIf=\"mobile\"\n            [formControl]=\"timeControl\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n            readonly\n          />\n\n          <!-- Hide the final (hidden) input -->\n          <input\n            matInput\n            [formControl]=\"timeControl\"\n            hidden\n            [required]=\"required\"\n            [ngxTimepicker]=\"timePicker\"\n            [format]=\"24\"\n            readonly\n          />\n\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && !mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"openTimePicker($event)\"\n          >\n            <mat-icon>keyboard_arrow_down</mat-icon>\n          </button>\n          <button\n            matSuffix\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            *ngIf=\"!compact && mobile\"\n            [disabled]=\"formControl.disabled\"\n            (click)=\"_openTimePickerIfMobile($event)\"\n          >\n            <mat-icon>access_time</mat-icon>\n          </button>\n\n          <ngx-material-timepicker\n            #timePicker\n            [@.disabled]=\"true\"\n            (timeSet)=\"_onTimePickerChange($event)\"\n            [ESC]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"false\"\n            [disableAnimation]=\"true\"\n          >\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          </ngx-material-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFromField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper mat-mdc-form-field-bottom-align\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n    [ngSwitch]=\"_getDisplayedMessages()\"\n  >\n    <div class=\"mat-mdc-form-field-error-wrapper\" *ngSwitchCase=\"'error'\">\n      <!-- errors -->\n      <mat-error\n        *ngIf=\"\n          formControl.touched && formControl.invalid && formControl.errors | mapKeys | arrayFirst;\n          let errorKey;\n          else: parentError\n        \"\n        [ngSwitch]=\"errorKey\"\n      >\n        <span *ngSwitchCase=\"'required'\" translate>ERROR.FIELD_REQUIRED</span>\n        <span *ngSwitchCase=\"'validDate'\" translate>ERROR.FIELD_NOT_VALID_DATE_TIME</span>\n        <span *ngSwitchCase=\"'dateIsAfter'\">\n          {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n        </span>\n        <span *ngSwitchCase=\"'dateIsBefore'\">\n          {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n        </span>\n        <span *ngSwitchCase=\"'dateRange'\" translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n        <span *ngSwitchCase=\"'dateMaxDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n        <span *ngSwitchCase=\"'dateMinDuration'\" translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n        <span *ngSwitchCase=\"'msg'\">\n          {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n        </span>\n      </mat-error>\n      <ng-template #parentError>\n        <ng-content select=\"mat-error\"></ng-content>\n      </ng-template>\n    </div>\n    <div class=\"mat-mdc-form-field-hint-wrapper\" *ngSwitchCase=\"'hint'\">\n      <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #iconDesktop>\n  <mat-icon>keyboard_arrow_down</mat-icon>\n</ng-template>\n\n<ng-template #iconDate>\n  <mat-icon>date_range</mat-icon>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n", 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.fill ion-col.day{min-width:150px}ion-grid.fill ion-col.hour{min-width:75px;max-width:110px}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}mat-form-field.mat-form-field-disabled ion-col.day{min-width:185px}ion-grid.outline ion-col.day{min-width:185px}ion-grid.outline ion-col.hour{min-width:100px;max-width:110px}.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: [{