@hmcts/ccd-case-ui-toolkit 7.0.44-manage-doc-error-msg → 7.0.44-query-management

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

@@ -7062,6 +7062,7 @@ class JurisdictionService {
         return this.httpService.get('/aggregated/caseworkers/:uid/jurisdictions?access=read');
     }
     announceSelectedJurisdiction(jurisdiction) {
+        console.info('Announcing selected jurisdiction = ' + jurisdiction?.id);
         this.selectedJurisdictionSource.next(jurisdiction);
         this.selectedJurisdictionBS.next(jurisdiction);
     }
@@ -8721,7 +8722,7 @@ class EventCompletionStateMachineService {
         this.addTransitionsForStateTaskUnassigned();
     }
     entryActionForStateCheckTasksCanBeCompleted(state, context) {
-        context.workAllocationService.getTask(context.task.id).subscribe(taskResponse => {
+        context.workAllocationService.getTask(context?.task?.id).subscribe(taskResponse => {
             if (taskResponse && taskResponse.task && taskResponse.task.task_state) {
                 switch (taskResponse.task.task_state.toUpperCase()) {
                     case TaskState.Unassigned:
@@ -9326,17 +9327,27 @@ class CaseEditComponent {
         // We have to run the event completion checks if task in session storage
         // and if the task is in session storage, then is it associated to the case
         let taskInSessionStorage;
+        let taskEventInSessionStorage;
         const taskStr = this.sessionStorageService.getItem('taskToComplete');
+        const taskEventStr = this.sessionStorageService.getItem('taskEvent');
         if (taskStr) {
             taskInSessionStorage = JSON.parse(taskStr);
         }
-        if (taskInSessionStorage && taskInSessionStorage.case_id === this.getCaseId(caseDetails)) {
+        if (taskEventStr) {
+            taskEventInSessionStorage = JSON.parse(taskEventStr);
+        }
+        const eventId = this.getEventId(form);
+        const caseId = this.getCaseId(caseDetails);
+        if (this.taskExistsForThisEventAndCase(taskInSessionStorage, taskEventInSessionStorage, eventId, caseId)) {
             // Show event completion component to perform event completion checks
             this.eventCompletionParams = ({
-                caseId: this.getCaseId(caseDetails),
-                eventId: this.getEventId(form),
+                caseId,
+                eventId,
                 task: taskInSessionStorage
             });
+            // add taskEvent to link current event with task id
+            const taskEvent = { eventId, taskId: taskInSessionStorage.id };
+            this.sessionStorageService.setItem('taskEvent', JSON.stringify(taskEvent));
             this.isEventCompletionChecksRequired = true;
         }
         else {
@@ -9501,6 +9512,10 @@ class CaseEditComponent {
             return this.postCompleteTaskIfRequired();
         }), finalize(() => {
             this.loadingService.unregister(loadingSpinnerToken);
+            // on event completion ensure the previous event taskToComplete/taskEvent removed
+            this.sessionStorageService.removeItem('taskToComplete');
+            this.sessionStorageService.removeItem('taskEvent');
+            this.isSubmitting = false;
         }))
             .subscribe(() => {
             this.finishEventCompletionLogic(eventResponse);
@@ -9514,7 +9529,6 @@ class CaseEditComponent {
                     this.formErrorService
                         .mapFieldErrors(this.error.details.field_errors, form.controls['data'], 'validation');
                 }
-                this.isSubmitting = false;
             }
             else {
                 this.sessionStorageService.setItem('taskCompletionError', 'true');
@@ -9559,6 +9573,25 @@ class CaseEditComponent {
             return null;
         }
     }
+    // checks whether current taskToComplete relevant for the event
+    taskExistsForThisEventAndCase(taskInSessionStorage, taskEvent, eventId, caseId) {
+        if (!taskInSessionStorage || taskInSessionStorage.case_id !== caseId) {
+            return false;
+        }
+        if (!taskEvent) {
+            // if no task event present then there is no task to complete from previous event present
+            return true;
+        }
+        else {
+            if (taskEvent.taskId === taskInSessionStorage.id && taskEvent.eventId !== eventId) {
+                // if the session storage not related to event, ignore it and remove
+                this.sessionStorageService.removeItem('taskToComplete');
+                this.sessionStorageService.removeItem('taskEvent');
+                return false;
+            }
+            return true;
+        }
+    }
     onEventCanBeCompleted({ eventTrigger, eventCanBeCompleted, caseDetails, form, submit }) {
         if (eventCanBeCompleted) {
             // Submit
@@ -10373,8 +10406,6 @@ class CaseEditPageComponent {
                             id = `${fieldArray['component']['collItems'][0].prefix}`;
                         }
                         fieldArray.controls.forEach((c) => {
-                            const idPrefix = c.get('value')['component'].idPrefix;
-                            id = idPrefix !== id ? idPrefix : id;
                             errorPresent = this.generateErrorMessage(casefield.field_type.collection_field_type.complex_fields, c.get('value'), id);
                         });
                     }
@@ -10427,7 +10458,6 @@ class CaseEditPageComponent {
     }
     submit() {
         this.caseEditDataService.clearFormValidationErrors();
-        console.log('Page submit event fired!');
         if (this.currentPageIsNotValid()) {
             // The generateErrorMessage method filters out the hidden fields.
             // The error message for LinkedCases journey will never get displayed because the
@@ -10453,6 +10483,7 @@ class CaseEditPageComponent {
             this.validateSub = this.caseEdit.validate(caseEventData, this.currentPage.id)
                 .pipe(finalize(() => {
                 this.loadingService.unregister(loadingSpinnerToken);
+                this.caseEdit.isSubmitting = false;
             }))
                 .subscribe((jsonData) => {
                 /* istanbul ignore else */
@@ -12534,8 +12565,10 @@ class WriteCaseFlagFieldComponent extends AbstractFieldWriteComponent {
                 this.hmctsServiceId = this.route.snapshot.data.eventTrigger.supplementary_data.HMCTSServiceId;
             }
             if (this.route.snapshot.data.eventTrigger.case_fields) {
-                this.flagsData = (this.route.snapshot.data.eventTrigger.case_fields)
-                    .reduce((flags, caseField) => FieldsUtils.extractFlagsDataFromCaseField(flags, caseField, caseField.id, caseField), []);
+                this.flagsData = this.route.snapshot.data.eventTrigger.case_fields
+                    .reduce((flags, caseField) => {
+                    return FieldsUtils.extractFlagsDataFromCaseField(flags, caseField, caseField.id, caseField);
+                }, []);
                 // Set displayContextParameter (to be passed as an input to ManageCaseFlagsComponent for setting correct title)
                 this.displayContextParameter =
                     this.setDisplayContextParameter(this.route.snapshot.data.eventTrigger.case_fields);
@@ -19490,7 +19523,7 @@ class QualifyingQuestionOptionsComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QualifyingQuestionOptionsComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-qualifying-question-options', template: "<ng-container *ngIf=\"qualifyingQuestionsControl\">\n  <div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"displayError\">\n    <fieldset class=\"govuk-fieldset\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-fieldset__heading\">\n          {{ 'Raise a new query' | rpxTranslate }}\n        </h1>\n      </legend>\n      <h2 class=\"govuk-heading-m govuk-!-margin-top-10\">\n        {{ 'Select the type of query you are raising:' | rpxTranslate }}\n      </h2>\n\n      <ng-container *ngIf=\"displayError\">\n        <p class=\"govuk-error-message\">\n          <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{\n          qualifyingQuestionsErrorMessage.SELECT_AN_OPTION | rpxTranslate }}\n        </p>\n      </ng-container>\n\n      <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n        <ng-container *ngFor=\"let qualifyingQuestion of qualifyingQuestions$ | async; let isLast = last\">\n          <ng-container *ngIf=\"isLast\">\n            <div class=\"govuk-radios__divider\">{{ 'or' | rpxTranslate }}</div>\n          </ng-container>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"{{qualifyingQuestion.name}}\" name=\"qualifyingQuestionOption\"\n              type=\"radio\" [formControl]=\"qualifyingQuestionsControl\" [value]=\"qualifyingQuestion\">\n            <label class=\"govuk-label govuk-radios__label\" [for]=\"qualifyingQuestion.name\">{{ qualifyingQuestion.name |\n              rpxTranslate }}</label>\n            <div *ngIf=\"isLast\" class=\"govuk-hint govuk-radios__hint\">\n              {{ '(To reply to an existing query' | rpxTranslate }}\n              <a class=\"govuk-link\" href=\"javascript:void(0)\" (click)=\"click()\">{{ 'click here' | rpxTranslate }}</a>.)\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>" }]
+        args: [{ selector: 'ccd-qualifying-question-options', template: "<ng-container *ngIf=\"qualifyingQuestionsControl\">\n  <div class=\"govuk-form-group\" [class.govuk-form-group--error]=\"displayError\">\n    <fieldset class=\"govuk-fieldset\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-fieldset__heading\">\n          {{ 'Raise a new query' | rpxTranslate }}\n        </h1>\n      </legend>\n      <h2 class=\"govuk-heading-m govuk-!-margin-top-10\">\n        {{ 'Select the type of query you are raising:' | rpxTranslate }}\n      </h2>\n\n      <ng-container *ngIf=\"displayError\">\n        <p class=\"govuk-error-message\">\n          <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{\n          qualifyingQuestionsErrorMessage.SELECT_AN_OPTION | rpxTranslate }}\n        </p>\n      </ng-container>\n\n      <div class=\"govuk-radios\" data-module=\"govuk-radios\">\n        <ng-container *ngFor=\"let qualifyingQuestion of qualifyingQuestions$ | async; let isLast = last\">\n          <ng-container *ngIf=\"isLast\">\n            <div class=\"govuk-radios__divider\">{{ 'or' | rpxTranslate }}</div>\n          </ng-container>\n          <div class=\"govuk-radios__item\">\n            <input class=\"govuk-radios__input\" id=\"{{qualifyingQuestion.name}}\" name=\"qualifyingQuestionOption\"\n              type=\"radio\" [formControl]=\"qualifyingQuestionsControl\" [value]=\"qualifyingQuestion\">\n            <label class=\"govuk-label govuk-radios__label\" [for]=\"qualifyingQuestion.name\">{{ qualifyingQuestion.name |\n              rpxTranslate }}</label>\n            <div *ngIf=\"isLast\" class=\"govuk-hint govuk-radios__hint\">\n              {{ '(To reply to an existing query' | rpxTranslate }}\n              <a class=\"govuk-link\" href=\"javascript:void(0)\" (click)=\"click()\">{{ 'click here' | rpxTranslate }}</a>.)\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </fieldset>\n  </div>\n</ng-container>\n" }]
     }], () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }], { qualifyingQuestionsControl: [{
             type: Input
         }], qualifyingQuestions$: [{
@@ -19511,6 +19544,47 @@ class QueryManagementUtils {
             }
         };
     }
+    static getNewQueryData(formGroup, currentUserDetails) {
+        const currentUserId = currentUserDetails?.uid;
+        const currentUserName = currentUserDetails?.name;
+        const subject = formGroup.get('subject').value;
+        const body = formGroup.get('body').value;
+        const isHearingRelated = formGroup.get('isHearingRelated').value ? 'Yes' : 'No';
+        const hearingDate = isHearingRelated
+            ? formGroup.get('hearingDate').value
+            : null;
+        const attachments = formGroup.get('attachments').value;
+        return {
+            id: '',
+            subject,
+            name: currentUserName,
+            body,
+            attachments,
+            isHearingRelated,
+            hearingDate,
+            createdOn: new Date(),
+            createdBy: currentUserId
+        };
+    }
+    static getRespondOrFollowupQueryData(formGroup, queryItem, currentUserDetails) {
+        const currentUserId = currentUserDetails?.uid;
+        const currentUserName = currentUserDetails?.name;
+        const body = formGroup.get('body').value;
+        const attachments = formGroup.get('attachments').value;
+        queryItem.isHearingRelated = queryItem.isHearingRelated ? 'Yes' : 'No';
+        return {
+            id: '',
+            subject: queryItem.subject,
+            name: currentUserName,
+            body,
+            attachments,
+            isHearingRelated: queryItem.isHearingRelated,
+            hearingDate: queryItem.hearingDate,
+            createdOn: new Date(),
+            createdBy: currentUserId,
+            parentId: queryItem.id
+        };
+    }
     static ɵfac = function QueryManagementUtils_Factory(t) { return new (t || QueryManagementUtils)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: QueryManagementUtils, factory: QueryManagementUtils.ɵfac });
 }
@@ -19846,40 +19920,93 @@ function QueryCheckYourAnswersComponent_ccd_query_attachments_read_28_Template(r
 } }
 class QueryCheckYourAnswersComponent {
     route;
-    workAllocationService;
+    router;
+    casesService;
     caseNotifier;
+    workAllocationService;
+    sessionStorageService;
+    RAISE_A_QUERY_EVENT_TRIGGER_ID = 'queryManagementRaiseQuery';
+    RESPOND_TO_QUERY_EVENT_TRIGGER_ID = 'queryManagementRespondQuery';
     formGroup;
     queryItem;
     queryCreateContext;
     backClicked = new EventEmitter();
+    querySubmitted = new EventEmitter();
+    caseViewTrigger;
+    caseDetails;
+    queryId;
+    getEventTrigger$;
+    createEventSubscription;
+    searchTasksSubsciption;
     queryCreateContextEnum = QueryCreateContext;
     eventCompletionParams;
     caseId;
-    eventId;
-    queryId;
-    searchTasksSubsciption;
-    constructor(route, workAllocationService, caseNotifier) {
+    constructor(route, router, casesService, caseNotifier, workAllocationService, sessionStorageService) {
         this.route = route;
-        this.workAllocationService = workAllocationService;
+        this.router = router;
+        this.casesService = casesService;
         this.caseNotifier = caseNotifier;
+        this.workAllocationService = workAllocationService;
+        this.sessionStorageService = sessionStorageService;
     }
     ngOnInit() {
         this.queryId = this.route.snapshot.params.qid;
         this.caseNotifier.caseView.pipe(take(1)).subscribe(caseDetails => {
-            this.caseId = caseDetails.case_id;
-            // To be set after integration
-            this.eventId = 'respondToQuery';
+            this.caseDetails = caseDetails;
+            if (this.queryCreateContext !== QueryCreateContext.RESPOND) {
+                // Find raise a query event trigger from the list, will be used when submitting the query
+                this.caseViewTrigger = this.caseDetails.triggers.find((trigger) => trigger.id === this.RAISE_A_QUERY_EVENT_TRIGGER_ID);
+                // Initialise getEventTrigger observable, will be used when submitting the query
+                this.getEventTrigger$ = this.casesService.getEventTrigger(undefined, this.RAISE_A_QUERY_EVENT_TRIGGER_ID, this.caseDetails.case_id);
+            }
+            else {
+                // Raise a query and Follow-up query uses the same event trigger id
+                // Find raise a query event trigger from the list, will be used when submitting the query
+                this.caseViewTrigger = this.caseDetails.triggers.find((trigger) => trigger.id === this.RESPOND_TO_QUERY_EVENT_TRIGGER_ID);
+                // Initialise getEventTrigger observable, will be used when submitting the query
+                this.getEventTrigger$ = this.casesService.getEventTrigger(undefined, this.RESPOND_TO_QUERY_EVENT_TRIGGER_ID, this.caseDetails.case_id);
+            }
         });
     }
     ngOnDestroy() {
+        this.createEventSubscription?.unsubscribe();
         this.searchTasksSubsciption?.unsubscribe();
     }
     goBack() {
         this.backClicked.emit(true);
     }
     submit() {
+        // Generate case queries collection data for submission
+        const data = this.generateCaseQueriesCollectionData();
+        // Actual submission of query
+        this.createEventSubscription = this.getEventTrigger$.pipe(switchMap((caseEventTrigger) => {
+            // Setup CaseEventData
+            const caseEventData = {
+                data,
+                event: {
+                    id: this.caseViewTrigger.id,
+                    summary: '',
+                    description: this.caseViewTrigger.description
+                },
+                event_token: caseEventTrigger.event_token,
+                ignore_warning: false
+            };
+            // Complete event
+            return this.casesService.createEvent(this.caseDetails, caseEventData);
+        })).subscribe(
+        // Successful response
+        () => {
+            // Search and complete task
+            this.searchAndCompleteTask();
+            // Emit query submitted event
+            this.querySubmitted.emit(true);
+        }, 
+        // Error
+        () => this.router.navigate(['/', 'service-down']));
+    }
+    searchAndCompleteTask() {
         // Search Task
-        const searchParameter = { ccdId: this.caseId };
+        const searchParameter = { ccdId: this.caseDetails.case_id };
         this.searchTasksSubsciption = this.workAllocationService.searchTasks(searchParameter)
             .subscribe((response) => {
             // Filter task by query id
@@ -19892,14 +20019,32 @@ class QueryCheckYourAnswersComponent {
             });
             // Trigger event completion
             this.eventCompletionParams = {
-                caseId: this.caseId,
-                eventId: this.eventId,
+                caseId: this.caseDetails.case_id,
+                eventId: this.RESPOND_TO_QUERY_EVENT_TRIGGER_ID,
                 task: filteredtask
             };
         });
     }
-    static ɵfac = function QueryCheckYourAnswersComponent_Factory(t) { return new (t || QueryCheckYourAnswersComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(CaseNotifier)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryCheckYourAnswersComponent, selectors: [["ccd-query-check-your-answers"]], inputs: { formGroup: "formGroup", queryItem: "queryItem", queryCreateContext: "queryCreateContext" }, outputs: { backClicked: "backClicked" }, decls: 42, vars: 26, consts: [["defaultCheckYourAnswersTitle", ""], ["isHearingRelatedFalse", ""], [1, "govuk-grid-row"], [1, "govuk-grid-column-two-thirds-from-desktop"], [4, "ngIf"], [1, "govuk-heading-l"], [4, "ngIf", "ngIfElse"], [1, "govuk-!-margin-bottom-4"], ["class", "govuk-summary-list govuk-!-margin-bottom-0", 4, "ngIf"], [1, "govuk-summary-list", "govuk-!-margin-bottom-0"], [1, "govuk-summary-list__row"], [1, "govuk-summary-list__key"], [1, "govuk-summary-list__value"], [1, "govuk-summary-list__actions"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], [1, "govuk-summary-list__value", "govuk-summary-list__value--documentAttached"], [3, "attachments", 4, "ngIf"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", "govuk-!-margin-right-3", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", 3, "click"], [3, "eventCompletionParams"], [1, "govuk-caption-l"], ["href", "javascript:void(0)", "class", "govuk-link", 3, "click", 4, "ngIf"], ["class", "govuk-summary-list__row", 4, "ngIf"], [3, "attachments"]], template: function QueryCheckYourAnswersComponent_Template(rf, ctx) { if (rf & 1) {
+    generateCaseQueriesCollectionData() {
+        const currentUserDetails = JSON.parse(this.sessionStorageService.getItem('userDetails'));
+        const caseMessage = this.queryCreateContext === QueryCreateContext.NEW_QUERY
+            ? QueryManagementUtils.getNewQueryData(this.formGroup, currentUserDetails)
+            : QueryManagementUtils.getRespondOrFollowupQueryData(this.formGroup, this.queryItem, currentUserDetails);
+        return {
+            qmCaseQueriesCollection: {
+                partyName: '', // Not returned by CCD
+                roleOnCase: '', // Not returned by CCD
+                caseMessages: [
+                    {
+                        id: '',
+                        value: caseMessage
+                    }
+                ]
+            }
+        };
+    }
+    static ɵfac = function QueryCheckYourAnswersComponent_Factory(t) { return new (t || QueryCheckYourAnswersComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(WorkAllocationService), i0.ɵɵdirectiveInject(SessionStorageService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryCheckYourAnswersComponent, selectors: [["ccd-query-check-your-answers"]], inputs: { formGroup: "formGroup", queryItem: "queryItem", queryCreateContext: "queryCreateContext" }, outputs: { backClicked: "backClicked", querySubmitted: "querySubmitted" }, decls: 42, vars: 26, consts: [["defaultCheckYourAnswersTitle", ""], ["isHearingRelatedFalse", ""], [1, "govuk-grid-row"], [1, "govuk-grid-column-two-thirds-from-desktop"], [4, "ngIf"], [1, "govuk-heading-l"], [4, "ngIf", "ngIfElse"], [1, "govuk-!-margin-bottom-4"], ["class", "govuk-summary-list govuk-!-margin-bottom-0", 4, "ngIf"], [1, "govuk-summary-list", "govuk-!-margin-bottom-0"], [1, "govuk-summary-list__row"], [1, "govuk-summary-list__key"], [1, "govuk-summary-list__value"], [1, "govuk-summary-list__actions"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], [1, "govuk-summary-list__value", "govuk-summary-list__value--documentAttached"], [3, "attachments", 4, "ngIf"], ["data-module", "govuk-button", 1, "govuk-button", "govuk-button--secondary", "govuk-!-margin-right-3", 3, "click"], ["data-module", "govuk-button", 1, "govuk-button", 3, "click"], [3, "eventCompletionParams"], [1, "govuk-caption-l"], ["href", "javascript:void(0)", "class", "govuk-link", 3, "click", 4, "ngIf"], ["class", "govuk-summary-list__row", 4, "ngIf"], [3, "attachments"]], template: function QueryCheckYourAnswersComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3);
             i0.ɵɵtemplate(2, QueryCheckYourAnswersComponent_ng_container_2_Template, 4, 3, "ng-container", 4);
@@ -19982,7 +20127,7 @@ class QueryCheckYourAnswersComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryCheckYourAnswersComponent, [{
         type: Component,
         args: [{ selector: 'ccd-query-check-your-answers', template: "<div class=\"govuk-grid-row\">\n  <div class=\"govuk-grid-column-two-thirds-from-desktop\">\n    <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY\">\n      <div class=\"govuk-caption-l\">{{ 'Raise a query' | rpxTranslate }}</div>\n    </ng-container>\n\n    <h1 class=\"govuk-heading-l\">\n      <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.RESPOND; else defaultCheckYourAnswersTitle\">\n        {{ 'Review query response details' | rpxTranslate }}\n      </ng-container>\n\n      <ng-template #defaultCheckYourAnswersTitle>\n        {{ 'Review query details' | rpxTranslate }}\n      </ng-template>\n    </h1>\n    <div class=\"govuk-!-margin-bottom-4\">\n      <ccd-query-case-details-header></ccd-query-case-details-header>\n    </div>\n\n    <dl *ngIf=\"queryCreateContext !== queryCreateContextEnum.FOLLOWUP\" class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.RESPOND ? 'Submitted query' : 'Query subject' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ queryCreateContext === queryCreateContextEnum.RESPOND ? queryItem.subject : formGroup.get('subject')?.value }}\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a  *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY\" \n            href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <dl class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.RESPOND ? 'Response detail' : 'Query detail' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ formGroup.get('body')?.value }}\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <dl *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY\" class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ 'Is the query hearing related?' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          <ng-container *ngIf=\"formGroup.get('isHearingRelated')?.value === true; else isHearingRelatedFalse\">\n            {{ 'Is the query hearing related?' | rpxTranslate: null : 'Yes' }}\n          </ng-container>\n          <ng-template #isHearingRelatedFalse>\n            {{ 'Is the query hearing related?' | rpxTranslate: null : 'No' }}\n          </ng-template>\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n\n      <div *ngIf=\"formGroup.get('isHearingRelated')?.value\" class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.NEW_QUERY\n            ? 'What is the date of the hearing?'\n            : 'What is the date of the hearing your query is related to?' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value\">\n          {{ formGroup.get('hearingDate')?.value | date: 'dd MMM yyyy' }}\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <dl class=\"govuk-summary-list govuk-!-margin-bottom-0\">\n      <div class=\"govuk-summary-list__row\">\n        <dt class=\"govuk-summary-list__key\">\n          {{ queryCreateContext === queryCreateContextEnum.NEW_QUERY ? 'Upload a file to the query' : 'Document attached' | rpxTranslate }}\n        </dt>\n        <dd class=\"govuk-summary-list__value govuk-summary-list__value--documentAttached\">\n          <ccd-query-attachments-read\n            *ngIf=\"this.formGroup.get('attachments').value\"\n            [attachments]=\"this.formGroup.get('attachments').value\"\n          >\n          </ccd-query-attachments-read>\n        </dd>\n        <dd class=\"govuk-summary-list__actions\">\n          <a href=\"javascript:void(0)\" class=\"govuk-link\" (click)=\"goBack()\">\n            {{ 'Change' | rpxTranslate }}\n          </a>\n        </dd>\n      </div>\n    </dl>\n\n    <br>\n\n    <div>\n      <button class=\"govuk-button govuk-button--secondary govuk-!-margin-right-3\" data-module=\"govuk-button\"\n        (click)=\"goBack()\">\n        {{ 'Previous' | rpxTranslate }}\n      </button>\n      <button class=\"govuk-button\" data-module=\"govuk-button\" (click)=\"submit()\">\n        {{ 'Submit' | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n\n  <ccd-query-event-completion [eventCompletionParams]=\"eventCompletionParams\">    \n  </ccd-query-event-completion>\n</div>\n", styles: [".govuk-summary-list__value--documentAttached{vertical-align:middle}\n"] }]
-    }], () => [{ type: i1$1.ActivatedRoute }, { type: WorkAllocationService }, { type: CaseNotifier }], { formGroup: [{
+    }], () => [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: CasesService }, { type: CaseNotifier }, { type: WorkAllocationService }, { type: SessionStorageService }], { formGroup: [{
             type: Input
         }], queryItem: [{
             type: Input
@@ -19990,8 +20135,10 @@ class QueryCheckYourAnswersComponent {
             type: Input
         }], backClicked: [{
             type: Output
+        }], querySubmitted: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryCheckYourAnswersComponent, { className: "QueryCheckYourAnswersComponent", filePath: "lib/shared/components/palette/query-management/components/query-check-your-answers/query-check-your-answers.component.ts", lineNumber: 16 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryCheckYourAnswersComponent, { className: "QueryCheckYourAnswersComponent", filePath: "lib/shared/components/palette/query-management/components/query-check-your-answers/query-check-your-answers.component.ts", lineNumber: 23 }); })();
 
 function QueryDetailsComponent_ng_container_0_tr_45_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr", 11)(1, "th", 7);
@@ -20991,6 +21138,132 @@ class QueryWriteRespondToQueryComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryWriteRespondToQueryComponent, { className: "QueryWriteRespondToQueryComponent", filePath: "lib/shared/components/palette/query-management/components/query-write/query-write-respond-to-query/query-write-respond-to-query.component.ts", lineNumber: 14 }); })();
 
+function QueryConfirmationComponent_main_0_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 5)(2, "h1", 6);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 7);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 8)(9, "h3", 9);
+    i0.ɵɵtext(10);
+    i0.ɵɵpipe(11, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "p");
+    i0.ɵɵtext(13);
+    i0.ɵɵpipe(14, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "p");
+    i0.ɵɵtext(16);
+    i0.ɵɵpipe(17, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "p");
+    i0.ɵɵtext(19);
+    i0.ɵɵpipe(20, "rpxTranslate");
+    i0.ɵɵelementStart(21, "a", 10);
+    i0.ɵɵtext(22);
+    i0.ɵɵpipe(23, "rpxTranslate");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 9, "Query submitted"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 11, "Your query has been sent to HMCTS"));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 13, "What happens next"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(14, 15, "Our team will read your query and will respond"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 17, "When the response is available it will be added to the 'Queries' section."));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 19, "You can"), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵpropertyInterpolate1("routerLink", "/cases/case-details/", ctx_r0.caseId, "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(23, 21, "Go back to the case"));
+} }
+function QueryConfirmationComponent_main_0_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 5)(2, "h1", 6);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 7);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 8);
+    i0.ɵɵtext(9);
+    i0.ɵɵpipe(10, "rpxTranslate");
+    i0.ɵɵelementStart(11, "a", 11);
+    i0.ɵɵtext(12);
+    i0.ɵɵpipe(13, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(14, " or ");
+    i0.ɵɵelementStart(15, "a", 12);
+    i0.ɵɵtext(16);
+    i0.ɵɵpipe(17, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 9, "Query response submitted"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 11, "This query response has been added to the case"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 13, "You can"), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵpropertyInterpolate1("routerLink", "/cases/case-details/", ctx_r0.caseId, "/tasks");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(13, 15, "return to tasks"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵpropertyInterpolate1("routerLink", "/cases/case-details/", ctx_r0.caseId, "");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 17, "Go back to the case"));
+} }
+function QueryConfirmationComponent_main_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "main", 1)(1, "div", 2)(2, "div", 3);
+    i0.ɵɵtemplate(3, QueryConfirmationComponent_main_0_ng_container_3_Template, 24, 23, "ng-container", 4)(4, QueryConfirmationComponent_main_0_ng_container_4_Template, 18, 19, "ng-container", 4);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r0.queryCreateContext === ctx_r0.queryCreateContextEnum.NEW_QUERY || ctx_r0.queryCreateContext === ctx_r0.queryCreateContextEnum.FOLLOWUP);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r0.queryCreateContext === ctx_r0.queryCreateContextEnum.RESPOND);
+} }
+class QueryConfirmationComponent {
+    route;
+    queryCreateContext;
+    caseId = '';
+    queryCreateContextEnum = QueryCreateContext;
+    constructor(route) {
+        this.route = route;
+    }
+    ngOnInit() {
+        this.caseId = this.route.snapshot.params.cid;
+    }
+    static ɵfac = function QueryConfirmationComponent_Factory(t) { return new (t || QueryConfirmationComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryConfirmationComponent, selectors: [["ccd-query-confirmation"]], inputs: { queryCreateContext: "queryCreateContext" }, decls: 1, vars: 1, consts: [["class", "govuk-main-wrapper", 4, "ngIf"], [1, "govuk-main-wrapper"], [1, "govuk-grid-row"], [1, "govuk-grid-column-two-thirds"], [4, "ngIf"], [1, "govuk-panel", "govuk-panel--confirmation"], [1, "govuk-panel__title"], [1, "govuk-panel__body"], [1, "govuk-body"], [1, "govuk-heading-s"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "routerLink"], ["id", "tasks-link", "href", "javascript:void(0)", 1, "govuk-link", 3, "routerLink"], ["id", "case-link", "href", "javascript:void(0)", 1, "govuk-link", 3, "routerLink"]], template: function QueryConfirmationComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, QueryConfirmationComponent_main_0_Template, 5, 2, "main", 0);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.queryCreateContext);
+        } }, dependencies: [i5.NgIf, i1$1.RouterLink, i1.RpxTranslatePipe], encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryConfirmationComponent, [{
+        type: Component,
+        args: [{ selector: 'ccd-query-confirmation', template: "<main class=\"govuk-main-wrapper\" *ngIf=\"queryCreateContext\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-two-thirds\">\n      <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.NEW_QUERY || queryCreateContext === queryCreateContextEnum.FOLLOWUP\">\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">{{'Query submitted' | rpxTranslate}}</h1>\n          <div class=\"govuk-panel__body\">{{'Your query has been sent to HMCTS' | rpxTranslate}}</div>\n        </div>\n        <div class=\"govuk-body\">\n          <h3 class=\"govuk-heading-s\">{{'What happens next' | rpxTranslate}}</h3>\n          <p>{{'Our team will read your query and will respond' | rpxTranslate}}</p>\n          <p>{{'When the response is available it will be added to the \\'Queries\\' section.' | rpxTranslate}}</p>\n          <p>\n            {{'You can' | rpxTranslate}}\n            <a class=\"govuk-link\" href=\"javascript:void(0)\" routerLink=\"/cases/case-details/{{caseId}}\">{{'Go back to the case' | rpxTranslate}}</a>\n          </p>\n        </div>\n      </ng-container>\n      <ng-container *ngIf=\"queryCreateContext === queryCreateContextEnum.RESPOND\">\n        <div class=\"govuk-panel govuk-panel--confirmation\">\n          <h1 class=\"govuk-panel__title\">{{'Query response submitted' | rpxTranslate}}</h1>\n          <div class=\"govuk-panel__body\">{{'This query response has been added to the case' | rpxTranslate}}</div>\n        </div>\n        <div class=\"govuk-body\">\n          {{'You can' | rpxTranslate}}\n          <a class=\"govuk-link\" id=\"tasks-link\" href=\"javascript:void(0)\" routerLink=\"/cases/case-details/{{caseId}}/tasks\">{{'return to tasks' | rpxTranslate}}</a> or\n          <a class=\"govuk-link\" id=\"case-link\" href=\"javascript:void(0)\" routerLink=\"/cases/case-details/{{caseId}}\">{{'Go back to the case' | rpxTranslate}}</a>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</main>\n" }]
+    }], () => [{ type: i1$1.ActivatedRoute }], { queryCreateContext: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryConfirmationComponent, { className: "QueryConfirmationComponent", filePath: "lib/shared/components/palette/query-management/components/query-confirmation/query-confirmation.component.ts", lineNumber: 9 }); })();
+
 const _c0$B = a0 => ["/query-management", "query", a0, "4"];
 function ReadQueryManagementFieldComponent_ng_container_0_ng_container_1_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -21020,9 +21293,9 @@ function ReadQueryManagementFieldComponent_ng_container_0_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngForOf", ctx_r1.caseQueriesCollections);
 } }
