@hmcts/ccd-case-ui-toolkit 7.3.0-exui-3066-1 → 7.3.0-exui-3682

package/fesm2022/hmcts-ccd-case-ui-toolkit.mjs

@@ -8,13 +8,13 @@ import * as i1$1 from '@angular/router';
 import { RouterModule, NavigationStart, NavigationEnd } from '@angular/router';
 import * as i4 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormArray, FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import moment from 'moment';
 import { BehaviorSubject, throwError, Subject, EMPTY, Observable, skip, of, combineLatest, timer, forkJoin, fromEvent, Subscription } from 'rxjs';
 import * as i1$2 from '@angular/common/http';
 import { HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
 import { distinctUntilChanged, catchError, map, publish, refCount, switchMap, debounceTime, take, delay, finalize, timeout, mergeMap, retryWhen, tap, delayWhen, publishReplay, first, takeUntil, filter } from 'rxjs/operators';
 import { polling } from 'rx-polling-hmcts';
 import { Type, Exclude, Expose, plainToClassFromExist, plainToClass } from 'class-transformer';
+import moment from 'moment';
 import { __decorate, __metadata } from 'tslib';
 import * as _ from 'underscore';
 import 'reflect-metadata';
@@ -497,31 +497,17 @@ class DateInputComponent {
     writeValue(obj) {
         if (obj) {
             this.rawValue = this.removeMilliseconds(obj);
-            // for DateTime fields, convert from UTC to local time for display
-            if (this.isDateTime && this.rawValue.includes('T')) {
-                const utcMoment = moment.utc(this.rawValue);
-                const localMoment = utcMoment.local();
-                this.year = this.displayYear = localMoment.format('YYYY');
-                this.month = this.displayMonth = localMoment.format('MM');
-                this.day = this.displayDay = localMoment.format('DD');
-                this.hour = this.displayHour = localMoment.format('HH');
-                this.minute = this.displayMinute = localMoment.format('mm');
-                this.second = this.displaySecond = localMoment.format('ss');
-            }
-            else {
-                // for Date fields (no time), parse normally
-                // needs to handle also partial dates, e.g. -05-2016 (missing day)
-                const [datePart, timePart] = this.rawValue.split('T');
-                const dateValues = datePart.split('-');
-                this.year = this.displayYear = dateValues[0] || '';
-                this.month = this.displayMonth = dateValues[1] || '';
-                this.day = this.displayDay = dateValues[2] || '';
-                if (timePart) {
-                    const timeParts = timePart.split(':');
-                    this.hour = this.displayHour = timeParts[0] || '';
-                    this.minute = this.displayMinute = timeParts[1] || '';
-                    this.second = this.displaySecond = timeParts[2] || '';
-                }
+            // needs to handle also partial dates, e.g. -05-2016 (missing day)
+            const [datePart, timePart] = this.rawValue.split('T');
+            const dateValues = datePart.split('-');
+            this.year = this.displayYear = dateValues[0] || '';
+            this.month = this.displayMonth = dateValues[1] || '';
+            this.day = this.displayDay = dateValues[2] || '';
+            if (timePart) {
+                const timeParts = timePart.split(':');
+                this.hour = this.displayHour = timeParts[0] || '';
+                this.minute = this.displayMinute = timeParts[1] || '';
+                this.second = this.displaySecond = timeParts[2] || '';
             }
         }
     }
@@ -635,12 +621,7 @@ class DateInputComponent {
                     this.minute ? this.pad(this.minute) : '',
                     this.second ? this.pad(this.second) : ''
                 ].join(':');
-                const localDateTimeString = `${date}T${time}.000`;
-                // convert from local time to UTC for storage
-                const localMoment = moment(localDateTimeString);
-                const utcMoment = localMoment.utc();
-                // return in the expected format
-                return utcMoment.format('YYYY-MM-DDTHH:mm:ss.000');
+                return `${date}T${time}.000`;
             }
             else {
                 return date;
@@ -758,7 +739,7 @@ class DateInputComponent {
         }], isInvalid: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateInputComponent, { className: "DateInputComponent", filePath: "lib/components/form/date-input/date-input.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateInputComponent, { className: "DateInputComponent", filePath: "lib/components/form/date-input/date-input.component.ts", lineNumber: 21 }); })();
 
 const _c0$12 = ["*"];
 function AlertComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
@@ -2829,7 +2810,7 @@ class DatePipe {
     }
     transform(value, zone, format) {
         let resultDate = null;
-        const ISO_FORMAT_NO_TZ = 'YYYY-MM-DDTHH:mm:ss.SSS';
+        const ISO_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
         if (value) {
             // included to avoid editing the hour twice on second pass through
             // this occurs on case details when datepipe is applied twice
@@ -2839,46 +2820,29 @@ class DatePipe {
             const match = value.match(DatePipe.DATE_FORMAT_REGEXP);
             // Make sure we actually have a match.
             if (match) {
-                let momentDate = null;
-                const hasTime = match[4] && match[5] && match[6];
-                const hasTimezone = match[8];
-                if (hasTime) {
-                    if (hasTimezone) {
-                        const parsed = moment.parseZone(value);
-                        if (zone === 'local') {
-                            momentDate = parsed.local();
-                        }
-                        else {
-                            momentDate = parsed.utc();
-                        }
-                    }
-                    else {
-                        momentDate = moment.utc(value);
-                        if (zone === 'local') {
-                            momentDate = momentDate.local();
-                        }
-                    }
+                let offsetDate = null;
+                const date = this.getDate(match);
+                if (zone === 'local') {
+                    offsetDate = this.getOffsetDate(date);
                 }
                 else {
-                    // date only value - parse in local timezone to prevent day-shift issues
-                    momentDate = moment(value);
+                    offsetDate = this.getDate(match);
                 }
                 // 'short' format is meaningful to formatDate, but not the same meaning as in the unit tests
                 if (this.formatTrans && format && format !== 'short') {
                     // support for java style formatting strings for dates
                     format = this.translateDateFormat(format);
-                    resultDate = momentDate.format(format);
+                    resultDate = moment(offsetDate).format(format);
                 }
                 else {
                     // RDM-1149 changed the pipe logic so that it doesn't add an hour to 'Summer Time' dates on DateTime field type
-                    resultDate = `${momentDate.date()} ${DatePipe.MONTHS[momentDate.month()]} ${momentDate.year()}`;
+                    resultDate = `${offsetDate.getDate()} ${DatePipe.MONTHS[offsetDate.getMonth()]} ${offsetDate.getFullYear()}`;
                     if (match[4] && match[5] && match[6] && format !== 'short') {
                         resultDate += ', ';
-                        const hours = momentDate.hours();
-                        resultDate += `${this.getHour(hours.toString())}:`;
-                        resultDate += `${this.pad(momentDate.minutes())}:`;
-                        resultDate += `${this.pad(momentDate.seconds())} `;
-                        resultDate += (hours >= 12) ? 'PM' : 'AM';
+                        resultDate += `${this.getHour(offsetDate.getHours().toString())}:`;
+                        resultDate += `${this.pad(offsetDate.getMinutes())}:`;
+                        resultDate += `${this.pad(offsetDate.getSeconds())} `;
+                        resultDate += (this.toInt(offsetDate.getHours().toString()) >= 12) ? 'PM' : 'AM';
                     }
                 }
             }
@@ -2896,7 +2860,7 @@ class DatePipe {
                         return this.transform(shortISO, zone, format);
                     }
                     // If it did include time, we want a full ISO string.
-                    const thisMoment = moment(d).format(ISO_FORMAT_NO_TZ);
+                    const thisMoment = moment(d).format(ISO_FORMAT);
                     return this.transform(thisMoment, zone, format);
                 }
             }
@@ -2911,6 +2875,26 @@ class DatePipe {
             return format;
         }
     }
+    getOffsetDate(date) {
+        const localOffset = -date.getTimezoneOffset() / 60;
+        return new Date(date.getTime() + localOffset * 3600 * 1000);
+    }
+    getDate(match) {
+        const year = this.toInt(match[1]);
+        const month = this.toInt(match[2]) - 1;
+        const day = this.toInt(match[3]);
+        let resultDate;
+        if (match[4] && match[5] && match[6]) {
+            const hour = this.toInt(match[4]);
+            const minutes = this.toInt(match[5]);
+            const seconds = this.toInt(match[6]);
+            resultDate = new Date(year, month, day, hour, minutes, seconds, 0);
+        }
+        else {
+            resultDate = new Date(year, month, day);
+        }
+        return resultDate;
+    }
     getHour(hourStr) {
         let hourNum = this.toInt(hourStr);
         if (hourNum > 12) {
@@ -4402,7 +4386,7 @@ class FieldsUtils {
                                 // These two fields are date-time fields
                                 case 'dateTimeModified':
                                 case 'dateTimeCreated':
-                                    return { [k]: detail.value[k] ? moment.utc(detail.value[k]).local().toDate() : null, id: detail.id };
+                                    return { [k]: detail.value[k] ? new Date(detail.value[k]) : null, id: detail.id };
                                 // This field is a "yes/no" field
                                 case 'hearingRelevant':
                                     return detail.value[k].toUpperCase() === 'YES' ? { [k]: true, id: detail.id } : { [k]: false, id: detail.id };
@@ -15031,12 +15015,6 @@ class ReadComplexFieldComponent extends AbstractFieldReadComponent {
 
 class ReadDateFieldComponent extends AbstractFieldReadComponent {
     timeZone = 'utc';
-    ngOnInit() {
-        super.ngOnInit();
-        if (this.caseField?.field_type.id === 'DateTime') {
-            this.timeZone = 'local';
-        }
-    }
     static ɵfac = /*@__PURE__*/ (() => { let ɵReadDateFieldComponent_BaseFactory; return function ReadDateFieldComponent_Factory(__ngFactoryType__) { return (ɵReadDateFieldComponent_BaseFactory || (ɵReadDateFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadDateFieldComponent)))(__ngFactoryType__ || ReadDateFieldComponent); }; })();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadDateFieldComponent, selectors: [["ccd-read-date-field"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 5, consts: [[1, "text-16"]], template: function ReadDateFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "span", 0);
@@ -15045,14 +15023,14 @@ class ReadDateFieldComponent extends AbstractFieldReadComponent {
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, ctx.caseField.value, ctx.timeZone, ctx.caseField.dateTimeDisplayFormat));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, ctx.caseField.value, "utc", ctx.caseField.dateTimeDisplayFormat));
         } }, dependencies: [DatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadDateFieldComponent, [{
         type: Component,
         args: [{
                 selector: 'ccd-read-date-field',
-                template: `<span class="text-16">{{caseField.value | ccdDate:timeZone:caseField.dateTimeDisplayFormat}}</span>`,
+                template: `<span class="text-16">{{caseField.value | ccdDate:'utc':caseField.dateTimeDisplayFormat}}</span>`,
                 standalone: false
             }]
     }], null, null); })();
@@ -29271,7 +29249,7 @@ function DatetimePickerComponent_span_5_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r1.localDisplayControl.errors, ctx_r1.caseField.label));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r1.dateControl.errors, ctx_r1.caseField.label));
 } }
 function DatetimePickerComponent_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 13);
