@hmcts/ccd-case-ui-toolkit 7.3.68-govuk → 7.3.68-govuk1

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

@@ -26344,7 +26344,7 @@ class CaseFileViewFolderComponent {
         a.remove();
     }
     static ɵfac = function CaseFileViewFolderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseFileViewFolderComponent)(i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, standalone: false, decls: 12, vars: 3, consts: [["role", "search", 1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["for", "document-search", 1, "govuk-visually-hidden"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], ["id", "document-folders-header-title", "aria-hidden", "true", 1, "document-folders-header__title"], ["role", "toolbar", "aria-label", "Document list actions", "aria-labelledby", "document-folders-header-title", 1, "document-folders-header__flex"], [3, "expandAll", "collapseAll"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], ["role", "tree", "aria-label", "Case documents", 3, "dataSource", "treeControl"], ["class", "document-tree-container__node document-tree-container__node--document", 4, "cdkTreeNodeDef"], ["class", "document-tree-container__node document-tree-container__folder", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-container__node", "document-tree-container__node--document"], ["type", "button", "role", "treeitem", "aria-expanded", "false", 1, "node", "case-file__node", 3, "click"], ["disabled", "", "aria-hidden", "true", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", "aria-hidden", "true", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options", "case-file__action"], [3, "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction", "allowMoving"], [1, "document-tree-container__node", "document-tree-container__folder"], ["type", "button", "cdkTreeNodeToggle", "", "role", "treeitem", 1, "node"], ["aria-hidden", "true", 1, "node__icon"], ["alt", "Folder icon", "aria-hidden", "true", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["role", "group"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, standalone: false, decls: 12, vars: 3, consts: [["role", "search", 1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["for", "document-search", 1, "govuk-visually-hidden"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], ["id", "document-folders-header-title", "aria-hidden", "true", 1, "document-folders-header__title"], ["role", "toolbar", "aria-label", "Document list actions", "aria-labelledby", "document-folders-header-title", 1, "document-folders-header__flex"], [3, "expandAll", "collapseAll"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], ["role", "tree", "aria-label", "Case documents", 3, "dataSource", "treeControl"], ["class", "document-tree-container__node document-tree-container__node--document", 4, "cdkTreeNodeDef"], ["class", "document-tree-container__node document-tree-container__folder", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-container__node", "document-tree-container__node--document"], ["type", "button", "aria-expanded", "false", 1, "node", "case-file__node", 3, "click"], ["disabled", "", "aria-hidden", "true", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", "aria-hidden", "true", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options", "case-file__action"], [3, "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction", "allowMoving"], [1, "document-tree-container__node", "document-tree-container__folder"], ["type", "button", "cdkTreeNodeToggle", "", 1, "node"], ["aria-hidden", "true", 1, "node__icon"], ["alt", "Folder icon", "aria-hidden", "true", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["role", "group"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "label", 2);
             i0.ɵɵtext(3, " Search by document name ");
             i0.ɵɵelementEnd();
@@ -26371,7 +26371,7 @@ class CaseFileViewFolderComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-file-view-folder', standalone: false, template: "<div class=\"document-filter-container\" role=\"search\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <label\n      class=\"govuk-visually-hidden\"\n      for=\"document-search\">\n      Search by document name\n    </label>\n    <input\n      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  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\" id=\"document-folders-header-title\" aria-hidden=\"true\">\n    Documents ({{ documentCount }})\n  </div>\n  <div\n    class=\"document-folders-header__flex\"\n    role=\"toolbar\"\n    aria-label=\"Document list actions\"\n    aria-labelledby=\"document-folders-header-title\">\n    <ccd-case-file-view-folder-toggle\n      (expandAll)=\"expandAll($event)\"\n      (collapseAll)=\"collapseAll($event)\">\n    </ccd-case-file-view-folder-toggle>\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\n      [dataSource]=\"nestedDataSource\"\n      [treeControl]=\"nestedTreeControl\"\n      role=\"tree\"\n      aria-label=\"Case documents\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button\n          type=\"button\"\n          class=\"node case-file__node\"\n          role=\"treeitem\"\n          aria-expanded=\"false\"\n          [attr.aria-label]=\"node.name\"\n          (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n          [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled aria-hidden=\"true\">\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\"\n              class=\"node__iconImg\"\n              alt=\"Document icon\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{ node.name }}\n            <br />\n            <span class=\"node__document-upload-timestamp\">{{\n              node.upload_timestamp | ccdDate: \"local\":\"dd MMM yyyy HH:mm\"\n              }}</span>\n          </span>\n        </button>\n        <div class=\"node__document-options case-file__action\">\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      </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\n          type=\"button\"\n          class=\"node\"\n          cdkTreeNodeToggle\n          role=\"treeitem\"\n          [attr.aria-expanded]=\"nestedTreeControl.isExpanded(node)\"\n          [attr.aria-label]=\"node.name + ' folder, ' + node.childDocumentCount + ' documents'\">\n          <div class=\"node__icon\" aria-hidden=\"true\">\n            <img class=\"node__iconImg\"\n                [src]=\"nestedTreeControl.isExpanded(node)\n                  ? '/assets/images/folder-open.png'\n                  : '/assets/images/folder.png'\n              \"\n              alt=\"Folder icon\"\n              aria-hidden=\"true\" />\n            <span class=\"node__count\">{{ node.childDocumentCount }}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{ node.name }}</span>\n        </button>\n        <div\n          role=\"group\"\n          [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-folders-header__flex{display:flex;flex-direction:row}.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}.node.case-file__node{width:80%;float:left}.node__document-options.case-file__action{width:15%;float:left;box-sizing:border-box;padding:12px}\n"] }]
+        args: [{ selector: 'ccd-case-file-view-folder', standalone: false, template: "<div class=\"document-filter-container\" role=\"search\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <label\n      class=\"govuk-visually-hidden\"\n      for=\"document-search\">\n      Search by document name\n    </label>\n    <input\n      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  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <div class=\"document-folders-header__title\" id=\"document-folders-header-title\" aria-hidden=\"true\">\n    Documents ({{ documentCount }})\n  </div>\n  <div\n    class=\"document-folders-header__flex\"\n    role=\"toolbar\"\n    aria-label=\"Document list actions\"\n    aria-labelledby=\"document-folders-header-title\">\n    <ccd-case-file-view-folder-toggle\n      (expandAll)=\"expandAll($event)\"\n      (collapseAll)=\"collapseAll($event)\">\n    </ccd-case-file-view-folder-toggle>\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\n      [dataSource]=\"nestedDataSource\"\n      [treeControl]=\"nestedTreeControl\"\n      role=\"tree\"\n      aria-label=\"Case documents\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button\n          type=\"button\"\n          class=\"node case-file__node\"\n          aria-expanded=\"false\"\n          [attr.aria-label]=\"node.name\"\n          (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n          [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled aria-hidden=\"true\">\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\"\n              class=\"node__iconImg\"\n              alt=\"Document icon\"\n              aria-hidden=\"true\"\n            />\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{ node.name }}\n            <br />\n            <span class=\"node__document-upload-timestamp\">{{\n              node.upload_timestamp | ccdDate: \"local\":\"dd MMM yyyy HH:mm\"\n              }}</span>\n          </span>\n        </button>\n        <div class=\"node__document-options case-file__action\">\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      </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\n          type=\"button\"\n          class=\"node\"\n          cdkTreeNodeToggle\n          [attr.aria-expanded]=\"nestedTreeControl.isExpanded(node)\"\n          [attr.aria-label]=\"node.name + ' folder, ' + node.childDocumentCount + ' documents'\">\n          <div class=\"node__icon\" aria-hidden=\"true\">\n            <img class=\"node__iconImg\"\n                [src]=\"nestedTreeControl.isExpanded(node)\n                  ? '/assets/images/folder-open.png'\n                  : '/assets/images/folder.png'\n              \"\n              alt=\"Folder icon\"\n              aria-hidden=\"true\" />\n            <span class=\"node__count\">{{ node.childDocumentCount }}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{ node.name }}</span>\n        </button>\n        <div\n          role=\"group\"\n          [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-folders-header__flex{display:flex;flex-direction:row}.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}.node.case-file__node{width:80%;float:left}.node__document-options.case-file__action{width:15%;float:left;box-sizing:border-box;padding:12px}\n"] }]
     }], () => [{ type: WindowService }, { type: i1$1.Router }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }], { categoriesAndDocuments: [{
             type: Input
         }], allowMoving: [{
@@ -34865,8 +34865,8 @@ class WorkbasketFiltersComponent {
         }
     }
     static ɵfac = function WorkbasketFiltersComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WorkbasketFiltersComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(WorkbasketInputFilterService), i0.ɵɵdirectiveInject(OrderService), i0.ɵɵdirectiveInject(JurisdictionService), i0.ɵɵdirectiveInject(AlertService), i0.ɵɵdirectiveInject(WindowService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WorkbasketFiltersComponent, selectors: [["ccd-workbasket-filters"]], inputs: { jurisdictions: "jurisdictions", defaults: "defaults" }, outputs: { onApply: "onApply", onReset: "onReset" }, standalone: false, decls: 45, vars: 55, consts: [["id", "filters", 1, "global-display"], [1, "form-group", "flex"], ["aria-label", "Filters", 1, "heading-h2"], ["type", "button", 1, "button", "workbasket-filters-apply", 3, "click", "disabled", "title"], ["type", "button", 1, "button", "button-secondary", 3, "click", "title"], [1, "form-group"], ["for", "wb-jurisdiction", 1, "form-label"], ["id", "wb-jurisdiction", "name", "jurisdiction", "aria-controls", "search-result", 1, "form-control", "form-control-3-4", "ccd-dropdown", 3, "ngModelChange", "change", "ngModel"], [3, "ngValue", 4, "ngIf"], [3, "ngValue", 4, "ngFor", "ngForOf"], ["for", "wb-case-type", 1, "form-label"], ["id", "wb-case-type", "name", "case-type", "aria-controls", "search-result", 1, "form-control", "form-control-3-4", "ccd-dropdown", 3, "ngModelChange", "change", "ngModel", "disabled"], ["for", "wb-case-state", 1, "form-label"], ["id", "wb-case-state", "name", "state", "aria-controls", "search-result", 1, "form-control", "form-control-3-4", "ccd-dropdown", 3, "ngModelChange", "ngModel", "disabled"], [3, "ngValue"], ["ccdConditionalShowForm", "", 3, "formGroup", "contextFields", 4, "ngIf"], ["type", "button", 1, "button", 3, "click", "title"], ["ccdConditionalShowForm", "", 3, "formGroup", "contextFields"], ["id", "dynamicFilters"], ["class", "form-group", 4, "ngFor", "ngForOf"], [3, "keyup.enter", "caseField", "formGroup", "isExpanded", "isInSearchBlock"]], template: function WorkbasketFiltersComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "form", 0)(1, "div", 1)(2, "fieldset", 2);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WorkbasketFiltersComponent, selectors: [["ccd-workbasket-filters"]], inputs: { jurisdictions: "jurisdictions", defaults: "defaults" }, outputs: { onApply: "onApply", onReset: "onReset" }, standalone: false, decls: 45, vars: 55, consts: [["id", "filters", 1, "global-display"], [1, "form-group", "flex"], [1, "heading-h2"], ["type", "button", 1, "button", "workbasket-filters-apply", 3, "click", "disabled", "title"], ["type", "button", 1, "button", "button-secondary", 3, "click", "title"], [1, "form-group"], ["for", "wb-jurisdiction", 1, "form-label"], ["id", "wb-jurisdiction", "name", "jurisdiction", 1, "form-control", "form-control-3-4", "ccd-dropdown", 3, "ngModelChange", "change", "ngModel"], [3, "ngValue", 4, "ngIf"], [3, "ngValue", 4, "ngFor", "ngForOf"], ["for", "wb-case-type", 1, "form-label"], ["id", "wb-case-type", "name", "case-type", 1, "form-control", "form-control-3-4", "ccd-dropdown", 3, "ngModelChange", "change", "ngModel", "disabled"], ["for", "wb-case-state", 1, "form-label"], ["id", "wb-case-state", "name", "state", 1, "form-control", "form-control-3-4", "ccd-dropdown", 3, "ngModelChange", "ngModel", "disabled"], [3, "ngValue"], ["ccdConditionalShowForm", "", 3, "formGroup", "contextFields", 4, "ngIf"], ["type", "button", 1, "button", 3, "click", "title"], ["ccdConditionalShowForm", "", 3, "formGroup", "contextFields"], ["id", "dynamicFilters"], ["class", "form-group", 4, "ngFor", "ngForOf"], [3, "keyup.enter", "caseField", "formGroup", "isExpanded", "isInSearchBlock"]], template: function WorkbasketFiltersComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "form", 0)(1, "div", 1)(2, "h2", 2);
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "rpxTranslate");
             i0.ɵɵelementEnd();