-function ReadQueryManagementFieldComponent_ng_template_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function ReadQueryManagementFieldComponent_ng_template_1_ng_container_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "button", 8);
+    i0.ɵɵelementStart(1, "button", 9);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -21034,8 +21307,8 @@ function ReadQueryManagementFieldComponent_ng_template_1_ng_container_2_Template
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, "Ask a follow-up question"), " ");
 } }
-function ReadQueryManagementFieldComponent_ng_template_1_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div")(1, "p", 9);
+function ReadQueryManagementFieldComponent_ng_template_1_ng_template_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "p", 10);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -21052,14 +21325,21 @@ function ReadQueryManagementFieldComponent_ng_template_1_ng_template_3_Template(
 function ReadQueryManagementFieldComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelement(0, "br");
-    i0.ɵɵelementStart(1, "ccd-query-details", 7);
-    i0.ɵɵlistener("backClicked", function ReadQueryManagementFieldComponent_ng_template_1_Template_ccd_query_details_backClicked_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showQueryList = true); });
+    i0.ɵɵelementStart(1, "p")(2, "a", 7);
+    i0.ɵɵlistener("click", function ReadQueryManagementFieldComponent_ng_template_1_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.backToQueryListPage()); });
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "ccd-query-details", 8);
+    i0.ɵɵlistener("backClicked", function ReadQueryManagementFieldComponent_ng_template_1_Template_ccd_query_details_backClicked_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showQueryList = true); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(2, ReadQueryManagementFieldComponent_ng_template_1_ng_container_2_Template, 4, 6, "ng-container", 2)(3, ReadQueryManagementFieldComponent_ng_template_1_ng_template_3_Template, 7, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(6, ReadQueryManagementFieldComponent_ng_template_1_ng_container_6_Template, 4, 6, "ng-container", 2)(7, ReadQueryManagementFieldComponent_ng_template_1_ng_template_7_Template, 7, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
 } if (rf & 2) {
-    const queryIsInReview_r5 = i0.ɵɵreference(4);
+    const queryIsInReview_r5 = i0.ɵɵreference(8);
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 5, "Back to queries"));
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("query", ctx_r1.query)("caseId", ctx_r1.caseId);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", (ctx_r1.query == null ? null : ctx_r1.query.children == null ? null : ctx_r1.query.children.length) > 0)("ngIfElse", queryIsInReview_r5);
@@ -21093,9 +21373,13 @@ class ReadQueryManagementFieldComponent extends AbstractFieldReadComponent {
         this.showQueryList = false;
         this.query = query;
     }
