@hmcts/ccd-case-ui-toolkit 7.2.50-srt-rc3 → 7.2.50-srt-rc4
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.
- package/esm2022/lib/components/form/date-input/date-input.component.mjs +19 -56
- package/esm2022/lib/shared/components/case-editor/case-edit-form/case-edit-form.component.mjs +3 -24
- package/esm2022/lib/shared/components/case-editor/case-edit-page/case-edit-page.component.mjs +2 -4
- package/esm2022/lib/shared/components/palette/datetime-picker/datetime-picker.component.mjs +10 -41
- package/esm2022/lib/shared/services/form/field-type-sanitiser.mjs +1 -2
- package/esm2022/lib/shared/services/form/form-value.service.mjs +1 -58
- package/fesm2022/hmcts-ccd-case-ui-toolkit.mjs +30 -179
- package/fesm2022/hmcts-ccd-case-ui-toolkit.mjs.map +1 -1
- package/lib/components/form/date-input/date-input.component.d.ts +0 -4
- package/lib/components/form/date-input/date-input.component.d.ts.map +1 -1
- package/lib/shared/components/case-editor/case-edit-form/case-edit-form.component.d.ts +0 -1
- package/lib/shared/components/case-editor/case-edit-form/case-edit-form.component.d.ts.map +1 -1
- package/lib/shared/components/case-editor/case-edit-page/case-edit-page.component.d.ts.map +1 -1
- package/lib/shared/components/palette/datetime-picker/datetime-picker.component.d.ts +0 -2
- package/lib/shared/components/palette/datetime-picker/datetime-picker.component.d.ts.map +1 -1
- package/lib/shared/services/form/field-type-sanitiser.d.ts +0 -1
- package/lib/shared/services/form/field-type-sanitiser.d.ts.map +1 -1
- package/lib/shared/services/form/form-value.service.d.ts +0 -2
- package/lib/shared/services/form/form-value.service.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -498,40 +498,20 @@ class DateInputComponent {
|
|
|
498
498
|
writeValue(obj) {
|
|
499
499
|
if (obj) {
|
|
500
500
|
this.rawValue = this.removeMilliseconds(obj);
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
this.second = this.displaySecond = '';
|
|
514
|
-
return;
|
|
515
|
-
}
|
|
516
|
-
const localDate = this.getOffsetDate(date);
|
|
517
|
-
this.year = this.displayYear = String(localDate.getFullYear());
|
|
518
|
-
this.month = this.displayMonth = this.padZero(localDate.getMonth() + 1);
|
|
519
|
-
this.day = this.displayDay = this.padZero(localDate.getDate());
|
|
520
|
-
if (dateInput.includes('T')) {
|
|
521
|
-
this.hour = this.displayHour = this.padZero(localDate.getHours());
|
|
522
|
-
this.minute = this.displayMinute = this.padZero(localDate.getMinutes());
|
|
523
|
-
this.second = this.displaySecond = this.padZero(localDate.getSeconds());
|
|
524
|
-
}
|
|
525
|
-
else {
|
|
526
|
-
this.hour = this.displayHour = '';
|
|
527
|
-
this.minute = this.displayMinute = '';
|
|
528
|
-
this.second = this.displaySecond = '';
|
|
501
|
+
// needs to handle also partial dates, e.g. -05-2016 (missing day)
|
|
502
|
+
const [datePart, timePart] = this.rawValue.split('T');
|
|
503
|
+
const dateValues = datePart.split('-');
|
|
504
|
+
this.year = this.displayYear = dateValues[0] || '';
|
|
505
|
+
this.month = this.displayMonth = dateValues[1] || '';
|
|
506
|
+
this.day = this.displayDay = dateValues[2] || '';
|
|
507
|
+
if (timePart) {
|
|
508
|
+
const timeParts = timePart.split(':');
|
|
509
|
+
this.hour = this.displayHour = timeParts[0] || '';
|
|
510
|
+
this.minute = this.displayMinute = timeParts[1] || '';
|
|
511
|
+
this.second = this.displaySecond = timeParts[2] || '';
|
|
512
|
+
}
|
|
529
513
|
}
|
|
530
514
|
}
|
|
531
|
-
getOffsetDate(date) {
|
|
532
|
-
const localOffset = -date.getTimezoneOffset() / 60;
|
|
533
|
-
return new Date(date.getTime() + localOffset * 3600 * 1000);
|
|
534
|
-
}
|
|
535
515
|
validate(control) {
|
|
536
516
|
if (this.mandatory && !this.viewValue()) {
|
|
537
517
|
return {
|
|
@@ -559,42 +539,42 @@ class DateInputComponent {
|
|
|
559
539
|
dayChange(value) {
|
|
560
540
|
// get value from input
|
|
561
541
|
this.day = value;
|
|
562
|
-
this.rawValue = this.
|
|
542
|
+
this.rawValue = this.viewValue();
|
|
563
543
|
// update the form
|
|
564
544
|
this.propagateChange(this.rawValue);
|
|
565
545
|
}
|
|
566
546
|
monthChange(value) {
|
|
567
547
|
// get value from input
|
|
568
548
|
this.month = value;
|
|
569
|
-
this.rawValue = this.
|
|
549
|
+
this.rawValue = this.viewValue();
|
|
570
550
|
// update the form
|
|
571
551
|
this.propagateChange(this.rawValue);
|
|
572
552
|
}
|
|
573
553
|
yearChange(value) {
|
|
574
554
|
// get value from input
|
|
575
555
|
this.year = value;
|
|
576
|
-
this.rawValue = this.
|
|
556
|
+
this.rawValue = this.viewValue();
|
|
577
557
|
// update the form
|
|
578
558
|
this.propagateChange(this.rawValue);
|
|
579
559
|
}
|
|
580
560
|
hourChange(value) {
|
|
581
561
|
// get value from input
|
|
582
562
|
this.hour = value;
|
|
583
|
-
this.rawValue = this.
|
|
563
|
+
this.rawValue = this.viewValue();
|
|
584
564
|
// update the form
|
|
585
565
|
this.propagateChange(this.rawValue);
|
|
586
566
|
}
|
|
587
567
|
minuteChange(value) {
|
|
588
568
|
// get value from input
|
|
589
569
|
this.minute = value;
|
|
590
|
-
this.rawValue = this.
|
|
570
|
+
this.rawValue = this.viewValue();
|
|
591
571
|
// update the form
|
|
592
572
|
this.propagateChange(this.rawValue);
|
|
593
573
|
}
|
|
594
574
|
secondChange(value) {
|
|
595
575
|
// get value from input
|
|
596
576
|
this.second = value;
|
|
597
|
-
this.rawValue = this.
|
|
577
|
+
this.rawValue = this.viewValue();
|
|
598
578
|
// update the form
|
|
599
579
|
this.propagateChange(this.rawValue);
|
|
600
580
|
}
|
|
@@ -629,23 +609,6 @@ class DateInputComponent {
|
|
|
629
609
|
secondId() {
|
|
630
610
|
return this.id + '-second';
|
|
631
611
|
}
|
|
632
|
-
// convert the dates to UTC before sending to the backend
|
|
633
|
-
convertToUTC(input) {
|
|
634
|
-
if (!input)
|
|
635
|
-
return null;
|
|
636
|
-
const date = new Date(input);
|
|
637
|
-
const year = date.getUTCFullYear();
|
|
638
|
-
const month = this.padZero(date.getUTCMonth() + 1);
|
|
639
|
-
const day = this.padZero(date.getUTCDate());
|
|
640
|
-
const hour = this.padZero(date.getUTCHours());
|
|
641
|
-
const minute = this.padZero(date.getUTCMinutes());
|
|
642
|
-
const second = this.padZero(date.getUTCSeconds());
|
|
643
|
-
const ms = date.getUTCMilliseconds().toString().padStart(3, '0');
|
|
644
|
-
return `${year}-${month}-${day}T${hour}:${minute}:${second}.${ms}`;
|
|
645
|
-
}
|
|
646
|
-
padZero(value) {
|
|
647
|
-
return value.toString().padStart(2, '0');
|
|
648
|
-
}
|
|
649
612
|
viewValue() {
|
|
650
613
|
if (this.day || this.month || this.year || this.hour || this.minute || this.second) {
|
|
651
614
|
const date = [
|
|
@@ -5759,7 +5722,6 @@ class FieldTypeSanitiser {
|
|
|
5759
5722
|
static FIELD_TYPE_DYNAMIC_RADIO_LIST = 'DynamicRadioList';
|
|
5760
5723
|
static FIELD_TYPE_DYNAMIC_MULTISELECT_LIST = 'DynamicMultiSelectList';
|
|
5761
5724
|
static DYNAMIC_LIST_TYPE = ['DynamicList', 'DynamicRadioList', 'DynamicMultiSelectList'];
|
|
5762
|
-
static DATE_FORMAT = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
|
|
5763
5725
|
/**
|
|
5764
5726
|
* This method finds dynamiclists in a form and replaces their string
|
|
5765
5727
|
* values, with a JSON object, as below:
|
|
@@ -5978,12 +5940,6 @@ class FormValueService {
|
|
|
5978
5940
|
sanitise(rawValue) {
|
|
5979
5941
|
return this.sanitiseObject(rawValue);
|
|
5980
5942
|
}
|
|
5981
|
-
sanitiseData(caseFields, rawValue) {
|
|
5982
|
-
return {
|
|
5983
|
-
...rawValue,
|
|
5984
|
-
data: this.sanitiseDateTimes(caseFields, rawValue.data)
|
|
5985
|
-
};
|
|
5986
|
-
}
|
|
5987
5943
|
sanitiseCaseReference(reference) {
|
|
5988
5944
|
// strip non digits
|
|
5989
5945
|
const s = reference.replace(/[\D]/g, '');
|
|
@@ -6004,57 +5960,6 @@ class FormValueService {
|
|
|
6004
5960
|
sanitiseDynamicLists(caseFields, editForm) {
|
|
6005
5961
|
return this.fieldTypeSanitiser.sanitiseLists(caseFields, editForm.data);
|
|
6006
5962
|
}
|
|
6007
|
-
sanitiseDateTimes(caseFields, rawValue) {
|
|
6008
|
-
if (!caseFields || !rawValue || typeof rawValue !== 'object') {
|
|
6009
|
-
return rawValue;
|
|
6010
|
-
}
|
|
6011
|
-
const sanitiseField = (fields, value) => {
|
|
6012
|
-
if (!fields || !value)
|
|
6013
|
-
return;
|
|
6014
|
-
for (const field of fields) {
|
|
6015
|
-
if (!field || !field.field_type)
|
|
6016
|
-
continue;
|
|
6017
|
-
const fieldValue = value[field.id];
|
|
6018
|
-
// Check for null, undefined, empty object, empty array, empty string or number value
|
|
6019
|
-
const isBlankObject = fieldValue && typeof fieldValue === 'object' && !Array.isArray(fieldValue) && Object.keys(fieldValue).length === 0;
|
|
6020
|
-
const isBlankArray = Array.isArray(fieldValue) && fieldValue.length === 0;
|
|
6021
|
-
const isNullOrUndefined = fieldValue === null || fieldValue === undefined;
|
|
6022
|
-
const isEmptyString = fieldValue === '';
|
|
6023
|
-
const isNumber = typeof fieldValue === 'number';
|
|
6024
|
-
if (isNullOrUndefined || isBlankObject || isBlankArray || isEmptyString || isNumber) {
|
|
6025
|
-
// Skip processing if fieldValue is null, undefined, a blank object, a blank array, empty string, or a number
|
|
6026
|
-
continue;
|
|
6027
|
-
}
|
|
6028
|
-
if (field.field_type.type === 'Complex' && field.field_type.complex_fields) {
|
|
6029
|
-
sanitiseField(field.field_type.complex_fields, fieldValue);
|
|
6030
|
-
}
|
|
6031
|
-
else if (field.field_type.type === 'Collection' && field.field_type.collection_field_type) {
|
|
6032
|
-
const items = fieldValue;
|
|
6033
|
-
if (Array.isArray(items)) {
|
|
6034
|
-
for (const item of items) {
|
|
6035
|
-
if (field.field_type.collection_field_type.type === 'Complex' && item && item.value) {
|
|
6036
|
-
sanitiseField(field.field_type.collection_field_type.complex_fields, item.value);
|
|
6037
|
-
}
|
|
6038
|
-
else if (field.field_type.collection_field_type.type === 'DateTime' &&
|
|
6039
|
-
field.dateTimeEntryFormat &&
|
|
6040
|
-
typeof item.value === 'string') {
|
|
6041
|
-
item.value = item.value.replace(/Z$/, '');
|
|
6042
|
-
}
|
|
6043
|
-
}
|
|
6044
|
-
}
|
|
6045
|
-
}
|
|
6046
|
-
else if (field.field_type.type === 'DateTime' &&
|
|
6047
|
-
field.dateTimeEntryFormat &&
|
|
6048
|
-
typeof fieldValue === 'string') {
|
|
6049
|
-
value[field.id] = fieldValue.replace(/Z$/, '');
|
|
6050
|
-
}
|
|
6051
|
-
}
|
|
6052
|
-
};
|
|
6053
|
-
// Clone rawValue to avoid mutating the original object
|
|
6054
|
-
const result = JSON.parse(JSON.stringify(rawValue));
|
|
6055
|
-
sanitiseField(caseFields, result);
|
|
6056
|
-
return result;
|
|
6057
|
-
}
|
|
6058
5963
|
sanitiseObject(rawObject) {
|
|
6059
5964
|
if (!rawObject) {
|
|
6060
5965
|
return rawObject;
|
|
@@ -10491,29 +10396,8 @@ class CaseEditFormComponent {
|
|
|
10491
10396
|
this.initial = JSON.stringify(this.formValueService.sanitise(this.formGroup.value));
|
|
10492
10397
|
}
|
|
10493
10398
|
detectChangesAndEmit(changes) {
|
|
10494
|
-
const current = this.formValueService.sanitise(changes);
|
|
10495
|
-
|
|
10496
|
-
this.valuesChanged.emit(!isEqual);
|
|
10497
|
-
}
|
|
10498
|
-
deepEqual(obj1, obj2) {
|
|
10499
|
-
// Simple deep equality check
|
|
10500
|
-
if (obj1 === obj2) {
|
|
10501
|
-
return true;
|
|
10502
|
-
}
|
|
10503
|
-
if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 == null || obj2 == null) {
|
|
10504
|
-
return false;
|
|
10505
|
-
}
|
|
10506
|
-
const keys1 = Object.keys(obj1);
|
|
10507
|
-
const keys2 = Object.keys(obj2);
|
|
10508
|
-
if (keys1.length !== keys2.length) {
|
|
10509
|
-
return false;
|
|
10510
|
-
}
|
|
10511
|
-
for (const key of keys1) {
|
|
10512
|
-
if (!this.deepEqual(obj1[key], obj2[key])) {
|
|
10513
|
-
return false;
|
|
10514
|
-
}
|
|
10515
|
-
}
|
|
10516
|
-
return true;
|
|
10399
|
+
const current = JSON.stringify(this.formValueService.sanitise(changes));
|
|
10400
|
+
this.initial !== current ? this.valuesChanged.emit(true) : this.valuesChanged.emit(false);
|
|
10517
10401
|
}
|
|
10518
10402
|
static ɵfac = function CaseEditFormComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseEditFormComponent)(i0.ɵɵdirectiveInject(FormValueService)); };
|
|
10519
10403
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEditFormComponent, selectors: [["ccd-case-edit-form"]], inputs: { fields: "fields", formGroup: "formGroup", caseFields: "caseFields", pageChangeSubject: "pageChangeSubject" }, outputs: { valuesChanged: "valuesChanged" }, decls: 1, vars: 1, consts: [["CompoundRow", ""], ["ccdConditionalShowForm", "", 3, "formGroup", "caseFields", "contextFields", 4, "ngFor", "ngForOf"], ["ccdConditionalShowForm", "", 3, "formGroup", "caseFields", "contextFields"], ["ccdLabelSubstitutor", "", 3, "caseField", "formGroup", "contextFields"], [3, "ngSwitch"], [3, "caseField", "caseFields", "withLabel", "formGroup", 4, "ngSwitchCase"], [4, "ngSwitchCase"], [3, "caseField", "caseFields", "withLabel", "formGroup"], [4, "ngIf", "ngIfElse"], [3, "caseField", "caseFields", "formGroup", "idPrefix", "hidden"]], template: function CaseEditFormComponent_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -11677,10 +11561,8 @@ class CaseEditPageComponent {
|
|
|
11677
11561
|
const formFields = this.formValueService.filterCurrentPageFields(caseFields, formValue);
|
|
11678
11562
|
// Sort out the dynamic lists.
|
|
11679
11563
|
this.formValueService.sanitiseDynamicLists(caseFields, formFields);
|
|
11680
|
-
// sanitise dateTimes for dateTimePicker
|
|
11681
|
-
const sanitisedData = this.formValueService.sanitiseData(caseFields, formFields);
|
|
11682
11564
|
// Get hold of the CaseEventData.
|
|
11683
|
-
const caseEventData = this.formValueService.sanitise(
|
|
11565
|
+
const caseEventData = this.formValueService.sanitise(formFields);
|
|
11684
11566
|
// delete fields which are not part of the case event journey wizard pages case fields
|
|
11685
11567
|
this.validPageListCaseFieldsService.deleteNonValidatedFields(this.caseEdit.validPageList, caseEventData.data, this.eventTrigger.case_fields, fromPreviousPage, this.editForm.controls['data'].value);
|
|
11686
11568
|
// Tidy it up before we return it.
|
|
@@ -29329,7 +29211,6 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
|
|
|
29329
29211
|
minError = false;
|
|
29330
29212
|
maxError = false;
|
|
29331
29213
|
dateTimeEntryFormat;
|
|
29332
|
-
isUpdating = false;
|
|
29333
29214
|
datetimePicker;
|
|
29334
29215
|
inputElement;
|
|
29335
29216
|
dateControl = new FormControl(new Date());
|
|
@@ -29352,7 +29233,7 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
|
|
|
29352
29233
|
// otherwise the last format given will be how the text shown will be displayed
|
|
29353
29234
|
setTimeout(() => {
|
|
29354
29235
|
this.setDateTimeFormat();
|
|
29355
|
-
this.
|
|
29236
|
+
this.formatValueAndSetErrors();
|
|
29356
29237
|
}, 1000);
|
|
29357
29238
|
// when the status changes check that the maximum/minimum date has not been exceeded
|
|
29358
29239
|
this.dateControl.statusChanges.subscribe(() => {
|
|
@@ -29454,54 +29335,24 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
|
|
|
29454
29335
|
this.valueChanged();
|
|
29455
29336
|
}
|
|
29456
29337
|
}
|
|
29457
|
-
loadValue() {
|
|
29458
|
-
if (this.inputElement.nativeElement.value) {
|
|
29459
|
-
const inputValue = this.inputElement.nativeElement.value;
|
|
29460
|
-
const formValue = moment(inputValue, this.dateTimeEntryFormat).format(this.momentFormat);
|
|
29461
|
-
if (formValue !== 'Invalid date') {
|
|
29462
|
-
const localMoment = moment.utc(formValue).local();
|
|
29463
|
-
this.dateControl.setValue(moment(formValue).format(this.momentFormat));
|
|
29464
|
-
this.inputElement.nativeElement.value = localMoment.format(this.dateTimeEntryFormat);
|
|
29465
|
-
if (this.datetimePicker) {
|
|
29466
|
-
this.datetimePicker.select(localMoment);
|
|
29467
|
-
}
|
|
29468
|
-
}
|
|
29469
|
-
else {
|
|
29470
|
-
// If invalid, just show the raw value
|
|
29471
|
-
this.inputElement.nativeElement.value = this.dateControl.value;
|
|
29472
|
-
}
|
|
29473
|
-
}
|
|
29474
|
-
else {
|
|
29475
|
-
this.inputElement.nativeElement.value = '';
|
|
29476
|
-
}
|
|
29477
|
-
}
|
|
29478
29338
|
formatValueAndSetErrors() {
|
|
29479
|
-
if (this.isUpdating)
|
|
29480
|
-
return;
|
|
29481
|
-
this.isUpdating = true;
|
|
29482
29339
|
if (this.inputElement.nativeElement.value) {
|
|
29483
|
-
|
|
29484
|
-
|
|
29485
|
-
const localMoment = moment(inputValue, this.dateTimeEntryFormat, true);
|
|
29340
|
+
let formValue = this.inputElement.nativeElement.value;
|
|
29341
|
+
formValue = moment(formValue, this.dateTimeEntryFormat).format(this.momentFormat);
|
|
29486
29342
|
if (formValue !== 'Invalid date') {
|
|
29487
|
-
|
|
29488
|
-
this.dateControl.setValue(
|
|
29489
|
-
this.inputElement.nativeElement.value = localMoment.format(this.dateTimeEntryFormat);
|
|
29490
|
-
// if (this.datetimePicker) {
|
|
29491
|
-
// this.datetimePicker.select(localMoment); // guarded from recursion
|
|
29492
|
-
// }
|
|
29493
|
-
this.isUpdating = false;
|
|
29343
|
+
// if not invalid set the value as the formatted value
|
|
29344
|
+
this.dateControl.setValue(formValue);
|
|
29494
29345
|
}
|
|
29495
29346
|
else {
|
|
29347
|
+
// ensure that the datepicker picks up the invalid error
|
|
29496
29348
|
const keepErrorText = this.inputElement.nativeElement.value;
|
|
29497
29349
|
this.dateControl.setValue(keepErrorText);
|
|
29498
29350
|
this.inputElement.nativeElement.value = keepErrorText;
|
|
29499
|
-
this.isUpdating = false;
|
|
29500
29351
|
}
|
|
29501
29352
|
}
|
|
29502
29353
|
else {
|
|
29354
|
+
// ensure required errors are picked up if relevant
|
|
29503
29355
|
this.dateControl.setValue('');
|
|
29504
|
-
this.isUpdating = false;
|
|
29505
29356
|
}
|
|
29506
29357
|
}
|
|
29507
29358
|
static ɵfac = function DatetimePickerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DatetimePickerComponent)(i0.ɵɵdirectiveInject(FormatTranslatorService), i0.ɵɵdirectiveInject(NGX_MAT_DATE_FORMATS)); };
|
|
@@ -29520,7 +29371,7 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
|
|
|
29520
29371
|
deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
|
|
29521
29372
|
},
|
|
29522
29373
|
{ provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
|
|
29523
|
-
]), 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) {
|
|
29374
|
+
]), 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) {
|
|
29524
29375
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
29525
29376
|
i0.ɵɵelementStart(0, "div", 2)(1, "fieldset")(2, "legend");
|
|
29526
29377
|
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);
|
|
@@ -29566,7 +29417,7 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
|
|
|
29566
29417
|
deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
|
|
29567
29418
|
},
|
|
29568
29419
|
{ provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
|
|
29569
|
-
], 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 >\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{border:1px solid #bfc1c3}.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[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{border:1px solid #bfc1c3}.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[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"] }]
|
|
29420
|
+
], 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{border:1px solid #bfc1c3}.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[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{border:1px solid #bfc1c3}.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[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"] }]
|
|
29570
29421
|
}], () => [{ type: FormatTranslatorService }, { type: undefined, decorators: [{
|
|
29571
29422
|
type: Inject,
|
|
29572
29423
|
args: [NGX_MAT_DATE_FORMATS]
|