@@ -34975,7 +34975,7 @@ class WorkbasketFiltersComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WorkbasketFiltersComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-workbasket-filters', standalone: false, template: "<form id=\"filters\" class=\"global-display\">\n  <div class=\"form-group flex\">\n    <fieldset class=\"heading-h2\" aria-label=\"Filters\">{{'Filters' | rpxTranslate }}</fieldset>\n    <button type=\"button\" class=\"button workbasket-filters-apply\" (click)=\"apply(true)\" [disabled]=\"isApplyButtonDisabled()\"\n        [title]=\"'Apply filter' | rpxTranslate\" [attr.aria-label]=\"'Apply filter' | rpxTranslate\">\n      {{'Apply' | rpxTranslate}}\n    </button>&nbsp;&nbsp;&nbsp;\n    <button type=\"button\" (click)=\"reset()\" class=\"button button-secondary\"\n        [title]=\"'Reset filter' | rpxTranslate\" [attr.aria-label]=\"'Reset filter' | rpxTranslate\">\n      {{'Reset' | rpxTranslate}}\n    </button>\n  </div>\n\n  <div class=\"form-group\">\n    <label class=\"form-label\" for=\"wb-jurisdiction\">{{'Jurisdiction' | rpxTranslate}}</label>\n    <select class=\"form-control form-control-3-4 ccd-dropdown\" id=\"wb-jurisdiction\"\n            name=\"jurisdiction\" [(ngModel)]=\"selected.jurisdiction\" aria-controls=\"search-result\"\n            (change)=\"onJurisdictionIdChange()\">\n      <option *ngIf=\"!workbasketDefaults\" [ngValue]=\"null\">{{'Select a value' | rpxTranslate}}</option>\n      <option *ngFor=\"let j of jurisdictions\" [ngValue]=\"j\">{{j.name | rpxTranslate}}</option>\n    </select>\n  </div>\n\n  <div class=\"form-group\">\n    <label class=\"form-label\" for=\"wb-case-type\">{{'Case type' | rpxTranslate}}</label>\n    <select class=\"form-control form-control-3-4 ccd-dropdown\" id=\"wb-case-type\"\n            name=\"case-type\" [(ngModel)]=\"selected.caseType\" [disabled]=\"isCaseTypesDropdownDisabled()\"\n            (change)=\"onCaseTypeIdChange()\" aria-controls=\"search-result\">\n      <option *ngIf=\"!workbasketDefaults\" [ngValue]=\"null\">{{'Select a value' | rpxTranslate}}</option>\n      <option *ngFor=\"let ct of selectedJurisdictionCaseTypes\" [ngValue]=\"ct\">{{ct.name | rpxTranslate}}</option>\n    </select>\n  </div>\n\n  <div class=\"form-group\">\n    <label class=\"form-label\" for=\"wb-case-state\">{{'State' | rpxTranslate}}</label>\n    <select class=\"form-control form-control-3-4 ccd-dropdown\" id=\"wb-case-state\"\n            name=\"state\" [(ngModel)]=\"selected.caseState\" [disabled]=\"isCaseStatesDropdownDisabled()\"\n            aria-controls=\"search-result\">\n      <option [ngValue]=\"null\">{{'Any' | rpxTranslate}}</option>\n      <option *ngFor=\"let cs of selectedCaseTypeStates\" [ngValue]=\"cs\">{{cs.name | rpxTranslate}}</option>\n    </select>\n  </div>\n\n  <ng-container ccdConditionalShowForm *ngIf=\"isSearchableAndWorkbasketInputsReady()\" [formGroup]=\"formGroup\" [contextFields]=\"caseFields\">\n    <div id=\"dynamicFilters\">\n      <div class=\"form-group\" *ngFor=\"let workbasketInput of workbasketInputs\">\n        <ccd-field-write [caseField]=\"workbasketInput.field\" [formGroup]=\"formGroup\" [isExpanded]=\"true\" [isInSearchBlock]=\"true\" (keyup.enter)=\"apply(null)\">\n        </ccd-field-write>\n      </div>\n    </div>\n  </ng-container>\n\n    <button type=\"button\" class=\"button\" (click)=\"scrollToTop()\"\n          [title]=\"'Back to top' | rpxTranslate\" [attr.aria-label]=\"'Back to top' | rpxTranslate\">{{'Back to top' | rpxTranslate}}\n    </button>\n</form>\n", styles: [".govuk-js-link{appearance:none;background:none;border:none;color:#005ea5;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-decoration:underline}.govuk-js-link:hover{color:#2b8cc4;text-decoration-thickness:max(3px,.1875rem,.12em)}.govuk-js-link:focus{background-color:#ffbf47;color:#000;outline:3px solid transparent;text-decoration:none;box-shadow:0 -2px #ffbf47,0 4px #000}.govuk-js-link:visited{color:#4c2c92}div select{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:11pt;line-height:1.2727272727}@media(min-width:641px){div select{font-size:12pt;line-height:1.3333333333}}@media print{div select{font-size:10pt}}.form-group{margin-bottom:7px}.form-group.flex{display:flex}.form-group.flex button{margin:1rem .25rem .25rem;height:2rem}.ccd-dropdown{width:100%}span.heading-medium{margin-top:0}\n"] }]
+        args: [{ selector: 'ccd-workbasket-filters', standalone: false, template: "<form id=\"filters\" class=\"global-display\">\n  <div class=\"form-group flex\">\n    <h2 class=\"heading-h2\">{{'Filters' | rpxTranslate }}</h2>\n    <button type=\"button\" class=\"button workbasket-filters-apply\" (click)=\"apply(true)\" [disabled]=\"isApplyButtonDisabled()\"\n        [title]=\"'Apply filter' | rpxTranslate\" [attr.aria-label]=\"'Apply filter' | rpxTranslate\">\n      {{'Apply' | rpxTranslate}}\n    </button>&nbsp;&nbsp;&nbsp;\n    <button type=\"button\" (click)=\"reset()\" class=\"button button-secondary\"\n        [title]=\"'Reset filter' | rpxTranslate\" [attr.aria-label]=\"'Reset filter' | rpxTranslate\">\n      {{'Reset' | rpxTranslate}}\n    </button>\n  </div>\n\n  <div class=\"form-group\">\n    <label class=\"form-label\" for=\"wb-jurisdiction\">{{'Jurisdiction' | rpxTranslate}}</label>\n    <select class=\"form-control form-control-3-4 ccd-dropdown\" id=\"wb-jurisdiction\"\n            name=\"jurisdiction\" [(ngModel)]=\"selected.jurisdiction\"\n            (change)=\"onJurisdictionIdChange()\">\n      <option *ngIf=\"!workbasketDefaults\" [ngValue]=\"null\">{{'Select a value' | rpxTranslate}}</option>\n      <option *ngFor=\"let j of jurisdictions\" [ngValue]=\"j\">{{j.name | rpxTranslate}}</option>\n    </select>\n  </div>\n\n  <div class=\"form-group\">\n    <label class=\"form-label\" for=\"wb-case-type\">{{'Case type' | rpxTranslate}}</label>\n    <select class=\"form-control form-control-3-4 ccd-dropdown\" id=\"wb-case-type\"\n            name=\"case-type\" [(ngModel)]=\"selected.caseType\" [disabled]=\"isCaseTypesDropdownDisabled()\"\n            (change)=\"onCaseTypeIdChange()\">\n      <option *ngIf=\"!workbasketDefaults\" [ngValue]=\"null\">{{'Select a value' | rpxTranslate}}</option>\n      <option *ngFor=\"let ct of selectedJurisdictionCaseTypes\" [ngValue]=\"ct\">{{ct.name | rpxTranslate}}</option>\n    </select>\n  </div>\n\n  <div class=\"form-group\">\n    <label class=\"form-label\" for=\"wb-case-state\">{{'State' | rpxTranslate}}</label>\n    <select class=\"form-control form-control-3-4 ccd-dropdown\" id=\"wb-case-state\"\n            name=\"state\" [(ngModel)]=\"selected.caseState\" [disabled]=\"isCaseStatesDropdownDisabled()\"\n            >\n      <option [ngValue]=\"null\">{{'Any' | rpxTranslate}}</option>\n      <option *ngFor=\"let cs of selectedCaseTypeStates\" [ngValue]=\"cs\">{{cs.name | rpxTranslate}}</option>\n    </select>\n  </div>\n\n  <ng-container ccdConditionalShowForm *ngIf=\"isSearchableAndWorkbasketInputsReady()\" [formGroup]=\"formGroup\" [contextFields]=\"caseFields\">\n    <div id=\"dynamicFilters\">\n      <div class=\"form-group\" *ngFor=\"let workbasketInput of workbasketInputs\">\n        <ccd-field-write [caseField]=\"workbasketInput.field\" [formGroup]=\"formGroup\" [isExpanded]=\"true\" [isInSearchBlock]=\"true\" (keyup.enter)=\"apply(null)\">\n        </ccd-field-write>\n      </div>\n    </div>\n  </ng-container>\n\n    <button type=\"button\" class=\"button\" (click)=\"scrollToTop()\"\n          [title]=\"'Back to top' | rpxTranslate\" [attr.aria-label]=\"'Back to top' | rpxTranslate\">{{'Back to top' | rpxTranslate}}\n    </button>\n</form>\n", styles: [".govuk-js-link{appearance:none;background:none;border:none;color:#005ea5;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-decoration:underline}.govuk-js-link:hover{color:#2b8cc4;text-decoration-thickness:max(3px,.1875rem,.12em)}.govuk-js-link:focus{background-color:#ffbf47;color:#000;outline:3px solid transparent;text-decoration:none;box-shadow:0 -2px #ffbf47,0 4px #000}.govuk-js-link:visited{color:#4c2c92}div select{font-family:nta,Arial,sans-serif;font-weight:400;text-transform:none;font-size:11pt;line-height:1.2727272727}@media(min-width:641px){div select{font-size:12pt;line-height:1.3333333333}}@media print{div select{font-size:10pt}}.form-group{margin-bottom:7px}.form-group.flex{display:flex}.form-group.flex button{margin:1rem .25rem .25rem;height:2rem}.ccd-dropdown{width:100%}span.heading-medium{margin-top:0}\n"] }]
     }], () => [{ type: i1$1.ActivatedRoute }, { type: WorkbasketInputFilterService }, { type: OrderService }, { type: JurisdictionService }, { type: AlertService }, { type: WindowService }], { jurisdictions: [{
             type: Input
         }], defaults: [{
@@ -37407,21 +37407,21 @@ class CasePrinterComponent {
     }], () => [{ type: CaseNotifier }, { type: CasesService }, { type: AlertService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CasePrinterComponent, { className: "CasePrinterComponent", filePath: "lib/shared/components/case-viewer/printer/case-printer.component.ts", lineNumber: 15 }); })();
 
-function CaseViewerComponent_div_0_ccd_case_basic_access_view_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ccd-case-basic-access-view", 3);
+function CaseViewerComponent_main_0_ccd_case_basic_access_view_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ccd-case-basic-access-view", 4);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("accessType", ctx_r0.userAccessType)("caseDetails", ctx_r0.caseDetails);
 } }