+    backToQueryListPage() {
+        this.showQueryList = true;
+        this.query = null;
+    }
     static ɵfac = function ReadQueryManagementFieldComponent_Factory(t) { return new (t || ReadQueryManagementFieldComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadQueryManagementFieldComponent, selectors: [["ccd-read-query-management-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [["singleQueryDetails", ""], ["queryIsInReview", ""], [4, "ngIf", "ngIfElse"], [4, "ngFor", "ngForOf"], ["class", "govuk-!-margin-top-8 govuk-!-margin-bottom-8", 4, "ngIf"], [1, "govuk-!-margin-top-8", "govuk-!-margin-bottom-8"], [3, "selectedQuery", "caseQueriesCollection"], [3, "backClicked", "query", "caseId"], ["id", "ask-follow-up-question", "data-module", "govuk-button", 1, "govuk-button", 3, "routerLink"], [1, "govuk-!-font-weight-bold"]], template: function ReadQueryManagementFieldComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, ReadQueryManagementFieldComponent_ng_container_0_Template, 2, 1, "ng-container", 2)(1, ReadQueryManagementFieldComponent_ng_template_1_Template, 5, 4, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ReadQueryManagementFieldComponent, selectors: [["ccd-read-query-management-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 2, consts: [["singleQueryDetails", ""], ["queryIsInReview", ""], [4, "ngIf", "ngIfElse"], [4, "ngFor", "ngForOf"], ["class", "govuk-!-margin-top-8 govuk-!-margin-bottom-8", 4, "ngIf"], [1, "govuk-!-margin-top-8", "govuk-!-margin-bottom-8"], [3, "selectedQuery", "caseQueriesCollection"], ["href", "javascript:void(0)", 1, "govuk-link", 3, "click"], [3, "backClicked", "query", "caseId"], ["id", "ask-follow-up-question", "data-module", "govuk-button", 1, "govuk-button", 3, "routerLink"], [1, "govuk-!-font-weight-bold"]], template: function ReadQueryManagementFieldComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ReadQueryManagementFieldComponent_ng_container_0_Template, 2, 1, "ng-container", 2)(1, ReadQueryManagementFieldComponent_ng_template_1_Template, 9, 7, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             const singleQueryDetails_r6 = i0.ɵɵreference(2);
             i0.ɵɵproperty("ngIf", ctx.showQueryList)("ngIfElse", singleQueryDetails_r6);
@@ -21103,7 +21387,7 @@ class ReadQueryManagementFieldComponent extends AbstractFieldReadComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadQueryManagementFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-read-query-management-field', template: "<ng-container *ngIf=\"showQueryList; else singleQueryDetails\">\n  <ng-container *ngFor=\"let caseQueriesCollection of caseQueriesCollections\">\n    <div *ngIf=\"showQueryList\" class=\"govuk-!-margin-top-8 govuk-!-margin-bottom-8\">\n      <ccd-query-list (selectedQuery)=\"setQuery($event)\" [caseQueriesCollection]=\"caseQueriesCollection\"></ccd-query-list>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #singleQueryDetails>\n  <br>\n  <ccd-query-details\n    [query]=\"query\"\n    (backClicked)=\"showQueryList = true\"\n    [caseId]=\"caseId\"\n  ></ccd-query-details>\n\n  <ng-container *ngIf=\"query?.children?.length > 0; else queryIsInReview\">\n    <button id=\"ask-follow-up-question\" class=\"govuk-button\" data-module=\"govuk-button\"\n            [routerLink]=\"['/query-management', 'query', caseId, '4']\"\n    >\n      {{ 'Ask a follow-up question' | rpxTranslate }}\n    </button>\n  </ng-container>\n\n  <ng-template #queryIsInReview>\n    <div>\n      <p class=\"govuk-!-font-weight-bold\">{{ 'Your query is under review' | rpxTranslate }}</p>\n      <p>{{ 'Our team will read your query and will respond. Do not submit the same query more than once.' | rpxTranslate }}</p>\n    </div>\n  </ng-template>\n</ng-template>\n" }]
+        args: [{ selector: 'ccd-read-query-management-field', template: "<ng-container *ngIf=\"showQueryList; else singleQueryDetails\">\n  <ng-container *ngFor=\"let caseQueriesCollection of caseQueriesCollections\">\n    <div *ngIf=\"showQueryList\" class=\"govuk-!-margin-top-8 govuk-!-margin-bottom-8\">\n      <ccd-query-list (selectedQuery)=\"setQuery($event)\" [caseQueriesCollection]=\"caseQueriesCollection\"></ccd-query-list>\n    </div>\n  </ng-container>\n</ng-container>\n\n<ng-template #singleQueryDetails>\n  <br>\n  <p>\n    <a class=\"govuk-link\" href=\"javascript:void(0)\" (click)=\"backToQueryListPage()\">{{ 'Back to queries' | rpxTranslate }}</a>\n  </p>\n\n  <ccd-query-details\n    [query]=\"query\"\n    (backClicked)=\"showQueryList = true\"\n    [caseId]=\"caseId\"\n  ></ccd-query-details>\n\n  <ng-container *ngIf=\"query?.children?.length > 0; else queryIsInReview\">\n    <button id=\"ask-follow-up-question\" class=\"govuk-button\" data-module=\"govuk-button\"\n            [routerLink]=\"['/query-management', 'query', caseId, '4']\"\n    >\n      {{ 'Ask a follow-up question' | rpxTranslate }}\n    </button>\n  </ng-container>\n\n  <ng-template #queryIsInReview>\n    <div>\n      <p class=\"govuk-!-font-weight-bold\">{{ 'Your query is under review' | rpxTranslate }}</p>\n      <p>{{ 'Our team will read your query and will respond. Do not submit the same query more than once.' | rpxTranslate }}</p>\n    </div>\n  </ng-template>\n</ng-template>\n" }]
     }], () => [{ type: i1$1.ActivatedRoute }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadQueryManagementFieldComponent, { className: "ReadQueryManagementFieldComponent", filePath: "lib/shared/components/palette/query-management/read-query-management-field.component.ts", lineNumber: 14 }); })();
 
@@ -22360,7 +22644,7 @@ function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template(rf, c
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", node_r2.name, " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(9, 5, node_r2.upload_timestamp, "dd MMM YYYY"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(9, 5, node_r2.upload_timestamp, "dd MMM YYYY HH:mm"));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("allowMoving", ctx_r2.allowMoving);
 } }
@@ -22654,7 +22938,7 @@ class CaseFileViewFolderComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\"\n      aria-label=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\">Documents ({{ documentCount }})</div>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp | date:\"dd MMM YYYY\"}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
+        args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\"\n      aria-label=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\">Documents ({{ documentCount }})</div>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp | date:\"dd MMM YYYY HH:mm\"}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
     }], () => [{ type: WindowService }, { type: i1$1.Router }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: AbstractAppConfig }], { categoriesAndDocuments: [{
             type: Input
         }], allowMoving: [{
@@ -24324,6 +24608,20 @@ class SelectFlagTypeComponent {
                 [SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY]: ''
             });
         });