@@ -29315,7 +29293,6 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
     datetimePicker;
     inputElement;
     dateControl = new FormControl(new Date());
-    localDisplayControl;
     minimumDate = new Date('01/01/1800');
     maximumDate = null;
     momentFormat = 'YYYY-MM-DDTHH:mm:ss.SSS';
@@ -29327,49 +29304,21 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
     ngOnInit() {
         this.dateTimeEntryFormat = this.formatTranslationService.showOnlyDates(this.caseField.dateTimeEntryFormat);
         this.configureDatePicker(this.dateTimeEntryFormat);
-        const existingControl = (this.parent || this.formGroup)?.controls?.[this.caseField.id];
-        // for when navigating back to an existing form
+        // set date control based on mandatory field
         this.dateControl = (this.caseField.isMandatory ?
             this.registerControl(new FormControl(this.caseField.value || '', [Validators.required]))
             : this.registerControl(new FormControl(this.caseField.value)));
-        let initialUtcValue = this.dateControl.value;
-        let initialLocalValue;
-        // for DateTime fields, convert UTC to local for display
-        if (initialUtcValue && this.caseField.field_type.type === 'DateTime') {
-            const utcMoment = moment.utc(initialUtcValue);
-            const localMoment = utcMoment.local();
-            initialLocalValue = localMoment.format('YYYY-MM-DDTHH:mm:ss.SSS');
-        }
-        else {
-            initialLocalValue = initialUtcValue || '';
-        }
-        this.localDisplayControl = new FormControl(initialLocalValue);
-        // sync local display control to main control with UTC conversion
-        this.localDisplayControl.valueChanges.subscribe(localValue => {
-            if (this.caseField.field_type.type === 'DateTime' && localValue) {
-                const parsedLocal = moment(localValue, this.momentFormat);
-                if (parsedLocal.isValid()) {
-                    const utcValue = parsedLocal.utc().format(this.momentFormat);
-                    this.dateControl.setValue(utcValue, { emitEvent: false });
-                }
-                else {
-                    this.dateControl.setValue(localValue, { emitEvent: false });
-                }
-            }
-            else {
-                this.dateControl.setValue(localValue, { emitEvent: false });
-            }
-        });
-        this.localDisplayControl.statusChanges.subscribe(() => {
-            this.minError = this.localDisplayControl.hasError('matDatetimePickerMin');
-            this.maxError = this.localDisplayControl.hasError('matDatetimePickerMax');
-        });
         // in resetting the format just after the page initialises, the input can be reformatted
         // otherwise the last format given will be how the text shown will be displayed
         setTimeout(() => {
             this.setDateTimeFormat();
             this.formatValueAndSetErrors();
         }, 1000);
+        // when the status changes check that the maximum/minimum date has not been exceeded
+        this.dateControl.statusChanges.subscribe(() => {
+            this.minError = this.dateControl.hasError('matDatetimePickerMin');
+            this.maxError = this.dateControl.hasError('matDatetimePickerMax');
+        });
     }
     setDateTimeFormat() {
         this.ngxMatDateFormats.parse.dateInput = this.dateTimeEntryFormat;
@@ -29452,15 +29401,15 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
     }
     yearSelected(event) {
         if (this.startView === 'multi-year' && this.yearSelection) {
-            this.localDisplayControl.patchValue(event.toISOString());
+            this.dateControl.patchValue(event.toISOString());
             this.datetimePicker.close();
             this.valueChanged();
         }
     }
     monthSelected(event) {
         if (this.startView === 'multi-year') {
-            this.localDisplayControl.patchValue(event.toISOString());
-            this.localDisplayControl.patchValue(event.toISOString());
+            this.dateControl.patchValue(event.toISOString());
+            this.dateControl.patchValue(event.toISOString());
             this.datetimePicker.close();
             this.valueChanged();
         }
@@ -29468,37 +29417,21 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
     formatValueAndSetErrors() {
         if (this.inputElement.nativeElement.value) {
             let formValue = this.inputElement.nativeElement.value;
-            const parsedMoment = moment(formValue, this.dateTimeEntryFormat);
-            if (parsedMoment.isValid()) {
-                // format the value in local time
-                // localDisplayControl will auto-sync to dateControl with UTC conversion
-                formValue = parsedMoment.format(this.momentFormat);
-                this.localDisplayControl.setValue(formValue);
+            formValue = moment(formValue, this.dateTimeEntryFormat).format(this.momentFormat);
+            if (formValue !== 'Invalid date') {
+                // if not invalid set the value as the formatted value
+                this.dateControl.setValue(formValue);
             }
             else {
                 // ensure that the datepicker picks up the invalid error
                 const keepErrorText = this.inputElement.nativeElement.value;
-                this.localDisplayControl.setValue(keepErrorText);
                 this.dateControl.setValue(keepErrorText);
                 this.inputElement.nativeElement.value = keepErrorText;
             }
         }
         else {
-            // input is empty - check if we need to sync from control values
-            if (this.localDisplayControl.value) {
-                // control has a value but input doesn't - this happens when navigating back
-                // manually sync the control value to the input element
-                const controlValue = this.localDisplayControl.value;
-                const parsedMoment = moment(controlValue, this.momentFormat);
-                if (parsedMoment.isValid()) {
-                    const formattedValue = parsedMoment.format(this.dateTimeEntryFormat);
-                    this.inputElement.nativeElement.value = formattedValue;
-                }
-            }
-            else if (!this.dateControl.value) {
-                this.localDisplayControl.setValue('');
-                this.dateControl.setValue('');
-            }
+            // ensure required errors are picked up if relevant
+            this.dateControl.setValue('');
         }
     }
     static ɵfac = function DatetimePickerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatetimePickerComponent)(i0.ɵɵdirectiveInject(FormatTranslatorService), i0.ɵɵdirectiveInject(NGX_MAT_DATE_FORMATS)); };