-function CaseViewerComponent_div_0_ccd_case_full_access_view_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ccd-case-full-access-view", 4);
+function CaseViewerComponent_main_0_ccd_case_full_access_view_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ccd-case-full-access-view", 5);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("caseDetails", ctx_r0.caseDetails)("hasPrint", ctx_r0.hasPrint)("hasEventSelector", ctx_r0.hasEventSelector)("prependedTabs", ctx_r0.prependedTabs)("appendedTabs", ctx_r0.appendedTabs);
 } }
-function CaseViewerComponent_div_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div");
-    i0.ɵɵtemplate(1, CaseViewerComponent_div_0_ccd_case_basic_access_view_1_Template, 1, 2, "ccd-case-basic-access-view", 1)(2, CaseViewerComponent_div_0_ccd_case_full_access_view_2_Template, 1, 5, "ccd-case-full-access-view", 2);
+function CaseViewerComponent_main_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "main", 1);
+    i0.ɵɵtemplate(1, CaseViewerComponent_main_0_ccd_case_basic_access_view_1_Template, 1, 2, "ccd-case-basic-access-view", 2)(2, CaseViewerComponent_main_0_ccd_case_full_access_view_2_Template, 1, 5, "ccd-case-full-access-view", 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -37508,15 +37508,15 @@ class CaseViewerComponent {
         return tabs;
     }
     static ɵfac = function CaseViewerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseViewerComponent)(i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(OrderService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseViewerComponent, selectors: [["ccd-case-viewer"]], inputs: { hasPrint: "hasPrint", hasEventSelector: "hasEventSelector", prependedTabs: "prependedTabs", appendedTabs: "appendedTabs" }, standalone: false, decls: 1, vars: 1, consts: [[4, "ngIf"], ["id", "content", 3, "accessType", "caseDetails", 4, "ngIf"], ["id", "content", 3, "caseDetails", "hasPrint", "hasEventSelector", "prependedTabs", "appendedTabs", 4, "ngIf"], ["id", "content", 3, "accessType", "caseDetails"], ["id", "content", 3, "caseDetails", "hasPrint", "hasEventSelector", "prependedTabs", "appendedTabs"]], template: function CaseViewerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CaseViewerComponent_div_0_Template, 3, 2, "div", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseViewerComponent, selectors: [["ccd-case-viewer"]], inputs: { hasPrint: "hasPrint", hasEventSelector: "hasEventSelector", prependedTabs: "prependedTabs", appendedTabs: "appendedTabs" }, standalone: false, decls: 1, vars: 1, consts: [["id", "content", "role", "main", "class", "govuk-main-wrapper", 4, "ngIf"], ["id", "content", "role", "main", 1, "govuk-main-wrapper"], [3, "accessType", "caseDetails", 4, "ngIf"], [3, "caseDetails", "hasPrint", "hasEventSelector", "prependedTabs", "appendedTabs", 4, "ngIf"], [3, "accessType", "caseDetails"], [3, "caseDetails", "hasPrint", "hasEventSelector", "prependedTabs", "appendedTabs"]], template: function CaseViewerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, CaseViewerComponent_main_0_Template, 3, 2, "main", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.isDataLoaded());
         } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseViewerComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-viewer', standalone: false, template: "<div *ngIf=\"isDataLoaded()\">\n  <ccd-case-basic-access-view *ngIf=\"!hasStandardAccess()\"\n                              [accessType]=\"userAccessType\"\n                              [caseDetails]=\"caseDetails\"\n                              id=\"content\">\n  </ccd-case-basic-access-view>\n  <ccd-case-full-access-view *ngIf=\"hasStandardAccess()\"\n                             [caseDetails]=\"caseDetails\"\n                             [hasPrint]=\"hasPrint\"\n                             [hasEventSelector]=\"hasEventSelector\"\n                             [prependedTabs]=\"prependedTabs\"\n                             [appendedTabs]=\"appendedTabs\"\n                             id=\"content\">\n  </ccd-case-full-access-view>\n</div>\n" }]
+        args: [{ selector: 'ccd-case-viewer', standalone: false, template: "<main *ngIf=\"isDataLoaded()\" id=\"content\" role=\"main\" class=\"govuk-main-wrapper\">\n  <ccd-case-basic-access-view *ngIf=\"!hasStandardAccess()\"\n                              [accessType]=\"userAccessType\"\n                              [caseDetails]=\"caseDetails\">\n  </ccd-case-basic-access-view>\n  <ccd-case-full-access-view *ngIf=\"hasStandardAccess()\"\n                             [caseDetails]=\"caseDetails\"\n                             [hasPrint]=\"hasPrint\"\n                             [hasEventSelector]=\"hasEventSelector\"\n                             [prependedTabs]=\"prependedTabs\"\n                             [appendedTabs]=\"appendedTabs\">\n  </ccd-case-full-access-view>\n</main>\n" }]
     }], () => [{ type: i1$1.ActivatedRoute }, { type: CaseNotifier }, { type: AbstractAppConfig }, { type: OrderService }], { hasPrint: [{
             type: Input
         }], hasEventSelector: [{
@@ -37531,38 +37531,54 @@ class CaseViewerComponent {
 /**
  * Cloned from rpx-xui-webapp src/app/components/error-message/error-message.component.ts
  */
+function ErrorMessageComponent_ng_container_0_a_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 7);
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "rpxTranslate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("fragment", ctx_r0.error.fieldId);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 2, ctx_r0.error.description));
+} }
+function ErrorMessageComponent_ng_container_0_ng_template_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0);
+    i0.ɵɵpipe(1, "rpxTranslate");
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(1, 1, ctx_r0.error.description));
+} }
 function ErrorMessageComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 1)(2, "h2", 2);