+        this.formGroup.addControl(CaseFlagFormFields.FLAG_TYPE, new FormControl(''));
+        this.formGroup.addControl(CaseFlagFormFields.OTHER_FLAG_DESCRIPTION, new FormControl(''));
+        this.formGroup.addControl(CaseFlagFormFields.IS_VISIBLE_INTERNALLY_ONLY, new FormControl(''));
+        // Should clear descriptionControlName if flagTypeControlName is changed
+        this.flagTypeControlChangesSubscription = this.formGroup.get(CaseFlagFormFields.FLAG_TYPE).valueChanges
+            .subscribe(_ => {
+            this.formGroup.get(CaseFlagFormFields.OTHER_FLAG_DESCRIPTION).setValue('');
+            this.cachedPath = [];
+            // required to clear language interpreter
+            this.formGroup.patchValue({
+                [SearchLanguageInterpreterControlNames.LANGUAGE_SEARCH_TERM]: '',
+                [SearchLanguageInterpreterControlNames.MANUAL_LANGUAGE_ENTRY]: ''
+            });
+        });
         // If hmctsServiceId is present, use this to retrieve the relevant list of flag types
         if (this.hmctsServiceId) {
             this.flagRefdata$ = this.caseFlagRefdataService
@@ -26484,7 +26782,7 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
             i0.ɵɵproperty("for", picker_r3);
             i0.ɵɵadvance();
             i0.ɵɵproperty("color", ctx.color)("touchUi", ctx.touchUi)("hideTime", ctx.hideTime)("startView", ctx.startView)("stepHour", ctx.stepHour)("stepSecond", ctx.stepSecond)("stepMinute", ctx.stepMinute)("showSeconds", ctx.showSeconds)("showSpinners", ctx.showSpinners)("disableMinute", ctx.disableMinute)("enableMeridian", ctx.enableMeridian);
-        } }, dependencies: [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.FormControlDirective, i4$1.NgxMatDatetimepicker, i4$1.NgxMatDatepickerInput, i4$1.NgxMatDatepickerActions, i4$1.NgxMatDatepickerApply, i5$2.MatLegacySuffix, i6$1.MatDatepickerToggle, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], 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}.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"], encapsulation: 2 });
+        } }, dependencies: [i5.NgClass, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.FormControlDirective, i4$1.NgxMatDatetimepicker, i4$1.NgxMatDatepickerInput, i4$1.NgxMatDatepickerActions, i4$1.NgxMatDatepickerApply, i5$2.MatLegacySuffix, i6$1.MatDatepickerToggle, FieldLabelPipe, FirstErrorPipe, i1.RpxTranslatePipe], 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"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DatetimePickerComponent, [{
         type: Component,
@@ -26496,7 +26794,7 @@ class DatetimePickerComponent extends AbstractFormFieldComponent {
                         deps: [MAT_LEGACY_DATE_LOCALE, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS]
                     },
                     { provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
-                ], 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}.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"] }]
+                ], 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"] }]
     }], () => [{ type: FormatTranslatorService }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [NGX_MAT_DATE_FORMATS]
@@ -27940,6 +28238,7 @@ const PALETTE_COMPONENTS = [
     QualifyingQuestionDetailComponent,
     QueryAttachmentsReadComponent,
     QueryEventCompletionComponent,
+    QueryConfirmationComponent,
     // Case event completion
     CaseEventCompletionComponent,
     CaseEventCompletionTaskCancelledComponent,
@@ -28207,6 +28506,7 @@ class PaletteModule {
         QualifyingQuestionDetailComponent,
         QueryAttachmentsReadComponent,
         QueryEventCompletionComponent,
+        QueryConfirmationComponent,
         // Case event completion
         CaseEventCompletionComponent,
         CaseEventCompletionTaskCancelledComponent,
@@ -28362,6 +28662,7 @@ class PaletteModule {
         QualifyingQuestionDetailComponent,
         QueryAttachmentsReadComponent,
         QueryEventCompletionComponent,
+        QueryConfirmationComponent,
         // Case event completion
         CaseEventCompletionComponent,
         CaseEventCompletionTaskCancelledComponent,
@@ -33973,6 +34274,7 @@ function EventTriggerComponent_form_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 10, ctx_r1.triggerText));
 } }
 class EventTriggerComponent {
+    appConfig;
     fb;
     orderService;
     triggers;
@@ -33982,7 +34284,8 @@ class EventTriggerComponent {
     onTriggerSubmit = new EventEmitter();
     onTriggerChange = new EventEmitter();
     triggerForm;
-    constructor(fb, orderService) {
+    constructor(appConfig, fb, orderService) {
+        this.appConfig = appConfig;
         this.fb = fb;
         this.orderService = orderService;
     }
@@ -33990,11 +34293,14 @@ class EventTriggerComponent {
         this.triggers = this.orderService.sort(this.triggers);
         if (this.eventId) {
             const eventBundle = this.triggers.find(ev => ev.id === this.eventId);
-            this.triggerForm.controls['trigger'].patchValue({ id: eventBundle.id, name: eventBundle.name, description: eventBundle.description });
+            this.triggerForm.controls['trigger'].patchValue({ id: eventBundle?.id, name: eventBundle?.name, description: eventBundle?.description });
         }
     }
     ngOnChanges(changes) {
-        if (changes.triggers && changes.triggers.currentValue) {
+        if (changes?.triggers?.currentValue) {
+            const eventsToHide = this.appConfig.getEventsToHide();
+            this.triggers = this.triggers?.filter((event) => !eventsToHide.includes(event.id));
+            this.triggers = this.orderService.sort(this.triggers);
             this.triggerForm = this.fb.group({
                 trigger: [this.getDefault(), Validators.required]
             });
@@ -34015,7 +34321,7 @@ class EventTriggerComponent {
     getDefault() {
         return this.triggers.length === 1 ? this.triggers[0] : '';
     }
-    static ɵfac = function EventTriggerComponent_Factory(t) { return new (t || EventTriggerComponent)(i0.ɵɵdirectiveInject(i4.FormBuilder), i0.ɵɵdirectiveInject(OrderService)); };
+    static ɵfac = function EventTriggerComponent_Factory(t) { return new (t || EventTriggerComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(i4.FormBuilder), i0.ɵɵdirectiveInject(OrderService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EventTriggerComponent, selectors: [["ccd-event-trigger"]], inputs: { triggers: "triggers", triggerText: "triggerText", isDisabled: "isDisabled", eventId: "eventId" }, outputs: { onTriggerSubmit: "onTriggerSubmit", onTriggerChange: "onTriggerChange" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["class", "event-trigger", 3, "formGroup", "ngSubmit", 4, "ngIf"], [1, "event-trigger", 3, "ngSubmit", "formGroup"], [1, "form-group", 2, "width", "350px !important"], ["for", "next-step", 1, "form-label"], ["id", "next-step", "formControlName", "trigger", 1, "form-control", "ccd-dropdown", 3, "change", "ngClass", "compareWith"], ["value", "", "data-default", "", 4, "ngIf"], [3, "ngValue", "title", 4, "ngFor", "ngForOf"], ["type", "submit", 1, "button", 3, "disabled"], ["value", "", "data-default", ""], [3, "ngValue", "title"]], template: function EventTriggerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, EventTriggerComponent_form_0_Template, 11, 14, "form", 0);
         } if (rf & 2) {
@@ -34025,7 +34331,7 @@ class EventTriggerComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EventTriggerComponent, [{
         type: Component,
         args: [{ selector: 'ccd-event-trigger', template: "<form *ngIf=\"triggers && triggers.length\" class=\"event-trigger\" (ngSubmit)=\"triggerSubmit()\" [formGroup]=\"triggerForm\">\n  <div class=\"form-group\" style=\"width: 350px !important;\">\n    <label class=\"form-label\" for=\"next-step\">{{'Next step' | rpxTranslate}}</label>\n    <select class=\"form-control ccd-dropdown\" id=\"next-step\" (change)=\"triggerChange()\" formControlName=\"trigger\" [ngClass]=\"{\n          'EventTrigger-empty': !triggerForm.value['trigger']\n        }\" [compareWith]=\"compareFn\">\n      <option *ngIf=\"1 !== triggers.length\" value=\"\" data-default>{{'Select action' | rpxTranslate}}</option>\n      <option *ngFor=\"let trigger of triggers\" [ngValue]=\"trigger\"  [title]=\"trigger.description\">{{trigger.name | rpxTranslate}}</option>\n    </select>\n  </div>\n  <button [disabled]=\"isButtonDisabled()\" type=\"submit\" class=\"button\">{{triggerText | rpxTranslate}}</button>\n</form>\n", styles: [".event-trigger{width:auto;margin-top:40px;margin-bottom:20px}.event-trigger .form-group{margin-top:3px;margin-right:10px;margin-bottom:0;float:left;text-align:right;width:325px}.event-trigger .form-group .form-label{float:left;margin-top:5px}.event-trigger select{width:250px}.event-trigger select.EventTrigger-empty,.event-trigger select [data-default]{color:#6f777b}\n"] }]
-    }], () => [{ type: i4.FormBuilder }, { type: OrderService }], { triggers: [{
+    }], () => [{ type: AbstractAppConfig }, { type: i4.FormBuilder }, { type: OrderService }], { triggers: [{
             type: Input
         }], triggerText: [{
             type: Input
@@ -34038,7 +34344,7 @@ class EventTriggerComponent {
         }], onTriggerChange: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EventTriggerComponent, { className: "EventTriggerComponent", filePath: "lib/shared/components/event-trigger/event-trigger.component.ts", lineNumber: 11 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(EventTriggerComponent, { className: "EventTriggerComponent", filePath: "lib/shared/components/event-trigger/event-trigger.component.ts", lineNumber: 12 }); })();
 
 class EventTriggerModule {
     static ɵfac = function EventTriggerModule_Factory(t) { return new (t || EventTriggerModule)(); };
@@ -36085,43 +36391,45 @@ function SearchResultComponent_table_0_div_5_Template(rf, ctx) { if (rf & 1) {
 } }
 function SearchResultComponent_table_0_div_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵpipe(1, "rpxTranslate");
-    i0.ɵɵelementStart(2, "span", 17);
-    i0.ɵɵtext(3);
-    i0.ɵɵpipe(4, "rpxTranslate");
-    i0.ɵɵelementStart(5, "span", 18);
-    i0.ɵɵtext(6);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelement(1, "output");
+    i0.ɵɵpipe(2, "rpxTranslate");
+    i0.ɵɵelementStart(3, "span", 17);
+    i0.ɵɵtext(4);
+    i0.ɵɵpipe(5, "rpxTranslate");
+    i0.ɵɵelementStart(6, "span", 18);
     i0.ɵɵtext(7);
-    i0.ɵɵpipe(8, "rpxTranslate");
-    i0.ɵɵelementStart(9, "span", 18);
-    i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
+    i0.ɵɵtext(8);
+    i0.ɵɵpipe(9, "rpxTranslate");
+    i0.ɵɵelementStart(10, "span", 18);
     i0.ɵɵtext(11);
-    i0.ɵɵpipe(12, "rpxTranslate");
-    i0.ɵɵelementStart(13, "span", 18);
-    i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
+    i0.ɵɵtext(12);
+    i0.ɵɵpipe(13, "rpxTranslate");
+    i0.ɵɵelementStart(14, "span", 18);
     i0.ɵɵtext(15);
-    i0.ɵɵpipe(16, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(16);
+    i0.ɵɵpipe(17, "rpxTranslate");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 8, ctx_r0.getTotalResults() + " results have been found"));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 8, ctx_r0.getTotalResults() + " results have been found"));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(4, 10, "Showing"), " ");
+    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 10, "Showing"), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.getFirstResult());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 12, "to"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 12, "to"), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.getLastResult());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(12, 14, "of"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(13, 14, "of"), " ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r0.getTotalResults());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(16, 16, "results"), "");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 16, "results"), "");
 } }
 function SearchResultComponent_table_0_div_7_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
@@ -36149,10 +36457,10 @@ function SearchResultComponent_table_0_th_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("checked", ctx_r0.allOnPageSelected())("disabled", !ctx_r0.canAnyBeShared());
 } }
-function SearchResultComponent_table_0_th_11_div_8_Template(rf, ctx) { if (rf & 1) {
+function SearchResultComponent_table_0_th_11_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 28)(1, "a", 29);
-    i0.ɵɵlistener("click", function SearchResultComponent_table_0_th_11_div_8_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r6); const col_r5 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sort(col_r5)); });
+    i0.ɵɵlistener("click", function SearchResultComponent_table_0_th_11_div_5_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r6); const col_r5 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sort(col_r5)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const col_r5 = i0.ɵɵnextContext().$implicit;
@@ -36162,34 +36470,33 @@ function SearchResultComponent_table_0_th_11_div_8_Template(rf, ctx) { if (rf &
 } }
 function SearchResultComponent_table_0_th_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th")(1, "table", 25);
-    i0.ɵɵpipe(2, "rpxTranslate");
-    i0.ɵɵelementStart(3, "tr")(4, "th")(5, "div", 26);
-    i0.ɵɵlistener("click", function SearchResultComponent_table_0_th_11_Template_div_click_5_listener() { const col_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sort(col_r5)); });
-    i0.ɵɵtext(6);
-    i0.ɵɵpipe(7, "rpxTranslate");
+    i0.ɵɵelementStart(0, "th", 25)(1, "div")(2, "div", 26);
+    i0.ɵɵlistener("click", function SearchResultComponent_table_0_th_11_Template_div_click_2_listener() { const col_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.sort(col_r5)); })("keyup", function SearchResultComponent_table_0_th_11_Template_div_keyup_2_listener() { i0.ɵɵrestoreView(_r4); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.noop()); });
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, SearchResultComponent_table_0_th_11_div_8_Template, 2, 1, "div", 27);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵtemplate(5, SearchResultComponent_table_0_th_11_div_5_Template, 2, 1, "div", 27);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const col_r5 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 3, "Sort by " + col_r5.label + " " + ctx_r0.isSortAscending(col_r5) ? "ascending" : "descending"));
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 5, col_r5.label), " ");
+    i0.ɵɵattribute("aria-sort", ctx_r0.isSortAscending(col_r5) === null ? null : ctx_r0.isSortAscending(col_r5) ? "ascending" : "descending");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 3, col_r5.label), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r0.comparator(col_r5));
 } }
 function SearchResultComponent_table_0_th_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "th", 30);
