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

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';
12
11
  import { BehaviorSubject, throwError, Subject, EMPTY, Observable, skip, of, combineLatest, timer, forkJoin, fromEvent, Subscription } from 'rxjs';
13
12
  import * as i1$2 from '@angular/common/http';
14
13
  import { HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
15
14
  import { distinctUntilChanged, catchError, map, publish, refCount, switchMap, debounceTime, take, delay, finalize, timeout, mergeMap, retryWhen, tap, delayWhen, publishReplay, first, takeUntil, filter } from 'rxjs/operators';
16
15
  import { polling } from 'rx-polling-hmcts';
17
16
  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,31 +497,17 @@ class DateInputComponent {
497
497
  writeValue(obj) {
498
498
  if (obj) {
499
499
  this.rawValue = this.removeMilliseconds(obj);
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
- }
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] || '';
525
511
  }
526
512
  }
527
513
  }
@@ -635,16 +621,7 @@ class DateInputComponent {
635
621
  this.minute ? this.pad(this.minute) : '',
636
622
  this.second ? this.pad(this.second) : ''
637
623
  ].join(':');
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');
624
+ return `${date}T${time}.000`;
648
625
  }
649
626
  else {
650
627
  return date;
@@ -762,7 +739,7 @@ class DateInputComponent {
762
739
  }], isInvalid: [{
763
740
  type: Input
764
741
  }] }); })();
765
- (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateInputComponent, { className: "DateInputComponent", filePath: "lib/components/form/date-input/date-input.component.ts", lineNumber: 22 }); })();
742
+ (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DateInputComponent, { className: "DateInputComponent", filePath: "lib/components/form/date-input/date-input.component.ts", lineNumber: 21 }); })();
766
743
 
767
744
  const _c0$12 = ["*"];
768
745
  function AlertComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
@@ -2833,7 +2810,7 @@ class DatePipe {
2833
2810
  }