@@ -29516,8 +29449,8 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
                     useClass: NgxMatMomentAdapter,
                     deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
                 },
-                { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } }
-            ]), i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 27, consts: [["input", ""], ["picker", ""], [1, "govuk-form-group", "bottom-30", 3, "id", "ngClass"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "datepicker-container"], [1, "govuk-input", 3, "focusin", "focusout", "dateChange", "min", "max", "formControl", "ngxMatDatetimePicker"], ["matSuffix", "", "id", "pickerOpener", 3, "for"], [3, "yearSelected", "monthSelected", "opened", "color", "touchUi", "hideTime", "startView", "stepHour", "stepSecond", "stepMinute", "showSeconds", "showSpinners", "disableMinute", "enableMeridian"], ["mat-raised-button", "", "color", "primary", "ngxMatDatepickerApply", ""], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function DatetimePickerComponent_Template(rf, ctx) { if (rf & 1) {
+                { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
+            ]), i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 27, consts: [["input", ""], ["picker", ""], [1, "govuk-form-group", "bottom-30", 3, "id", "ngClass"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "datepicker-container"], ["ng-model-options", "{timezone:'utc'}", 1, "govuk-input", 3, "focusin", "focusout", "dateChange", "min", "max", "formControl", "ngxMatDatetimePicker"], ["matSuffix", "", "id", "pickerOpener", 3, "for"], [3, "yearSelected", "monthSelected", "opened", "color", "touchUi", "hideTime", "startView", "stepHour", "stepSecond", "stepMinute", "showSeconds", "showSpinners", "disableMinute", "enableMeridian"], ["mat-raised-button", "", "color", "primary", "ngxMatDatepickerApply", ""], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function DatetimePickerComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 2)(1, "fieldset")(2, "legend");
             i0.ɵɵtemplate(3, DatetimePickerComponent_span_3_Template, 3, 3, "span", 3)(4, DatetimePickerComponent_span_4_Template, 3, 3, "span", 4)(5, DatetimePickerComponent_span_5_Template, 3, 4, "span", 5)(6, DatetimePickerComponent_span_6_Template, 3, 3, "span", 5)(7, DatetimePickerComponent_span_7_Template, 3, 3, "span", 5);
@@ -29533,20 +29466,20 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
             i0.ɵɵelementEnd()()()()()();
         } if (rf & 2) {
             const picker_r3 = i0.ɵɵreference(13);
-            i0.ɵɵproperty("id", ctx.caseField.id)("ngClass", i0.ɵɵpureFunction1(25, _c2$2, ctx.localDisplayControl && !ctx.localDisplayControl.valid && ctx.localDisplayControl.dirty));
+            i0.ɵɵproperty("id", ctx.caseField.id)("ngClass", i0.ɵɵpureFunction1(25, _c2$2, ctx.dateControl && !ctx.dateControl.valid && ctx.dateControl.dirty));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.caseField.label);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.caseField.hint_text);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.localDisplayControl && ctx.localDisplayControl.errors && ctx.localDisplayControl.dirty && !(ctx.minError || ctx.maxError));
+            i0.ɵɵproperty("ngIf", ctx.dateControl && ctx.dateControl.errors && ctx.dateControl.dirty && !(ctx.minError || ctx.maxError));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.localDisplayControl && ctx.localDisplayControl.dirty && ctx.minError);
+            i0.ɵɵproperty("ngIf", ctx.dateControl && ctx.dateControl.dirty && ctx.minError);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.localDisplayControl && ctx.localDisplayControl.dirty && ctx.maxError);
+            i0.ɵɵproperty("ngIf", ctx.dateControl && ctx.dateControl.dirty && ctx.maxError);
             i0.ɵɵadvance(2);
             i0.ɵɵattribute("aria-label", i0.ɵɵinterpolate1("Please enter a date and time in the format | rpxTranslate ", ctx.dateTimeEntryFormat));