+    i0.ɵɵelementStart(0, "th", 30);
+    i0.ɵɵtext(1, "\u200B");
+    i0.ɵɵelementEnd();
 } }
 function SearchResultComponent_table_0_ng_container_14_tr_1_td_1_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 21)(1, "div", 22)(2, "input", 32);
+    i0.ɵɵelementStart(0, "td", 21)(1, "div", 22)(2, "input", 33);
     i0.ɵɵlistener("change", function SearchResultComponent_table_0_ng_container_14_tr_1_td_1_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r7); const result_r8 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.changeSelection(result_r8)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "label", 33);
+    i0.ɵɵelement(3, "label", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const result_r8 = i0.ɵɵnextContext().$implicit;
@@ -36202,7 +36509,7 @@ function SearchResultComponent_table_0_ng_container_14_tr_1_td_1_Template(rf, ct
     i0.ɵɵpropertyInterpolate1("for", "select-", result_r8.case_id, "");
 } }
 function SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_ng_container_2_ccd_field_read_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ccd-field-read", 41);
+    i0.ɵɵelement(0, "ccd-field-read", 42);
 } if (rf & 2) {
     const col_r9 = i0.ɵɵnextContext(3).$implicit;
     const result_r8 = i0.ɵɵnextContext().$implicit;
@@ -36217,8 +36524,8 @@ function SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_ng_containe
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(1, 1, result_r8.case_id));
 } }
 function SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0, 39);
-    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_ng_container_2_ccd_field_read_1_Template, 1, 4, "ccd-field-read", 40)(2, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_ng_container_2_ng_template_2_Template, 2, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementContainerStart(0, 40);
+    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_ng_container_2_ccd_field_read_1_Template, 1, 4, "ccd-field-read", 41)(2, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_ng_container_2_ng_template_2_Template, 2, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const case_reference_r10 = i0.ɵɵreference(3);
@@ -36229,9 +36536,9 @@ function SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_ng_containe
     i0.ɵɵproperty("ngIf", ctx_r0.draftPrefixOrGet(col_r9, result_r8))("ngIfElse", case_reference_r10);
 } }
 function SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 37);
+    i0.ɵɵelementStart(0, "a", 38);
     i0.ɵɵpipe(1, "ccdCaseReference");
-    i0.ɵɵtemplate(2, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_ng_container_2_Template, 4, 2, "ng-container", 38);
+    i0.ɵɵtemplate(2, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_ng_container_2_Template, 4, 2, "ng-container", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const result_r8 = i0.ɵɵnextContext(2).$implicit;
@@ -36242,8 +36549,8 @@ function SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_Template(rf
     i0.ɵɵproperty("ngIf", !ctx_r0.hideRows);
 } }
 function SearchResultComponent_table_0_ng_container_14_tr_1_td_2_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵelement(1, "ccd-field-read", 41);
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelement(1, "ccd-field-read", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const col_r9 = i0.ɵɵnextContext().$implicit;
@@ -36254,8 +36561,8 @@ function SearchResultComponent_table_0_ng_container_14_tr_1_td_2_div_2_Template(
     i0.ɵɵproperty("caseField", result_r8.columns[col_r9.case_field_id])("contextFields", result_r8.hydrated_case_fields)("elementsToSubstitute", i0.ɵɵpureFunction0(5, _c1));
 } }
 function SearchResultComponent_table_0_ng_container_14_tr_1_td_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 34);
-    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_Template, 3, 6, "a", 35)(2, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_div_2_Template, 2, 6, "div", 36);
+    i0.ɵɵelementStart(0, "td", 35);
+    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_a_1_Template, 3, 6, "a", 36)(2, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_div_2_Template, 2, 6, "div", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const colIndex_r11 = ctx.index;
@@ -36266,7 +36573,7 @@ function SearchResultComponent_table_0_ng_container_14_tr_1_td_2_Template(rf, ct
 } }
 function SearchResultComponent_table_0_ng_container_14_tr_1_td_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "td")(1, "div");
-    i0.ɵɵelement(2, "ccd-activity", 42);
+    i0.ɵɵelement(2, "ccd-activity", 43);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const result_r8 = i0.ɵɵnextContext().$implicit;
@@ -36278,7 +36585,7 @@ function SearchResultComponent_table_0_ng_container_14_tr_1_td_3_Template(rf, ct
 } }
 function SearchResultComponent_table_0_ng_container_14_tr_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr");
-    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_14_tr_1_td_1_Template, 4, 8, "td", 9)(2, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_Template, 3, 2, "td", 31)(3, SearchResultComponent_table_0_ng_container_14_tr_1_td_3_Template, 3, 4, "td", 1);
+    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_14_tr_1_td_1_Template, 4, 8, "td", 9)(2, SearchResultComponent_table_0_ng_container_14_tr_1_td_2_Template, 3, 2, "td", 32)(3, SearchResultComponent_table_0_ng_container_14_tr_1_td_3_Template, 3, 4, "td", 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -36291,7 +36598,7 @@ function SearchResultComponent_table_0_ng_container_14_tr_1_Template(rf, ctx) {
 } }
 function SearchResultComponent_table_0_ng_container_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_14_tr_1_Template, 4, 3, "tr", 10);
+    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_14_tr_1_Template, 4, 3, "tr", 31);
     i0.ɵɵpipe(2, "paginate");
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -36301,10 +36608,10 @@ function SearchResultComponent_table_0_ng_container_14_Template(rf, ctx) { if (r
 } }
 function SearchResultComponent_table_0_ng_container_15_tr_1_td_1_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 21)(1, "div", 22)(2, "input", 43);
+    i0.ɵɵelementStart(0, "td", 21)(1, "div", 22)(2, "input", 44);
     i0.ɵɵlistener("change", function SearchResultComponent_table_0_ng_container_15_tr_1_td_1_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r12); const result_r13 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.changeSelection(result_r13)); })("keyup", function SearchResultComponent_table_0_ng_container_15_tr_1_td_1_Template_input_keyup_2_listener($event) { i0.ɵɵrestoreView(_r12); const result_r13 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.onKeyUp($event, result_r13)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "label", 33);
+    i0.ɵɵelement(3, "label", 34);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const result_r13 = i0.ɵɵnextContext().$implicit;
@@ -36317,7 +36624,7 @@ function SearchResultComponent_table_0_ng_container_15_tr_1_td_1_Template(rf, ct
     i0.ɵɵpropertyInterpolate1("for", "select-", result_r13.case_id, "");
 } }
 function SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_ng_container_2_ccd_field_read_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ccd-field-read", 41);
+    i0.ɵɵelement(0, "ccd-field-read", 42);
 } if (rf & 2) {
     const col_r14 = i0.ɵɵnextContext(3).$implicit;
     const result_r13 = i0.ɵɵnextContext().$implicit;
@@ -36332,8 +36639,8 @@ function SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_ng_containe
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(1, 1, result_r13.case_id));
 } }
 function SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_ng_container_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0, 39);
-    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_ng_container_2_ccd_field_read_1_Template, 1, 4, "ccd-field-read", 40)(2, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_ng_container_2_ng_template_2_Template, 2, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementContainerStart(0, 40);
+    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_ng_container_2_ccd_field_read_1_Template, 1, 4, "ccd-field-read", 41)(2, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_ng_container_2_ng_template_2_Template, 2, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const case_reference_r15 = i0.ɵɵreference(3);
@@ -36344,9 +36651,9 @@ function SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_ng_containe
     i0.ɵɵproperty("ngIf", ctx_r0.draftPrefixOrGet(col_r14, result_r13))("ngIfElse", case_reference_r15);
 } }
 function SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 37);
+    i0.ɵɵelementStart(0, "a", 38);
     i0.ɵɵpipe(1, "ccdCaseReference");
-    i0.ɵɵtemplate(2, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_ng_container_2_Template, 4, 2, "ng-container", 38);
+    i0.ɵɵtemplate(2, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_ng_container_2_Template, 4, 2, "ng-container", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const result_r13 = i0.ɵɵnextContext(2).$implicit;
@@ -36357,8 +36664,8 @@ function SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_Template(rf
     i0.ɵɵproperty("ngIf", !ctx_r0.hideRows);
 } }
 function SearchResultComponent_table_0_ng_container_15_tr_1_td_2_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵelement(1, "ccd-field-read", 41);
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵelement(1, "ccd-field-read", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const col_r14 = i0.ɵɵnextContext().$implicit;
@@ -36369,8 +36676,8 @@ function SearchResultComponent_table_0_ng_container_15_tr_1_td_2_div_2_Template(
     i0.ɵɵproperty("caseField", result_r13.columns[col_r14.case_field_id])("contextFields", result_r13.hydrated_case_fields)("elementsToSubstitute", i0.ɵɵpureFunction0(5, _c1));
 } }
 function SearchResultComponent_table_0_ng_container_15_tr_1_td_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 34);
-    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_Template, 3, 6, "a", 35)(2, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_div_2_Template, 2, 6, "div", 36);
+    i0.ɵɵelementStart(0, "td", 35);
+    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_a_1_Template, 3, 6, "a", 36)(2, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_div_2_Template, 2, 6, "div", 37);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const colIndex_r16 = ctx.index;
@@ -36381,7 +36688,7 @@ function SearchResultComponent_table_0_ng_container_15_tr_1_td_2_Template(rf, ct
 } }
 function SearchResultComponent_table_0_ng_container_15_tr_1_td_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "td")(1, "div");
-    i0.ɵɵelement(2, "ccd-activity", 42);
+    i0.ɵɵelement(2, "ccd-activity", 43);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const result_r13 = i0.ɵɵnextContext().$implicit;
@@ -36393,7 +36700,7 @@ function SearchResultComponent_table_0_ng_container_15_tr_1_td_3_Template(rf, ct
 } }
 function SearchResultComponent_table_0_ng_container_15_tr_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr");
-    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_15_tr_1_td_1_Template, 4, 8, "td", 9)(2, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_Template, 3, 2, "td", 31)(3, SearchResultComponent_table_0_ng_container_15_tr_1_td_3_Template, 3, 4, "td", 1);
+    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_15_tr_1_td_1_Template, 4, 8, "td", 9)(2, SearchResultComponent_table_0_ng_container_15_tr_1_td_2_Template, 3, 2, "td", 32)(3, SearchResultComponent_table_0_ng_container_15_tr_1_td_3_Template, 3, 4, "td", 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -36406,7 +36713,7 @@ function SearchResultComponent_table_0_ng_container_15_tr_1_Template(rf, ctx) {
 } }
 function SearchResultComponent_table_0_ng_container_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_15_tr_1_Template, 4, 3, "tr", 10);
+    i0.ɵɵtemplate(1, SearchResultComponent_table_0_ng_container_15_tr_1_Template, 4, 3, "tr", 31);
     i0.ɵɵpipe(2, "ccdSortSearchResult");
     i0.ɵɵpipe(3, "paginate");
     i0.ɵɵelementContainerEnd();
@@ -36420,10 +36727,10 @@ function SearchResultComponent_table_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, SearchResultComponent_table_0_div_5_Template, 11, 12, "div", 5)(6, SearchResultComponent_table_0_div_6_Template, 17, 18, "div", 6)(7, SearchResultComponent_table_0_div_7_Template, 6, 6, "div", 7);
+    i0.ɵɵtemplate(5, SearchResultComponent_table_0_div_5_Template, 11, 12, "div", 5)(6, SearchResultComponent_table_0_div_6_Template, 18, 18, "div", 6)(7, SearchResultComponent_table_0_div_7_Template, 6, 6, "div", 7);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "thead")(9, "tr", 8);
-    i0.ɵɵtemplate(10, SearchResultComponent_table_0_th_10_Template, 4, 2, "th", 9)(11, SearchResultComponent_table_0_th_11_Template, 9, 7, "th", 10)(12, SearchResultComponent_table_0_th_12_Template, 1, 0, "th", 11);
+    i0.ɵɵtemplate(10, SearchResultComponent_table_0_th_10_Template, 4, 2, "th", 9)(11, SearchResultComponent_table_0_th_11_Template, 6, 5, "th", 10)(12, SearchResultComponent_table_0_th_12_Template, 2, 0, "th", 11);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(13, "tbody");
     i0.ɵɵtemplate(14, SearchResultComponent_table_0_ng_container_14_Template, 3, 8, "ng-container", 1)(15, SearchResultComponent_table_0_ng_container_15_Template, 4, 11, "ng-container", 1);
@@ -36451,7 +36758,7 @@ function SearchResultComponent_table_0_Template(rf, ctx) { if (rf & 1) {
 } }
 function SearchResultComponent_ccd_pagination_1_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ccd-pagination", 44);