+    i0.ɵɵelementStart(1, "div", 2)(2, "h2", 3);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 3)(6, "ul", 4)(7, "li")(8, "a", 5);
-    i0.ɵɵtext(9);
-    i0.ɵɵpipe(10, "rpxTranslate");
-    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(5, "div", 4)(6, "ul", 5)(7, "li");
+    i0.ɵɵtemplate(8, ErrorMessageComponent_ng_container_0_a_8_Template, 3, 4, "a", 6)(9, ErrorMessageComponent_ng_container_0_ng_template_9_Template, 2, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵelementEnd()()()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
+    const noLink_r2 = i0.ɵɵreference(10);
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 3, ctx_r0.error.title));
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("fragment", ctx_r0.error.fieldId);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 5, ctx_r0.error.description));
+    i0.ɵɵproperty("ngIf", ctx_r0.error.fieldId)("ngIfElse", noLink_r2);
 } }
 class ErrorMessageComponent {
     error;
     static ɵfac = function ErrorMessageComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ErrorMessageComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ErrorMessageComponent, selectors: [["exui-error-message"]], inputs: { error: "error" }, standalone: false, decls: 1, vars: 1, consts: [[4, "ngIf"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], ["routerLink", ".", "tabindex", "0", 3, "fragment"]], template: function ErrorMessageComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, ErrorMessageComponent_ng_container_0_Template, 11, 7, "ng-container", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ErrorMessageComponent, selectors: [["exui-error-message"]], inputs: { error: "error" }, standalone: false, decls: 1, vars: 1, consts: [["noLink", ""], [4, "ngIf"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], ["routerLink", ".", "tabindex", "0", 3, "fragment", 4, "ngIf", "ngIfElse"], ["routerLink", ".", "tabindex", "0", 3, "fragment"]], template: function ErrorMessageComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ErrorMessageComponent_ng_container_0_Template, 11, 5, "ng-container", 1);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.error);
         } }, dependencies: [i5.NgIf, i1$1.RouterLink, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorMessageComponent, [{
         type: Component,
-        args: [{ selector: 'exui-error-message', standalone: false, template: "<!-- Cloned from rpx-xui-webapp src/app/components/error-message/error-message.component.html -->\n<ng-container *ngIf=\"error\">\n  <div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n    <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">{{error.title | rpxTranslate}}</h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n        <li>\n          <a routerLink=\".\" tabindex=\"0\" [fragment]=\"error.fieldId\">{{error.description | rpxTranslate}}</a>\n        </li>\n      </ul>\n    </div>\n  </div>\n</ng-container>\n" }]
+        args: [{ selector: 'exui-error-message', standalone: false, template: "<!-- Cloned from rpx-xui-webapp src/app/components/error-message/error-message.component.html -->\n<ng-container *ngIf=\"error\">\n  <div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" tabindex=\"-1\" data-module=\"govuk-error-summary\">\n    <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">{{error.title | rpxTranslate}}</h2>\n    <div class=\"govuk-error-summary__body\">\n      <ul class=\"govuk-list govuk-error-summary__list\">\n        <li>\n          <a *ngIf=\"error.fieldId; else noLink\" routerLink=\".\" tabindex=\"0\" [fragment]=\"error.fieldId\">{{error.description | rpxTranslate}}</a>\n          <ng-template #noLink>{{error.description | rpxTranslate}}</ng-template>\n        </li>\n      </ul>\n    </div>\n  </div>\n</ng-container>\n" }]
     }], null, { error: [{
             type: Input
         }] }); })();
@@ -38734,14 +38750,14 @@ var ChallengedAccessRequestErrors;
 const _c0$4 = a0 => ({ "form-group-error": a0 });
 const _c1$2 = a0 => ({ "govuk-input--error": a0 });
 const _c2 = a0 => ({ "govuk-textarea--error": a0 });
-function CaseChallengedAccessRequestComponent_exui_error_message_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "exui-error-message", 25);
+function CaseChallengedAccessRequestComponent_exui_error_message_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "exui-error-message", 26);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("error", ctx_r0.errorMessage);
 } }
-function CaseChallengedAccessRequestComponent_div_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
+function CaseChallengedAccessRequestComponent_div_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -38750,8 +38766,8 @@ function CaseChallengedAccessRequestComponent_div_17_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.errorMessage.description), " ");
 } }
-function CaseChallengedAccessRequestComponent_div_24_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 32);
+function CaseChallengedAccessRequestComponent_div_25_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -38760,12 +38776,12 @@ function CaseChallengedAccessRequestComponent_div_24_div_4_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.errorMessage.description), " ");
 } }
-function CaseChallengedAccessRequestComponent_div_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27)(1, "div", 28)(2, "label", 29);
+function CaseChallengedAccessRequestComponent_div_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29)(2, "label", 30);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, CaseChallengedAccessRequestComponent_div_24_div_4_Template, 3, 3, "div", 30);
-    i0.ɵɵelement(5, "input", 31);
+    i0.ɵɵtemplate(4, CaseChallengedAccessRequestComponent_div_25_div_4_Template, 3, 3, "div", 31);
+    i0.ɵɵelement(5, "input", 32);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -38776,8 +38792,8 @@ function CaseChallengedAccessRequestComponent_div_24_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c1$2, ctx_r0.formGroup.get("caseReference").invalid && ctx_r0.submitted));
 } }
-function CaseChallengedAccessRequestComponent_div_40_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 36);
+function CaseChallengedAccessRequestComponent_div_41_div_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -38786,10 +38802,10 @@ function CaseChallengedAccessRequestComponent_div_40_div_2_Template(rf, ctx) { i
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r0.errorMessage.description), " ");
 } }
-function CaseChallengedAccessRequestComponent_div_40_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 33)(1, "div", 28);
-    i0.ɵɵtemplate(2, CaseChallengedAccessRequestComponent_div_40_div_2_Template, 3, 3, "div", 34);
-    i0.ɵɵelement(3, "textarea", 35);
+function CaseChallengedAccessRequestComponent_div_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 29);
+    i0.ɵɵtemplate(2, CaseChallengedAccessRequestComponent_div_41_div_2_Template, 3, 3, "div", 35);
+    i0.ɵɵelement(3, "textarea", 36);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -38814,6 +38830,7 @@ class CaseChallengedAccessRequestComponent {
     errorMessage;
     $roleAssignmentResponseSubscription;
     genericError = 'There is a problem';
+    errorPrefix = 'Error: ';
     radioSelectedControlName = 'radioSelected';
     caseReferenceControlName = 'caseReference';
     otherReasonControlName = 'otherReason';
@@ -38855,6 +38872,7 @@ class CaseChallengedAccessRequestComponent {
                 }],
             updateOn: 'submit'
         }));