2834
2811
  transform(value, zone, format) {
2835
2812
  let resultDate = null;
2836
- const ISO_FORMAT_NO_TZ = 'YYYY-MM-DDTHH:mm:ss.SSS';
2813
+ const ISO_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
2837
2814
  if (value) {
2838
2815
  // included to avoid editing the hour twice on second pass through
2839
2816
  // this occurs on case details when datepipe is applied twice
@@ -2843,46 +2820,29 @@ class DatePipe {
2843
2820
  const match = value.match(DatePipe.DATE_FORMAT_REGEXP);
2844
2821
  // Make sure we actually have a match.
2845
2822
  if (match) {
2846
- let momentDate = null;
2847
- const hasTime = match[4] && match[5] && match[6];
2848
- const hasTimezone = match[8];
2849
- if (hasTime) {
2850
- if (hasTimezone) {
2851
- const parsed = moment.parseZone(value);
2852
- if (zone === 'local') {
2853
- momentDate = parsed.local();
2854
- }
2855
- else {
2856
- momentDate = parsed.utc();
2857
- }
2858
- }
2859
- else {
2860
- momentDate = moment.utc(value);
2861
- if (zone === 'local') {
2862
- momentDate = momentDate.local();
2863
- }
2864
- }
2823
+ let offsetDate = null;
2824
+ const date = this.getDate(match);
2825
+ if (zone === 'local') {
2826
+ offsetDate = this.getOffsetDate(date);
2865
2827
  }
2866
2828
  else {
2867
- // date only value - parse in local timezone to prevent day-shift issues
2868
- momentDate = moment(value);
2829
+ offsetDate = this.getDate(match);
2869
2830
  }
2870
2831
  // 'short' format is meaningful to formatDate, but not the same meaning as in the unit tests
2871
2832
  if (this.formatTrans && format && format !== 'short') {
2872
2833
  // support for java style formatting strings for dates
2873
2834
  format = this.translateDateFormat(format);
2874
- resultDate = momentDate.format(format);
2835
+ resultDate = moment(offsetDate).format(format);
2875
2836
  }
2876
2837
  else {
2877
2838
  // RDM-1149 changed the pipe logic so that it doesn't add an hour to 'Summer Time' dates on DateTime field type
2878
- resultDate = `${momentDate.date()} ${DatePipe.MONTHS[momentDate.month()]} ${momentDate.year()}`;
2839
+ resultDate = `${offsetDate.getDate()} ${DatePipe.MONTHS[offsetDate.getMonth()]} ${offsetDate.getFullYear()}`;
2879
2840
  if (match[4] && match[5] && match[6] && format !== 'short') {
2880
2841
  resultDate += ', ';
2881
- const hours = momentDate.hours();
2882
- resultDate += `${this.getHour(hours.toString())}:`;
2883
- resultDate += `${this.pad(momentDate.minutes())}:`;
2884
- resultDate += `${this.pad(momentDate.seconds())} `;
2885
- resultDate += (hours >= 12) ? 'PM' : 'AM';
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';
2886
2846
  }
2887
2847
  }
2888
2848
  }
@@ -2900,7 +2860,7 @@ class DatePipe {
2900
2860
  return this.transform(shortISO, zone, format);
2901
2861
  }
2902
2862
  // If it did include time, we want a full ISO string.
2903
- const thisMoment = moment(d).format(ISO_FORMAT_NO_TZ);
2863
+ const thisMoment = moment(d).format(ISO_FORMAT);
2904
2864
  return this.transform(thisMoment, zone, format);
2905
2865
  }
2906
2866
  }
@@ -2915,6 +2875,26 @@ class DatePipe {
2915
2875
  return format;
2916
2876
  }
2917
2877
  }
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
+ }
2918
2898
  getHour(hourStr) {
2919
2899
  let hourNum = this.toInt(hourStr);
2920
2900
  if (hourNum > 12) {
@@ -4406,7 +4386,7 @@ class FieldsUtils {
4406
4386
  // These two fields are date-time fields
4407
4387
  case 'dateTimeModified':
4408
4388
  case 'dateTimeCreated':
4409
- return { [k]: detail.value[k] ? moment.utc(detail.value[k]).local().toDate() : null, id: detail.id };
4389
+ return { [k]: detail.value[k] ? new Date(detail.value[k]) : null, id: detail.id };
4410
4390
  // This field is a "yes/no" field
4411
4391
  case 'hearingRelevant':
4412
4392
  return detail.value[k].toUpperCase() === 'YES' ? { [k]: true, id: detail.id } : { [k]: false, id: detail.id };
@@ -15035,12 +15015,6 @@ class ReadComplexFieldComponent extends AbstractFieldReadComponent {
15035
15015
 
15036
15016
  class ReadDateFieldComponent extends AbstractFieldReadComponent {
15037
15017
  timeZone = 'utc';
15038
- ngOnInit() {
15039
- super.ngOnInit();
15040
- if (this.caseField?.field_type.id === 'DateTime') {
15041
- this.timeZone = 'local';
15042
- }
15043
- }
15044
15018
  static ɵfac = /*@__PURE__*/ (() => { let ɵReadDateFieldComponent_BaseFactory; return function ReadDateFieldComponent_Factory(__ngFactoryType__) { return (ɵReadDateFieldComponent_BaseFactory || (ɵReadDateFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ReadDateFieldComponent)))(__ngFactoryType__ || ReadDateFieldComponent); }; })();
15045
15019
  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) {
15046
15020
  i0.ɵɵelementStart(0, "span", 0);
@@ -15049,14 +15023,14 @@ class ReadDateFieldComponent extends AbstractFieldReadComponent {
15049
15023
  i0.ɵɵelementEnd();
15050
15024
  } if (rf & 2) {
15051
15025
  i0.ɵɵadvance();
15052
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, ctx.caseField.value, ctx.timeZone, ctx.caseField.dateTimeDisplayFormat));
15026
+ i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, ctx.caseField.value, "utc", ctx.caseField.dateTimeDisplayFormat));
15053
15027
  } }, dependencies: [DatePipe], encapsulation: 2 });
15054
15028
  }
15055
15029
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadDateFieldComponent, [{
15056
15030
  type: Component,
15057
15031
  args: [{
15058
15032
  selector: 'ccd-read-date-field',
15059
- template: `<span class="text-16">{{caseField.value | ccdDate:timeZone:caseField.dateTimeDisplayFormat}}</span>`,
15033
+ template: `<span class="text-16">{{caseField.value | ccdDate:'utc':caseField.dateTimeDisplayFormat}}</span>`,
15060
15034
  standalone: false
15061
15035
  }]
15062
15036
  }], null, null); })();
@@ -29275,7 +29249,7 @@ function DatetimePickerComponent_span_5_Template(rf, ctx) { if (rf & 1) {
29275
29249
  } if (rf & 2) {
29276
29250
  const ctx_r1 = i0.ɵɵnextContext();
29277
29251
  i0.ɵɵadvance();
29278
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r1.localDisplayControl.errors, ctx_r1.caseField.label));
29252
+ i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(2, 1, ctx_r1.dateControl.errors, ctx_r1.caseField.label));
29279
29253
  } }