+    i0.ɵɵelementStart(0, "ccd-pagination", 45);
     i0.ɵɵlistener("pageChange", function SearchResultComponent_ccd_pagination_1_Template_ccd_pagination_pageChange_0_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.goToPage($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -36459,7 +36766,7 @@ function SearchResultComponent_ccd_pagination_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵproperty("visibilityLabel", ctx_r0.hideRows ? "hidden" : "visible")("autoHide", true)("maxSize", 8)("screenReaderPaginationLabel", "Pagination")("screenReaderPageLabel", ctx_r0.page)("screenReaderCurrentLabel", "You're on page");
 } }
 function SearchResultComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelementStart(0, "div", 46);
     i0.ɵɵpipe(1, "rpxTranslate");
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
@@ -36764,24 +37071,11 @@ class SearchResultComponent {
         return result.case_id.startsWith(DRAFT_PREFIX) ? DRAFT_PREFIX : this.hyphenateIfCaseReferenceOrGet(col, result);
     }
     isSortAscending(column) {
-        const currentSortOrder = this.currentSortOrder(column);
-        return currentSortOrder === SortOrder$1.UNSORTED || currentSortOrder === SortOrder$1.DESCENDING;
-    }
-    currentSortOrder(column) {
-        let isAscending = true;
-        let isDescending = true;
-        if (this.comparator(column) === undefined) {
-            return SortOrder$1.UNSORTED;
-        }
-        for (let i = 0; i < this.resultView.results.length - 1; i++) {
-            const comparison = this.comparator(column).compare(this.resultView.results[i], this.resultView.results[i + 1]);
-            isDescending = isDescending && comparison <= 0;
-            isAscending = isAscending && comparison >= 0;
-            if (!isAscending && !isDescending) {
-                break;
-            }
+        // simple way to determine if the column param is sorted and if its asc/desc
+        if (this.consumerSortParameters.column === column.case_field_id) {
+            return this.consumerSortParameters.order === SortOrder$1.ASCENDING;
         }
-        return isAscending ? SortOrder$1.ASCENDING : isDescending ? SortOrder$1.DESCENDING : SortOrder$1.UNSORTED;
+        return null;
     }
     getFirstResult() {
         const currentPage = (this.selected.page ? this.selected.page : 1);
@@ -36820,8 +37114,10 @@ class SearchResultComponent {
             }
         }
     }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    noop() { }
     static ɵfac = function SearchResultComponent_Factory(t) { return new (t || SearchResultComponent)(i0.ɵɵdirectiveInject(SearchResultViewItemComparatorFactory), i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(ActivityService), i0.ɵɵdirectiveInject(CaseReferencePipe), i0.ɵɵdirectiveInject(PlaceholderService), i0.ɵɵdirectiveInject(BrowserService), i0.ɵɵdirectiveInject(SessionStorageService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchResultComponent, selectors: [["ccd-search-result"]], inputs: { caseLinkUrlTemplate: "caseLinkUrlTemplate", jurisdiction: "jurisdiction", caseType: "caseType", caseState: "caseState", caseFilterFG: "caseFilterFG", resultView: "resultView", page: "page", paginationMetadata: "paginationMetadata", metadataFields: "metadataFields", selectionEnabled: "selectionEnabled", showOnlySelected: "showOnlySelected", preSelectedCases: "preSelectedCases", consumerSortingEnabled: "consumerSortingEnabled" }, outputs: { selection: "selection", changePage: "changePage", clickCase: "clickCase", sortHandler: "sortHandler" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 3, consts: [["case_reference", ""], [4, "ngIf"], [3, "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel", "pageChange", 4, "ngIf"], ["class", "notification", 4, "ngIf"], ["id", "search-result-heading__text", "tabindex", "-1", 1, "heading-h2"], ["class", "govuk-warning-text pagination-limit-warning", 4, "ngIf"], ["class", "pagination-top", "role", "status", 4, "ngIf"], ["class", "reset-selection", 4, "ngIf"], ["scope", "row"], ["class", "govuk-table__checkbox", "scope", "col", 4, "ngIf"], [4, "ngFor", "ngForOf"], ["style", "width: 110px;", 4, "ngIf"], [1, "govuk-warning-text", "pagination-limit-warning"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-warning-text__assistive"], ["role", "status", 1, "pagination-top"], ["id", "search-result-summary__text", 1, "text-16"], [1, "govuk-!-font-weight-bold"], [1, "reset-selection"], ["href", "javascript:void(0)", 1, "search-result-reset-link", 3, "click"], ["scope", "col", 1, "govuk-table__checkbox"], [1, "govuk-checkboxes__item"], ["id", "select-all", "name", "select-all", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "checked", "disabled"], ["for", "select-all", 1, "govuk-label", "govuk-checkboxes__label"], [1, "search-result-column-header"], [1, "search-result-column-label", 3, "click"], ["class", "search-result-column-sort", 4, "ngIf"], [1, "search-result-column-sort"], ["href", "javascript:void(0)", 1, "sort-widget", 3, "click", "innerHTML"], [2, "width", "110px"], ["class", "search-result-column-cell", "scope", "row", 4, "ngFor", "ngForOf"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "id", "name", "checked", "disabled"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["scope", "row", 1, "search-result-column-cell"], ["class", "govuk-link", 3, "routerLink", 4, "ngIf"], ["class", "text-16", 3, "visibility", 4, "ngIf"], [1, "govuk-link", 3, "routerLink"], ["class", "text-16", 4, "ngIf"], [1, "text-16"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute", 4, "ngIf", "ngIfElse"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute"], [3, "caseId", "displayMode"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "keyup", "id", "name", "checked", "disabled"], [3, "pageChange", "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], [1, "notification"]], template: function SearchResultComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchResultComponent, selectors: [["ccd-search-result"]], inputs: { caseLinkUrlTemplate: "caseLinkUrlTemplate", jurisdiction: "jurisdiction", caseType: "caseType", caseState: "caseState", caseFilterFG: "caseFilterFG", resultView: "resultView", page: "page", paginationMetadata: "paginationMetadata", metadataFields: "metadataFields", selectionEnabled: "selectionEnabled", showOnlySelected: "showOnlySelected", preSelectedCases: "preSelectedCases", consumerSortingEnabled: "consumerSortingEnabled" }, outputs: { selection: "selection", changePage: "changePage", clickCase: "clickCase", sortHandler: "sortHandler" }, features: [i0.ɵɵNgOnChangesFeature], decls: 3, vars: 3, consts: [["case_reference", ""], [4, "ngIf"], [3, "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel", "pageChange", 4, "ngIf"], ["class", "notification", 4, "ngIf"], ["id", "search-result-heading__text", "tabindex", "-1", 1, "heading-h2"], ["class", "govuk-warning-text pagination-limit-warning", 4, "ngIf"], ["class", "pagination-top", 4, "ngIf"], ["class", "reset-selection", 4, "ngIf"], ["scope", "row"], ["class", "govuk-table__checkbox", "scope", "col", 4, "ngIf"], ["class", "search-result-column-header", 4, "ngFor", "ngForOf"], ["style", "width: 110px;", 4, "ngIf"], [1, "govuk-warning-text", "pagination-limit-warning"], ["aria-hidden", "true", 1, "govuk-warning-text__icon"], [1, "govuk-warning-text__text"], [1, "govuk-warning-text__assistive"], [1, "pagination-top"], ["id", "search-result-summary__text", 1, "text-16"], [1, "govuk-!-font-weight-bold"], [1, "reset-selection"], ["href", "javascript:void(0)", 1, "search-result-reset-link", 3, "click"], ["scope", "col", 1, "govuk-table__checkbox"], [1, "govuk-checkboxes__item"], ["id", "select-all", "name", "select-all", "type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "checked", "disabled"], ["for", "select-all", 1, "govuk-label", "govuk-checkboxes__label"], [1, "search-result-column-header"], [1, "search-result-column-label", 3, "click", "keyup"], ["class", "search-result-column-sort", 4, "ngIf"], [1, "search-result-column-sort"], ["href", "javascript:void(0)", 1, "sort-widget", 3, "click", "innerHTML"], [2, "width", "110px"], [4, "ngFor", "ngForOf"], ["class", "search-result-column-cell", "scope", "row", 4, "ngFor", "ngForOf"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "id", "name", "checked", "disabled"], [1, "govuk-label", "govuk-checkboxes__label", 3, "for"], ["scope", "row", 1, "search-result-column-cell"], ["class", "govuk-link", 3, "routerLink", 4, "ngIf"], ["class", "text-16", 3, "visibility", 4, "ngIf"], [1, "govuk-link", 3, "routerLink"], ["class", "text-16", 4, "ngIf"], [1, "text-16"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute", 4, "ngIf", "ngIfElse"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "elementsToSubstitute"], [3, "caseId", "displayMode"], ["type", "checkbox", 1, "govuk-checkboxes__input", 3, "change", "keyup", "id", "name", "checked", "disabled"], [3, "pageChange", "visibilityLabel", "autoHide", "maxSize", "screenReaderPaginationLabel", "screenReaderPageLabel", "screenReaderCurrentLabel"], [1, "notification"]], template: function SearchResultComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, SearchResultComponent_table_0_Template, 16, 11, "table", 1)(1, SearchResultComponent_ccd_pagination_1_Template, 1, 6, "ccd-pagination", 2)(2, SearchResultComponent_div_2_Template, 4, 6, "div", 3);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.hasResults() || ctx.hasDrafts());
@@ -36833,7 +37129,7 @@ class SearchResultComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-search-result', template: "<table *ngIf=\"hasResults() || hasDrafts()\">\n  <caption>\n    <h2 class=\"heading-h2\" id=\"search-result-heading__text\" tabindex=\"-1\">{{ (caseState ? 'Your cases' : 'Search result') | rpxTranslate}}</h2>\n\n    <div class=\"govuk-warning-text pagination-limit-warning\" *ngIf=\"paginationLimitEnforced\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-warning-text__assistive\">{{'Warning' | rpxTranslate}}</span>\n        {{'The total size of the result set is' | rpxTranslate}} {{paginationMetadata.totalResultsCount | number}}. {{'Only the first 10,000 records are available for display.' | rpxTranslate}}\n      </strong>\n    </div>\n\n    <div *ngIf=\"(hasResults() || hasDrafts())\" class=\"pagination-top\"\n        [attr.aria-label]=\"getTotalResults() + ' results have been found' | rpxTranslate\" role=\"status\">\n      <span class=\"text-16\" id=\"search-result-summary__text\">{{'Showing' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult() }}</span>\n        {{'to' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getLastResult() }}</span>\n        {{'of' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults() }}</span> {{'results' | rpxTranslate}}</span>\n    </div>\n    <div *ngIf=\"(hasResults() || hasDrafts()) && selectionEnabled\" class=\"reset-selection\"\n    [attr.aria-label]=\"'Reset selection' | rpxTranslate\">\n      <span><a class=\"search-result-reset-link\" href=\"javascript:void(0)\" (click)=\"clearSelection()\">{{'Reset case selection' | rpxTranslate}}</a></span>\n    </div>\n  </caption>\n  <thead>\n    <tr scope=\"row\">\n      <th *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\" [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\">\n          </label>\n        </div>\n      </th>\n      <th *ngFor=\"let col of resultView.columns\">\n        <table class=\"search-result-column-header\"\n          [attr.aria-label]=\"('Sort by ' + col.label + ' ' + isSortAscending(col)? 'ascending' : 'descending') | rpxTranslate\">\n          <tr>\n            <th>\n              <div class=\"search-result-column-label\" (click)=\"sort(col)\">\n                {{col.label | rpxTranslate}}\n              </div>\n              <div *ngIf=\"comparator(col)\" class=\"search-result-column-sort\">\n                <a (click)=\"sort(col)\" class=\"sort-widget\" [innerHTML]=\"sortWidget(col)\" href=\"javascript:void(0)\"></a>\n              </div>\n            </th>\n          </tr>\n        </table>\n      </th>\n      <th *ngIf=\"activityEnabled()\" style=\"width: 110px;\"></th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <!-- sorted by consumer -->\n    <ng-container *ngIf=\"consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n    <!-- sorted by toolkit -->\n    <ng-container *ngIf=\"!consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | ccdSortSearchResult : sortParameters | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" (keyup)=\"onKeyUp($event, result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n\n  </tbody>\n</table>\n\n<ccd-pagination\n  *ngIf=\"hasResults()\"\n  (pageChange)=\"goToPage($event)\"\n  [visibilityLabel]=\"hideRows ? 'hidden' : 'visible'\"\n  [autoHide]=\"true\"\n  [maxSize]=\"8\"\n  [screenReaderPaginationLabel]=\"'Pagination'\"\n  [screenReaderPageLabel]=\"page\"\n  [screenReaderCurrentLabel]=\"'You\\'re on page'\"></ccd-pagination>\n\n<div *ngIf=\"!(hasResults() || hasDrafts())\" class=\"notification\"\n[attr.aria-describedby]=\"'No cases found. Try using different filters.' | rpxTranslate\">\n{{'No cases found. Try using different filters.' | rpxTranslate}}\n</div>\n", styles: ["table thead tr th{vertical-align:top}table tbody tr td{font-size:16px;word-wrap:break-word}table tbody tr td a{float:left}table .caseid-col{white-space:nowrap}.notification{text-align:center;padding:30px 0;margin-top:75px}a:hover{color:#005ea5}.search-result-reset-link{padding-right:15px;padding-left:15px}.search-result-column-header{width:unset;table-layout:normal}.search-result-column-header div{display:table-cell;width:auto}@media screen and (max-width: 379px){.search-result-column-header div{display:block;float:right}}.search-result-column-label{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort{font-size:16px}.sort-widget{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium{margin-top:-20px}.govuk-table__checkbox{vertical-align:middle;padding-left:3px}#search-result-heading__text:focus{outline:none}\n"] }]
+        args: [{ selector: 'ccd-search-result', template: "<table *ngIf=\"hasResults() || hasDrafts()\">\n  <caption>\n    <h2 class=\"heading-h2\" id=\"search-result-heading__text\" tabindex=\"-1\">{{ (caseState ? 'Your cases' : 'Search result') | rpxTranslate}}</h2>\n\n    <div class=\"govuk-warning-text pagination-limit-warning\" *ngIf=\"paginationLimitEnforced\">\n      <span class=\"govuk-warning-text__icon\" aria-hidden=\"true\">!</span>\n      <strong class=\"govuk-warning-text__text\">\n        <span class=\"govuk-warning-text__assistive\">{{'Warning' | rpxTranslate}}</span>\n        {{'The total size of the result set is' | rpxTranslate}} {{paginationMetadata.totalResultsCount | number}}. {{'Only the first 10,000 records are available for display.' | rpxTranslate}}\n      </strong>\n    </div>\n\n    <div *ngIf=\"(hasResults() || hasDrafts())\" class=\"pagination-top\">\n      <output [attr.aria-label]=\"getTotalResults() + ' results have been found' | rpxTranslate\"></output>\n          <span class=\"text-16\" id=\"search-result-summary__text\">{{'Showing' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getFirstResult() }}</span>\n        {{'to' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getLastResult() }}</span>\n        {{'of' | rpxTranslate}}\n        <span class=\"govuk-!-font-weight-bold\">{{ getTotalResults() }}</span> {{'results' | rpxTranslate}}</span>\n    </div>\n    <div *ngIf=\"(hasResults() || hasDrafts()) && selectionEnabled\" class=\"reset-selection\"\n    [attr.aria-label]=\"'Reset selection' | rpxTranslate\">\n      <span><a class=\"search-result-reset-link\" href=\"javascript:void(0)\" (click)=\"clearSelection()\">{{'Reset case selection' | rpxTranslate}}</a></span>\n    </div>\n  </caption>\n  <thead>\n    <tr scope=\"row\">\n      <th *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n        <div class=\"govuk-checkboxes__item\">\n          <input class=\"govuk-checkboxes__input\" id=\"select-all\" name=\"select-all\" type=\"checkbox\" (change)=\"selectAll()\" [checked]=\"allOnPageSelected()\" [disabled]=\"!canAnyBeShared()\" />\n          <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-all\">\n          </label>\n        </div>\n      </th>\n      <th *ngFor=\"let col of resultView.columns\" class=\"search-result-column-header\"\n        [attr.aria-sort]=\"isSortAscending(col) === null ? null : (isSortAscending(col) ? 'ascending' : 'descending')\">\n        <div>\n          <div class=\"search-result-column-label\" (click)=\"sort(col)\" (keyup)=\"noop()\">\n            {{col.label | rpxTranslate}}\n          </div>\n          <div *ngIf=\"comparator(col)\" class=\"search-result-column-sort\">\n            <a (click)=\"sort(col)\" class=\"sort-widget\" [innerHTML]=\"sortWidget(col)\" href=\"javascript:void(0)\"></a>\n          </div>\n        </div>\n      </th>\n      <th *ngIf=\"activityEnabled()\" style=\"width: 110px;\">&ZeroWidthSpace;</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <!-- sorted by consumer -->\n    <ng-container *ngIf=\"consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n    <!-- sorted by toolkit -->\n    <ng-container *ngIf=\"!consumerSortingEnabled\">\n      <tr *ngFor=\"let result of resultView.results | ccdSortSearchResult : sortParameters | paginate: { itemsPerPage: paginationPageSize, currentPage: selected.page, totalItems: resultTotal }\">\n        <td *ngIf=\"selectionEnabled\" class=\"govuk-table__checkbox\" scope=\"col\">\n          <div class=\"govuk-checkboxes__item\">\n            <input class=\"govuk-checkboxes__input\" id=\"select-{{ result.case_id }}\" name=\"select-{{ result.case_id }}\"\n              type=\"checkbox\" (change)=\"changeSelection(result)\" [checked]=\"isSelected(result)\" [disabled]=\"!canBeShared(result)\" (keyup)=\"onKeyUp($event, result)\" />\n            <label class=\"govuk-label govuk-checkboxes__label\" for=\"select-{{ result.case_id }}\">\n            </label>\n          </div>\n        </td>\n        <td class=\"search-result-column-cell\" *ngFor=\"let col of resultView.columns; let colIndex = index\" scope=\"row\">\n\n          <a *ngIf=\"colIndex == 0\" [routerLink]=\"prepareCaseLinkUrl(result.case_id)\"\n            attr.aria-label=\"go to case with Case reference:{{ result.case_id | ccdCaseReference }}\" class=\"govuk-link\">\n            <ng-container class=\"text-16\" *ngIf=\"!hideRows\">\n              <ccd-field-read *ngIf=\"draftPrefixOrGet(col, result); else case_reference\"\n                              ccdLabelSubstitutor [caseField]=\"getColumnsWithPrefix(result.columns[col.case_field_id], result)\"\n                              [contextFields]=\"result.hydrated_case_fields\"\n                              [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n              <ng-template #case_reference>{{result.case_id | ccdCaseReference}}</ng-template>\n            </ng-container>\n          </a>\n          <div *ngIf=\"colIndex != 0\" class=\"text-16\" [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-field-read ccdLabelSubstitutor\n                            [caseField]=\"result.columns[col.case_field_id]\"\n                            [contextFields]=\"result.hydrated_case_fields\"\n                            [elementsToSubstitute]=\"['value']\"></ccd-field-read>\n          </div>\n        </td>\n        <td *ngIf=\"activityEnabled()\">\n          <div [style.visibility]=\"hideRows ? 'hidden' : 'visible'\">\n            <ccd-activity [caseId]=\"result.case_id\" [displayMode]=\"ICON\"></ccd-activity>\n          </div>\n        </td>\n      </tr>\n    </ng-container>\n\n  </tbody>\n</table>\n\n<ccd-pagination\n  *ngIf=\"hasResults()\"\n  (pageChange)=\"goToPage($event)\"\n  [visibilityLabel]=\"hideRows ? 'hidden' : 'visible'\"\n  [autoHide]=\"true\"\n  [maxSize]=\"8\"\n  [screenReaderPaginationLabel]=\"'Pagination'\"\n  [screenReaderPageLabel]=\"page\"\n  [screenReaderCurrentLabel]=\"'You\\'re on page'\"></ccd-pagination>\n\n<div *ngIf=\"!(hasResults() || hasDrafts())\" class=\"notification\"\n[attr.aria-describedby]=\"'No cases found. Try using different filters.' | rpxTranslate\">\n{{'No cases found. Try using different filters.' | rpxTranslate}}\n</div>\n", styles: ["table thead tr th{vertical-align:top}table tbody tr td{font-size:16px;word-wrap:break-word}table tbody tr td a{float:left}table .caseid-col{white-space:nowrap}.notification{text-align:center;padding:30px 0;margin-top:75px}a:hover{color:#005ea5}.search-result-reset-link{padding-right:15px;padding-left:15px}.search-result-column-header{width:unset;table-layout:normal}.search-result-column-header div{display:table-cell;width:auto}@media screen and (max-width: 379px){.search-result-column-header div{display:block;float:right}}.search-result-column-label{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort{font-size:16px}.sort-widget{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium{margin-top:-20px}.govuk-table__checkbox{vertical-align:middle;padding-left:3px}#search-result-heading__text:focus{outline:none}\n"] }]
     }], () => [{ type: SearchResultViewItemComparatorFactory }, { type: AbstractAppConfig }, { type: ActivityService }, { type: CaseReferencePipe }, { type: PlaceholderService }, { type: BrowserService }, { type: SessionStorageService }], { caseLinkUrlTemplate: [{
             type: Input
         }], jurisdiction: [{
@@ -37170,5 +37466,5 @@ class TestRouteSnapshotBuilder {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractAppConfig, AbstractFieldReadComponent, AbstractFieldWriteComponent, Activity, ActivityBannerComponent, ActivityComponent, ActivityIconComponent, ActivityInfo, ActivityModule, ActivityPollingService, ActivityService, AddCommentsComponent, AddCommentsErrorMessage, AddCommentsStep, AddressModel, AddressOption, AddressesService, Alert, AlertComponent, AlertIconClassPipe, AlertMessageType, AlertModule, AlertService, AuthService, Banner, BannersService, BeforeYouStartComponent, BodyComponent, BrowserService, CCDCaseLinkType, COMPONENT_PORTAL_INJECTION_TOKEN, CallbackErrorsComponent, CallbackErrorsContext, CaseAccessUtils, CaseBasicAccessViewComponent, CaseChallengedAccessRequestComponent, CaseChallengedAccessSuccessComponent, CaseCreateComponent, CaseDetails, CaseEditComponent, CaseEditConfirmComponent, CaseEditDataModule, CaseEditDataService, CaseEditFormComponent, CaseEditPageComponent, CaseEditSubmitComponent, CaseEditWizardGuard, CaseEditorConfig, CaseEditorModule, CaseEvent, CaseEventCompletionComponent, CaseEventCompletionTaskCancelledComponent, CaseEventCompletionTaskReassignedComponent, CaseEventData, CaseEventTrigger, CaseEventTriggerComponent, CaseField, CaseFieldService, CaseFileViewFieldComponent, CaseFileViewFolderComponent, CaseFileViewFolderDocumentActionsComponent, CaseFileViewFolderSelectorComponent, CaseFileViewFolderSortComponent, CaseFileViewOverlayMenuComponent, CaseFileViewService, CaseFlagCheckYourAnswersPageStep, CaseFlagDisplayContextParameter, CaseFlagErrorMessage, CaseFlagFieldState, CaseFlagFormFields, CaseFlagRefdataService, CaseFlagStatus, CaseFlagSummaryListComponent, CaseFlagSummaryListDisplayMode, CaseFlagTableComponent, CaseFlagWizardStepTitle, CaseFullAccessViewComponent, CaseHeaderComponent, CaseHeaderModule, CaseHistoryViewerFieldComponent, CaseLink, CaseLinkResponse, CaseListComponent, CaseListFiltersComponent, CaseListFiltersModule, CaseListModule, CaseNotifier, CasePaymentHistoryViewerFieldComponent, CasePrintDocument, CasePrinterComponent, CaseProgressComponent, CaseReferencePipe, CaseResolver, CaseSpecificAccessRequestComponent, CaseSpecificAccessSuccessComponent, CaseState, CaseTab, CaseTimelineComponent, CaseTimelineDisplayMode, CaseTimelineModule, CaseType, CaseTypeLite, CaseView, CaseViewComponent, CaseViewEvent, CaseViewTrigger, CaseViewerComponent, CaseViewerModule, CasesService, CaseworkerService, CcdCYAPageLabelFilterPipe, CcdCaseTitlePipe, CcdCollectionTableCaseFieldsFilterPipe, CcdPageFieldsPipe, CcdTabFieldsPipe, CheckYourAnswersComponent, ConditionalShowFormDirective, ConditionalShowModule, ConditionalShowRegistrarService, ConfirmFlagStatusComponent, ConfirmStatusErrorMessage, ConfirmStatusStep, Confirmation, ConvertHrefToRouterService, CreateCaseFiltersComponent, CreateCaseFiltersModule, CreateCaseFiltersSelection, DRAFT_PREFIX, DRAFT_QUERY_PARAM, DashPipe, DateInputComponent, DatePipe, DateTimeFormatUtils, DatetimePickerComponent, DefinitionsModule, DefinitionsService, DeleteOrCancelDialogComponent, DialogsModule, DisplayMode, Document, DocumentData, DocumentDialogComponent, DocumentLinks, DocumentManagementService, DocumentUrlPipe, Draft, DraftService, DynamicListPipe, DynamicRadioListPipe, ESQueryType, Embedded, EnumDisplayDescriptionPipe, ErrorMessageComponent, ErrorNotifierService, EventCaseField, EventCompletionReturnStates, EventCompletionStateMachineService, EventCompletionStates, EventLogComponent, EventLogDetailsComponent, EventLogTableComponent, EventMessageModule, EventStartComponent, EventStartModule, EventStartStateMachineService, EventStatusService, EventTriggerResolver, EventTriggerService, Fee, FeeValue, Field, FieldLabelPipe, FieldReadComponent, FieldReadLabelComponent, FieldType, FieldTypeSanitiser, FieldWriteComponent, FieldsFilterPipe, FieldsPurger, FieldsUtils, FirstErrorPipe, FixedListItem, FixedListPipe, FixedRadioListPipe, FlagFieldDisplayPipe, FocusElementDirective, FocusElementModule, FooterComponent, FormDocument, FormErrorService, FormValidatorsService, FormValueService, FormatTranslatorService, GreyBarService, HRef, HeaderBarComponent, HeadersModule, HttpError, HttpErrorService, HttpService, IsCompoundPipe, IsMandatoryPipe, IsReadOnlyAndNotCollectionPipe, IsReadOnlyPipe, JudicialworkerService, Jurisdiction, JurisdictionService, LabelFieldComponent, LabelSubstitutorDirective, LabelSubstitutorModule, LanguageInterpreterDisplayPipe, LinkCaseReason, LinkCasesComponent, LinkCasesFromReasonValuePipe, LinkCasesReasonValuePipe, LinkDetails, LinkFromReason, LinkReason, LinkedCasesErrorMessages, LinkedCasesEventTriggers, LinkedCasesFromTableComponent, LinkedCasesPages, LinkedCasesResponse, LinkedCasesToTableComponent, LoadingModule, LoadingService, LoadingSpinnerComponent, LoadingSpinnerModule, MEDIA_VIEWER_LOCALSTORAGE_KEY, MULTIPLE_TASKS_FOUND, ManageCaseFlagsComponent, ManageCaseFlagsLabelDisplayPipe, MarkdownComponent, MarkdownComponentModule, MoneyGbpInputComponent, MultipleTasksExistComponent, NavigationComponent, NavigationItemComponent, NavigationNotifierService, NavigationOrigin, NoLinkedCasesComponent, NoTasksAvailableComponent, NotificationBannerComponent, NotificationBannerHeaderClass, NotificationBannerType, OrderService, OrderSummary, OrganisationConverter, OrganisationService, PageValidationService, PaginationComponent, PaginationMetadata, PaginationModule, PaletteContext, PaletteModule, PaletteService, PaletteUtilsModule, Patterns, PaymentField, PhaseComponent, PipesModule, PlaceholderService, PrintUrlPipe, Profile, ProfileNotifier, ProfileService, QualifyingQuestionDetailComponent, QualifyingQuestionOptionsComponent, QualifyingQuestionsErrorMessage, QueryAttachmentsReadComponent, QueryCaseDetailsHeaderComponent, QueryCheckYourAnswersComponent, QueryCreateContext, QueryDetailsComponent, QueryEventCompletionComponent, QueryItemResponseStatus, QueryListComponent, QueryListData, QueryListItem, QueryWriteAddDocumentsComponent, QueryWriteDateInputComponent, QueryWriteRaiseQueryComponent, QueryWriteRespondToQueryComponent, RaiseQueryErrorMessage, ReadCaseFlagFieldComponent, ReadCaseLinkFieldComponent, ReadCollectionFieldComponent, ReadComplexFieldCollectionTableComponent, ReadComplexFieldComponent, ReadComplexFieldRawComponent, ReadComplexFieldTableComponent, ReadDateFieldComponent, ReadDocumentFieldComponent, ReadDynamicListFieldComponent, ReadDynamicMultiSelectListFieldComponent, ReadDynamicRadioListFieldComponent, ReadEmailFieldComponent, ReadFieldsFilterPipe, ReadFixedListFieldComponent, ReadFixedRadioListFieldComponent, ReadJudicialUserFieldComponent, ReadLinkedCasesFieldComponent, ReadMoneyGbpFieldComponent, ReadMultiSelectListFieldComponent, ReadNumberFieldComponent, ReadOrderSummaryFieldComponent, ReadOrderSummaryRowComponent, ReadOrganisationFieldComponent, ReadOrganisationFieldRawComponent, ReadOrganisationFieldTableComponent, ReadPhoneUKFieldComponent, ReadQueryManagementFieldComponent, ReadTextAreaFieldComponent, ReadTextFieldComponent, ReadYesNoFieldComponent, RefdataCaseFlagType, RemoveDialogComponent, RequestOptionsBuilder, RespondToQueryErrorMessages, RetryUtil, RouterHelperService, RouterLinkComponent, SaveOrDiscardDialogComponent, SearchFiltersComponent, SearchFiltersModule, SearchFiltersWrapperComponent, SearchInput, SearchLanguageInterpreterComponent, SearchLanguageInterpreterErrorMessage, SearchLanguageInterpreterStep, SearchResultComponent, SearchResultModule, SearchResultView, SearchResultViewColumn, SearchResultViewItem, SearchResultViewItemComparatorFactory, SearchService, SelectFlagErrorMessage, SelectFlagLocationComponent, SelectFlagLocationErrorMessage, SelectFlagTypeComponent, SelectFlagTypeErrorMessage, SessionStorageService, ShowCondition, SortOrder$1 as SortOrder, SortParameters, SortSearchResultPipe, TabComponent, TableColumnConfig, TableConfig, TabsComponent, TabsModule, TaskAssignedComponent, TaskCancelledComponent, TaskConflictComponent, TaskUnassignedComponent, Terms, TestRouteSnapshotBuilder, UnLinkCasesComponent, UnsupportedFieldComponent, UpdateFlagAddTranslationErrorMessage, UpdateFlagAddTranslationFormComponent, UpdateFlagAddTranslationStep, UpdateFlagComponent, UpdateFlagErrorMessage, UpdateFlagStep, UpdateFlagTitleDisplayPipe, WaysToPayFieldComponent, WindowService, Wizard, WizardFactoryService, WizardPage, WizardPageField, WorkAllocationService, WorkbasketFiltersComponent, WorkbasketFiltersModule, WorkbasketInput, WorkbasketInputFilterService, WorkbasketInputModel, WriteAddressFieldComponent, WriteCaseFlagFieldComponent, WriteCaseLinkFieldComponent, WriteCollectionFieldComponent, WriteComplexFieldComponent, WriteDateContainerFieldComponent, WriteDateFieldComponent, WriteDocumentFieldComponent, WriteDynamicListFieldComponent, WriteDynamicMultiSelectListFieldComponent, WriteDynamicRadioListFieldComponent, WriteEmailFieldComponent, WriteFixedListFieldComponent, WriteFixedRadioListFieldComponent, WriteJudicialUserFieldComponent, WriteLinkedCasesFieldComponent, WriteMoneyGbpFieldComponent, WriteMultiSelectListFieldComponent, WriteNumberFieldComponent, WriteOrderSummaryFieldComponent, WriteOrganisationComplexFieldComponent, WriteOrganisationFieldComponent, WritePhoneUKFieldComponent, WriteTextAreaFieldComponent, WriteTextFieldComponent, WriteYesNoFieldComponent, YesNoService, aCaseField, caseMessagesMockData, createACL, createCaseEventTrigger, createCaseField, createComplexFieldOverride, createFieldType, createFixedListFieldType, createHiddenComplexFieldOverride, createMultiSelectListFieldType, createWizardPage, createWizardPageField, editorRouting, initDialog, newCaseField, textFieldType, viewerRouting };
+export { AbstractAppConfig, AbstractFieldReadComponent, AbstractFieldWriteComponent, Activity, ActivityBannerComponent, ActivityComponent, ActivityIconComponent, ActivityInfo, ActivityModule, ActivityPollingService, ActivityService, AddCommentsComponent, AddCommentsErrorMessage, AddCommentsStep, AddressModel, AddressOption, AddressesService, Alert, AlertComponent, AlertIconClassPipe, AlertMessageType, AlertModule, AlertService, AuthService, Banner, BannersService, BeforeYouStartComponent, BodyComponent, BrowserService, CCDCaseLinkType, COMPONENT_PORTAL_INJECTION_TOKEN, CallbackErrorsComponent, CallbackErrorsContext, CaseAccessUtils, CaseBasicAccessViewComponent, CaseChallengedAccessRequestComponent, CaseChallengedAccessSuccessComponent, CaseCreateComponent, CaseDetails, CaseEditComponent, CaseEditConfirmComponent, CaseEditDataModule, CaseEditDataService, CaseEditFormComponent, CaseEditPageComponent, CaseEditSubmitComponent, CaseEditWizardGuard, CaseEditorConfig, CaseEditorModule, CaseEvent, CaseEventCompletionComponent, CaseEventCompletionTaskCancelledComponent, CaseEventCompletionTaskReassignedComponent, CaseEventData, CaseEventTrigger, CaseEventTriggerComponent, CaseField, CaseFieldService, CaseFileViewFieldComponent, CaseFileViewFolderComponent, CaseFileViewFolderDocumentActionsComponent, CaseFileViewFolderSelectorComponent, CaseFileViewFolderSortComponent, CaseFileViewOverlayMenuComponent, CaseFileViewService, CaseFlagCheckYourAnswersPageStep, CaseFlagDisplayContextParameter, CaseFlagErrorMessage, CaseFlagFieldState, CaseFlagFormFields, CaseFlagRefdataService, CaseFlagStatus, CaseFlagSummaryListComponent, CaseFlagSummaryListDisplayMode, CaseFlagTableComponent, CaseFlagWizardStepTitle, CaseFullAccessViewComponent, CaseHeaderComponent, CaseHeaderModule, CaseHistoryViewerFieldComponent, CaseLink, CaseLinkResponse, CaseListComponent, CaseListFiltersComponent, CaseListFiltersModule, CaseListModule, CaseNotifier, CasePaymentHistoryViewerFieldComponent, CasePrintDocument, CasePrinterComponent, CaseProgressComponent, CaseReferencePipe, CaseResolver, CaseSpecificAccessRequestComponent, CaseSpecificAccessSuccessComponent, CaseState, CaseTab, CaseTimelineComponent, CaseTimelineDisplayMode, CaseTimelineModule, CaseType, CaseTypeLite, CaseView, CaseViewComponent, CaseViewEvent, CaseViewTrigger, CaseViewerComponent, CaseViewerModule, CasesService, CaseworkerService, CcdCYAPageLabelFilterPipe, CcdCaseTitlePipe, CcdCollectionTableCaseFieldsFilterPipe, CcdPageFieldsPipe, CcdTabFieldsPipe, CheckYourAnswersComponent, ConditionalShowFormDirective, ConditionalShowModule, ConditionalShowRegistrarService, ConfirmFlagStatusComponent, ConfirmStatusErrorMessage, ConfirmStatusStep, Confirmation, ConvertHrefToRouterService, CreateCaseFiltersComponent, CreateCaseFiltersModule, CreateCaseFiltersSelection, DRAFT_PREFIX, DRAFT_QUERY_PARAM, DashPipe, DateInputComponent, DatePipe, DateTimeFormatUtils, DatetimePickerComponent, DefinitionsModule, DefinitionsService, DeleteOrCancelDialogComponent, DialogsModule, DisplayMode, Document, DocumentData, DocumentDialogComponent, DocumentLinks, DocumentManagementService, DocumentUrlPipe, Draft, DraftService, DynamicListPipe, DynamicRadioListPipe, ESQueryType, Embedded, EnumDisplayDescriptionPipe, ErrorMessageComponent, ErrorNotifierService, EventCaseField, EventCompletionReturnStates, EventCompletionStateMachineService, EventCompletionStates, EventLogComponent, EventLogDetailsComponent, EventLogTableComponent, EventMessageModule, EventStartComponent, EventStartModule, EventStartStateMachineService, EventStatusService, EventTriggerResolver, EventTriggerService, Fee, FeeValue, Field, FieldLabelPipe, FieldReadComponent, FieldReadLabelComponent, FieldType, FieldTypeSanitiser, FieldWriteComponent, FieldsFilterPipe, FieldsPurger, FieldsUtils, FirstErrorPipe, FixedListItem, FixedListPipe, FixedRadioListPipe, FlagFieldDisplayPipe, FocusElementDirective, FocusElementModule, FooterComponent, FormDocument, FormErrorService, FormValidatorsService, FormValueService, FormatTranslatorService, GreyBarService, HRef, HeaderBarComponent, HeadersModule, HttpError, HttpErrorService, HttpService, IsCompoundPipe, IsMandatoryPipe, IsReadOnlyAndNotCollectionPipe, IsReadOnlyPipe, JudicialworkerService, Jurisdiction, JurisdictionService, LabelFieldComponent, LabelSubstitutorDirective, LabelSubstitutorModule, LanguageInterpreterDisplayPipe, LinkCaseReason, LinkCasesComponent, LinkCasesFromReasonValuePipe, LinkCasesReasonValuePipe, LinkDetails, LinkFromReason, LinkReason, LinkedCasesErrorMessages, LinkedCasesEventTriggers, LinkedCasesFromTableComponent, LinkedCasesPages, LinkedCasesResponse, LinkedCasesToTableComponent, LoadingModule, LoadingService, LoadingSpinnerComponent, LoadingSpinnerModule, MEDIA_VIEWER_LOCALSTORAGE_KEY, MULTIPLE_TASKS_FOUND, ManageCaseFlagsComponent, ManageCaseFlagsLabelDisplayPipe, MarkdownComponent, MarkdownComponentModule, MoneyGbpInputComponent, MultipleTasksExistComponent, NavigationComponent, NavigationItemComponent, NavigationNotifierService, NavigationOrigin, NoLinkedCasesComponent, NoTasksAvailableComponent, NotificationBannerComponent, NotificationBannerHeaderClass, NotificationBannerType, OrderService, OrderSummary, OrganisationConverter, OrganisationService, PageValidationService, PaginationComponent, PaginationMetadata, PaginationModule, PaletteContext, PaletteModule, PaletteService, PaletteUtilsModule, Patterns, PaymentField, PhaseComponent, PipesModule, PlaceholderService, PrintUrlPipe, Profile, ProfileNotifier, ProfileService, QualifyingQuestionDetailComponent, QualifyingQuestionOptionsComponent, QualifyingQuestionsErrorMessage, QueryAttachmentsReadComponent, QueryCaseDetailsHeaderComponent, QueryCheckYourAnswersComponent, QueryConfirmationComponent, QueryCreateContext, QueryDetailsComponent, QueryEventCompletionComponent, QueryItemResponseStatus, QueryListComponent, QueryListData, QueryListItem, QueryWriteAddDocumentsComponent, QueryWriteDateInputComponent, QueryWriteRaiseQueryComponent, QueryWriteRespondToQueryComponent, RaiseQueryErrorMessage, ReadCaseFlagFieldComponent, ReadCaseLinkFieldComponent, ReadCollectionFieldComponent, ReadComplexFieldCollectionTableComponent, ReadComplexFieldComponent, ReadComplexFieldRawComponent, ReadComplexFieldTableComponent, ReadDateFieldComponent, ReadDocumentFieldComponent, ReadDynamicListFieldComponent, ReadDynamicMultiSelectListFieldComponent, ReadDynamicRadioListFieldComponent, ReadEmailFieldComponent, ReadFieldsFilterPipe, ReadFixedListFieldComponent, ReadFixedRadioListFieldComponent, ReadJudicialUserFieldComponent, ReadLinkedCasesFieldComponent, ReadMoneyGbpFieldComponent, ReadMultiSelectListFieldComponent, ReadNumberFieldComponent, ReadOrderSummaryFieldComponent, ReadOrderSummaryRowComponent, ReadOrganisationFieldComponent, ReadOrganisationFieldRawComponent, ReadOrganisationFieldTableComponent, ReadPhoneUKFieldComponent, ReadQueryManagementFieldComponent, ReadTextAreaFieldComponent, ReadTextFieldComponent, ReadYesNoFieldComponent, RefdataCaseFlagType, RemoveDialogComponent, RequestOptionsBuilder, RespondToQueryErrorMessages, RetryUtil, RouterHelperService, RouterLinkComponent, SaveOrDiscardDialogComponent, SearchFiltersComponent, SearchFiltersModule, SearchFiltersWrapperComponent, SearchInput, SearchLanguageInterpreterComponent, SearchLanguageInterpreterErrorMessage, SearchLanguageInterpreterStep, SearchResultComponent, SearchResultModule, SearchResultView, SearchResultViewColumn, SearchResultViewItem, SearchResultViewItemComparatorFactory, SearchService, SelectFlagErrorMessage, SelectFlagLocationComponent, SelectFlagLocationErrorMessage, SelectFlagTypeComponent, SelectFlagTypeErrorMessage, SessionStorageService, ShowCondition, SortOrder$1 as SortOrder, SortParameters, SortSearchResultPipe, TabComponent, TableColumnConfig, TableConfig, TabsComponent, TabsModule, TaskAssignedComponent, TaskCancelledComponent, TaskConflictComponent, TaskUnassignedComponent, Terms, TestRouteSnapshotBuilder, UnLinkCasesComponent, UnsupportedFieldComponent, UpdateFlagAddTranslationErrorMessage, UpdateFlagAddTranslationFormComponent, UpdateFlagAddTranslationStep, UpdateFlagComponent, UpdateFlagErrorMessage, UpdateFlagStep, UpdateFlagTitleDisplayPipe, WaysToPayFieldComponent, WindowService, Wizard, WizardFactoryService, WizardPage, WizardPageField, WorkAllocationService, WorkbasketFiltersComponent, WorkbasketFiltersModule, WorkbasketInput, WorkbasketInputFilterService, WorkbasketInputModel, WriteAddressFieldComponent, WriteCaseFlagFieldComponent, WriteCaseLinkFieldComponent, WriteCollectionFieldComponent, WriteComplexFieldComponent, WriteDateContainerFieldComponent, WriteDateFieldComponent, WriteDocumentFieldComponent, WriteDynamicListFieldComponent, WriteDynamicMultiSelectListFieldComponent, WriteDynamicRadioListFieldComponent, WriteEmailFieldComponent, WriteFixedListFieldComponent, WriteFixedRadioListFieldComponent, WriteJudicialUserFieldComponent, WriteLinkedCasesFieldComponent, WriteMoneyGbpFieldComponent, WriteMultiSelectListFieldComponent, WriteNumberFieldComponent, WriteOrderSummaryFieldComponent, WriteOrganisationComplexFieldComponent, WriteOrganisationFieldComponent, WritePhoneUKFieldComponent, WriteTextAreaFieldComponent, WriteTextFieldComponent, WriteYesNoFieldComponent, YesNoService, aCaseField, caseMessagesMockData, createACL, createCaseEventTrigger, createCaseField, createComplexFieldOverride, createFieldType, createFixedListFieldType, createHiddenComplexFieldOverride, createMultiSelectListFieldType, createWizardPage, createWizardPageField, editorRouting, initDialog, newCaseField, textFieldType, viewerRouting };
 //# sourceMappingURL=hmcts-ccd-case-ui-toolkit.mjs.map