@sumaris-net/ngx-components 2.8.1-alpha3 → 2.8.1-beta2

package/esm2022/src/app/shared/material/datetime/material.date.mjs

@@ -385,10 +385,10 @@ export class MatDate {
             this.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    class=\"mat-form-field-disabled\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <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    <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n  <!-- mat hint -->\n  <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n}\n\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    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <button 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      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.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: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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.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: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i15.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i16.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatDate, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", 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], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    class=\"mat-form-field-disabled\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <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    <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n  <!-- mat hint -->\n  <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n}\n\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    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <button 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      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\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: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.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: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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.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: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i15.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i16.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatDate, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    class=\"mat-form-field-disabled\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    [appearance]=\"appearance\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <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    <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n      <!-- Date picker buttons -->\n      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n  <!-- mat hint -->\n  <div class=\"mat-form-field-subscript mat-form-field-subscript-wrapper\">\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </div>\n}\n\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    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <button 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      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\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: i2.TranslateService }, { type: i3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i3.FormGroupDirective, decorators: [{

package/esm2022/src/app/shared/material/datetime/material.dateshort.mjs

@@ -379,10 +379,10 @@ export class MatDateShort {
             this.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateShort, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: MatDateShort, selector: "mat-date-short-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\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    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <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    <mat-datepicker\n      #datePicker\n      startView=\"multi-year\"\n      [touchUi]=\"mobile\"\n      [disabled]=\"disabled\"\n      (yearSelected)=\"_closeDatePicker($event)\"\n      panelClass=\"mat-date-short-panel\"\n      [startAt]=\"startDate\"\n      >\n      <!-- Date picker buttons -->\n      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n}\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <button 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\n      #datePicker\n      startView=\"multi-year\"\n      [touchUi]=\"mobile\"\n      [disabled]=\"disabled\"\n      (yearSelected)=\"_closeDatePicker($event)\"\n      panelClass=\"mat-date-short-panel\"\n      [startAt]=\"startDate\"\n      >\n      <!-- Date picker buttons -->\n      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n</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}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}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.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: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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.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: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i15.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i16.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatDateShort, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MatDateShort, selector: "mat-date-short-field", inputs: { mobile: "mobile", formControl: "formControl", formControlName: "formControlName", placeholder: "placeholder", floatLabel: "floatLabel", appearance: "appearance", required: "required", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "_matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\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    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <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    <mat-datepicker\n      #datePicker\n      startView=\"multi-year\"\n      [touchUi]=\"mobile\"\n      [disabled]=\"disabled\"\n      (yearSelected)=\"_closeDatePicker($event)\"\n      panelClass=\"mat-date-short-panel\"\n      [startAt]=\"startDate\"\n      >\n      <!-- Date picker buttons -->\n      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n}\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <button 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\n      #datePicker\n      startView=\"multi-year\"\n      [touchUi]=\"mobile\"\n      [disabled]=\"disabled\"\n      (yearSelected)=\"_closeDatePicker($event)\"\n      panelClass=\"mat-date-short-panel\"\n      [startAt]=\"startDate\"\n      >\n      <!-- Date picker buttons -->\n      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n</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}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}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.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: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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.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: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i12.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i15.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i16.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateShort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatDateShort, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-short-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\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    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: datePattern } }}</ion-text>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n  </mat-form-field>\n} @else {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n    <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    <mat-datepicker\n      #datePicker\n      startView=\"multi-year\"\n      [touchUi]=\"mobile\"\n      [disabled]=\"disabled\"\n      (yearSelected)=\"_closeDatePicker($event)\"\n      panelClass=\"mat-date-short-panel\"\n      [startAt]=\"startDate\"\n      >\n      <!-- Date picker buttons -->\n      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n}\n\n<!-- writable -->\n<ng-template #writable>\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    (focus)=\"_openDatePickerIfMobile($event)\"\n    (click)=\"_openDatePickerIfMobile($event)\"\n    >\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    <!-- Desktop -->\n    @if (!mobile) {\n      <input\n        matInput\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\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    }\n    @if (!mobile) {\n      <input\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <!-- Mobile -->\n    @if (mobile) {\n      <input\n        #matInput\n        autocomplete=\"off\"\n        type=\"text\"\n        class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n        [formControl]=\"textControl\"\n        [required]=\"required\"\n        [tabindex]=\"tabindex\"\n        readonly\n        />\n    }\n    @if (mobile) {\n      <input\n        matInput\n        type=\"text\"\n        [formControl]=\"formControl\"\n        hidden\n        [matDatepicker]=\"datePicker\"\n        [matDatepickerFilter]=\"datePickerFilter\"\n        (dateChange)=\"_onDatePickerChange($event)\"\n        readonly\n        />\n    }\n\n    <button 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\n      #datePicker\n      startView=\"multi-year\"\n      [touchUi]=\"mobile\"\n      [disabled]=\"disabled\"\n      (yearSelected)=\"_closeDatePicker($event)\"\n      panelClass=\"mat-date-short-panel\"\n      [startAt]=\"startDate\"\n      >\n      <!-- Date picker buttons -->\n      @if (mobile) {\n        <mat-datepicker-actions>\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      }\n    </mat-datepicker>\n\n    @if (clearable) {\n      <button\n        matSuffix\n        mat-icon-button\n        tabindex=\"-1\"\n        type=\"button\"\n        (click)=\"clear($event)\"\n        [hidden]=\"formControl.disabled || !formControl.value\"\n        >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n\n    <!-- errors -->\n    @if (formControl.touched && formControl.errors | mapKeys | arrayFirst; as errorKey) {\n      <mat-error\n        >\n        @switch (errorKey) {\n          @case ('required') {\n            <span translate>ERROR.FIELD_REQUIRED</span>\n          }\n          @case ('validDate') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE</span>\n          }\n          @case ('dateIsAfter') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n            </span>\n          }\n          @case ('dateIsBefore') {\n            <span>\n              {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n            </span>\n          }\n          @case ('dateRange') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</span>\n          }\n          @case ('dateMaxDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</span>\n          }\n          @case ('dateMinDuration') {\n            <span translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</span>\n          }\n          @case ('msg') {\n            <span>\n              {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n            </span>\n          }\n        }\n      </mat-error>\n    }\n    <ng-content select=\"mat-error\"></ng-content>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- mat hint -->\n    <div class=\"mat-form-field-hint-wrapper\" [class.cdk-visually-hidden]=\"formControl.invalid\">\n      <div class=\"mat-form-field-hint-spacer\"></div>\n      <ng-content select=\"mat-hint\"></ng-content>\n    </div>\n  </mat-form-field>\n</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}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}\n"] }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i2.TranslateService }, { type: i3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i3.FormGroupDirective, decorators: [{

package/esm2022/src/app/shared/material/datetime/material.datetime.mjs

@@ -588,10 +588,10 @@ export class MatDateTime {
             this.markForCheck();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: MatDateTime, selector: "mat-date-time-field", inputs: { placeholder: "placeholder", floatLabel: "floatLabel", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR], 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@if(readonly) {\n  <mat-form-field\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    @if(floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n  </mat-form-field>\n\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Desktop -->\n          @if(!mobile) {\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n\n          } @else {\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              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"formControl.disabled || !formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if(mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"!compact ? 1 : 0\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          @if(floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if(!mobile) {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"required\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n          } @else {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n              readonly\n            />\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          @if(!compact && !mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          } @else if(!compact && mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n            >\n              <mat-icon>access_time</mat-icon>\n            </button>\n          }\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          </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\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if(formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if(formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          @switch(errorKey) {\n            @case('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case('dateIsAfter') {\n              <mat-error>\n               {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case('msg') {\n              <mat-error>\n                {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n              </mat-error>\n            }\n            @default {\n              <ng-content select=\"mat-error\"></ng-content>\n            }\n          }\n        } @else {\n          <ng-content select=\"mat-error\"></ng-content>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint[align='end']\"></ng-content>\n      </div>\n    }\n  </div>\n}\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\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", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.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: i5.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: i5.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i5.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonRow, selector: "ion-row" }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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.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: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i16.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i17.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }, { token: i3.FormGroupDirective, optional: true }, { token: MAT_FORM_FIELD_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MatDateTime, selector: "mat-date-time-field", inputs: { placeholder: "placeholder", floatLabel: "floatLabel", mobile: "mobile", compact: "compact", autofocus: "autofocus", startDate: "startDate", clearable: "clearable", datePickerFilter: "datePickerFilter", appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, providers: [DEFAULT_VALUE_ACCESSOR], 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@if(readonly) {\n  <mat-form-field\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    @if(floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n  </mat-form-field>\n\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Desktop -->\n          @if(!mobile) {\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n\n          } @else {\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              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"formControl.disabled || !formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if(mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"!compact ? 1 : 0\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          @if(floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if(!mobile) {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"required\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n          } @else {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n              readonly\n            />\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          @if(!compact && !mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          } @else if(!compact && mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n            >\n              <mat-icon>access_time</mat-icon>\n            </button>\n          }\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          </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\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if(formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if(formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          @switch(errorKey) {\n            @case('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case('dateIsAfter') {\n              <mat-error>\n               {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case('msg') {\n              <mat-error>\n                {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n              </mat-error>\n            }\n            @default {\n              <ng-content select=\"mat-error\"></ng-content>\n            }\n          }\n        } @else {\n          <ng-content select=\"mat-error\"></ng-content>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint[align='end']\"></ng-content>\n      </div>\n    }\n  </div>\n}\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\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", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"], dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.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: i5.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: i5.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i5.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i5.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i5.IonRow, selector: "ion-row" }, { kind: "component", type: i5.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.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.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: i2.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i13.AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i15.ArrayFirstPipe, name: "arrayFirst" }, { kind: "pipe", type: i16.MapKeysPipe, name: "mapKeys" }, { kind: "pipe", type: i17.AsFloatLabelTypePipe, name: "asFloatLabelType" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: MatDateTime, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MatDateTime, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if(readonly) {\n  <mat-form-field\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    @if(floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"formControl\" />\n    <ion-text>{{ formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n  </mat-form-field>\n\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{appearance}}\">\n    <ion-row class=\"ion-no-padding no-wrap\">\n      <!-- day -->\n      <ion-col class=\"day ion-no-padding\" [style.--button-count]=\"clearable ? 2 : 1\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (dateControl.invalid || formControl.invalid)\"\n          (click)=\"_openDatePickerIfMobile($event, datePicker)\"\n          (focus)=\"_openDatePickerIfMobile($event)\"\n        >\n\n          <div matPrefix>\n            <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n          </div>\n\n          @if (floatLabel !== 'never' && !!placeholder) {\n            <mat-label>{{ placeholder }}</mat-label>\n          }\n\n          <!-- Desktop -->\n          @if(!mobile) {\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (blur)=\"_onBlur()\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n\n          } @else {\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              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              type=\"text\"\n              [formControl]=\"formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"formControl.disabled || !formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker [touchUi]=\"mobile\" [disabled]=\"disabled\" [startAt]=\"startDate\">\n          <!-- Date picker buttons -->\n          @if(mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"!compact ? 1 : 0\">\n        <mat-form-field\n          [floatLabel]=\"floatLabel | asFloatLabelType\"\n          [appearance]=\"appearance\"\n          [subscriptSizing]=\"'dynamic'\"\n          [class.mdc-text-field--invalid]=\"formControl.touched && (timeControl.invalid || formControl.invalid)\"\n        >\n          @if(floatLabel !== 'never' && !!placeholder) {\n            <mat-label translate>COMMON.TIME</mat-label>\n          }\n\n          @if(!mobile) {\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"required\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (blur)=\"_onBlur()\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n          } @else {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n              readonly\n            />\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          @if(!compact && !mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>keyboard_arrow_down</mat-icon>\n            </button>\n          } @else if(!compact && mobile) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"formControl.disabled\"\n              (click)=\"_openTimePickerIfMobile($event)\"\n            >\n              <mat-icon>access_time</mat-icon>\n            </button>\n          }\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          </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\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if(formControl.touched && formControl.invalid) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if(formControl.errors | mapKeys | arrayFirst; as errorKey) {\n          @switch(errorKey) {\n            @case('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case('dateIsAfter') {\n              <mat-error>\n               {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case('msg') {\n              <mat-error>\n                {{ formControl.errors.msg?.key || formControl.errors.msg | translate: formControl.errors.msg?.params }}\n              </mat-error>\n            }\n            @default {\n              <ng-content select=\"mat-error\"></ng-content>\n            }\n          }\n        } @else {\n          <ng-content select=\"mat-error\"></ng-content>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <div class=\"mat-mdc-form-field-hint-wrapper\">\n        <ng-content select=\"mat-hint:not([align='end'])\"></ng-content>\n        <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n        <ng-content select=\"mat-hint[align='end']\"></ng-content>\n      </div>\n    }\n  </div>\n}\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\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", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: calc(55px + var(--button-width, 0px));--max-width: calc(65px + var(--button-width, 0px));min-width:var(--min-width);max-width:var(--max-width)}ion-grid.fill ion-col.hour mat-form-field{width:100%}ion-grid.fill ion-col.hour mat-form-field mat-label,ion-grid.fill ion-col.hour mat-form-field input[type=text]{text-align:left;min-width:52px}ion-grid.outline ion-col.day{min-width:calc(110px + var(--button-width))}ion-grid.outline ion-col.hour{--min-width: calc(65px + var(--button-width));--max-width: calc(75px + var(--button-width))}mat-form-field.mat-form-field-disabled ion-col.day{min-width:150px}.hour mat-form-field.mat-mdc-form-field-should-float .mat-mdc-form-field-placeholder{max-width:inherit}\n"] }]
         }], ctorParameters: () => [{ type: i1.MomentDateAdapter }, { type: i2.TranslateService }, { type: i3.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }, { type: i3.FormGroupDirective, decorators: [{