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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,13 +8,13 @@ import * as i1$1 from '@angular/router';
8
8
  import { RouterModule, NavigationStart, NavigationEnd } from '@angular/router';
9
9
  import * as i4 from '@angular/forms';
10
10
  import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormArray, FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
11
+ import moment from 'moment';
11
12
  import { BehaviorSubject, throwError, Subject, EMPTY, Observable, skip, of, combineLatest, timer, forkJoin, fromEvent, Subscription } from 'rxjs';
12
13
  import * as i1$2 from '@angular/common/http';
13
14
  import { HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
14
15
  import { distinctUntilChanged, catchError, map, publish, refCount, switchMap, debounceTime, take, delay, finalize, timeout, mergeMap, retryWhen, tap, delayWhen, publishReplay, first, takeUntil, filter } from 'rxjs/operators';
15
16
  import { polling } from 'rx-polling-hmcts';
16
17
  import { Type, Exclude, Expose, plainToClassFromExist, plainToClass } from 'class-transformer';
17
- import moment from 'moment';
18
18
  import { __decorate, __metadata } from 'tslib';
19
19
  import * as _ from 'underscore';
20
20
  import 'reflect-metadata';
@@ -497,17 +497,31 @@ class DateInputComponent {
497
497
  writeValue(obj) {
498
498
  if (obj) {
499
499
  this.rawValue = this.removeMilliseconds(obj);
500
- // needs to handle also partial dates, e.g. -05-2016 (missing day)
501
- const [datePart, timePart] = this.rawValue.split('T');
502
- const dateValues = datePart.split('-');
503
- this.year = this.displayYear = dateValues[0] || '';
504
- this.month = this.displayMonth = dateValues[1] || '';
505
- this.day = this.displayDay = dateValues[2] || '';
506
- if (timePart) {
507
- const timeParts = timePart.split(':');
508
- this.hour = this.displayHour = timeParts[0] || '';
509
- this.minute = this.displayMinute = timeParts[1] || '';
510
- this.second = this.displaySecond = timeParts[2] || '';
500
+ // for DateTime fields, convert from UTC to local time for display
501
+ if (this.isDateTime && this.rawValue.includes('T')) {
502
+ const utcMoment = moment.utc(this.rawValue);
503
+ const localMoment = utcMoment.local();
504
+ this.year = this.displayYear = localMoment.format('YYYY');
505
+ this.month = this.displayMonth = localMoment.format('MM');
506
+ this.day = this.displayDay = localMoment.format('DD');
507
+ this.hour = this.displayHour = localMoment.format('HH');
508
+ this.minute = this.displayMinute = localMoment.format('mm');
509
+ this.second = this.displaySecond = localMoment.format('ss');
510
+ }
511
+ else {
512
+ // for Date fields (no time), parse normally
513
+ // needs to handle also partial dates, e.g. -05-2016 (missing day)
514
+ const [datePart, timePart] = this.rawValue.split('T');
515
+ const dateValues = datePart.split('-');
516
+ this.year = this.displayYear = dateValues[0] || '';
517
+ this.month = this.displayMonth = dateValues[1] || '';
518
+ this.day = this.displayDay = dateValues[2] || '';
519
+ if (timePart) {
520
+ const timeParts = timePart.split(':');
521
+ this.hour = this.displayHour = timeParts[0] || '';
522
+ this.minute = this.displayMinute = timeParts[1] || '';
523
+ this.second = this.displaySecond = timeParts[2] || '';
524
+ }
511
525
  }
512
526
  }
513
527
  }
@@ -621,7 +635,16 @@ class DateInputComponent {
621
635
  this.minute ? this.pad(this.minute) : '',
622
636
  this.second ? this.pad(this.second) : ''
623
637
  ].join(':');
624
- return `${date}T${time}.000`;
638
+ const localDateTimeString = `${date}T${time}.000`;
639
+ // convert from local time to UTC for storage
640
+ const localMoment = moment(localDateTimeString, 'YYYY-MM-DDTHH:mm:ss.SSS', true);
641
+ // if invalid, return the raw string for validation to catch
642
+ if (!localMoment.isValid()) {
643
+ return localDateTimeString;
644
+ }
645
+ const utcMoment = localMoment.utc();
646
+ // return in the expected format
647
+ return utcMoment.format('YYYY-MM-DDTHH:mm:ss.000');
625
648
  }
626
649
  else {
627
650
  return date;
@@ -739,7 +762,7 @@ class DateInputComponent {
739
762
  }], isInvalid: [{
740
763
  type: Input
741
764
  }] }); })();