+        this.updateDocumentTitle();
     }
     onChange() {
         this.submitted = false;
@@ -38869,7 +38887,8 @@ class CaseChallengedAccessRequestComponent {
         if (this.formGroup.get(this.radioSelectedControlName).invalid) {
             this.errorMessage = {
                 title: this.genericError,
-                description: ChallengedAccessRequestErrors.NO_SELECTION
+                description: ChallengedAccessRequestErrors.NO_SELECTION,
+                fieldId: 'reason-0'
             };
         }
         else {
@@ -38888,6 +38907,7 @@ class CaseChallengedAccessRequestComponent {
                 };
             }
         }
+        this.updateDocumentTitle();
         // Initiate Challenged Access Request
         if (this.formGroup.valid) {
             // Get the Case Reference (for which access is being requested) from the ActivatedRouteSnapshot data
@@ -38923,112 +38943,122 @@ class CaseChallengedAccessRequestComponent {
     inputEmpty(input) {
         return input.value === null || input.value.trim().length === 0;
     }
+    updateDocumentTitle() {
+        if (!this.title) {
+            return;
+        }
+        document.title = this.formGroup?.invalid && this.submitted
+            ? `${this.errorPrefix}${this.title}`
+            : this.title;
+    }
     static ɵfac = function CaseChallengedAccessRequestComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseChallengedAccessRequestComponent)(i0.ɵɵdirectiveInject(i4.FormBuilder), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseNotifier)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseChallengedAccessRequestComponent, selectors: [["ccd-case-challenged-access-request"]], standalone: false, decls: 50, vars: 46, consts: [[3, "error", 4, "ngIf"], ["type", "information"], [3, "submit", "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "reason-hint", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--l"], [1, "govuk-fieldset__heading"], ["id", "reason-hint", 1, "govuk-hint"], ["id", "error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", 1, "govuk-radios", "govuk-radios--conditional"], [1, "govuk-radios__item"], ["id", "reason-0", "name", "radioSelected", "type", "radio", "data-aria-controls", "conditional-reason-0", "formControlName", "radioSelected", 1, "govuk-radios__input", 3, "change", "value", "checked"], ["for", "reason-0", 1, "govuk-label", "govuk-radios__label"], ["id", "conditional-reason-0", "class", "govuk-radios__conditional", 4, "ngIf"], ["id", "reason-1", "name", "radioSelected", "type", "radio", "formControlName", "radioSelected", 1, "govuk-radios__input", 3, "change", "value", "checked"], ["for", "reason-1", 1, "govuk-label", "govuk-radios__label"], ["id", "reason-2", "name", "radioSelected", "type", "radio", "formControlName", "radioSelected", 1, "govuk-radios__input", 3, "change", "value", "checked"], ["for", "reason-2", 1, "govuk-label", "govuk-radios__label"], ["id", "reason-3", "name", "radioSelected", "type", "radio", "data-aria-controls", "conditional-reason-3", "formControlName", "radioSelected", 1, "govuk-radios__input", 3, "change", "value", "checked"], ["for", "reason-3", "id", "reason-3-label", 1, "govuk-label", "govuk-radios__label"], ["id", "conditional-reason-3", "class", "govuk-radios__conditional", 4, "ngIf"], [1, "govuk-button-group"], ["type", "submit", 1, "govuk-button", "govuk-!-margin-right-3"], [1, "govuk-grid-column-full", "govuk-!-padding-left-0"], ["href", "#", 1, "govuk-body", 3, "click"], [3, "error"], ["id", "error-message", 1, "govuk-error-message"], ["id", "conditional-reason-0", 1, "govuk-radios__conditional"], [1, "govuk-form-group"], ["for", "case-reference", 1, "govuk-label"], ["id", "case-reference-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "case-reference", "name", "case-reference", "type", "text", "formControlName", "caseReference", 1, "govuk-input", "govuk-!-width-one-third", 3, "ngClass"], ["id", "case-reference-error-message", 1, "govuk-error-message"], ["id", "conditional-reason-3", 1, "govuk-radios__conditional"], ["id", "other-reason-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "other-reason", "name", "other-reason", "rows", "5", "aria-describedby", "reason-3-label", "formControlName", "otherReason", 1, "govuk-textarea", 3, "ngClass"], ["id", "other-reason-error-message", 1, "govuk-error-message"]], template: function CaseChallengedAccessRequestComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CaseChallengedAccessRequestComponent_exui_error_message_0_Template, 1, 1, "exui-error-message", 0);
-            i0.ɵɵelementStart(1, "cut-alert", 1);
-            i0.ɵɵtext(2);
-            i0.ɵɵpipe(3, "rpxTranslate");
-            i0.ɵɵelement(4, "br");
-            i0.ɵɵtext(5);
-            i0.ɵɵpipe(6, "rpxTranslate");
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseChallengedAccessRequestComponent, selectors: [["ccd-case-challenged-access-request"]], standalone: false, decls: 51, vars: 46, consts: [["id", "content", "role", "main", 1, "govuk-main-wrapper"], [3, "error", 4, "ngIf"], ["type", "information"], [3, "submit", "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "reason-hint", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--l"], [1, "govuk-fieldset__heading"], ["id", "reason-hint", 1, "govuk-hint"], ["id", "error-message", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", 1, "govuk-radios", "govuk-radios--conditional"], [1, "govuk-radios__item"], ["id", "reason-0", "name", "radioSelected", "type", "radio", "data-aria-controls", "conditional-reason-0", "formControlName", "radioSelected", 1, "govuk-radios__input", 3, "change", "value", "checked"], ["for", "reason-0", 1, "govuk-label", "govuk-radios__label"], ["id", "conditional-reason-0", "class", "govuk-radios__conditional", 4, "ngIf"], ["id", "reason-1", "name", "radioSelected", "type", "radio", "formControlName", "radioSelected", 1, "govuk-radios__input", 3, "change", "value", "checked"], ["for", "reason-1", 1, "govuk-label", "govuk-radios__label"], ["id", "reason-2", "name", "radioSelected", "type", "radio", "formControlName", "radioSelected", 1, "govuk-radios__input", 3, "change", "value", "checked"], ["for", "reason-2", 1, "govuk-label", "govuk-radios__label"], ["id", "reason-3", "name", "radioSelected", "type", "radio", "data-aria-controls", "conditional-reason-3", "formControlName", "radioSelected", 1, "govuk-radios__input", 3, "change", "value", "checked"], ["for", "reason-3", "id", "reason-3-label", 1, "govuk-label", "govuk-radios__label"], ["id", "conditional-reason-3", "class", "govuk-radios__conditional", 4, "ngIf"], [1, "govuk-button-group"], ["type", "submit", 1, "govuk-button", "govuk-!-margin-right-3"], [1, "govuk-grid-column-full", "govuk-!-padding-left-0"], ["href", "#", 1, "govuk-body", 3, "click"], [3, "error"], ["id", "error-message", 1, "govuk-error-message"], ["id", "conditional-reason-0", 1, "govuk-radios__conditional"], [1, "govuk-form-group"], ["for", "case-reference", 1, "govuk-label"], ["id", "case-reference-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "case-reference", "name", "case-reference", "type", "text", "formControlName", "caseReference", 1, "govuk-input", "govuk-!-width-one-third", 3, "ngClass"], ["id", "case-reference-error-message", 1, "govuk-error-message"], ["id", "conditional-reason-3", 1, "govuk-radios__conditional"], ["id", "other-reason-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "other-reason", "name", "other-reason", "rows", "5", "aria-describedby", "reason-3-label", "formControlName", "otherReason", 1, "govuk-textarea", 3, "ngClass"], ["id", "other-reason-error-message", 1, "govuk-error-message"]], template: function CaseChallengedAccessRequestComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "main", 0);
+            i0.ɵɵtemplate(1, CaseChallengedAccessRequestComponent_exui_error_message_1_Template, 1, 1, "exui-error-message", 1);
+            i0.ɵɵelementStart(2, "cut-alert", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵpipe(4, "rpxTranslate");
+            i0.ɵɵelement(5, "br");
+            i0.ɵɵtext(6);
+            i0.ɵɵpipe(7, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "form", 2);
-            i0.ɵɵlistener("submit", function CaseChallengedAccessRequestComponent_Template_form_submit_7_listener() { return ctx.onSubmit(); });
-            i0.ɵɵelementStart(8, "div", 3)(9, "fieldset", 4)(10, "legend", 5)(11, "h1", 6);
-            i0.ɵɵtext(12);
-            i0.ɵɵpipe(13, "rpxTranslate");
+            i0.ɵɵelementStart(8, "form", 3);
+            i0.ɵɵlistener("submit", function CaseChallengedAccessRequestComponent_Template_form_submit_8_listener() { return ctx.onSubmit(); });
+            i0.ɵɵelementStart(9, "div", 4)(10, "fieldset", 5)(11, "legend", 6)(12, "h1", 7);
+            i0.ɵɵtext(13);
+            i0.ɵɵpipe(14, "rpxTranslate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(14, "div", 7);
-            i0.ɵɵtext(15);
-            i0.ɵɵpipe(16, "rpxTranslate");
+            i0.ɵɵelementStart(15, "div", 8);
+            i0.ɵɵtext(16);
+            i0.ɵɵpipe(17, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(17, CaseChallengedAccessRequestComponent_div_17_Template, 3, 3, "div", 8);
-            i0.ɵɵelementStart(18, "div", 9)(19, "div", 10)(20, "input", 11);
-            i0.ɵɵlistener("change", function CaseChallengedAccessRequestComponent_Template_input_change_20_listener() { return ctx.onChange(); });
+            i0.ɵɵtemplate(18, CaseChallengedAccessRequestComponent_div_18_Template, 3, 3, "div", 9);
+            i0.ɵɵelementStart(19, "div", 10)(20, "div", 11)(21, "input", 12);
+            i0.ɵɵlistener("change", function CaseChallengedAccessRequestComponent_Template_input_change_21_listener() { return ctx.onChange(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(21, "label", 12);
-            i0.ɵɵtext(22);
-            i0.ɵɵpipe(23, "rpxTranslate");
+            i0.ɵɵelementStart(22, "label", 13);
+            i0.ɵɵtext(23);
+            i0.ɵɵpipe(24, "rpxTranslate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(24, CaseChallengedAccessRequestComponent_div_24_Template, 6, 5, "div", 13);
-            i0.ɵɵelementStart(25, "div", 10)(26, "input", 14);
-            i0.ɵɵlistener("change", function CaseChallengedAccessRequestComponent_Template_input_change_26_listener() { return ctx.onChange(); });
+            i0.ɵɵtemplate(25, CaseChallengedAccessRequestComponent_div_25_Template, 6, 5, "div", 14);
+            i0.ɵɵelementStart(26, "div", 11)(27, "input", 15);
+            i0.ɵɵlistener("change", function CaseChallengedAccessRequestComponent_Template_input_change_27_listener() { return ctx.onChange(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "label", 15);
-            i0.ɵɵtext(28);
-            i0.ɵɵpipe(29, "rpxTranslate");
+            i0.ɵɵelementStart(28, "label", 16);
+            i0.ɵɵtext(29);
+            i0.ɵɵpipe(30, "rpxTranslate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(30, "div", 10)(31, "input", 16);
-            i0.ɵɵlistener("change", function CaseChallengedAccessRequestComponent_Template_input_change_31_listener() { return ctx.onChange(); });
+            i0.ɵɵelementStart(31, "div", 11)(32, "input", 17);
+            i0.ɵɵlistener("change", function CaseChallengedAccessRequestComponent_Template_input_change_32_listener() { return ctx.onChange(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "label", 17);
-            i0.ɵɵtext(33);
-            i0.ɵɵpipe(34, "rpxTranslate");
+            i0.ɵɵelementStart(33, "label", 18);
+            i0.ɵɵtext(34);
+            i0.ɵɵpipe(35, "rpxTranslate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(35, "div", 10)(36, "input", 18);
-            i0.ɵɵlistener("change", function CaseChallengedAccessRequestComponent_Template_input_change_36_listener() { return ctx.onChange(); });
+            i0.ɵɵelementStart(36, "div", 11)(37, "input", 19);
+            i0.ɵɵlistener("change", function CaseChallengedAccessRequestComponent_Template_input_change_37_listener() { return ctx.onChange(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(37, "label", 19);
-            i0.ɵɵtext(38);
-            i0.ɵɵpipe(39, "rpxTranslate");
+            i0.ɵɵelementStart(38, "label", 20);
+            i0.ɵɵtext(39);
+            i0.ɵɵpipe(40, "rpxTranslate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(40, CaseChallengedAccessRequestComponent_div_40_Template, 4, 4, "div", 20);
+            i0.ɵɵtemplate(41, CaseChallengedAccessRequestComponent_div_41_Template, 4, 4, "div", 21);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(41, "div", 21)(42, "button", 22);
-            i0.ɵɵtext(43);
-            i0.ɵɵpipe(44, "rpxTranslate");
+            i0.ɵɵelementStart(42, "div", 22)(43, "button", 23);
+            i0.ɵɵtext(44);
+            i0.ɵɵpipe(45, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(45, "div", 23)(46, "p")(47, "a", 24);
-            i0.ɵɵlistener("click", function CaseChallengedAccessRequestComponent_Template_a_click_47_listener($event) { ctx.onCancel(); return $event.preventDefault(); });
-            i0.ɵɵtext(48);
-            i0.ɵɵpipe(49, "rpxTranslate");
-            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(46, "div", 24)(47, "p")(48, "a", 25);
+            i0.ɵɵlistener("click", function CaseChallengedAccessRequestComponent_Template_a_click_48_listener($event) { ctx.onCancel(); return $event.preventDefault(); });
+            i0.ɵɵtext(49);
+            i0.ɵɵpipe(50, "rpxTranslate");
+            i0.ɵɵelementEnd()()()()()();
         } if (rf & 2) {
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.formGroup.invalid && ctx.submitted);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 24, "This case requires challenged access."));
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 24, "This case requires challenged access."));
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 26, "This is because the case is outside your work area. If you request access to the case, it will be logged for auditing purposes."), "\n");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 26, "This is because the case is outside your work area. If you request access to the case, it will be logged for auditing purposes."), "\n");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(44, _c0$4, ctx.formGroup.invalid && ctx.submitted));
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(13, 28, ctx.title), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 28, ctx.title), " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(16, 30, ctx.hint), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 30, ctx.hint), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.formGroup.get("radioSelected").invalid && ctx.submitted);
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("value", ctx.accessReasons[0].reason)("checked", ctx.accessReasons[0].checked);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 32, ctx.accessReasons[0].reason), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(24, 32, ctx.accessReasons[0].reason), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.formGroup.get("radioSelected").value === ctx.accessReasons[0].reason);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.accessReasons[1].reason)("checked", ctx.accessReasons[1].checked);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(29, 34, ctx.accessReasons[1].reason), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 34, ctx.accessReasons[1].reason), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("value", ctx.accessReasons[2].reason)("checked", ctx.accessReasons[2].checked);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(34, 36, ctx.accessReasons[2].reason), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(35, 36, ctx.accessReasons[2].reason), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("value", ctx.accessReasons[3].reason)("checked", ctx.accessReasons[3].checked);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(39, 38, ctx.accessReasons[3].reason), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(40, 38, ctx.accessReasons[3].reason), " ");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.formGroup.get("radioSelected").value === ctx.accessReasons[3].reason);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(44, 40, "Submit"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(45, 40, "Submit"), " ");
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(49, 42, "Cancel"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(50, 42, "Cancel"), " ");
         } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseChallengedAccessRequestComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-challenged-access-request', standalone: false, template: "<exui-error-message *ngIf=\"formGroup.invalid && submitted\" [error]=\"errorMessage\"></exui-error-message>\n<cut-alert type=\"information\">\n  {{'This case requires challenged access.' | rpxTranslate}}<br/>\n  {{'This is because the case is outside your work area. If you request access to the case, it will be logged for auditing purposes.' | rpxTranslate}}\n</cut-alert>\n<form [formGroup]=\"formGroup\" (submit)=\"onSubmit()\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': formGroup.invalid && submitted}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"reason-hint\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-fieldset__heading\">\n          {{title | rpxTranslate}}\n        </h1>\n      </legend>\n      <div id=\"reason-hint\" class=\"govuk-hint\">\n        {{hint | rpxTranslate}}\n      </div>\n      <div id=\"error-message\" class=\"govuk-error-message\" *ngIf=\"formGroup.get('radioSelected').invalid && submitted\">\n        {{errorMessage.description | rpxTranslate}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-0\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[0].reason\"\n          data-aria-controls=\"conditional-reason-0\" formControlName=\"radioSelected\" [checked]=\"accessReasons[0].checked\"\n          (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-0\">\n            {{accessReasons[0].reason | rpxTranslate}}\n          </label>\n        </div>\n        <div id=\"conditional-reason-0\" *ngIf=\"formGroup.get('radioSelected').value === accessReasons[0].reason\"\n        class=\"govuk-radios__conditional\">\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label\" for=\"case-reference\">\n              {{caseRefLabel}}\n            </label>\n            <div id=\"case-reference-error-message\" class=\"govuk-error-message\" *ngIf=\"formGroup.get('caseReference').invalid && submitted\">\n              {{errorMessage.description | rpxTranslate}}\n            </div>\n            <input class=\"govuk-input govuk-!-width-one-third\"\n            [ngClass]=\"{'govuk-input--error': formGroup.get('caseReference').invalid && submitted}\" id=\"case-reference\"\n            name=\"case-reference\" type=\"text\" formControlName=\"caseReference\">\n          </div>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-1\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[1].reason\"\n          formControlName=\"radioSelected\" [checked]=\"accessReasons[1].checked\" (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-1\">\n            {{accessReasons[1].reason | rpxTranslate}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-2\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[2].reason\"\n          formControlName=\"radioSelected\" [checked]=\"accessReasons[2].checked\" (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-2\">\n            {{accessReasons[2].reason | rpxTranslate}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-3\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[3].reason\"\n          data-aria-controls=\"conditional-reason-3\" formControlName=\"radioSelected\" [checked]=\"accessReasons[3].checked\"\n          (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-3\" id=\"reason-3-label\">\n            {{accessReasons[3].reason | rpxTranslate}}\n          </label>\n        </div>\n        <div id=\"conditional-reason-3\" *ngIf=\"formGroup.get('radioSelected').value === accessReasons[3].reason\"\n        class=\"govuk-radios__conditional\">\n          <div class=\"govuk-form-group\">\n            <div id=\"other-reason-error-message\" class=\"govuk-error-message\" *ngIf=\"formGroup.get('otherReason').invalid && submitted\">\n              {{errorMessage.description | rpxTranslate}}\n            </div>\n            <textarea class=\"govuk-textarea\" [ngClass]=\"{'govuk-textarea--error': formGroup.get('otherReason').invalid && submitted}\"\n            id=\"other-reason\" name=\"other-reason\" rows=\"5\" aria-describedby=\"reason-3-label\" formControlName=\"otherReason\"></textarea>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n  <div class=\"govuk-button-group\">\n    <button class=\"govuk-button govuk-!-margin-right-3\" type=\"submit\">\n      {{'Submit' | rpxTranslate}}\n    </button>\n    <div class=\"govuk-grid-column-full govuk-!-padding-left-0\">\n      <p>\n        <a class='govuk-body' (click)=\"onCancel(); $event.preventDefault()\" href=\"#\">\n          {{'Cancel' | rpxTranslate}}\n        </a>\n      </p>\n    </div>\n  </div>\n</form>\n" }]