29280
29254
  function DatetimePickerComponent_span_6_Template(rf, ctx) { if (rf & 1) {
29281
29255
  i0.ɵɵelementStart(0, "span", 13);
@@ -29319,7 +29293,6 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29319
29293
  datetimePicker;
29320
29294
  inputElement;
29321
29295
  dateControl = new FormControl(new Date());
29322
- localDisplayControl;
29323
29296
  minimumDate = new Date('01/01/1800');
29324
29297
  maximumDate = null;
29325
29298
  momentFormat = 'YYYY-MM-DDTHH:mm:ss.SSS';
@@ -29331,48 +29304,21 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29331
29304
  ngOnInit() {
29332
29305
  this.dateTimeEntryFormat = this.formatTranslationService.showOnlyDates(this.caseField.dateTimeEntryFormat);
29333
29306
  this.configureDatePicker(this.dateTimeEntryFormat);
29334
- // for when navigating back to an existing form
29307
+ // set date control based on mandatory field
29335
29308
  this.dateControl = (this.caseField.isMandatory ?
29336
29309
  this.registerControl(new FormControl(this.caseField.value || '', [Validators.required]))
29337
29310
  : this.registerControl(new FormControl(this.caseField.value)));
29338
- let initialUtcValue = this.dateControl.value;
29339
- let initialLocalValue;
29340
- // for DateTime fields, convert UTC to local for display
29341
- if (initialUtcValue && this.caseField.field_type.type === 'DateTime') {
29342
- const utcMoment = moment.utc(initialUtcValue);
29343
- const localMoment = utcMoment.local();
29344
- initialLocalValue = localMoment.format('YYYY-MM-DDTHH:mm:ss.SSS');
29345
- }
29346
- else {
29347
- initialLocalValue = initialUtcValue || '';
29348
- }
29349
- this.localDisplayControl = new FormControl(initialLocalValue);
29350
- // sync local display control to main control with UTC conversion
29351
- this.localDisplayControl.valueChanges.subscribe(localValue => {
29352
- if (this.caseField.field_type.type === 'DateTime' && localValue) {
29353
- const parsedLocal = moment(localValue, this.momentFormat);
29354
- if (parsedLocal.isValid()) {
29355
- const utcValue = parsedLocal.utc().format(this.momentFormat);
29356
- this.dateControl.setValue(utcValue, { emitEvent: false });
29357
- }
29358
- else {
29359
- this.dateControl.setValue(localValue, { emitEvent: false });
29360
- }
29361
- }
29362
- else {
29363
- this.dateControl.setValue(localValue, { emitEvent: false });
29364
- }
29365
- });
29366
- this.localDisplayControl.statusChanges.subscribe(() => {
29367
- this.minError = this.localDisplayControl.hasError('matDatetimePickerMin');
29368
- this.maxError = this.localDisplayControl.hasError('matDatetimePickerMax');
29369
- });
29370
29311
  // in resetting the format just after the page initialises, the input can be reformatted
29371
29312
  // otherwise the last format given will be how the text shown will be displayed
29372
29313
  setTimeout(() => {
29373
29314
  this.setDateTimeFormat();
29374
29315
  this.formatValueAndSetErrors();
29375
29316
  }, 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
+ });
29376
29322
  }
29377
29323
  setDateTimeFormat() {
29378
29324
  this.ngxMatDateFormats.parse.dateInput = this.dateTimeEntryFormat;
@@ -29455,15 +29401,15 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29455
29401
  }
29456
29402
  yearSelected(event) {
29457
29403
  if (this.startView === 'multi-year' && this.yearSelection) {
29458
- this.localDisplayControl.patchValue(event.toISOString());
29404
+ this.dateControl.patchValue(event.toISOString());
29459
29405
  this.datetimePicker.close();
29460
29406
  this.valueChanged();
29461
29407
  }
29462
29408
  }
29463
29409
  monthSelected(event) {
29464
29410
  if (this.startView === 'multi-year') {
29465
- this.localDisplayControl.patchValue(event.toISOString());
29466
- this.localDisplayControl.patchValue(event.toISOString());
29411
+ this.dateControl.patchValue(event.toISOString());
29412
+ this.dateControl.patchValue(event.toISOString());
29467
29413
  this.datetimePicker.close();
29468
29414
  this.valueChanged();
29469
29415
  }
@@ -29471,34 +29417,20 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29471
29417
  formatValueAndSetErrors() {
29472
29418
  if (this.inputElement.nativeElement.value) {
29473
29419
  let formValue = this.inputElement.nativeElement.value;
29474
- const parsedMoment = moment(formValue, this.dateTimeEntryFormat);
29475
- if (parsedMoment.isValid()) {
29476
- // format the value in local time
29477
- // localDisplayControl will auto-sync to dateControl with UTC conversion
29478
- formValue = parsedMoment.format(this.momentFormat);
29479
- this.localDisplayControl.setValue(formValue);
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);
29480
29424
  }
29481
29425
  else {
29482
29426
  // ensure that the datepicker picks up the invalid error
29483
29427
  const keepErrorText = this.inputElement.nativeElement.value;
29484
- this.localDisplayControl.setValue(keepErrorText);
29485
29428
  this.dateControl.setValue(keepErrorText);
29486
29429
  this.inputElement.nativeElement.value = keepErrorText;
29487
29430
  }
29488
29431
  }
29489
- else if (this.localDisplayControl.value) {
29490
- // input is empty - check if we need to sync from control values
29491
- // control has a value but input doesn't - this happens when navigating back
29492
- // manually sync the control value to the input element
29493
- const controlValue = this.localDisplayControl.value;
29494
- const parsedMoment = moment(controlValue, this.momentFormat);
29495
- if (parsedMoment.isValid()) {
29496
- const formattedValue = parsedMoment.format(this.dateTimeEntryFormat);
29497
- this.inputElement.nativeElement.value = formattedValue;
29498
- }
29499
- }
29500
- else if (!this.dateControl.value) {
29501
- this.localDisplayControl.setValue('');
29432
+ else {
29433
+ // ensure required errors are picked up if relevant
29502
29434
  this.dateControl.setValue('');
29503
29435
  }
29504
29436
  }
@@ -29517,8 +29449,8 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29517
29449
  useClass: NgxMatMomentAdapter,
29518
29450
  deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
29519
29451
  },
29520
- { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } }
29521
- ]), 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) {
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) {
29522
29454
  const _r1 = i0.ɵɵgetCurrentView();
29523
29455
  i0.ɵɵelementStart(0, "div", 2)(1, "fieldset")(2, "legend");
29524
29456
  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);