742
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateInputComponent, { className: "DateInputComponent", filePath: "lib/components/form/date-input/date-input.component.ts", lineNumber: 21 }); })();
765
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateInputComponent, { className: "DateInputComponent", filePath: "lib/components/form/date-input/date-input.component.ts", lineNumber: 22 }); })();
743
766
 
744
767
  const _c0$12 = ["*"];
745
768
  function AlertComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
@@ -2810,7 +2833,7 @@ class DatePipe {
2810
2833
  }
2811
2834
  transform(value, zone, format) {
2812
2835
  let resultDate = null;
2813
- const ISO_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
2836
+ const ISO_FORMAT_NO_TZ = 'YYYY-MM-DDTHH:mm:ss.SSS';
2814
2837
  if (value) {
2815
2838
  // included to avoid editing the hour twice on second pass through
2816
2839
  // this occurs on case details when datepipe is applied twice
@@ -2818,31 +2841,51 @@ class DatePipe {
2818
2841
  zone = 'utc';
2819
2842
  }
2820
2843
  const match = value.match(DatePipe.DATE_FORMAT_REGEXP);
2821
- // Make sure we actually have a match.
2844
+ // match contains regex capture groups from DATE_FORMAT_REGEXP (ISO 8601 format):
2845
+ // [1] year, [2] month, [3] day, [4] hour, [5] minute, [6] second, [7] milliseconds,
2846
+ // [8] 'Z', [9] timezone offset sign (+-), [10] timezone offset hours,
2847
+ // [11] timezone offset minutes
2822
2848
  if (match) {
2823
- let offsetDate = null;
2824
- const date = this.getDate(match);
2825
- if (zone === 'local') {
2826
- offsetDate = this.getOffsetDate(date);
2849
+ let momentDate = null;
2850
+ const hasTime = match[4] && match[5] && match[6];
2851
+ const hasTimezone = match[8];
2852
+ if (hasTime) {
2853
+ if (hasTimezone) {
2854
+ const parsed = moment.parseZone(value);
2855
+ if (zone === 'local') {
2856
+ momentDate = parsed.local();
2857
+ }
2858
+ else {
2859
+ momentDate = parsed.utc();
2860
+ }
2861
+ }
2862
+ else {
2863
+ momentDate = moment.utc(value);
2864
+ if (zone === 'local') {
2865
+ momentDate = momentDate.local();
2866
+ }
2867
+ }
2827
2868
  }
2828
2869
  else {
2829
- offsetDate = this.getDate(match);
2870
+ // date only value - parse in local timezone to prevent day-shift issues
2871
+ momentDate = moment(value);
2830
2872
  }
2831
2873
  // 'short' format is meaningful to formatDate, but not the same meaning as in the unit tests
2832
2874
  if (this.formatTrans && format && format !== 'short') {
2833
2875
  // support for java style formatting strings for dates
2834
2876
  format = this.translateDateFormat(format);
2835
- resultDate = moment(offsetDate).format(format);
2877
+ resultDate = momentDate.format(format);
2836
2878
  }
2837
2879
  else {
2838
2880
  // RDM-1149 changed the pipe logic so that it doesn't add an hour to 'Summer Time' dates on DateTime field type
2839
- resultDate = `${offsetDate.getDate()} ${DatePipe.MONTHS[offsetDate.getMonth()]} ${offsetDate.getFullYear()}`;
2881
+ resultDate = `${momentDate.date()} ${DatePipe.MONTHS[momentDate.month()]} ${momentDate.year()}`;
2840
2882
  if (match[4] && match[5] && match[6] && format !== 'short') {
2841
2883
  resultDate += ', ';
2842
- resultDate += `${this.getHour(offsetDate.getHours().toString())}:`;
2843
- resultDate += `${this.pad(offsetDate.getMinutes())}:`;
2844
- resultDate += `${this.pad(offsetDate.getSeconds())} `;
2845
- resultDate += (this.toInt(offsetDate.getHours().toString()) >= 12) ? 'PM' : 'AM';
2884
+ const hours = momentDate.hours();
2885
+ resultDate += `${this.getHour(hours.toString())}:`;
2886
+ resultDate += `${this.pad(momentDate.minutes())}:`;
2887
+ resultDate += `${this.pad(momentDate.seconds())} `;
2888
+ resultDate += (hours >= 12) ? 'PM' : 'AM';
2846
2889
  }
2847
2890
  }
2848
2891
  }
@@ -2860,7 +2903,7 @@ class DatePipe {
2860
2903
  return this.transform(shortISO, zone, format);
2861
2904
  }
2862
2905
  // If it did include time, we want a full ISO string.
2863
- const thisMoment = moment(d).format(ISO_FORMAT);
2906
+ const thisMoment = moment(d).format(ISO_FORMAT_NO_TZ);
2864
2907
  return this.transform(thisMoment, zone, format);
2865
2908
  }
2866
2909
  }
@@ -2875,26 +2918,6 @@ class DatePipe {
2875
2918
  return format;
2876
2919
  }
2877
2920
  }