+        args: [{ selector: 'ccd-case-challenged-access-request', standalone: false, template: "<main id=\"content\" role=\"main\" class=\"govuk-main-wrapper\">\n<exui-error-message *ngIf=\"formGroup.invalid && submitted\" [error]=\"errorMessage\"></exui-error-message>\n<cut-alert type=\"information\">\n  {{'This case requires challenged access.' | rpxTranslate}}<br/>\n  {{'This is because the case is outside your work area. If you request access to the case, it will be logged for auditing purposes.' | rpxTranslate}}\n</cut-alert>\n<form [formGroup]=\"formGroup\" (submit)=\"onSubmit()\">\n  <div class=\"govuk-form-group\" [ngClass]=\"{'form-group-error': formGroup.invalid && submitted}\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"reason-hint\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-fieldset__heading\">\n          {{title | rpxTranslate}}\n        </h1>\n      </legend>\n      <div id=\"reason-hint\" class=\"govuk-hint\">\n        {{hint | rpxTranslate}}\n      </div>\n      <div id=\"error-message\" class=\"govuk-error-message\" *ngIf=\"formGroup.get('radioSelected').invalid && submitted\">\n        {{errorMessage.description | rpxTranslate}}\n      </div>\n      <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-0\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[0].reason\"\n          data-aria-controls=\"conditional-reason-0\" formControlName=\"radioSelected\" [checked]=\"accessReasons[0].checked\"\n          (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-0\">\n            {{accessReasons[0].reason | rpxTranslate}}\n          </label>\n        </div>\n        <div id=\"conditional-reason-0\" *ngIf=\"formGroup.get('radioSelected').value === accessReasons[0].reason\"\n        class=\"govuk-radios__conditional\">\n          <div class=\"govuk-form-group\">\n            <label class=\"govuk-label\" for=\"case-reference\">\n              {{caseRefLabel}}\n            </label>\n            <div id=\"case-reference-error-message\" class=\"govuk-error-message\" *ngIf=\"formGroup.get('caseReference').invalid && submitted\">\n              {{errorMessage.description | rpxTranslate}}\n            </div>\n            <input class=\"govuk-input govuk-!-width-one-third\"\n            [ngClass]=\"{'govuk-input--error': formGroup.get('caseReference').invalid && submitted}\" id=\"case-reference\"\n            name=\"case-reference\" type=\"text\" formControlName=\"caseReference\">\n          </div>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-1\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[1].reason\"\n          formControlName=\"radioSelected\" [checked]=\"accessReasons[1].checked\" (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-1\">\n            {{accessReasons[1].reason | rpxTranslate}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-2\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[2].reason\"\n          formControlName=\"radioSelected\" [checked]=\"accessReasons[2].checked\" (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-2\">\n            {{accessReasons[2].reason | rpxTranslate}}\n          </label>\n        </div>\n        <div class=\"govuk-radios__item\">\n          <input class=\"govuk-radios__input\" id=\"reason-3\" name=\"radioSelected\" type=\"radio\" [value]=\"accessReasons[3].reason\"\n          data-aria-controls=\"conditional-reason-3\" formControlName=\"radioSelected\" [checked]=\"accessReasons[3].checked\"\n          (change)=\"onChange()\"/>\n          <label class=\"govuk-label govuk-radios__label\" for=\"reason-3\" id=\"reason-3-label\">\n            {{accessReasons[3].reason | rpxTranslate}}\n          </label>\n        </div>\n        <div id=\"conditional-reason-3\" *ngIf=\"formGroup.get('radioSelected').value === accessReasons[3].reason\"\n        class=\"govuk-radios__conditional\">\n          <div class=\"govuk-form-group\">\n            <div id=\"other-reason-error-message\" class=\"govuk-error-message\" *ngIf=\"formGroup.get('otherReason').invalid && submitted\">\n              {{errorMessage.description | rpxTranslate}}\n            </div>\n            <textarea class=\"govuk-textarea\" [ngClass]=\"{'govuk-textarea--error': formGroup.get('otherReason').invalid && submitted}\"\n            id=\"other-reason\" name=\"other-reason\" rows=\"5\" aria-describedby=\"reason-3-label\" formControlName=\"otherReason\"></textarea>\n          </div>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n  <div class=\"govuk-button-group\">\n    <button class=\"govuk-button govuk-!-margin-right-3\" type=\"submit\">\n      {{'Submit' | rpxTranslate}}\n    </button>\n    <div class=\"govuk-grid-column-full govuk-!-padding-left-0\">\n      <p>\n        <a class='govuk-body' (click)=\"onCancel(); $event.preventDefault()\" href=\"#\">\n          {{'Cancel' | rpxTranslate}}\n        </a>\n      </p>\n    </div>\n  </div>\n</form>\n</main>\n" }]
     }], () => [{ type: i4.FormBuilder }, { type: i1$1.Router }, { type: CasesService }, { type: i1$1.ActivatedRoute }, { type: CaseNotifier }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseChallengedAccessRequestComponent, { className: "CaseChallengedAccessRequestComponent", filePath: "lib/shared/components/case-viewer/case-challenged-access-request/case-challenged-access-request.component.ts", lineNumber: 15 }); })();
 
