@sumaris-net/ngx-components 18.23.58 → 18.23.59

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

@@ -757,10 +757,10 @@ export class MatDateTime {
     markForCheck() {
         this.cd.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.Renderer2 }, { 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: "18.2.14", type: MatDateTime, selector: "mat-date-time-field", inputs: { logPrefix: "logPrefix", placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], startDate: "startDate", datePickerFilter: "datePickerFilter", allowNoTime: ["allowNoTime", "allowNoTime", booleanAttribute], dottedMinutesInGap: ["dottedMinutesInGap", "dottedMinutesInGap", booleanAttribute], timeHoursOnly: ["timeHoursOnly", "timeHoursOnly", booleanAttribute], debug: ["debug", "debug", booleanAttribute], classList: ["class", "classList"], style: "style", hourMinWidth: "hourMinWidth", hourMaxWidth: "hourMaxWidth", appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, outputs: { focused: "focus", blurred: "blur", keydownEscape: "keydown.escape", keyupEnter: "keyup.enter" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "_matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{classList}}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }} {{classList}}\" [style]=\"style\">\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, datePicker)\"\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          <!-- Day input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"_formControl\"\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n            />\n          } @else {\n            <!-- Day input (desktop) -->\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\" [disabled]=\"disabled\"\n                        [startAt]=\"startDate\"\n                        [xPosition]=\"!mobile ? 'end' : undefined\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- Hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"(compact ? 0 : 1)\"\n               [style.--hour-min-width]=\"hourMinWidth\"\n               [style.--hour-max-width]=\"hourMaxWidth\"\n      >\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          <!-- Hour input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              (click)=\"openTimePicker($event)\"\n              readonly\n            />\n\n            <!-- Hide the final (hidden) input -->\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"required\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          } @else {\n            <!-- Hour input (desktop) -->\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"requiredTime\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n            <!-- Hide the final (hidden) input -->\n            <input\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          }\n\n          @if (!compact) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"_formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n            </button>\n          }\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <ngx-mat-timepicker\n            #timePicker\n            [isEsc]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"!mobile\"\n            [dottedMinutesInGap]=\"dottedMinutesInGap\"\n            [hoursOnly]=\"timeHoursOnly\"\n            [appendToInput]=\"!mobile\"\n            (timeSet)=\"_onTimePickerChanged($event)\"\n            color=\"accent\"\n          ></ngx-mat-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n  </ion-button>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: var(--hour-min-width, calc(55px + var(--button-count, 0px) * 24px));--max-width: var(--hour-max-width, calc(var(--min-width) + 10px));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.fill ion-col.hour mat-form-field ::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex}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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: 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: "component", type: i13.NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "directive", type: i13.NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "pipe", type: 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: "18.2.13", ngImport: i0, type: MatDateTime, deps: [{ token: i1.MomentDateAdapter }, { token: i2.TranslateService }, { token: i3.UntypedFormBuilder }, { token: i0.Renderer2 }, { 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: "18.2.13", type: MatDateTime, selector: "mat-date-time-field", inputs: { logPrefix: "logPrefix", placeholder: "placeholder", floatLabel: "floatLabel", mobile: ["mobile", "mobile", booleanAttribute], compact: ["compact", "compact", booleanAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute], clearable: ["clearable", "clearable", booleanAttribute], startDate: "startDate", datePickerFilter: "datePickerFilter", allowNoTime: ["allowNoTime", "allowNoTime", booleanAttribute], dottedMinutesInGap: ["dottedMinutesInGap", "dottedMinutesInGap", booleanAttribute], timeHoursOnly: ["timeHoursOnly", "timeHoursOnly", booleanAttribute], debug: ["debug", "debug", booleanAttribute], classList: ["class", "classList"], style: "style", hourMinWidth: "hourMinWidth", hourMaxWidth: "hourMaxWidth", appearance: "appearance", subscriptSizing: "subscriptSizing", formControl: "formControl", formControlName: "formControlName", required: "required", readonly: "readonly", tabindex: "tabindex" }, outputs: { focused: "focus", blurred: "blur", keydownEscape: "keydown.escape", keyupEnter: "keyup.enter" }, providers: [DEFAULT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "datePicker", first: true, predicate: ["datePicker"], descendants: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true }, { propertyName: "_matInputs", predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{classList}}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }} {{classList}}\" [style]=\"style\">\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, datePicker)\"\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          <!-- Day input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"_formControl\"\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n            />\n          } @else {\n            <!-- Day input (desktop) -->\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\" [disabled]=\"disabled\"\n                        [startAt]=\"startDate\"\n                        [xPosition]=\"!mobile ? 'end' : undefined\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- Hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"(compact ? 0 : 1)\"\n               [style.--hour-min-width]=\"hourMinWidth\"\n               [style.--hour-max-width]=\"hourMaxWidth\"\n      >\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          <!-- Hour input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              (click)=\"openTimePicker($event)\"\n              readonly\n            />\n\n            <!-- Hide the final (hidden) input -->\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"required\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          } @else {\n            <!-- Hour input (desktop) -->\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"requiredTime\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n            <!-- Hide the final (hidden) input -->\n            <input\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          }\n\n          @if (!compact) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"_formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n            </button>\n          }\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <ngx-mat-timepicker\n            #timePicker\n            [isEsc]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"!mobile\"\n            [dottedMinutesInGap]=\"dottedMinutesInGap\"\n            [hoursOnly]=\"timeHoursOnly\"\n            [appendToInput]=\"!mobile\"\n            (timeSet)=\"_onTimePickerChanged($event)\"\n            color=\"accent\"\n          ></ngx-mat-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n  </ion-button>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: var(--hour-min-width, calc(55px + var(--button-count, 0px) * 24px));--max-width: var(--hour-max-width, calc(var(--min-width) + 10px));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.fill ion-col.hour mat-form-field ::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex}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.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: 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: "component", type: i13.NgxMatTimepickerComponent, selector: "ngx-mat-timepicker", inputs: ["appendToInput", "color", "dottedMinutesInGap", "enableKeyboardInput", "format", "minutesGap", "cancelBtnTmpl", "confirmBtnTmpl", "defaultTime", "disableAnimation", "editableHintTmpl", "hoursOnly", "isEsc", "max", "min", "preventOverlayClick", "timepickerClass"], outputs: ["closed", "hourSelected", "opened", "timeChanged", "timeSet"] }, { kind: "directive", type: i13.NgxMatTimepickerDirective, selector: "[ngxMatTimepicker]", inputs: ["format", "max", "min", "ngxMatTimepicker", "value", "disableClick", "disabled"] }, { kind: "pipe", type: 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: "18.2.14", ngImport: i0, type: MatDateTime, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MatDateTime, decorators: [{
             type: Component,
             args: [{ selector: 'mat-date-time-field', providers: [DEFAULT_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- readonly -->\n@if (readonly) {\n  <mat-form-field\n    [floatLabel]=\"floatLabel | asFloatLabelType\"\n    [appearance]=\"appearance\"\n    [subscriptSizing]=\"subscriptSizing\"\n    class=\"mat-form-field-disabled {{classList}}\"\n  >\n    <div matPrefix>\n      <ng-container *ngTemplateOutlet=\"matPrefixTemplate\"></ng-container>\n    </div>\n\n    @if (floatLabel !== 'never' && !!placeholder) {\n      <mat-label>{{ placeholder }}</mat-label>\n    }\n\n    <input matInput hidden type=\"text\" readonly [formControl]=\"_formControl\" />\n    <ion-text>{{ _formControl.value | dateFormat: { pattern: displayPattern } }}</ion-text>\n\n    <div matSuffix>\n      <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n    </div>\n\n    <!-- hints -->\n    <mat-hint [class.cdk-visually-hidden]=\"_formControl.invalid\">\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  <!-- writable + time -->\n  <ion-grid class=\"ion-no-padding {{ appearance }} {{classList}}\" [style]=\"style\">\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, datePicker)\"\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          <!-- Day input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"dateControl\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              readonly\n            />\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"_formControl\"\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n            />\n          } @else {\n            <!-- Day input (desktop) -->\n            <input\n              matInput\n              #matInput\n              autocomplete=\"off\"\n              type=\"text\"\n              class=\"mat-input-element\"\n              [maskito]=\"maskitoDateOptions\"\n              [formControl]=\"dateControl\"\n              [placeholder]=\"datePlaceholder | translate\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openDatePicker($event, datePicker)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              [required]=\"required\"\n              [tabindex]=\"tabindex\"\n              [appAutofocus]=\"autofocus\"\n            />\n            <input\n              type=\"text\"\n              [formControl]=\"_formControl\"\n              hidden\n              [matDatepicker]=\"datePicker\"\n              [matDatepickerFilter]=\"datePickerFilter\"\n              (dateChange)=\"_onDatePickerChange($event)\"\n              readonly\n            />\n          }\n\n          <button\n            type=\"button\"\n            mat-icon-button\n            tabindex=\"-1\"\n            matSuffix\n            (click)=\"openDatePicker($event, datePicker)\"\n            [disabled]=\"_formControl.disabled\"\n          >\n            <mat-icon>{{ mobile ? 'date_range' : 'keyboard_arrow_down' }}</mat-icon>\n          </button>\n          @if (clearable) {\n            <button\n              matSuffix\n              mat-icon-button\n              tabindex=\"-1\"\n              type=\"button\"\n              (click)=\"clear($event)\"\n              [hidden]=\"_formControl.disabled || !_formControl.value\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n\n        <!-- The date picker -->\n        <mat-datepicker #datePicker\n                        [touchUi]=\"mobile\" [disabled]=\"disabled\"\n                        [startAt]=\"startDate\"\n                        [xPosition]=\"!mobile ? 'end' : undefined\">\n          <!-- Date picker buttons -->\n          @if (mobile) {\n            <mat-datepicker-actions>\n              <!-- Cancel button -->\n              <ion-button fill=\"clear\" color=\"dark\" matDatepickerCancel>\n                <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n              </ion-button>\n              <!-- Apply button -->\n              <ion-button fill=\"solid\" color=\"tertiary\" matDatepickerApply>\n                <ion-label>{{ timeControl.value || ('COMMON.TIME' | translate) }}</ion-label>\n                <ion-icon slot=\"end\" name=\"chevron-forward\"></ion-icon>\n              </ion-button>\n            </mat-datepicker-actions>\n          }\n        </mat-datepicker>\n      </ion-col>\n\n      <!-- Hour -->\n      <ion-col class=\"hour ion-no-padding\" [style.--button-count]=\"(compact ? 0 : 1)\"\n               [style.--hour-min-width]=\"hourMinWidth\"\n               [style.--hour-max-width]=\"hourMaxWidth\"\n      >\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          <!-- Hour input (mobile) -->\n          @if (mobile) {\n            <input\n              #matInput\n              type=\"text\"\n              class=\"mat-mdc-form-field-input-control mdc-text-field__input\"\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              (click)=\"openTimePicker($event)\"\n              readonly\n            />\n\n            <!-- Hide the final (hidden) input -->\n            <input\n              matInput\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"required\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          } @else {\n            <!-- Hour input (desktop) -->\n            <input\n              matInput\n              #matInput\n              type=\"text\"\n              [formControl]=\"timeControl\"\n              [maskito]=\"maskitoTimeOptions\"\n              class=\"mat-input-element\"\n              autocomplete=\"off\"\n              [placeholder]=\"timePlaceholder | translate\"\n              [required]=\"requiredTime\"\n              (keyup.enter)=\"keyupEnter.emit($event)\"\n              (keyup.arrowDown)=\"openTimePicker($event)\"\n              (keyup.escape)=\"_preventEvent($event)\"\n              (focus)=\"filterInputTextFocusEvent($event)\"\n              (blur)=\"filterInputTextBlurEvent($event)\"\n              [tabindex]=\"tabindex !== undefined ? tabindex + 1 : undefined\"\n            />\n            <!-- Hide the final (hidden) input -->\n            <input\n              hidden\n              type=\"text\"\n              readonly\n              [formControl]=\"timeControl\"\n              [required]=\"requiredTime\"\n              [ngxMatTimepicker]=\"timePicker\"\n              [format]=\"24\"\n            />\n          }\n\n          @if (!compact) {\n            <button\n              matSuffix\n              type=\"button\"\n              mat-icon-button\n              tabindex=\"-1\"\n              [disabled]=\"_formControl.disabled\"\n              (click)=\"openTimePicker($event)\"\n            >\n              <mat-icon>{{ !compact && mobile ? 'access_time' : 'keyboard_arrow_down' }}</mat-icon>\n            </button>\n          }\n\n          <div matSuffix>\n            <ng-container *ngTemplateOutlet=\"matSuffixTemplate\"></ng-container>\n          </div>\n\n          <ngx-mat-timepicker\n            #timePicker\n            [isEsc]=\"!mobile\"\n            [defaultTime]=\"'00:00'\"\n            [cancelBtnTmpl]=\"timePickerCancelButton\"\n            [confirmBtnTmpl]=\"timePickerOkButton\"\n            [preventOverlayClick]=\"mobile\"\n            [enableKeyboardInput]=\"!mobile\"\n            [dottedMinutesInGap]=\"dottedMinutesInGap\"\n            [hoursOnly]=\"timeHoursOnly\"\n            [appendToInput]=\"!mobile\"\n            (timeSet)=\"_onTimePickerChanged($event)\"\n            color=\"accent\"\n          ></ngx-mat-timepicker>\n        </mat-form-field>\n      </ion-col>\n    </ion-row>\n  </ion-grid>\n\n  <!-- Do the same as MatFormField since angular 15 (see component source)-->\n  <div\n    class=\"mat-mdc-form-field-subscript-wrapper\"\n    [class.mat-mdc-form-field-bottom-align]=\"subscriptSizing === 'fixed'\"\n    [class.mat-mdc-form-field-subscript-dynamic-size]=\"subscriptSizing === 'dynamic'\"\n  >\n    @if (_formControl.touched && _formControl.errors; as errors) {\n      <!-- errors -->\n      <div class=\"mat-mdc-form-field-error-wrapper\">\n        @if (errors | mapKeys | arrayFirst; as errorKey) {\n          @switch (errorKey) {\n            @case ('required') {\n              <mat-error translate>ERROR.FIELD_REQUIRED</mat-error>\n            }\n            @case ('validDate') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_TIME</mat-error>\n            }\n            @case ('dateIsAfter') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_AFTER' | translate: _formControl.errors.dateIsAfter }}\n              </mat-error>\n            }\n            @case ('dateIsBefore') {\n              <mat-error>\n                {{ 'ERROR.FIELD_NOT_VALID_DATE_BEFORE' | translate: _formControl.errors.dateIsBefore }}\n              </mat-error>\n            }\n            @case ('dateRange') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_RANGE</mat-error>\n            }\n            @case ('dateMaxDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MAX_DURATION</mat-error>\n            }\n            @case ('dateMinDuration') {\n              <mat-error translate>ERROR.FIELD_NOT_VALID_DATE_MIN_DURATION</mat-error>\n            }\n            @case ('msg') {\n              <mat-error>\n                {{\n                  _formControl.errors.msg?.key || _formControl.errors.msg | translate: _formControl.errors.msg?.params\n                }}\n              </mat-error>\n            }\n            @default {\n              <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n            }\n          }\n        } @else {\n          <ng-container *ngTemplateOutlet=\"matErrorTemplate\"></ng-container>\n        }\n      </div>\n    } @else {\n      <!-- hints -->\n      <ng-container *ngTemplateOutlet=\"matHintTemplate\"></ng-container>\n    }\n  </div>\n}\n\n<!-- cancel button -->\n<ng-template #timePickerCancelButton>\n  <ion-button fill=\"clear\" color=\"dark\">\n    <ion-label translate>COMMON.BTN_CANCEL</ion-label>\n  </ion-button>\n</ng-template>\n\n<!-- confirm button -->\n<ng-template #timePickerOkButton>\n  <ion-button fill=\"solid\" color=\"tertiary\">\n    <ion-label translate>COMMON.BTN_VALIDATE</ion-label>\n  </ion-button>\n</ng-template>\n\n<ng-template #matPrefixTemplate>\n  <ng-content select=\"[matPrefix]\"></ng-content>\n</ng-template>\n\n<ng-template #matSuffixTemplate>\n  <ng-content select=\"[matSuffix]\"></ng-content>\n</ng-template>\n\n<ng-template #matErrorTemplate>\n  <ng-content select=\"mat-error,[matError]\"></ng-content>\n</ng-template>\n\n<ng-template #matHintTemplate>\n  <div class=\"mat-mdc-form-field-hint-wrapper\">\n    <ng-content select=\"mat-hint:not([align='end']),[matHint]\"></ng-content>\n    <div class=\"mat-mdc-form-field-hint-spacer\"></div>\n    <ng-content select=\"mat-hint[align='end']\"></ng-content>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;width:100%;position:relative;--ion-grid-column-padding: 0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}mat-form-field input[readonly]{-webkit-user-select:none!important;user-select:none!important}mat-form-field .datetime-md{padding:0!important}mat-form-field button[hidden]{display:none}ion-row.no-wrap{flex-wrap:nowrap}ion-grid ion-col{--button-width: calc(var(--button-count, 0px) * 24px)}ion-grid.fill ion-col.day{--min-width: calc(100px + var(--button-width, 0px));min-width:var(--min-width)}ion-grid.fill ion-col.hour{--min-width: var(--hour-min-width, calc(55px + var(--button-count, 0px) * 24px));--max-width: var(--hour-max-width, calc(var(--min-width) + 10px));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.fill ion-col.hour mat-form-field ::ng-deep .mat-mdc-form-field-icon-suffix{display:inline-flex}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.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i3.FormGroupDirective, decorators: [{

package/esm2022/src/app/shared/material/datetime/testing/mat-date-time.test.mjs

@@ -130,10 +130,10 @@ export class DateTimeTestPage {
         this.memoryHide = false;
     }
     stringify = JSON.stringify;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i1.Platform }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Required, but allow no time</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-label>\n        <small>\n          <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}\nFocus: {{ hasFocus }}\n          </pre>\n        </small>\n      </ion-label>\n      <mat-date-time-field #tempField\n        formControlName=\"noTime\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [required]=\"true\"\n        [debug]=\"true\"\n        (focus)=\"hasFocus=true\"\n        (blur)=\"hasFocus=false\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button (click)=\"tempField.focus()\">Focus</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"true\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Suffix -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">matSuffix</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  hourMinWidth=\"93px\"\n                >\n                  <button\n                    matSuffix\n                    mat-icon-button\n                    type=\"button\"\n                    tabindex=\"-1\"\n                    [disabled]=\"(form | formGetControl: 'empty')?.disabled\"\n                  >\n                    <mat-icon>star_outline</mat-icon>\n                  </button>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Suffix -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">matSuffix</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  hourMinWidth=\"93px\"\n                >\n                  <button\n                    matSuffix\n                    mat-icon-button\n                    type=\"button\"\n                    tabindex=\"-1\"\n                    [disabled]=\"(form | formGetControl: 'empty')?.disabled\"\n                  >\n                    <mat-icon>star_outline</mat-icon>\n                  </button>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i9.MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "class", "style", "hourMinWidth", "hourMaxWidth", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i11.DateDiffDurationPipe, name: "dateDiffDuration" }, { kind: "pipe", type: i12.FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimeTestPage, deps: [{ token: i1.Platform }, { token: i2.UntypedFormBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DateTimeTestPage, selector: "app-data-time-test", ngImport: i0, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Required, but allow no time</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-label>\n        <small>\n          <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}\nFocus: {{ hasFocus }}\n          </pre>\n        </small>\n      </ion-label>\n      <mat-date-time-field #tempField\n        formControlName=\"noTime\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [required]=\"true\"\n        [debug]=\"true\"\n        (focus)=\"hasFocus=true\"\n        (blur)=\"hasFocus=false\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button (click)=\"tempField.focus()\">Focus</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"true\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Suffix -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">matSuffix</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  hourMinWidth=\"93px\"\n                >\n                  <button\n                    matSuffix\n                    mat-icon-button\n                    type=\"button\"\n                    tabindex=\"-1\"\n                    [disabled]=\"(form | formGetControl: 'empty')?.disabled\"\n                  >\n                    <mat-icon>star_outline</mat-icon>\n                  </button>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Suffix -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">matSuffix</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  hourMinWidth=\"93px\"\n                >\n                  <button\n                    matSuffix\n                    mat-icon-button\n                    type=\"button\"\n                    tabindex=\"-1\"\n                    [disabled]=\"(form | formGetControl: 'empty')?.disabled\"\n                  >\n                    <mat-icon>star_outline</mat-icon>\n                  </button>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n", dependencies: [{ kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i1.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i1.IonCardHeader, selector: "ion-card-header", inputs: ["color", "mode", "translucent"] }, { kind: "component", type: i1.IonCardSubtitle, selector: "ion-card-subtitle", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonCardTitle, selector: "ion-card-title", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i1.IonRow, selector: "ion-row" }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonBackButton, selector: "ion-back-button" }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "component", type: i9.MatDateTime, selector: "mat-date-time-field", inputs: ["logPrefix", "placeholder", "floatLabel", "mobile", "compact", "autofocus", "clearable", "startDate", "datePickerFilter", "allowNoTime", "dottedMinutesInGap", "timeHoursOnly", "debug", "class", "style", "hourMinWidth", "hourMaxWidth", "appearance", "subscriptSizing", "formControl", "formControlName", "required", "readonly", "tabindex"], outputs: ["focus", "blur", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: i10.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "pipe", type: i11.DateDiffDurationPipe, name: "dateDiffDuration" }, { kind: "pipe", type: i12.FormGetControlPipe, name: "formGetControl" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateTimeTestPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DateTimeTestPage, decorators: [{
             type: Component,
             args: [{ selector: 'app-data-time-test', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar color=\"primary\">\n    <ion-buttons slot=\"start\">\n      <ion-back-button></ion-back-button>\n    </ion-buttons>\n\n    <ion-title>Date/Time field test page</ion-title>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content>\n  <!-- Tab nav - mobile/desktop mode -->\n  <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n    <a mat-tab-link [active]=\"mode === 'mobile'\" (click)=\"toggleMode('mobile')\">\n      <mat-label>Mobile</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'desktop'\" (click)=\"toggleMode('desktop')\">\n      <mat-label>Desktop</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'memory'\" (click)=\"toggleMode('memory')\">\n      <mat-label>Memory leak debug</mat-label>\n    </a>\n    <a mat-tab-link [active]=\"mode === 'temp'\" (click)=\"toggleMode('temp')\">\n      <mat-label>Temporary</mat-label>\n    </a>\n  </nav>\n\n  <form #tabPanel class=\"form-container ion-padding\" [formGroup]=\"form\" (ngSubmit)=\"doSubmit($event)\">\n    <!-- debugging something -->\n    @if (mode === 'temp') {\n      <ion-row>\n        <ion-col>\n          <ion-text><h4>Required, but allow no time</h4></ion-text>\n        </ion-col>\n      </ion-row>\n      <ion-label>\n        <small>\n          <pre>\nValue: {{ stringify(form.controls.noTime.value) }}\nErrors: {{ stringify(form.controls.noTime.errors) }}\nFocus: {{ hasFocus }}\n          </pre>\n        </small>\n      </ion-label>\n      <mat-date-time-field #tempField\n        formControlName=\"noTime\"\n        placeholder=\"Date/Time\"\n        [mobile]=\"false\"\n        [clearable]=\"true\"\n        [required]=\"true\"\n        [debug]=\"true\"\n        (focus)=\"hasFocus=true\"\n        (blur)=\"hasFocus=false\"\n      >\n        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n      </mat-date-time-field>\n\n      <ion-button (click)=\"tempField.focus()\">Focus</ion-button>\n    }\n\n    <!-- debugging memory leak -->\n    @if (mode === 'memory') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Debug memory leak</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col size=\"auto\">\n            @if (!memoryTimer) {\n              <ion-button (click)=\"startMemoryTimer()\">Start timer</ion-button>\n            }\n            @if (memoryTimer) {\n              <ion-button (click)=\"stopMemoryTimer()\">Stop timer</ion-button>\n            }\n          </ion-col>\n          <ion-col size=\"4\">\n            <mat-form-field floatLabel=\"auto\">\n              <input matInput type=\"text\" hidden />\n              <mat-checkbox (change)=\"memoryMobile = $event.checked\" [checked]=\"memoryMobile\">Mobile ?</mat-checkbox>\n            </mat-form-field>\n          </ion-col>\n          <ion-col>\n            @if (!memoryHide) {\n              <mat-date-time-field\n                formControlName=\"emptyRequired\"\n                placeholder=\"Date/Time\"\n                [required]=\"true\"\n                [mobile]=\"memoryMobile\"\n                [clearable]=\"true\"\n              >\n                <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n              </mat-date-time-field>\n            }\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Mobile mode -->\n    @if (mode === 'mobile') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <mat-checkbox (change)=\"toggleAppearance($event)\">Change apparence</mat-checkbox>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Empty value + required -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"mobileReadonlyField.readonly = $event.checked\"\n                        [checked]=\"mobileReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #mobileReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                        [appearance]=\"appearance\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"true\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [appearance]=\"appearance\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col size=\"12\" size-md=\"6\" size-lg=\"6\">\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #hintAlignEnd [checked]=\"false\" [disabled]=\"!showHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"true\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showHint.checked && !hintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showHint.checked && hintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"true\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Suffix -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">matSuffix</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  hourMinWidth=\"93px\"\n                >\n                  <button\n                    matSuffix\n                    mat-icon-button\n                    type=\"button\"\n                    tabindex=\"-1\"\n                    [disabled]=\"(form | formGetControl: 'empty')?.disabled\"\n                  >\n                    <mat-icon>star_outline</mat-icon>\n                  </button>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- debug console -->\n        <ion-row>\n          <!-- buttons -->\n          <ion-col size=\"2\">\n            <!-- submit form -->\n            <ion-button (click)=\"doSubmit($event)\" fill=\"outline\">\n              <ion-icon name=\"checkmark\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n            <!-- clear log  -->\n            <ion-button (click)=\"clearLogPanel()\" fill=\"outline\">\n              <ion-icon name=\"trash\" slot=\"icon-only\"></ion-icon>\n            </ion-button>\n          </ion-col>\n          @if (showLogPanel) {\n            <ion-col size=\"10\">\n              <ion-text color=\"primary\">\n                Log:\n                <br />\n              </ion-text>\n              <div class=\"ion-padding-start\">\n                <ion-text color=\"medium\">\n                  <small [innerHTML]=\"logContent\"></small>\n                </ion-text>\n              </div>\n            </ion-col>\n          }\n        </ion-row>\n      </ion-grid>\n    }\n\n    <!-- Desktop mode -->\n    @if (mode === 'desktop') {\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <ion-text><h4>Desktop mode</h4></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <!-- Empty value -->\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.empty.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Empty required value -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Empty value + required</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.emptyRequired.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"emptyRequired\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Enable  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.enable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"enable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Disable -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Disable</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.disable.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"disable\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- NoTime  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">With value (No time)</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{\n                        stringify(form.controls.noTime.value) +\n                          ' noTime:' +\n                          (form.controls.noTime.value && form.controls.noTime.value[noTimeProperty])\n                      }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"noTime\"\n                  placeholder=\"Date/Time\"\n                  [required]=\"true\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Readonly  -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Readonly toggle</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.readonly.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox\n                        (change)=\"desktopReadonlyField.readonly = $event.checked\"\n                        [checked]=\"desktopReadonlyField.readonly\"\n                      >\n                        Readonly ?\n                      </mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopReadonlyHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        #desktopReadonlyField\n                        formControlName=\"readonly\"\n                        placeholder=\"Date/Time\"\n                        [readonly]=\"true\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopReadonlyHint.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n        <!-- Date diff -->\n        <ion-row>\n          <ion-col>\n            <ion-text><h5>Date diff</h5></ion-text>\n          </ion-col>\n        </ion-row>\n        <ion-row>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Start date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.startDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"startDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [required]=\"true\"\n                  [clearable]=\"true\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">End date time</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.endDateTime.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"endDateTime\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  [clearable]=\"true\"\n                  [required]=\"true\"\n                  [subscriptSizing]=\"'fixed'\"\n                >\n                  <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                  <!-- duration -->\n                  @if (form.controls.startDateTime.valid && form.controls.endDateTime.value; as value) {\n                    <mat-hint align=\"end\">\n                      <span translate>COMMON.DURATION_DOTS</span>\n                      &nbsp;{{\n                        {\n                          startValue: form.controls.startDateTime.value,\n                          endValue: value,\n                        } | dateDiffDuration\n                      }}\n                    </mat-hint>\n                  }\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Hint -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Hint</ion-label>\n                </ion-card-title>\n                <ion-card-subtitle>\n                  <ion-text color=\"medium\">\n                    <small>\n                      <pre>{{ stringify(form.controls.hint.value) }}</pre>\n                    </small>\n                  </ion-text>\n                </ion-card-subtitle>\n              </ion-card-header>\n              <ion-card-content>\n                <ion-grid>\n                  <ion-row>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #showDesktopHint [checked]=\"true\">Hint ?</mat-checkbox>\n                    </ion-col>\n                    <ion-col size=\"4\">\n                      <mat-checkbox #desktopHintAlignEnd [checked]=\"false\" [disabled]=\"!showDesktopHint.checked\">\n                        Align end ?\n                      </mat-checkbox>\n                    </ion-col>\n                  </ion-row>\n                  <ion-row>\n                    <ion-col>\n                      <mat-date-time-field\n                        formControlName=\"hint\"\n                        placeholder=\"Date/Time\"\n                        [mobile]=\"false\"\n                        [clearable]=\"true\"\n                      >\n                        <ion-icon matPrefix name=\"calendar-outline\"></ion-icon>\n                        @if (showDesktopHint.checked && !desktopHintAlignEnd.checked) {\n                          <mat-hint>Some hint</mat-hint>\n                        } @else if (showDesktopHint.checked && desktopHintAlignEnd.checked) {\n                          <mat-hint align=\"end\">End hint</mat-hint>\n                        }\n                      </mat-date-time-field>\n                    </ion-col>\n                  </ion-row>\n                </ion-grid>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n          <!-- Compact mode -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">Compact mode (for table)</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  floatLabel=\"never\"\n                  [mobile]=\"false\"\n                  [compact]=\"true\"\n                ></mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n\n          <!-- Suffix -->\n          <ion-col>\n            <ion-card>\n              <ion-card-header>\n                <ion-card-title>\n                  <ion-label color=\"primary\">matSuffix</ion-label>\n                </ion-card-title>\n              </ion-card-header>\n              <ion-card-content>\n                <mat-date-time-field\n                  formControlName=\"empty\"\n                  placeholder=\"Date/Time\"\n                  [mobile]=\"false\"\n                  hourMinWidth=\"93px\"\n                >\n                  <button\n                    matSuffix\n                    mat-icon-button\n                    type=\"button\"\n                    tabindex=\"-1\"\n                    [disabled]=\"(form | formGetControl: 'empty')?.disabled\"\n                  >\n                    <mat-icon>star_outline</mat-icon>\n                  </button>\n                </mat-date-time-field>\n              </ion-card-content>\n            </ion-card>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    }\n  </form>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i1.Platform }, { type: i2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }] });