2878
- getOffsetDate(date) {
2879
- const localOffset = -date.getTimezoneOffset() / 60;
2880
- return new Date(date.getTime() + localOffset * 3600 * 1000);
2881
- }
2882
- getDate(match) {
2883
- const year = this.toInt(match[1]);
2884
- const month = this.toInt(match[2]) - 1;
2885
- const day = this.toInt(match[3]);
2886
- let resultDate;
2887
- if (match[4] && match[5] && match[6]) {
2888
- const hour = this.toInt(match[4]);
2889
- const minutes = this.toInt(match[5]);
2890
- const seconds = this.toInt(match[6]);
2891
- resultDate = new Date(year, month, day, hour, minutes, seconds, 0);
2892
- }
2893
- else {
2894
- resultDate = new Date(year, month, day);
2895
- }
2896
- return resultDate;
2897
- }
2898
2921
  getHour(hourStr) {
2899
2922
  let hourNum = this.toInt(hourStr);
2900
2923
  if (hourNum > 12) {
@@ -4386,7 +4409,7 @@ class FieldsUtils {
4386
4409
  // These two fields are date-time fields
4387
4410
  case 'dateTimeModified':
4388
4411
  case 'dateTimeCreated':
4389
- return { [k]: detail.value[k] ? new Date(detail.value[k]) : null, id: detail.id };
4412
+ return { [k]: detail.value[k] ? moment.utc(detail.value[k]).local().toDate() : null, id: detail.id };
4390
4413
  // This field is a "yes/no" field
4391
4414
  case 'hearingRelevant':
4392
4415
  return detail.value[k].toUpperCase() === 'YES' ? { [k]: true, id: detail.id } : { [k]: false, id: detail.id };
@@ -15015,6 +15038,12 @@ class ReadComplexFieldComponent extends AbstractFieldReadComponent {
15015
15038
 
15016
15039
  class ReadDateFieldComponent extends AbstractFieldReadComponent {
15017
15040
  timeZone = 'utc';
15041
+ ngOnInit() {
15042
+ super.ngOnInit();
15043
+ if (this.caseField?.field_type.id === 'DateTime') {
15044
+ this.timeZone = 'local';
15045
+ }
15046
+ }
15018
15047
  static ɵfac = /*@__PURE__*/ (() => { let ɵReadDateFieldComponent_BaseFactory; return function ReadDateFieldComponent_Factory(__ngFactoryType__) { return (ɵReadDateFieldComponent_BaseFactory || (ɵReadDateFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadDateFieldComponent)))(__ngFactoryType__ || ReadDateFieldComponent); }; })();
15019
15048
  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) {
15020
15049
  i0.ɵɵelementStart(0, "span", 0);
@@ -15023,14 +15052,14 @@ class ReadDateFieldComponent extends AbstractFieldReadComponent {
15023
15052
  i0.ɵɵelementEnd();
15024
15053
  } if (rf & 2) {
15025
15054
  i0.ɵɵadvance();
15026
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, ctx.caseField.value, "utc", ctx.caseField.dateTimeDisplayFormat));
15055
+ i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, ctx.caseField.value, ctx.timeZone, ctx.caseField.dateTimeDisplayFormat));
15027
15056
  } }, dependencies: [DatePipe], encapsulation: 2 });