@@ -39445,14 +39475,14 @@ var SpecificAccessRequestErrors;
 
 const _c0$1 = a0 => ({ "form-group-error": a0 });
 const _c1$1 = a0 => ({ "govuk-textarea--error": a0 });
-function CaseSpecificAccessRequestComponent_exui_error_message_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "exui-error-message", 22);
+function CaseSpecificAccessRequestComponent_exui_error_message_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "exui-error-message", 24);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("error", ctx_r0.errorMessage);
 } }
-function CaseSpecificAccessRequestComponent_div_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23);
+function CaseSpecificAccessRequestComponent_div_42_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -39477,6 +39507,7 @@ class CaseSpecificAccessRequestComponent {
     errorMessage;
     $roleAssignmentResponseSubscription;
     genericError = 'There is a problem';
+    errorPrefix = 'Error: ';
     specificReasonControlName = 'specificReason';
     getSpecificAccessError = false;
     constructor(fb, router, casesService, route, caseNotifier) {
@@ -39504,6 +39535,7 @@ class CaseSpecificAccessRequestComponent {
             ],
             updateOn: 'submit',
         }));
+        this.updateDocumentTitle();
     }
     onChange() {
         this.submitted = false;
@@ -39520,6 +39552,7 @@ class CaseSpecificAccessRequestComponent {
                 description: SpecificAccessRequestErrors.NO_REASON,
                 fieldId: 'specific-reason',
             };
+            this.updateDocumentTitle();
         }
         // Initiate Specific Access Request
         if (this.formGroup.valid) {
@@ -39534,6 +39567,7 @@ class CaseSpecificAccessRequestComponent {
                 // Would have been nice to pass the caseId within state.data, but this isn't part of NavigationExtras until
                 // Angular 7.2
                 this.getSpecificAccessError = false;
+                this.updateDocumentTitle();
                 this.router.navigate(['success'], { relativeTo: this.route });
             }, () => {
                 // Show the generic error message
@@ -39542,6 +39576,7 @@ class CaseSpecificAccessRequestComponent {
                     title: this.genericError,
                     description: 'Sorry, there is a problem with the service; Try again later.'
                 };
+                this.updateDocumentTitle();
             });
         }
     }
@@ -39557,97 +39592,112 @@ class CaseSpecificAccessRequestComponent {
     inputEmpty(input) {
         return input.value === null || input.value.trim().length === 0;
     }
+    updateDocumentTitle() {
+        if (!this.title) {
+            return;
+        }
+        const hasErrorState = (this.formGroup?.invalid && this.submitted) || this.getSpecificAccessError;
+        document.title = hasErrorState ? `${this.errorPrefix}${this.title}` : this.title;
+    }
     static ɵfac = function CaseSpecificAccessRequestComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CaseSpecificAccessRequestComponent)(i0.ɵɵdirectiveInject(i4.FormBuilder), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseNotifier)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseSpecificAccessRequestComponent, selectors: [["ccd-case-specific-access-request"]], standalone: false, decls: 50, vars: 42, consts: [[3, "error", 4, "ngIf"], ["type", "information"], [3, "submit", "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "reason-hint", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--l"], [1, "govuk-fieldset__heading"], ["data-module", "govuk-details", "role", "group", 1, "govuk-details"], ["aria-expanded", "false", 1, "govuk-details__summary"], [1, "govuk-details__summary-text"], ["aria-hidden", "true", 1, "govuk-details__text"], [1, "govuk-body"], [1, "govuk-list", "govuk-list--bullet"], ["id", "reason-hint", 1, "govuk-hint"], ["id", "conditional-reason-3"], [1, "govuk-form-group"], ["id", "specific-reason-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "specific-reason", "name", "specific-reason", "rows", "8", "formControlName", "specificReason", 1, "govuk-textarea", 3, "ngClass"], [1, "govuk-button-group"], ["type", "submit", 1, "govuk-button", "govuk-!-margin-right-3"], [1, "govuk-grid-column-full", "govuk-!-padding-left-0"], ["href", "#", 1, "govuk-body", 3, "click"], [3, "error"], ["id", "specific-reason-error-message", 1, "govuk-error-message"]], template: function CaseSpecificAccessRequestComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, CaseSpecificAccessRequestComponent_exui_error_message_0_Template, 1, 1, "exui-error-message", 0);
-            i0.ɵɵelementStart(1, "cut-alert", 1);
-            i0.ɵɵtext(2);
-            i0.ɵɵpipe(3, "rpxTranslate");
-            i0.ɵɵelement(4, "br");
-            i0.ɵɵtext(5);
-            i0.ɵɵpipe(6, "rpxTranslate");
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseSpecificAccessRequestComponent, selectors: [["ccd-case-specific-access-request"]], standalone: false, decls: 54, vars: 46, consts: [["id", "content", "role", "main", 1, "govuk-main-wrapper"], [3, "error", 4, "ngIf"], ["type", "information"], [3, "submit", "formGroup"], [1, "govuk-form-group", 3, "ngClass"], ["aria-describedby", "reason-hint", 1, "govuk-fieldset"], [1, "govuk-fieldset__legend", "govuk-fieldset__legend--l"], [1, "govuk-fieldset__heading"], ["data-module", "govuk-details", "role", "group", 1, "govuk-details"], ["aria-expanded", "false", 1, "govuk-details__summary"], [1, "govuk-details__summary-text"], ["aria-hidden", "true", 1, "govuk-details__text"], [1, "govuk-body"], [1, "govuk-list", "govuk-list--bullet"], ["id", "reason-hint", 1, "govuk-hint"], ["id", "conditional-reason-3"], [1, "govuk-form-group"], ["for", "specific-reason", "id", "specific-reason-label", 1, "govuk-label"], ["id", "specific-reason-error-message", "class", "govuk-error-message", 4, "ngIf"], ["id", "specific-reason", "name", "specific-reason", "rows", "8", "formControlName", "specificReason", 1, "govuk-textarea", 3, "ngClass"], [1, "govuk-button-group"], ["type", "submit", 1, "govuk-button", "govuk-!-margin-right-3"], [1, "govuk-grid-column-full", "govuk-!-padding-left-0"], ["href", "#", 1, "govuk-body", 3, "click"], [3, "error"], ["id", "specific-reason-error-message", 1, "govuk-error-message"]], template: function CaseSpecificAccessRequestComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "main", 0);
+            i0.ɵɵtemplate(1, CaseSpecificAccessRequestComponent_exui_error_message_1_Template, 1, 1, "exui-error-message", 1);
+            i0.ɵɵelementStart(2, "cut-alert", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵpipe(4, "rpxTranslate");
+            i0.ɵɵelement(5, "br");
+            i0.ɵɵtext(6);
+            i0.ɵɵpipe(7, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "form", 2);
-            i0.ɵɵlistener("submit", function CaseSpecificAccessRequestComponent_Template_form_submit_7_listener() { return ctx.onSubmit(); });
-            i0.ɵɵelementStart(8, "div", 3)(9, "fieldset", 4)(10, "legend", 5)(11, "h1", 6);
-            i0.ɵɵtext(12);
-            i0.ɵɵpipe(13, "rpxTranslate");
+            i0.ɵɵelementStart(8, "form", 3);
+            i0.ɵɵlistener("submit", function CaseSpecificAccessRequestComponent_Template_form_submit_8_listener() { return ctx.onSubmit(); });
+            i0.ɵɵelementStart(9, "div", 4)(10, "fieldset", 5)(11, "legend", 6)(12, "h1", 7);
+            i0.ɵɵtext(13);
+            i0.ɵɵpipe(14, "rpxTranslate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(14, "details", 7)(15, "summary", 8)(16, "span", 9);
-            i0.ɵɵtext(17);
-            i0.ɵɵpipe(18, "rpxTranslate");
+            i0.ɵɵelementStart(15, "details", 8)(16, "summary", 9)(17, "span", 10);
+            i0.ɵɵtext(18);
+            i0.ɵɵpipe(19, "rpxTranslate");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(19, "div", 10)(20, "p", 11);
-            i0.ɵɵtext(21);
-            i0.ɵɵpipe(22, "rpxTranslate");
+            i0.ɵɵelementStart(20, "div", 11)(21, "p", 12);
+            i0.ɵɵtext(22);
+            i0.ɵɵpipe(23, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "ul", 12)(24, "li");
-            i0.ɵɵtext(25);
-            i0.ɵɵpipe(26, "rpxTranslate");
+            i0.ɵɵelementStart(24, "ul", 13)(25, "li");
+            i0.ɵɵtext(26);
+            i0.ɵɵpipe(27, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "li");
-            i0.ɵɵtext(28);
-            i0.ɵɵpipe(29, "rpxTranslate");
+            i0.ɵɵelementStart(28, "li");
+            i0.ɵɵtext(29);
+            i0.ɵɵpipe(30, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(30, "li");
-            i0.ɵɵtext(31);
-            i0.ɵɵpipe(32, "rpxTranslate");
+            i0.ɵɵelementStart(31, "li");
+            i0.ɵɵtext(32);
+            i0.ɵɵpipe(33, "rpxTranslate");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(33, "div", 13);
-            i0.ɵɵtext(34);
-            i0.ɵɵpipe(35, "rpxTranslate");
+            i0.ɵɵelementStart(34, "div", 14);
+            i0.ɵɵtext(35);
+            i0.ɵɵpipe(36, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(36, "div", 14)(37, "div", 15);
-            i0.ɵɵtemplate(38, CaseSpecificAccessRequestComponent_div_38_Template, 3, 3, "div", 16);
-            i0.ɵɵelementStart(39, "textarea", 17);
-            i0.ɵɵtext(40, "          ");
-            i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(41, "div", 18)(42, "button", 19);
-            i0.ɵɵtext(43);
-            i0.ɵɵpipe(44, "rpxTranslate");
+            i0.ɵɵelementStart(37, "div", 15)(38, "div", 16)(39, "label", 17);
+            i0.ɵɵtext(40);
+            i0.ɵɵpipe(41, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(45, "div", 20)(46, "p")(47, "a", 21);
-            i0.ɵɵlistener("click", function CaseSpecificAccessRequestComponent_Template_a_click_47_listener($event) { ctx.onCancel(); return $event.preventDefault(); });
-            i0.ɵɵtext(48);
-            i0.ɵɵpipe(49, "rpxTranslate");
+            i0.ɵɵtemplate(42, CaseSpecificAccessRequestComponent_div_42_Template, 3, 3, "div", 18);
+            i0.ɵɵelementStart(43, "textarea", 19);
+            i0.ɵɵtext(44, "          ");
             i0.ɵɵelementEnd()()()()();
+            i0.ɵɵelementStart(45, "div", 20)(46, "button", 21);
+            i0.ɵɵtext(47);
+            i0.ɵɵpipe(48, "rpxTranslate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(49, "div", 22)(50, "p")(51, "a", 23);
+            i0.ɵɵlistener("click", function CaseSpecificAccessRequestComponent_Template_a_click_51_listener($event) { ctx.onCancel(); return $event.preventDefault(); });
+            i0.ɵɵtext(52);
+            i0.ɵɵpipe(53, "rpxTranslate");
+            i0.ɵɵelementEnd()()()()()();
         } if (rf & 2) {
+            i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.formGroup.invalid && ctx.submitted || ctx.getSpecificAccessError);
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 16, "Authorisation is needed to access this case."));
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(4, 18, "Authorisation is needed to access this case."));
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 18, "This could be because it's outside your jurisdiction, or you may be excluded from the case. If you request access to this case, it will be logged for auditing purposes."), "\n");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 20, "This could be because it's outside your jurisdiction, or you may be excluded from the case. If you request access to this case, it will be logged for auditing purposes."), "\n");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(38, _c0$1, ctx.formGroup.invalid && ctx.submitted));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(42, _c0$1, ctx.formGroup.invalid && ctx.submitted));
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(13, 20, ctx.title), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(14, 22, ctx.title), " ");
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 22, "Help with requesting case access"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(19, 24, "Help with requesting case access"), " ");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(22, 24, "You could include:"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(23, 26, "You could include:"));
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(26, 26, "the case reference of the linked case"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(27, 28, "the case reference of the linked case"));
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(29, 28, "how long you require access to this case"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(30, 30, "how long you require access to this case"));
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(32, 30, "any other reasons why you require access"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(33, 32, "any other reasons why you require access"));
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(35, 32, ctx.hint), " ");
-            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(36, 34, ctx.hint), " ");
+            i0.ɵɵadvance(5);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(41, 36, "Reason"), " ");
+            i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.formGroup.get("specificReason").invalid && ctx.submitted);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(40, _c1$1, ctx.formGroup.get("specificReason").invalid && ctx.submitted));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(44, _c1$1, ctx.formGroup.get("specificReason").invalid && ctx.submitted));
+            i0.ɵɵattribute("aria-describedby", ctx.formGroup.get("specificReason").invalid && ctx.submitted ? "reason-hint specific-reason-error-message" : "reason-hint");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(44, 34, "Submit"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(48, 38, "Submit"), " ");
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(49, 36, "Cancel"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(53, 40, "Cancel"), " ");
         } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseSpecificAccessRequestComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-specific-access-request', standalone: false, template: "<exui-error-message\n  *ngIf=\"(formGroup.invalid && submitted) || getSpecificAccessError\"\n  [error]=\"errorMessage\"></exui-error-message>\n<cut-alert type=\"information\">\n  {{'Authorisation is needed to access this case.' | rpxTranslate}}<br />\n  {{'This could be because it\\'s outside your jurisdiction, or you may be excluded from the case. If you request access to this case, it will be logged for auditing purposes.' | rpxTranslate}}\n</cut-alert>\n<form [formGroup]=\"formGroup\" (submit)=\"onSubmit()\">\n  <div class=\"govuk-form-group\"\n    [ngClass]=\"{ 'form-group-error': formGroup.invalid && submitted }\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"reason-hint\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-fieldset__heading\">\n          {{ title | rpxTranslate }}\n        </h1>\n      </legend>\n\n      <details class=\"govuk-details\" data-module=\"govuk-details\" role=\"group\">\n        <summary\n          class=\"govuk-details__summary\"\n          aria-expanded=\"false\">\n          <span class=\"govuk-details__summary-text\">\n            {{'Help with requesting case access' | rpxTranslate}}\n          </span>\n        </summary>\n        <div\n          class=\"govuk-details__text\"\n          aria-hidden=\"true\">\n          <p class=\"govuk-body\">{{'You could include:' | rpxTranslate}}</p>\n          <ul class=\"govuk-list govuk-list--bullet\">\n            <li>{{'the case reference of the linked case' | rpxTranslate}}</li>\n            <li>{{'how long you require access to this case' | rpxTranslate}}</li>\n            <li>{{'any other reasons why you require access' | rpxTranslate}}</li>\n          </ul>\n        </div>\n      </details>\n\n      <div id=\"reason-hint\" class=\"govuk-hint\">\n        {{ hint | rpxTranslate }}\n      </div>\n      <div id=\"conditional-reason-3\">\n        <div class=\"govuk-form-group\">\n          <div\n            id=\"specific-reason-error-message\"\n            class=\"govuk-error-message\"\n            *ngIf=\"formGroup.get('specificReason').invalid && submitted\">\n            {{ errorMessage.description | rpxTranslate }}\n          </div>\n          <textarea\n            class=\"govuk-textarea\"\n            [ngClass]=\"{\n              'govuk-textarea--error':\n                formGroup.get('specificReason').invalid && submitted\n            }\"\n            id=\"specific-reason\"\n            name=\"specific-reason\"\n            rows=\"8\"\n            formControlName=\"specificReason\">\n          </textarea>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n\n  <div class=\"govuk-button-group\">\n    <button class=\"govuk-button govuk-!-margin-right-3\" type=\"submit\">\n      {{'Submit' | rpxTranslate}}\n    </button>\n    <div class=\"govuk-grid-column-full govuk-!-padding-left-0\">\n      <p>\n        <a class=\"govuk-body\" (click)=\"onCancel(); $event.preventDefault()\" href=\"#\">\n          {{'Cancel' | rpxTranslate}}\n        </a>\n      </p>\n    </div>\n  </div>\n</form>\n" }]