@@ -29534,20 +29466,20 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29534
29466
  i0.ɵɵelementEnd()()()()()();
29535
29467
  } if (rf & 2) {
29536
29468
  const picker_r3 = i0.ɵɵreference(13);
29537
- i0.ɵɵproperty("id", ctx.caseField.id)("ngClass", i0.ɵɵpureFunction1(25, _c2$2, ctx.localDisplayControl && !ctx.localDisplayControl.valid && ctx.localDisplayControl.dirty));
29469
+ i0.ɵɵproperty("id", ctx.caseField.id)("ngClass", i0.ɵɵpureFunction1(25, _c2$2, ctx.dateControl && !ctx.dateControl.valid && ctx.dateControl.dirty));
29538
29470
  i0.ɵɵadvance(3);
29539
29471
  i0.ɵɵproperty("ngIf", ctx.caseField.label);
29540
29472
  i0.ɵɵadvance();
29541
29473
  i0.ɵɵproperty("ngIf", ctx.caseField.hint_text);
29542
29474
  i0.ɵɵadvance();
29543
- i0.ɵɵproperty("ngIf", ctx.localDisplayControl && ctx.localDisplayControl.errors && ctx.localDisplayControl.dirty && !(ctx.minError || ctx.maxError));
29475
+ i0.ɵɵproperty("ngIf", ctx.dateControl && ctx.dateControl.errors && ctx.dateControl.dirty && !(ctx.minError || ctx.maxError));
29544
29476
  i0.ɵɵadvance();
29545
- i0.ɵɵproperty("ngIf", ctx.localDisplayControl && ctx.localDisplayControl.dirty && ctx.minError);
29477
+ i0.ɵɵproperty("ngIf", ctx.dateControl && ctx.dateControl.dirty && ctx.minError);
29546
29478
  i0.ɵɵadvance();
29547
- i0.ɵɵproperty("ngIf", ctx.localDisplayControl && ctx.localDisplayControl.dirty && ctx.maxError);
29479
+ i0.ɵɵproperty("ngIf", ctx.dateControl && ctx.dateControl.dirty && ctx.maxError);
29548
29480
  i0.ɵɵadvance(2);
29549
29481
  i0.ɵɵattribute("aria-label", i0.ɵɵinterpolate1("Please enter a date and time in the format | rpxTranslate ", ctx.dateTimeEntryFormat));
29550
- i0.ɵɵproperty("min", ctx.minDate(ctx.caseField))("max", ctx.maxDate(ctx.caseField))("formControl", ctx.localDisplayControl)("ngxMatDatetimePicker", picker_r3);
29482
+ i0.ɵɵproperty("min", ctx.minDate(ctx.caseField))("max", ctx.maxDate(ctx.caseField))("formControl", ctx.dateControl)("ngxMatDatetimePicker", picker_r3);
29551
29483
  i0.ɵɵadvance(2);
29552
29484
  i0.ɵɵproperty("for", picker_r3);
29553
29485
  i0.ɵɵadvance();
@@ -29563,8 +29495,8 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
29563
29495
  useClass: NgxMatMomentAdapter,
29564
29496
  deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
29565
29497
  },
29566
- { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } }
29567
- ], 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"] }]
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"] }]
29568
29500
  }], () => [{ type: FormatTranslatorService }, { type: undefined, decorators: [{
29569
29501
  type: Inject,
29570
29502
  args: [NGX_MAT_DATE_FORMATS]