-            i0.ɵɵproperty("min", ctx.minDate(ctx.caseField))("max", ctx.maxDate(ctx.caseField))("formControl", ctx.localDisplayControl)("ngxMatDatetimePicker", picker_r3);
+            i0.ɵɵproperty("min", ctx.minDate(ctx.caseField))("max", ctx.maxDate(ctx.caseField))("formControl", ctx.dateControl)("ngxMatDatetimePicker", picker_r3);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("for", picker_r3);
             i0.ɵɵadvance();
@@ -29562,8 +29495,8 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
                         useClass: NgxMatMomentAdapter,
                         deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
                     },
-                    { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } }
-                ], standalone: false, template: "<div class=\"govuk-form-group  bottom-30\" [id]=\"caseField.id\"\n     [ngClass]=\"{'form-group-error': localDisplayControl && !localDisplayControl.valid && localDisplayControl.dirty}\">\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n      <span class=\"error-message\"\n            *ngIf=\"localDisplayControl && localDisplayControl.errors && localDisplayControl.dirty && !(minError || maxError)\">{{(localDisplayControl.errors | ccdFirstError:caseField.label)}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"localDisplayControl && localDisplayControl.dirty && minError\">{{'This date is older than the minimum date allowed' | rpxTranslate}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"localDisplayControl && localDisplayControl.dirty && maxError\">{{'This date is later than the maximum date allowed' | rpxTranslate}}</span>\n    </legend>\n    <div class=\"datepicker-container\">\n      <input class=\"govuk-input\"\n             #input\n             attr.aria-label=\"Please enter a date and time in the format | rpxTranslate {{dateTimeEntryFormat}}\"\n             [min]=\"minDate(caseField)\"\n             [max]=\"maxDate(caseField)\"\n             [formControl]=\"localDisplayControl\"\n             [ngxMatDatetimePicker]=\"picker\"\n             (focusin)=\"focusIn()\"\n             (focusout)=\"focusOut()\"\n             (dateChange)=\"valueChanged()\"\n      >\n      <mat-datepicker-toggle matSuffix [for]=\"picker\" id=\"pickerOpener\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #picker\n                               [color]=\"color\"\n                               [touchUi]=\"touchUi\"\n                               [hideTime]=\"hideTime\"\n                               [startView]=\"startView\"\n                               [stepHour]=\"stepHour\"\n                               [stepSecond]=\"stepSecond\"\n                               [stepMinute]=\"stepMinute\"\n                               [showSeconds]=\"showSeconds\"\n                               [showSpinners]=\"showSpinners\"\n                               [disableMinute]=\"disableMinute\"\n                               [enableMeridian]=\"enableMeridian\"\n                               (yearSelected)=\"yearSelected($event)\"\n                               (monthSelected)=\"monthSelected($event)\"\n                               (opened)=\"toggleClick()\"\n      >\n        <ngx-mat-datepicker-actions>\n          <button mat-raised-button color=\"primary\" ngxMatDatepickerApply>Confirm</button>\n        </ngx-mat-datepicker-actions>\n      </ngx-mat-datetime-picker>\n    </div>\n  </fieldset>\n</div>\n", styles: ["@charset \"UTF-8\";.datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #ffdd00;border:1px solid black}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #ffdd00}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:5px 0 0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base:focus{outline:1px solid #fd0}.cdk-overlay-container .mat-datepicker-content{border:1px solid black;border-radius:0;max-width:295px;background:#fff}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th.ng-star-inserted{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;column-width:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th{visibility:hidden}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:after{visibility:visible;color:#000;position:relative;left:-15px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(1):after{content:\"MON\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(2):after{left:-12px;content:\"TUE\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(3):after{left:-18px;content:\"WED\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(4):after{left:-14px;content:\"THU\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(5):after{left:-10px;content:\"FRI\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(6):after{content:\"SAT\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(7):after{content:\"SUN\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true],.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-pressed=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:nth-of-type(1){visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{height:80px;padding-top:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table{margin-left:0!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tbody{position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base .mat-icon-button .mat-button-wrapper{width:auto;height:auto}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base .mat-icon-button:focus{outline:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child{position:absolute;left:49px;top:15px;z-index:2}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:first-child [aria-label=\"expand_less icon\"]{position:absolute;left:-2px;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(3) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:82px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(5) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:169px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(1) [aria-label=\"expand_less icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(2) [aria-label=\"expand_less icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2){display:flex;padding:20px 0 20px 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field{width:50px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field:before{color:#000;content:\"Hours\";position:relative;top:-5px;left:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-child(3) .mat-form-field:before{color:#000;content:\"Minutes\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:last-child{text-align:left;left:-15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .mat-form-field-disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-of-type(5) .mat-form-field:before{color:#000;content:\"Seconds\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian{border-bottom:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button{height:30px;top:21px;border-radius:0;color:#000;border-color:#000;background-color:#dee0e2;display:flex;justify-content:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button .mat-button-wrapper{position:relative;top:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4){display:flex;padding:2rem 0 2rem 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td:last-child{text-align:left}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child{position:absolute;left:49px;top:40px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:first-child [aria-label=\"expand_more icon\"]{position:absolute;top:15px;left:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(3) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;left:82px!important;top:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(5) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;top:15px;left:169px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-last-child(1) [aria-label=\"expand_more icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-last-child(1).ng-star-inserted [aria-label=\"expand_more icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr td{padding:0;border-bottom:0;position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .spacer{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon{visibility:hidden;display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-button-wrapper{display:block;width:15px;height:8px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-wrapper{padding-bottom:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field{width:auto;max-width:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_less icon\"].mat-icon-button .mat-button-wrapper:after{content:\" \\25b2\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_more icon\"].mat-icon-button .mat-button-wrapper:after{content:\"\\25bc\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex .mat-form-field-infix{border:1px solid black;height:20px;width:37px;display:flex;justify-content:center;align-items:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-underline{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input{height:33px;width:37px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions{margin-top:120px;padding:8px 8px 28px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}\n"] }]
+                    { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
+                ], standalone: false, template: "<div class=\"govuk-form-group  bottom-30\" [id]=\"caseField.id\"\n     [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && dateControl.dirty}\">\n  <fieldset>\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{(caseField | ccdFieldLabel)}}</span>\n      <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n      <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.errors && dateControl.dirty && !(minError || maxError)\">{{(dateControl.errors | ccdFirstError:caseField.label)}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && minError\">{{'This date is older than the minimum date allowed' | rpxTranslate}}</span>\n            <span class=\"error-message\"\n            *ngIf=\"dateControl && dateControl.dirty && maxError\">{{'This date is later than the maximum date allowed' | rpxTranslate}}</span>\n    </legend>\n    <div class=\"datepicker-container\">\n      <input class=\"govuk-input\"\n             #input\n             attr.aria-label=\"Please enter a date and time in the format | rpxTranslate {{dateTimeEntryFormat}}\"\n             [min]=\"minDate(caseField)\"\n             [max]=\"maxDate(caseField)\"\n             [formControl]=\"dateControl\"\n             [ngxMatDatetimePicker]=\"picker\"\n             (focusin)=\"focusIn()\"\n             (focusout)=\"focusOut()\"\n             (dateChange)=\"valueChanged()\"\n             ng-model-options=\"{timezone:'utc'}\"\n      >\n      <mat-datepicker-toggle matSuffix [for]=\"picker\" id=\"pickerOpener\"></mat-datepicker-toggle>\n      <ngx-mat-datetime-picker #picker\n                               [color]=\"color\"\n                               [touchUi]=\"touchUi\"\n                               [hideTime]=\"hideTime\"\n                               [startView]=\"startView\"\n                               [stepHour]=\"stepHour\"\n                               [stepSecond]=\"stepSecond\"\n                               [stepMinute]=\"stepMinute\"\n                               [showSeconds]=\"showSeconds\"\n                               [showSpinners]=\"showSpinners\"\n                               [disableMinute]=\"disableMinute\"\n                               [enableMeridian]=\"enableMeridian\"\n                               (yearSelected)=\"yearSelected($event)\"\n                               (monthSelected)=\"monthSelected($event)\"\n                               (opened)=\"toggleClick()\"\n      >\n        <ngx-mat-datepicker-actions>\n          <button mat-raised-button color=\"primary\" ngxMatDatepickerApply>Confirm</button>\n        </ngx-mat-datepicker-actions>\n      </ngx-mat-datetime-picker>\n    </div>\n  </fieldset>\n</div>\n", styles: ["@charset \"UTF-8\";.datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #ffdd00;border:1px solid black}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #ffdd00}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base{width:32px;height:32px;padding:5px 0 0}.datepicker-container .mat-mdc-icon-button.mat-mdc-button-base:focus{outline:1px solid #fd0}.cdk-overlay-container .mat-datepicker-content{border:1px solid black;border-radius:0;max-width:295px;background:#fff}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid black}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th.ng-star-inserted{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;column-width:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th{visibility:hidden}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:after{visibility:visible;color:#000;position:relative;left:-15px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(1):after{content:\"MON\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(2):after{left:-12px;content:\"TUE\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(3):after{left:-18px;content:\"WED\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(4):after{left:-14px;content:\"THU\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(5):after{left:-10px;content:\"FRI\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(6):after{content:\"SAT\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:nth-of-type(1) th:nth-of-type(7):after{content:\"SUN\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true],.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-pressed=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:nth-of-type(1){visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #ffdd00;border:2px solid black;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{height:80px;padding-top:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table{margin-left:0!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tbody{position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base .mat-icon-button .mat-button-wrapper{width:auto;height:auto}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr mdc-icon-button mat-mdc-icon-button mat-unthemed mat-mdc-button-base .mat-icon-button:focus{outline:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child{position:absolute;left:49px;top:15px;z-index:2}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:first-child [aria-label=\"expand_less icon\"]{position:absolute;left:-2px;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(3) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:82px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(5) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:169px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(1) [aria-label=\"expand_less icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(2) [aria-label=\"expand_less icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2){display:flex;padding:20px 0 20px 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field{width:50px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field:before{color:#000;content:\"Hours\";position:relative;top:-5px;left:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-child(3) .mat-form-field:before{color:#000;content:\"Minutes\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:last-child{text-align:left;left:-15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .mat-form-field-disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-of-type(5) .mat-form-field:before{color:#000;content:\"Seconds\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian{border-bottom:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button{height:30px;top:21px;border-radius:0;color:#000;border-color:#000;background-color:#dee0e2;display:flex;justify-content:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button .mat-button-wrapper{position:relative;top:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4){display:flex;padding:2rem 0 2rem 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td:last-child{text-align:left}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child{position:absolute;left:49px;top:40px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:first-child [aria-label=\"expand_more icon\"]{position:absolute;top:15px;left:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(3) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;left:82px!important;top:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(5) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;top:15px;left:169px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-last-child(1) [aria-label=\"expand_more icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-last-child(1).ng-star-inserted [aria-label=\"expand_more icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr td{padding:0;border-bottom:0;position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .spacer{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon{visibility:hidden;display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-button-wrapper{display:block;width:15px;height:8px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-wrapper{padding-bottom:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field{width:auto;max-width:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_less icon\"].mat-icon-button .mat-button-wrapper:after{content:\" \\25b2\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_more icon\"].mat-icon-button .mat-button-wrapper:after{content:\"\\25bc\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex .mat-form-field-infix{border:1px solid black;height:20px;width:37px;display:flex;justify-content:center;align-items:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-underline{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input{height:33px;width:37px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #ffdd00}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions{margin-top:120px;padding:8px 8px 28px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .mat-datepicker-actions button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}\n"] }]
     }], () => [{ type: FormatTranslatorService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [NGX_MAT_DATE_FORMATS]