+        args: [{ selector: 'ccd-case-specific-access-request', standalone: false, template: "<main id=\"content\" role=\"main\" class=\"govuk-main-wrapper\">\n<exui-error-message\n  *ngIf=\"(formGroup.invalid && submitted) || getSpecificAccessError\"\n  [error]=\"errorMessage\"></exui-error-message>\n<cut-alert type=\"information\">\n  {{'Authorisation is needed to access this case.' | rpxTranslate}}<br />\n  {{'This could be because it\\'s outside your jurisdiction, or you may be excluded from the case. If you request access to this case, it will be logged for auditing purposes.' | rpxTranslate}}\n</cut-alert>\n<form [formGroup]=\"formGroup\" (submit)=\"onSubmit()\">\n  <div class=\"govuk-form-group\"\n    [ngClass]=\"{ 'form-group-error': formGroup.invalid && submitted }\">\n    <fieldset class=\"govuk-fieldset\" aria-describedby=\"reason-hint\">\n      <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n        <h1 class=\"govuk-fieldset__heading\">\n          {{ title | rpxTranslate }}\n        </h1>\n      </legend>\n\n      <details class=\"govuk-details\" data-module=\"govuk-details\" role=\"group\">\n        <summary\n          class=\"govuk-details__summary\"\n          aria-expanded=\"false\">\n          <span class=\"govuk-details__summary-text\">\n            {{'Help with requesting case access' | rpxTranslate}}\n          </span>\n        </summary>\n        <div\n          class=\"govuk-details__text\"\n          aria-hidden=\"true\">\n          <p class=\"govuk-body\">{{'You could include:' | rpxTranslate}}</p>\n          <ul class=\"govuk-list govuk-list--bullet\">\n            <li>{{'the case reference of the linked case' | rpxTranslate}}</li>\n            <li>{{'how long you require access to this case' | rpxTranslate}}</li>\n            <li>{{'any other reasons why you require access' | rpxTranslate}}</li>\n          </ul>\n        </div>\n      </details>\n\n      <div id=\"reason-hint\" class=\"govuk-hint\">\n        {{ hint | rpxTranslate }}\n      </div>\n      <div id=\"conditional-reason-3\">\n        <div class=\"govuk-form-group\">\n          <label class=\"govuk-label\" for=\"specific-reason\" id=\"specific-reason-label\">\n            {{ 'Reason' | rpxTranslate }}\n          </label>\n          <div\n            id=\"specific-reason-error-message\"\n            class=\"govuk-error-message\"\n            *ngIf=\"formGroup.get('specificReason').invalid && submitted\">\n            {{ errorMessage.description | rpxTranslate }}\n          </div>\n          <textarea\n            class=\"govuk-textarea\"\n            [ngClass]=\"{\n              'govuk-textarea--error':\n                formGroup.get('specificReason').invalid && submitted\n            }\"\n            id=\"specific-reason\"\n            name=\"specific-reason\"\n            rows=\"8\"\n            [attr.aria-describedby]=\"formGroup.get('specificReason').invalid && submitted ? 'reason-hint specific-reason-error-message' : 'reason-hint'\"\n            formControlName=\"specificReason\">\n          </textarea>\n        </div>\n      </div>\n    </fieldset>\n  </div>\n\n  <div class=\"govuk-button-group\">\n    <button class=\"govuk-button govuk-!-margin-right-3\" type=\"submit\">\n      {{'Submit' | rpxTranslate}}\n    </button>\n    <div class=\"govuk-grid-column-full govuk-!-padding-left-0\">\n      <p>\n        <a class=\"govuk-body\" (click)=\"onCancel(); $event.preventDefault()\" href=\"#\">\n          {{'Cancel' | rpxTranslate}}\n        </a>\n      </p>\n    </div>\n  </div>\n</form>\n</main>\n" }]
     }], () => [{ type: i4.FormBuilder }, { type: i1$1.Router }, { type: CasesService }, { type: i1$1.ActivatedRoute }, { type: CaseNotifier }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseSpecificAccessRequestComponent, { className: "CaseSpecificAccessRequestComponent", filePath: "lib/shared/components/case-viewer/case-specific-access-request/case-specific-access-request.component.ts", lineNumber: 23 }); })();