15028
15057
  }
15029
15058
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadDateFieldComponent, [{
15030
15059
  type: Component,
15031
15060
  args: [{
15032
15061
  selector: 'ccd-read-date-field',
15033
- template: `<span class="text-16">{{caseField.value | ccdDate:'utc':caseField.dateTimeDisplayFormat}}</span>`,
15062
+ template: `<span class="text-16">{{caseField.value | ccdDate:timeZone:caseField.dateTimeDisplayFormat}}</span>`,
15034
15063
  standalone: false
15035
15064
  }]
15036
15065
  }], null, null); })();
@@ -29249,7 +29278,7 @@ function DatetimePickerComponent_span_5_Template(rf, ctx) { if (rf & 1) {
29249
29278
  } if (rf & 2) {
29250
29279
  const ctx_r1 = i0.ɵɵnextContext();
29251
29280
  i0.ɵɵadvance();
29252
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r1.dateControl.errors, ctx_r1.caseField.label));
29281
+ i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r1.localDisplayControl.errors, ctx_r1.caseField.label));
29253
29282
  } }
29254
29283
  function DatetimePickerComponent_span_6_Template(rf, ctx) { if (rf & 1) {
29255
29284
  i0.ɵɵelementStart(0, "span", 13);
@@ -29293,6 +29322,7 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29293
29322
  datetimePicker;
29294
29323
  inputElement;
29295
29324
  dateControl = new FormControl(new Date());
29325
+ localDisplayControl;
29296
29326
  minimumDate = new Date('01/01/1800');
29297
29327
  maximumDate = null;
29298
29328
  momentFormat = 'YYYY-MM-DDTHH:mm:ss.SSS';
@@ -29304,21 +29334,48 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29304
29334
  ngOnInit() {
29305
29335
  this.dateTimeEntryFormat = this.formatTranslationService.showOnlyDates(this.caseField.dateTimeEntryFormat);
29306
29336
  this.configureDatePicker(this.dateTimeEntryFormat);
29307
- // set date control based on mandatory field
29337
+ // for when navigating back to an existing form
29308
29338
  this.dateControl = (this.caseField.isMandatory ?
29309
29339
  this.registerControl(new FormControl(this.caseField.value || '', [Validators.required]))
29310
29340
  : this.registerControl(new FormControl(this.caseField.value)));
29341
+ let initialUtcValue = this.dateControl.value;
29342
+ let initialLocalValue;
29343
+ // for DateTime fields, convert UTC to local for display
29344
+ if (initialUtcValue && this.caseField.field_type.type === 'DateTime') {
29345
+ const utcMoment = moment.utc(initialUtcValue);
29346
+ const localMoment = utcMoment.local();
29347
+ initialLocalValue = localMoment.format('YYYY-MM-DDTHH:mm:ss.SSS');
29348
+ }
29349
+ else {
29350
+ initialLocalValue = initialUtcValue || '';
29351
+ }
29352
+ this.localDisplayControl = new FormControl(initialLocalValue);
29353
+ // sync local display control to main control with UTC conversion
29354
+ this.localDisplayControl.valueChanges.subscribe(localValue => {
29355
+ if (this.caseField.field_type.type === 'DateTime' && localValue) {
29356
+ const parsedLocal = moment(localValue, this.momentFormat);
29357
+ if (parsedLocal.isValid()) {
29358
+ const utcValue = parsedLocal.utc().format(this.momentFormat);
29359
+ this.dateControl.setValue(utcValue, { emitEvent: false });
29360
+ }
29361
+ else {
29362
+ this.dateControl.setValue(localValue, { emitEvent: false });
29363
+ }
29364
+ }
29365
+ else {
29366
+ this.dateControl.setValue(localValue, { emitEvent: false });
29367
+ }
29368
+ });
29369
+ this.localDisplayControl.statusChanges.subscribe(() => {
29370
+ this.minError = this.localDisplayControl.hasError('matDatetimePickerMin');
29371
+ this.maxError = this.localDisplayControl.hasError('matDatetimePickerMax');
29372
+ });
29311
29373
  // in resetting the format just after the page initialises, the input can be reformatted
29312
29374
  // otherwise the last format given will be how the text shown will be displayed
29313
29375
  setTimeout(() => {
29314
29376
  this.setDateTimeFormat();
29315
29377
  this.formatValueAndSetErrors();
29316
29378
  }, 1000);
29317
- // when the status changes check that the maximum/minimum date has not been exceeded
29318
- this.dateControl.statusChanges.subscribe(() => {
29319
- this.minError = this.dateControl.hasError('matDatetimePickerMin');
29320
- this.maxError = this.dateControl.hasError('matDatetimePickerMax');
29321
- });
29322
29379
  }
29323
29380
  setDateTimeFormat() {
29324
29381
  this.ngxMatDateFormats.parse.dateInput = this.dateTimeEntryFormat;
@@ -29401,15 +29458,15 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29401
29458
  }
29402
29459
  yearSelected(event) {
29403
29460
  if (this.startView === 'multi-year' && this.yearSelection) {
29404
- this.dateControl.patchValue(event.toISOString());
29461
+ this.localDisplayControl.patchValue(event.toISOString());
29405
29462
  this.datetimePicker.close();
29406
29463
  this.valueChanged();
29407
29464
  }
29408
29465
  }
29409
29466
  monthSelected(event) {
29410
29467
  if (this.startView === 'multi-year') {
29411
- this.dateControl.patchValue(event.toISOString());
29412
- this.dateControl.patchValue(event.toISOString());
29468
+ this.localDisplayControl.patchValue(event.toISOString());
29469
+ this.localDisplayControl.patchValue(event.toISOString());
29413
29470
  this.datetimePicker.close();
29414
29471
  this.valueChanged();
29415
29472
  }
@@ -29417,20 +29474,34 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29417
29474
  formatValueAndSetErrors() {
29418
29475
  if (this.inputElement.nativeElement.value) {
29419
29476
  let formValue = this.inputElement.nativeElement.value;
29420
- formValue = moment(formValue, this.dateTimeEntryFormat).format(this.momentFormat);
29421
- if (formValue !== 'Invalid date') {
29422
- // if not invalid set the value as the formatted value
29423
- this.dateControl.setValue(formValue);
29477
+ const parsedMoment = moment(formValue, this.dateTimeEntryFormat);
29478
+ if (parsedMoment.isValid()) {
29479
+ // format the value in local time
29480
+ // localDisplayControl will auto-sync to dateControl with UTC conversion
29481
+ formValue = parsedMoment.format(this.momentFormat);
29482
+ this.localDisplayControl.setValue(formValue);
29424
29483
  }
29425
29484
  else {
29426
29485
  // ensure that the datepicker picks up the invalid error
29427
29486
  const keepErrorText = this.inputElement.nativeElement.value;
29487
+ this.localDisplayControl.setValue(keepErrorText);
29428
29488
  this.dateControl.setValue(keepErrorText);
29429
29489
  this.inputElement.nativeElement.value = keepErrorText;
29430
29490
  }
29431
29491
  }
29432
- else {
29433
- // ensure required errors are picked up if relevant
29492
+ else if (this.localDisplayControl.value) {
29493
+ // input is empty - check if we need to sync from control values
29494
+ // control has a value but input doesn't - this happens when navigating back
29495
+ // manually sync the control value to the input element
29496
+ const controlValue = this.localDisplayControl.value;
29497
+ const parsedMoment = moment(controlValue, this.momentFormat);
29498
+ if (parsedMoment.isValid()) {
29499
+ const formattedValue = parsedMoment.format(this.dateTimeEntryFormat);
29500
+ this.inputElement.nativeElement.value = formattedValue;
29501
+ }
29502
+ }
29503
+ else if (!this.dateControl.value) {
29504
+ this.localDisplayControl.setValue('');
29434
29505
  this.dateControl.setValue('');
29435
29506
  }
29436
29507
  }
@@ -29449,8 +29520,8 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29449
29520
  useClass: NgxMatMomentAdapter,
29450
29521
  deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
29451
29522
  },
29452
- { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
29453
- ]), 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) {
29523
+ { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } }
29524
+ ]), 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) {
29454
29525
  const _r1 = i0.ɵɵgetCurrentView();
29455
29526
  i0.ɵɵelementStart(0, "div", 2)(1, "fieldset")(2, "legend");
29456
29527
  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);
@@ -29466,20 +29537,20 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29466
29537
  i0.ɵɵelementEnd()()()()()();
29467
29538
  } if (rf & 2) {
29468
29539
  const picker_r3 = i0.ɵɵreference(13);
29469
- i0.ɵɵproperty("id", ctx.caseField.id)("ngClass", i0.ɵɵpureFunction1(25, _c2$2, ctx.dateControl && !ctx.dateControl.valid && ctx.dateControl.dirty));
29540
+ i0.ɵɵproperty("id", ctx.caseField.id)("ngClass", i0.ɵɵpureFunction1(25, _c2$2, ctx.localDisplayControl && !ctx.localDisplayControl.valid && ctx.localDisplayControl.dirty));
29470
29541
  i0.ɵɵadvance(3);
29471
29542
  i0.ɵɵproperty("ngIf", ctx.caseField.label);
29472
29543
  i0.ɵɵadvance();
29473
29544
  i0.ɵɵproperty("ngIf", ctx.caseField.hint_text);
29474
29545
  i0.ɵɵadvance();
29475
- i0.ɵɵproperty("ngIf", ctx.dateControl && ctx.dateControl.errors && ctx.dateControl.dirty && !(ctx.minError || ctx.maxError));
29546
+ i0.ɵɵproperty("ngIf", ctx.localDisplayControl && ctx.localDisplayControl.errors && ctx.localDisplayControl.dirty && !(ctx.minError || ctx.maxError));
29476
29547
  i0.ɵɵadvance();
29477
- i0.ɵɵproperty("ngIf", ctx.dateControl && ctx.dateControl.dirty && ctx.minError);
29548
+ i0.ɵɵproperty("ngIf", ctx.localDisplayControl && ctx.localDisplayControl.dirty && ctx.minError);
29478
29549
  i0.ɵɵadvance();
29479
- i0.ɵɵproperty("ngIf", ctx.dateControl && ctx.dateControl.dirty && ctx.maxError);
29550
+ i0.ɵɵproperty("ngIf", ctx.localDisplayControl && ctx.localDisplayControl.dirty && ctx.maxError);
29480
29551
  i0.ɵɵadvance(2);
29481
29552
  i0.ɵɵattribute("aria-label", i0.ɵɵinterpolate1("Please enter a date and time in the format | rpxTranslate ", ctx.dateTimeEntryFormat));
29482
- i0.ɵɵproperty("min", ctx.minDate(ctx.caseField))("max", ctx.maxDate(ctx.caseField))("formControl", ctx.dateControl)("ngxMatDatetimePicker", picker_r3);
29553
+ i0.ɵɵproperty("min", ctx.minDate(ctx.caseField))("max", ctx.maxDate(ctx.caseField))("formControl", ctx.localDisplayControl)("ngxMatDatetimePicker", picker_r3);
29483
29554
  i0.ɵɵadvance(2);
29484
29555
  i0.ɵɵproperty("for", picker_r3);
29485
29556
  i0.ɵɵadvance();
@@ -29495,8 +29566,8 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29495
29566
  useClass: NgxMatMomentAdapter,
29496
29567
  deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
29497
29568
  },
29498
- { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
29499
- ], 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"] }]
29569
+ { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } }
29570
+ ], 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"] }]
29500
29571
  }], () => [{ type: FormatTranslatorService }, { type: undefined, decorators: [{
29501
29572
  type: Inject,
29502
29573
  args: [NGX_MAT_DATE_FORMATS]