@hmcts/ccd-case-ui-toolkit 7.1.31 → 7.1.32-exui-1832-rc3

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

@@ -14224,7 +14224,7 @@ class FileUploadStateService {
 const _c0$R = ["fileInput"];
 const _c1$m = a0 => ({ "form-group-error bottom-30": a0 });
 function WriteDocumentFieldComponent_span_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵelementStart(0, "span", 15);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -14234,7 +14234,7 @@ function WriteDocumentFieldComponent_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r1.caseField.hint_text));
 } }
 function WriteDocumentFieldComponent_span_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 13);
+    i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -14244,7 +14244,7 @@ function WriteDocumentFieldComponent_span_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, ctx_r1.fileUploadMessages));
 } }
 function WriteDocumentFieldComponent_ccd_read_document_field_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ccd-read-document-field", 14);
+    i0.ɵɵelement(0, "ccd-read-document-field", 17);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("caseField", ctx_r1.caseField);
@@ -14277,6 +14277,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
     dialogSubscription;
     caseNotifierSubscription;
     jurisdictionSubs;
+    fileName = 'No file chosen';
     uploadedDocument;
     dialogConfig;
     secureModeOn;
@@ -14351,6 +14352,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
         }
         else if (fileInput.target.files[0]) {
             this.selectedFile = fileInput.target.files[0];
+            this.fileName = fileInput.target.files[0].name;
             this.displayFileUploadMessages(WriteDocumentFieldComponent.UPLOAD_WAITING_FILE_STATUS);
             const documentUpload = this.buildDocumentUploadData(this.selectedFile);
             this.fileUploadStateService.setUploadInProgress(true);
@@ -14588,7 +14590,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 20, consts: [["fileInput", ""], [1, "form-group", 3, "ngClass"], [3, "for"], [1, "form-label"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [3, "caseField", 4, "ngIf"], [2, "position", "relative"], [3, "click", "keyup", "id"], ["type", "file", 1, "form-control", "bottom-30", 3, "keydown.Tab", "change", "id", "accept"], [1, "form-group", "bottom-30"], ["type", "button", "aria-label", "Cancel upload", 1, "button", "button-secondary", 3, "click", "disabled"], [1, "form-hint"], [1, "error-message"], [3, "caseField"]], template: function WriteDocumentFieldComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 25, vars: 24, consts: [["fileInput", ""], [1, "form-group", 3, "ngClass"], [3, "for"], [1, "form-label"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [3, "caseField", 4, "ngIf"], [2, "position", "relative"], [3, "click", "keyup", "id"], [1, "upload-file-container"], ["aria-label", "Choose file", 1, "button", "button-secondary", "input-label", 3, "for"], [1, "form-control", "bottom-30"], ["type", "file", 1, "input-upload-file", 3, "keydown.Tab", "change", "id", "accept"], [1, "form-group", "bottom-30"], ["type", "button", "aria-label", "Cancel upload", 1, "button", "button-secondary", 3, "click", "disabled"], [1, "form-hint"], [1, "error-message"], [3, "caseField"]], template: function WriteDocumentFieldComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "label", 2)(2, "span", 3);
             i0.ɵɵpipe(3, "ccdFieldLabel");
@@ -14602,22 +14604,29 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelementStart(10, "div", 7)(11, "div", 8);
             i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_div_click_11_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileSelectEvent()); })("keyup", function WriteDocumentFieldComponent_Template_div_keyup_11_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileSelectEvent()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "input", 9, 0);
-            i0.ɵɵlistener("keydown.Tab", function WriteDocumentFieldComponent_Template_input_keydown_Tab_12_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileValidationsOnTab()); })("change", function WriteDocumentFieldComponent_Template_input_change_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileChangeEvent($event, ctx.caseField.field_type.regular_expression)); });
+            i0.ɵɵelementStart(12, "div", 9)(13, "label", 10);
+            i0.ɵɵtext(14);
+            i0.ɵɵpipe(15, "rpxTranslate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "span", 11)(17, "span");
+            i0.ɵɵtext(18, "fileName");
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(14, "div", 10)(15, "button", 11);
-            i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancelUpload()); });
-            i0.ɵɵtext(16);
-            i0.ɵɵpipe(17, "rpxTranslate");
+            i0.ɵɵelementStart(19, "input", 12, 0);
+            i0.ɵɵlistener("keydown.Tab", function WriteDocumentFieldComponent_Template_input_keydown_Tab_19_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileValidationsOnTab()); })("change", function WriteDocumentFieldComponent_Template_input_change_19_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileChangeEvent($event, ctx.caseField.field_type.regular_expression)); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(21, "div", 13)(22, "button", 14);
+            i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancelUpload()); });
+            i0.ɵɵtext(23);
+            i0.ɵɵpipe(24, "rpxTranslate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c1$m, !ctx.valid));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(22, _c1$m, !ctx.valid));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
-            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 12, ctx.caseField));
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 14, ctx.caseField));
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 14, ctx.caseField));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 16, ctx.caseField));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.caseField.hint_text);
             i0.ɵɵadvance();
@@ -14626,23 +14635,27 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵproperty("ngIf", ctx.caseField);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("id", ctx.createElementId("fileInputWrapper"));
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 18, "Choose file"));
+            i0.ɵɵadvance(5);
             i0.ɵɵpropertyInterpolate("accept", ctx.caseField.field_type.regular_expression);
             i0.ɵɵproperty("id", ctx.id());
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("disabled", !ctx.isUploadInProgress());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 16, "Cancel upload"));
-        } }, encapsulation: 2 });
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(24, 20, "Cancel upload"), " ");
+        } }, styles: [".input-upload-file[_ngcontent-%COMP%]{width:100%;display:none}.upload-file-container[_ngcontent-%COMP%]{display:flex;align-items:baseline}.input-label[_ngcontent-%COMP%]{width:8rem}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group, .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group, .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group:not(.form-group-error), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group:not(.form-group-error), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>.form-group select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>.form-group textarea:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group textarea:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteDocumentFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-document-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error bottom-30': !valid}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" attr.aria-label=\"{{caseField | ccdFieldLabel}}\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n  <span class=\"error-message\" *ngIf=\"fileUploadMessages && !valid\">{{fileUploadMessages | rpxTranslate}}</span>\n\n  <div>\n    <!--<span *ngIf=\"getUploadedFileName()\" class=\"text-16\">File name: {{getUploadedFileName()}}</span>-->\n    <ccd-read-document-field *ngIf=\"caseField\" [caseField]=\"caseField\"></ccd-read-document-field>\n  </div>\n\n  <div style='position:relative'>\n    <div [id]=\"createElementId('fileInputWrapper')\" (click)=\"fileSelectEvent()\" (keyup)=\"fileSelectEvent()\"></div>\n    <input class=\"form-control bottom-30\" [id]=\"id()\" type=\"file\" (keydown.Tab)=\"fileValidationsOnTab()\" (change)=\"fileChangeEvent($event, caseField.field_type.regular_expression)\"\n           accept=\"{{caseField.field_type.regular_expression}}\" #fileInput/>\n  </div>\n</div>\n<div class=\"form-group bottom-30\">\n  <button class=\"button button-secondary\" type=\"button\" aria-label=\"Cancel upload\" (click)=\"cancelUpload()\" [disabled]=\"!isUploadInProgress()\">{{'Cancel upload' | rpxTranslate}}</button>\n</div>\n" }]
+        args: [{ selector: 'ccd-write-document-field', template: "<div class=\"form-group\" [ngClass]=\"{'form-group-error bottom-30': !valid}\">\n  <label [for]=\"id()\">\n    <span class=\"form-label\" attr.aria-label=\"{{caseField | ccdFieldLabel}}\"\n      >{{(caseField | ccdFieldLabel)}}</span\n    >\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\"\n    >{{caseField.hint_text | rpxTranslate}}</span\n  >\n  <span class=\"error-message\" *ngIf=\"fileUploadMessages && !valid\"\n    >{{fileUploadMessages | rpxTranslate}}</span\n  >\n\n  <div>\n    <!--<span *ngIf=\"getUploadedFileName()\" class=\"text-16\">File name: {{getUploadedFileName()}}</span>-->\n    <ccd-read-document-field\n      *ngIf=\"caseField\"\n      [caseField]=\"caseField\"\n    ></ccd-read-document-field>\n  </div>\n\n  <div style=\"position: relative\">\n    <div\n      [id]=\"createElementId('fileInputWrapper')\"\n      (click)=\"fileSelectEvent()\"\n      (keyup)=\"fileSelectEvent()\"\n    ></div>\n    <div class=\"upload-file-container\">\n      <label\n        [for]=\"id()\"\n        class=\"button button-secondary input-label\"\n        aria-label=\"Choose file\"\n        >{{'Choose file' | rpxTranslate}}</label\n      >\n      <span class=\"form-control bottom-30\">\n        <span>fileName</span>\n      </span>\n    </div>\n    <input\n      [id]=\"id()\"\n      type=\"file\"\n      class=\"input-upload-file\"\n      (keydown.Tab)=\"fileValidationsOnTab()\"\n      (change)=\"fileChangeEvent($event, caseField.field_type.regular_expression)\"\n      accept=\"{{caseField.field_type.regular_expression}}\"\n      #fileInput\n    />\n  </div>\n</div>\n<div class=\"form-group bottom-30\">\n  <button\n    class=\"button button-secondary\"\n    type=\"button\"\n    aria-label=\"Cancel upload\"\n    (click)=\"cancelUpload()\"\n    [disabled]=\"!isUploadInProgress()\"\n  >\n    {{'Cancel upload' | rpxTranslate}}\n  </button>\n</div>\n", styles: [".input-upload-file{width:100%;display:none}.upload-file-container{display:flex;align-items:baseline}.input-label{width:8rem}.form :host::ng-deep .grey-bar>*>.form-group,.form :host::ng-deep .grey-bar>*>*>.form-group,.form :host::ng-deep .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form :host::ng-deep .grey-bar>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form :host::ng-deep .grey-bar>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field input:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field select:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}\n"] }]
     }], () => [{ type: AbstractAppConfig }, { type: CaseNotifier }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: FileUploadStateService }, { type: JurisdictionService }], { fileInput: [{
             type: ViewChild,
             args: ['fileInput', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteDocumentFieldComponent, { className: "WriteDocumentFieldComponent", filePath: "lib/shared/components/palette/document/write-document-field.component.ts", lineNumber: 23 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteDocumentFieldComponent, { className: "WriteDocumentFieldComponent", filePath: "lib/shared/components/palette/document/write-document-field.component.ts", lineNumber: 24 }); })();
 
 class DynamicListPipe {
     static EMPTY = '';
@@ -21298,8 +21311,8 @@ class QueryWriteDateInputComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryWriteDateInputComponent, { className: "QueryWriteDateInputComponent", filePath: "lib/shared/components/palette/query-management/components/query-write/query-write-date-input/query-write-date-input.component.ts", lineNumber: 15 }); })();
 
 const _c0$C = a0 => ({ "govuk-form-group--error": a0 });
-function QueryWriteRaiseQueryComponent_p_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 26)(1, "span", 27);
+function QueryWriteRaiseQueryComponent_div_11_p_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 27)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -21307,14 +21320,14 @@ function QueryWriteRaiseQueryComponent_p_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 2, "Error:"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r0.raiseQueryErrorMessage.QUERY_SUBJECT), " ");
 } }
-function QueryWriteRaiseQueryComponent_p_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 28)(1, "span", 27);
+function QueryWriteRaiseQueryComponent_div_11_p_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 29)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -21322,14 +21335,14 @@ function QueryWriteRaiseQueryComponent_p_32_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 2, "Error:"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r0.raiseQueryErrorMessage.QUERY_BODY), " ");
 } }
-function QueryWriteRaiseQueryComponent_p_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 29)(1, "span", 27);
+function QueryWriteRaiseQueryComponent_div_11_p_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 30)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -21337,14 +21350,14 @@ function QueryWriteRaiseQueryComponent_p_41_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 2, "Error:"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r0.raiseQueryErrorMessage.QUERY_HEARING_RELATED), " ");
 } }
-function QueryWriteRaiseQueryComponent_ng_container_53_p_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 35)(1, "span", 27);
+function QueryWriteRaiseQueryComponent_div_11_ng_container_42_p_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 36)(1, "span", 28);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -21352,24 +21365,24 @@ function QueryWriteRaiseQueryComponent_ng_container_53_p_7_Template(rf, ctx) { i
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext(2);
+    const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 2, "Error:"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(5, 4, ctx_r0.raiseQueryErrorMessage.QUERY_HEARING_DATE), " ");
 } }
-function QueryWriteRaiseQueryComponent_ng_container_53_Template(rf, ctx) { if (rf & 1) {
+function QueryWriteRaiseQueryComponent_div_11_ng_container_42_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 30)(2, "fieldset", 31)(3, "legend")(4, "label", 32);
+    i0.ɵɵelementStart(1, "div", 31)(2, "fieldset", 32)(3, "legend")(4, "label", 33);
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "rpxTranslate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(7, QueryWriteRaiseQueryComponent_ng_container_53_p_7_Template, 6, 6, "p", 33);
-    i0.ɵɵelement(8, "ccd-query-write-date-input", 34);
+    i0.ɵɵtemplate(7, QueryWriteRaiseQueryComponent_div_11_ng_container_42_p_7_Template, 6, 6, "p", 34);
+    i0.ɵɵelement(8, "ccd-query-write-date-input", 35);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(5, _c0$C, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").value === true && ctx_r0.formGroup.get("hearingDate").value === null));
     i0.ɵɵadvance(4);
@@ -21377,13 +21390,101 @@ function QueryWriteRaiseQueryComponent_ng_container_53_Template(rf, ctx) { if (r
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").value === true && ctx_r0.formGroup.get("hearingDate").value === null);
 } }
+function QueryWriteRaiseQueryComponent_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5)(1, "div", 6)(2, "div")(3, "div", 7)(4, "div", 8)(5, "label", 9);
+    i0.ɵɵtext(6);
+    i0.ɵɵpipe(7, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 10);
+    i0.ɵɵtext(9);
+    i0.ɵɵpipe(10, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(11, QueryWriteRaiseQueryComponent_div_11_p_11_Template, 6, 6, "p", 11);
+    i0.ɵɵelement(12, "input", 12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 7)(14, "div", 8)(15, "label", 13);
+    i0.ɵɵtext(16);
+    i0.ɵɵpipe(17, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "div", 14);
+    i0.ɵɵtext(19);
+    i0.ɵɵpipe(20, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(21, QueryWriteRaiseQueryComponent_div_11_p_21_Template, 6, 6, "p", 15);
+    i0.ɵɵelementStart(22, "textarea", 16);
+    i0.ɵɵtext(23, "          ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(24, "div", 7)(25, "fieldset", 17)(26, "legend")(27, "label", 18);
+    i0.ɵɵtext(28);
+    i0.ɵɵpipe(29, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(30, QueryWriteRaiseQueryComponent_div_11_p_30_Template, 6, 6, "p", 19);
+    i0.ɵɵelementStart(31, "div", 20)(32, "div", 21);
+    i0.ɵɵelement(33, "input", 22);
+    i0.ɵɵelementStart(34, "label", 23);
+    i0.ɵɵtext(35);
+    i0.ɵɵpipe(36, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(37, "div", 21);
+    i0.ɵɵelement(38, "input", 24);
+    i0.ɵɵelementStart(39, "label", 25);
+    i0.ɵɵtext(40);
+    i0.ɵɵpipe(41, "rpxTranslate");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵtemplate(42, QueryWriteRaiseQueryComponent_div_11_ng_container_42_Template, 9, 7, "ng-container", 26);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    let tmp_6_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("formGroup", ctx_r0.formGroup);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(43, _c0$C, ctx_r0.submitted && ctx_r0.formGroup.get("subject").hasError("required")));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 25, "Query subject"), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(10, 27, "The subject should be a summary of your query"), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r0.submitted && ctx_r0.formGroup.get("subject").hasError("required"));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("govuk-input--error", ctx_r0.submitted && ((tmp_6_0 = ctx_r0.formGroup.get("subject")) == null ? null : tmp_6_0.hasError("required")));
+    i0.ɵɵproperty("formControlName", "subject");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(45, _c0$C, ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required")));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 29, "Query detail"), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(20, 31, "Include as many details as possible so case workers can respond to your query"), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required"));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("govuk-textarea--error", ctx_r0.submitted && ctx_r0.formGroup.get("body").hasError("required"));
+    i0.ɵɵproperty("formControlName", "body");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(47, _c0$C, ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").hasError("required")));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(29, 33, "Is the query hearing related?"), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r0.submitted && ctx_r0.formGroup.get("isHearingRelated").hasError("required"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("checked", ctx_r0.formGroup.get("isHearingRelated").value === true)("value", true);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(36, 35, "Is the query hearing related?", null, "Yes"), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("checked", ctx_r0.formGroup.get("isHearingRelated").value === false)("value", false);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(41, 39, "Is the query hearing related?", null, "No"), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r0.formGroup.get("isHearingRelated").value);
+} }
 class QueryWriteRaiseQueryComponent {
     formGroup;
     submitted;
     caseDetails;
+    showForm;
     raiseQueryErrorMessage = RaiseQueryErrorMessage;
     static ɵfac = function QueryWriteRaiseQueryComponent_Factory(t) { return new (t || QueryWriteRaiseQueryComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryWriteRaiseQueryComponent, selectors: [["ccd-query-write-raise-query"]], inputs: { formGroup: "formGroup", submitted: "submitted", caseDetails: "caseDetails" }, decls: 54, vars: 56, consts: [[1, "govuk-!-margin-bottom-6"], [1, "govuk-caption-l"], [1, "govuk-heading-l", "govuk-!-margin-bottom-4"], [3, "caseDetails"], [1, "govuk-!-margin-bottom-4"], [3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], ["for", "subject", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "subject-hint", 1, "govuk-hint"], ["id", "subject-error", "class", "govuk-error-message", 4, "ngIf"], ["type", "text", "name", "subject", "id", "subject", 1, "govuk-input", 3, "formControlName"], ["for", "body", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "body-hint", 1, "govuk-hint"], ["id", "body-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "body", "name", "body", "rows", "5", "aria-describedby", "body-hint body-error", 1, "govuk-textarea", 3, "formControlName"], [1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "isHearingRelated-error", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", 1, "govuk-radios", "govuk-radios--inline"], [1, "govuk-radios__item"], ["id", "isHearingRelated-yes", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-yes", 1, "govuk-label", "govuk-radios__label"], ["id", "isHearingRelated-no", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-no", 1, "govuk-label", "govuk-radios__label"], [4, "ngIf"], ["id", "subject-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "body-error", 1, "govuk-error-message"], ["id", "isHearingRelated-error", 1, "govuk-error-message"], [1, "govuk-radios__conditional", "govuk-!-margin-top-1", 3, "ngClass"], ["role", "group", 1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--s"], ["id", "hearingDate-error", "class", "govuk-error-message", 4, "ngIf"], ["formControlName", "hearingDate"], ["id", "hearingDate-error", 1, "govuk-error-message"]], template: function QueryWriteRaiseQueryComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryWriteRaiseQueryComponent, selectors: [["ccd-query-write-raise-query"]], inputs: { formGroup: "formGroup", submitted: "submitted", caseDetails: "caseDetails", showForm: "showForm" }, decls: 12, vars: 8, consts: [[1, "govuk-!-margin-bottom-6"], [1, "govuk-caption-l"], [1, "govuk-heading-l", "govuk-!-margin-bottom-4"], [3, "caseDetails"], ["class", "govuk-!-margin-bottom-4", 4, "ngIf"], [1, "govuk-!-margin-bottom-4"], [3, "formGroup"], [1, "govuk-form-group", 3, "ngClass"], [1, "govuk-label-wrapper"], ["for", "subject", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "subject-hint", 1, "govuk-hint"], ["id", "subject-error", "class", "govuk-error-message", 4, "ngIf"], ["type", "text", "name", "subject", "id", "subject", 1, "govuk-input", 3, "formControlName"], ["for", "body", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "body-hint", 1, "govuk-hint"], ["id", "body-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "body", "name", "body", "rows", "5", "aria-describedby", "body-hint body-error", 1, "govuk-textarea", 3, "formControlName"], [1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "isHearingRelated-error", "class", "govuk-error-message", 4, "ngIf"], ["data-module", "govuk-radios", 1, "govuk-radios", "govuk-radios--inline"], [1, "govuk-radios__item"], ["id", "isHearingRelated-yes", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-yes", 1, "govuk-label", "govuk-radios__label"], ["id", "isHearingRelated-no", "name", "isHearingRelated", "type", "radio", "formControlName", "isHearingRelated", 1, "govuk-radios__input", 3, "checked", "value"], ["for", "isHearingRelated-no", 1, "govuk-label", "govuk-radios__label"], [4, "ngIf"], ["id", "subject-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"], ["id", "body-error", 1, "govuk-error-message"], ["id", "isHearingRelated-error", 1, "govuk-error-message"], [1, "govuk-radios__conditional", "govuk-!-margin-top-1", 3, "ngClass"], ["role", "group", 1, "govuk-fieldset"], [1, "govuk-label", "govuk-label--s"], ["id", "hearingDate-error", "class", "govuk-error-message", 4, "ngIf"], ["formControlName", "hearingDate"], ["id", "hearingDate-error", 1, "govuk-error-message"]], template: function QueryWriteRaiseQueryComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div")(1, "div", 0)(2, "div", 1);
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "rpxTranslate");
@@ -21396,112 +21497,35 @@ class QueryWriteRaiseQueryComponent {
             i0.ɵɵelement(9, "ccd-query-case-details-header", 3);
             i0.ɵɵelementEnd();
             i0.ɵɵelement(10, "hr");
-            i0.ɵɵelementStart(11, "div", 4)(12, "div", 5)(13, "div")(14, "div", 6)(15, "div", 7)(16, "label", 8);
-            i0.ɵɵtext(17);
-            i0.ɵɵpipe(18, "rpxTranslate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(19, "div", 9);
-            i0.ɵɵtext(20);
-            i0.ɵɵpipe(21, "rpxTranslate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(22, QueryWriteRaiseQueryComponent_p_22_Template, 6, 6, "p", 10);
-            i0.ɵɵelement(23, "input", 11);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(24, "div", 6)(25, "div", 7)(26, "label", 12);
-            i0.ɵɵtext(27);
-            i0.ɵɵpipe(28, "rpxTranslate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(29, "div", 13);
-            i0.ɵɵtext(30);
-            i0.ɵɵpipe(31, "rpxTranslate");
+            i0.ɵɵtemplate(11, QueryWriteRaiseQueryComponent_div_11_Template, 43, 49, "div", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(32, QueryWriteRaiseQueryComponent_p_32_Template, 6, 6, "p", 14);
-            i0.ɵɵelementStart(33, "textarea", 15);
-            i0.ɵɵtext(34, "          ");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(35, "div", 6)(36, "fieldset", 16)(37, "legend")(38, "label", 17);
-            i0.ɵɵtext(39);
-            i0.ɵɵpipe(40, "rpxTranslate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(41, QueryWriteRaiseQueryComponent_p_41_Template, 6, 6, "p", 18);
-            i0.ɵɵelementStart(42, "div", 19)(43, "div", 20);
-            i0.ɵɵelement(44, "input", 21);
-            i0.ɵɵelementStart(45, "label", 22);
-            i0.ɵɵtext(46);
-            i0.ɵɵpipe(47, "rpxTranslate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(48, "div", 20);
-            i0.ɵɵelement(49, "input", 23);
-            i0.ɵɵelementStart(50, "label", 24);
-            i0.ɵɵtext(51);
-            i0.ɵɵpipe(52, "rpxTranslate");
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵtemplate(53, QueryWriteRaiseQueryComponent_ng_container_53_Template, 9, 7, "ng-container", 25);
-            i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            let tmp_8_0;
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 28, "Raise a query"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 4, "Raise a query"));
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 30, "Enter query details"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 6, "Enter query details"));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("caseDetails", ctx.caseDetails);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("formGroup", ctx.formGroup);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(50, _c0$C, ctx.submitted && ctx.formGroup.get("subject").hasError("required")));
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(18, 32, "Query subject"), " ");
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(21, 34, "The subject should be a summary of your query"), " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.submitted && ctx.formGroup.get("subject").hasError("required"));
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("govuk-input--error", ctx.submitted && ((tmp_8_0 = ctx.formGroup.get("subject")) == null ? null : tmp_8_0.hasError("required")));
-            i0.ɵɵproperty("formControlName", "subject");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(52, _c0$C, ctx.submitted && ctx.formGroup.get("body").hasError("required")));
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(28, 36, "Query detail"), " ");
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(31, 38, "Include as many details as possible so case workers can respond to your query"), " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.submitted && ctx.formGroup.get("body").hasError("required"));
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("govuk-textarea--error", ctx.submitted && ctx.formGroup.get("body").hasError("required"));
-            i0.ɵɵproperty("formControlName", "body");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(54, _c0$C, ctx.submitted && ctx.formGroup.get("isHearingRelated").hasError("required")));
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(40, 40, "Is the query hearing related?"), " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.submitted && ctx.formGroup.get("isHearingRelated").hasError("required"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("checked", ctx.formGroup.get("isHearingRelated").value === true)("value", true);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(47, 42, "Is the query hearing related?", null, "Yes"), " ");
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("checked", ctx.formGroup.get("isHearingRelated").value === false)("value", false);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind3(52, 46, "Is the query hearing related?", null, "No"), " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.formGroup.get("isHearingRelated").value);
+            i0.ɵɵproperty("ngIf", ctx.showForm);
         } }, encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryWriteRaiseQueryComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-query-write-raise-query', template: "<div>\n  <div class=\"govuk-!-margin-bottom-6\">\n    <div class=\"govuk-caption-l\">{{ 'Raise a query' | rpxTranslate }}</div>\n    <h1 class=\"govuk-heading-l govuk-!-margin-bottom-4\">{{ 'Enter query details' | rpxTranslate }}</h1>\n  </div>\n\n  <div>\n    <ccd-query-case-details-header [caseDetails]=\"caseDetails\"></ccd-query-case-details-header>\n  </div>\n\n  <hr>\n\n  <div class=\"govuk-!-margin-bottom-4\">\n    <div [formGroup]=\"formGroup\">\n      <div>\n        <div class=\"govuk-form-group\" [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('subject').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"subject\">\n              {{ 'Query subject' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"subject-hint\" class=\"govuk-hint\">\n            {{ 'The subject should be a summary of your query' | rpxTranslate }}\n          </div>\n          <p id=\"subject-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('subject').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_SUBJECT | rpxTranslate }}\n          </p>\n          <input [formControlName]=\"'subject'\" type=\"text\" name=\"subject\"\n                 class=\"govuk-input\" id=\"subject\"\n                 [class.govuk-input--error]=\"submitted && formGroup.get('subject')?.hasError('required')\"\n          />\n        </div>\n      </div>\n\n        <div class=\"govuk-form-group\"\n             [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('body').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"body\">\n              {{ 'Query detail' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"body-hint\" class=\"govuk-hint\">\n            {{ 'Include as many details as possible so case workers can respond to your query' | rpxTranslate }}\n          </div>\n          <p id=\"body-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('body').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_BODY | rpxTranslate }}\n          </p>\n          <textarea [formControlName]=\"'body'\"\n                    id=\"body\" name=\"body\" rows=\"5\"\n                    aria-describedby=\"body-hint body-error\"\n                    class=\"govuk-textarea\"\n                    [class.govuk-textarea--error]=\"submitted && formGroup.get('body').hasError('required')\"\n          >\n          </textarea>\n      </div>\n\n      <div class=\"govuk-form-group\"\n           [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('isHearingRelated').hasError('required')}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend>\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\">\n              {{ 'Is the query hearing related?' | rpxTranslate }}\n            </label>\n          </legend>\n          <p id=\"isHearingRelated-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('isHearingRelated').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_RELATED | rpxTranslate }}\n          </p>\n          <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-yes\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === true\" [value]=\"true\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-yes\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'Yes' }}\n              </label>\n            </div>\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-no\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === false\" [value]=\"false\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-no\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'No' }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n\n        <ng-container *ngIf=\"formGroup.get('isHearingRelated').value\">\n          <div class=\"govuk-radios__conditional govuk-!-margin-top-1\"\n               [ngClass]=\"{'govuk-form-group--error': submitted &&\n               formGroup.get('isHearingRelated').value === true &&\n               formGroup.get('hearingDate').value === null}\">\n            <fieldset class=\"govuk-fieldset\" role=\"group\">\n              <legend>\n                <label class=\"govuk-label govuk-label--s\">\n                  {{ 'What is the date of the hearing?' | rpxTranslate }}\n                </label>\n              </legend>\n              <p id=\"hearingDate-error\" class=\"govuk-error-message\"\n                  *ngIf=\"submitted && formGroup.get('isHearingRelated').value === true && formGroup.get('hearingDate').value === null\">\n                <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_DATE | rpxTranslate }}\n              </p>\n              <ccd-query-write-date-input formControlName=\"hearingDate\"></ccd-query-write-date-input>\n            </fieldset>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'ccd-query-write-raise-query', template: "<div>\n  <div class=\"govuk-!-margin-bottom-6\">\n    <div class=\"govuk-caption-l\">{{ 'Raise a query' | rpxTranslate }}</div>\n    <h1 class=\"govuk-heading-l govuk-!-margin-bottom-4\">{{ 'Enter query details' | rpxTranslate }}</h1>\n  </div>\n\n  <div>\n    <ccd-query-case-details-header [caseDetails]=\"caseDetails\"></ccd-query-case-details-header>\n  </div>\n\n  <hr>\n\n  <div class=\"govuk-!-margin-bottom-4\" *ngIf=\"showForm\">\n    <div [formGroup]=\"formGroup\">\n      <div>\n        <div class=\"govuk-form-group\" [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('subject').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"subject\">\n              {{ 'Query subject' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"subject-hint\" class=\"govuk-hint\">\n            {{ 'The subject should be a summary of your query' | rpxTranslate }}\n          </div>\n          <p id=\"subject-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('subject').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_SUBJECT | rpxTranslate }}\n          </p>\n          <input [formControlName]=\"'subject'\" type=\"text\" name=\"subject\"\n                 class=\"govuk-input\" id=\"subject\"\n                 [class.govuk-input--error]=\"submitted && formGroup.get('subject')?.hasError('required')\"\n          />\n        </div>\n      </div>\n\n        <div class=\"govuk-form-group\"\n             [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('body').hasError('required')}\">\n          <div class=\"govuk-label-wrapper\">\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"body\">\n              {{ 'Query detail' | rpxTranslate }}\n            </label>\n          </div>\n          <div id=\"body-hint\" class=\"govuk-hint\">\n            {{ 'Include as many details as possible so case workers can respond to your query' | rpxTranslate }}\n          </div>\n          <p id=\"body-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('body').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_BODY | rpxTranslate }}\n          </p>\n          <textarea [formControlName]=\"'body'\"\n                    id=\"body\" name=\"body\" rows=\"5\"\n                    aria-describedby=\"body-hint body-error\"\n                    class=\"govuk-textarea\"\n                    [class.govuk-textarea--error]=\"submitted && formGroup.get('body').hasError('required')\"\n          >\n          </textarea>\n      </div>\n\n      <div class=\"govuk-form-group\"\n           [ngClass]=\"{'govuk-form-group--error': submitted && formGroup.get('isHearingRelated').hasError('required')}\">\n        <fieldset class=\"govuk-fieldset\">\n          <legend>\n            <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\">\n              {{ 'Is the query hearing related?' | rpxTranslate }}\n            </label>\n          </legend>\n          <p id=\"isHearingRelated-error\" class=\"govuk-error-message\"\n              *ngIf=\"submitted && formGroup.get('isHearingRelated').hasError('required')\">\n            <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_RELATED | rpxTranslate }}\n          </p>\n          <div class=\"govuk-radios govuk-radios--inline\" data-module=\"govuk-radios\">\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-yes\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === true\" [value]=\"true\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-yes\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'Yes' }}\n              </label>\n            </div>\n            <div class=\"govuk-radios__item\">\n              <input class=\"govuk-radios__input\" id=\"isHearingRelated-no\" name=\"isHearingRelated\"\n                     type=\"radio\"\n                     formControlName=\"isHearingRelated\"\n                     [checked]=\"formGroup.get('isHearingRelated').value === false\" [value]=\"false\"\n              >\n              <label class=\"govuk-label govuk-radios__label\" for=\"isHearingRelated-no\">\n                {{ 'Is the query hearing related?' | rpxTranslate: null : 'No' }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n\n        <ng-container *ngIf=\"formGroup.get('isHearingRelated').value\">\n          <div class=\"govuk-radios__conditional govuk-!-margin-top-1\"\n               [ngClass]=\"{'govuk-form-group--error': submitted &&\n               formGroup.get('isHearingRelated').value === true &&\n               formGroup.get('hearingDate').value === null}\">\n            <fieldset class=\"govuk-fieldset\" role=\"group\">\n              <legend>\n                <label class=\"govuk-label govuk-label--s\">\n                  {{ 'What is the date of the hearing?' | rpxTranslate }}\n                </label>\n              </legend>\n              <p id=\"hearingDate-error\" class=\"govuk-error-message\"\n                  *ngIf=\"submitted && formGroup.get('isHearingRelated').value === true && formGroup.get('hearingDate').value === null\">\n                <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ raiseQueryErrorMessage.QUERY_HEARING_DATE | rpxTranslate }}\n              </p>\n              <ccd-query-write-date-input formControlName=\"hearingDate\"></ccd-query-write-date-input>\n            </fieldset>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
     }], null, { formGroup: [{
             type: Input
         }], submitted: [{
             type: Input
         }], caseDetails: [{
             type: Input
+        }], showForm: [{
+            type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryWriteRaiseQueryComponent, { className: "QueryWriteRaiseQueryComponent", filePath: "lib/shared/components/palette/query-management/components/query-write/query-write-raise-query/query-write-raise-query.component.ts", lineNumber: 8 }); })();
 
-function QueryWriteRespondToQueryComponent_p_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 14)(1, "span", 15);
+function QueryWriteRespondToQueryComponent_div_12_p_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 15)(1, "span", 16);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -21509,18 +21533,51 @@ function QueryWriteRespondToQueryComponent_p_23_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(3, 2, "Error:"), " ");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", ctx_r0.queryCreateContext === ctx_r0.queryCreateContextEnum.RESPOND ? ctx_r0.raiseQueryErrorMessages.RESPOND_QUERY_BODY : i0.ɵɵpipeBind1(5, 4, ctx_r0.raiseQueryErrorMessages.QUERY_BODY), " ");
 } }
+function QueryWriteRespondToQueryComponent_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7)(1, "div")(2, "h1", 8);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 9)(6, "div", 10)(7, "div", 11)(8, "label", 12);
+    i0.ɵɵtext(9);
+    i0.ɵɵpipe(10, "rpxTranslate");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(11, QueryWriteRespondToQueryComponent_div_12_p_11_Template, 6, 6, "p", 13);
+    i0.ɵɵelementStart(12, "textarea", 14);
+    i0.ɵɵtext(13, "      ");
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    let tmp_3_0;
+    let tmp_5_0;
+    let tmp_6_0;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.queryCreateContext === ctx_r0.queryCreateContextEnum.RESPOND ? "Respond to a query" : i0.ɵɵpipeBind1(4, 9, "Ask a follow-up question"), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("formGroup", ctx_r0.formGroup);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("govuk-form-group--error", ctx_r0.submitted && ((tmp_3_0 = ctx_r0.formGroup.get("body")) == null ? null : tmp_3_0.hasError("required")));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r0.queryCreateContext === ctx_r0.queryCreateContextEnum.RESPOND ? "Response detail" : i0.ɵɵpipeBind1(10, 11, "Query Body"), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r0.submitted && ((tmp_5_0 = ctx_r0.formGroup.get("body")) == null ? null : tmp_5_0.hasError("required")));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("govuk-textarea--error", ctx_r0.submitted && ((tmp_6_0 = ctx_r0.formGroup.get("body")) == null ? null : tmp_6_0.hasError("required")));
+    i0.ɵɵproperty("formControlName", "body");
+} }
 class QueryWriteRespondToQueryComponent {
     caseNotifier;
     queryItem;
     formGroup;
     queryCreateContext;
     submitted = false;
+    showForm;
     queryCreateContextEnum = QueryCreateContext;
     raiseQueryErrorMessages = RaiseQueryErrorMessage;
     caseId;
@@ -21535,7 +21592,7 @@ class QueryWriteRespondToQueryComponent {
         });
     }
     static ɵfac = function QueryWriteRespondToQueryComponent_Factory(t) { return new (t || QueryWriteRespondToQueryComponent)(i0.ɵɵdirectiveInject(CaseNotifier)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryWriteRespondToQueryComponent, selectors: [["ccd-query-write-respond-to-query"]], inputs: { queryItem: "queryItem", formGroup: "formGroup", queryCreateContext: "queryCreateContext", submitted: "submitted" }, decls: 26, vars: 21, consts: [[1, "govuk-!-margin-bottom-6"], [1, "govuk-caption-l"], [1, "govuk-heading-l", "govuk-!-margin-bottom-0"], [1, "govuk-!-margin-bottom-4"], [3, "caseDetails"], [3, "query"], [1, "query-respond"], [1, "govuk-heading-m"], [3, "formGroup"], [1, "govuk-form-group", "body-textarea"], [1, "govuk-label-wrapper"], ["for", "body", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "body-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "body", "name", "body", "rows", "5", "aria-describedby", "body-hint body-error", 1, "govuk-textarea", 3, "formControlName"], ["id", "body-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"]], template: function QueryWriteRespondToQueryComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: QueryWriteRespondToQueryComponent, selectors: [["ccd-query-write-respond-to-query"]], inputs: { queryItem: "queryItem", formGroup: "formGroup", queryCreateContext: "queryCreateContext", submitted: "submitted", showForm: "showForm" }, decls: 13, vars: 9, consts: [[1, "govuk-!-margin-bottom-6"], [1, "govuk-caption-l"], [1, "govuk-heading-l", "govuk-!-margin-bottom-0"], [1, "govuk-!-margin-bottom-4"], [3, "caseDetails"], [3, "query"], ["class", "query-respond", 4, "ngIf"], [1, "query-respond"], [1, "govuk-heading-m"], [3, "formGroup"], [1, "govuk-form-group", "body-textarea"], [1, "govuk-label-wrapper"], ["for", "body", 1, "govuk-label", "govuk-label--m", "govuk-!-font-weight-bold"], ["id", "body-error", "class", "govuk-error-message", 4, "ngIf"], ["id", "body", "name", "body", "rows", "5", "aria-describedby", "body-hint body-error", 1, "govuk-textarea", 3, "formControlName"], ["id", "body-error", 1, "govuk-error-message"], [1, "govuk-visually-hidden"]], template: function QueryWriteRespondToQueryComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 0)(2, "div", 1);
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "rpxTranslate");
@@ -21550,48 +21607,23 @@ class QueryWriteRespondToQueryComponent {
             i0.ɵɵelementStart(10, "div");
             i0.ɵɵelement(11, "ccd-query-details", 5);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(12, "div", 6)(13, "div")(14, "h1", 7);
-            i0.ɵɵtext(15);
-            i0.ɵɵpipe(16, "rpxTranslate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(17, "div", 8)(18, "div", 9)(19, "div", 10)(20, "label", 11);
-            i0.ɵɵtext(21);
-            i0.ɵɵpipe(22, "rpxTranslate");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(23, QueryWriteRespondToQueryComponent_p_23_Template, 6, 6, "p", 12);
-            i0.ɵɵelementStart(24, "textarea", 13);
-            i0.ɵɵtext(25, "      ");
-            i0.ɵɵelementEnd()()()()();
+            i0.ɵɵtemplate(12, QueryWriteRespondToQueryComponent_div_12_Template, 14, 13, "div", 6);
         } if (rf & 2) {
-            let tmp_6_0;
-            let tmp_8_0;
-            let tmp_9_0;
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 13, "Respond to a query"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 5, "Respond to a query"));
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 15, "Query details"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 7, "Query details"));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("caseDetails", ctx.caseDetails);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("query", ctx.queryItem);
-            i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", ctx.queryCreateContext === ctx.queryCreateContextEnum.RESPOND ? "Respond to a query" : i0.ɵɵpipeBind1(16, 17, "Ask a follow-up question"), " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("formGroup", ctx.formGroup);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("govuk-form-group--error", ctx.submitted && ((tmp_6_0 = ctx.formGroup.get("body")) == null ? null : tmp_6_0.hasError("required")));
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", ctx.queryCreateContext === ctx.queryCreateContextEnum.RESPOND ? "Response detail" : i0.ɵɵpipeBind1(22, 19, "Query Body"), " ");
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.submitted && ((tmp_8_0 = ctx.formGroup.get("body")) == null ? null : tmp_8_0.hasError("required")));
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("govuk-textarea--error", ctx.submitted && ((tmp_9_0 = ctx.formGroup.get("body")) == null ? null : tmp_9_0.hasError("required")));
-            i0.ɵɵproperty("formControlName", "body");
+            i0.ɵɵproperty("ngIf", ctx.showForm);
         } }, styles: [".query-respond[_ngcontent-%COMP%]{width:100%;max-width:720px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(QueryWriteRespondToQueryComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-query-write-respond-to-query', template: "<div class=\"govuk-!-margin-bottom-6\">\n  <div class=\"govuk-!-margin-bottom-6\">\n    <div class=\"govuk-caption-l\">{{ 'Respond to a query' | rpxTranslate }}</div>\n    <h1 class=\"govuk-heading-l govuk-!-margin-bottom-0\">{{ 'Query details' | rpxTranslate }}</h1>\n  </div>\n\n  <div class=\"govuk-!-margin-bottom-4\">\n    <ccd-query-case-details-header [caseDetails]=\"caseDetails\"></ccd-query-case-details-header>\n  </div>\n\n  <div>\n    <ccd-query-details [query]=\"queryItem\"></ccd-query-details>\n  </div>\n</div>\n\n<div class=\"query-respond\">\n  <div>\n    <h1 class=\"govuk-heading-m\">\n      {{ queryCreateContext === queryCreateContextEnum.RESPOND ? 'Respond to a query' : 'Ask a follow-up question' | rpxTranslate }}\n    </h1>\n\n    <div [formGroup]=\"formGroup\">\n      <div class=\"govuk-form-group body-textarea\"\n           [class.govuk-form-group--error]=\"submitted && formGroup.get('body')?.hasError('required')\">\n        <div class=\"govuk-label-wrapper\">\n          <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"body\">\n            {{ queryCreateContext === queryCreateContextEnum.RESPOND ? 'Response detail' : 'Query Body' | rpxTranslate }}\n          </label>\n        </div>\n        <p id=\"body-error\" class=\"govuk-error-message\"\n           *ngIf=\"submitted && formGroup.get('body')?.hasError('required')\">\n          <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ queryCreateContext === queryCreateContextEnum.RESPOND ? raiseQueryErrorMessages.RESPOND_QUERY_BODY : raiseQueryErrorMessages.QUERY_BODY | rpxTranslate }}\n        </p>\n        <textarea [formControlName]=\"'body'\" class=\"govuk-textarea\"\n                  [class.govuk-textarea--error]=\"submitted && formGroup.get('body')?.hasError('required')\" id=\"body\"\n                  name=\"body\" rows=\"5\" aria-describedby=\"body-hint body-error\">\n      </textarea>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".query-respond{width:100%;max-width:720px}\n"] }]
+        args: [{ selector: 'ccd-query-write-respond-to-query', template: "<div class=\"govuk-!-margin-bottom-6\">\n  <div class=\"govuk-!-margin-bottom-6\">\n    <div class=\"govuk-caption-l\">{{ 'Respond to a query' | rpxTranslate }}</div>\n    <h1 class=\"govuk-heading-l govuk-!-margin-bottom-0\">{{ 'Query details' | rpxTranslate }}</h1>\n  </div>\n\n  <div class=\"govuk-!-margin-bottom-4\">\n    <ccd-query-case-details-header [caseDetails]=\"caseDetails\"></ccd-query-case-details-header>\n  </div>\n\n  <div>\n    <ccd-query-details [query]=\"queryItem\"></ccd-query-details>\n  </div>\n</div>\n\n<div class=\"query-respond\" *ngIf=\"showForm\">\n  <div>\n    <h1 class=\"govuk-heading-m\">\n      {{ queryCreateContext === queryCreateContextEnum.RESPOND ? 'Respond to a query' : 'Ask a follow-up question' | rpxTranslate }}\n    </h1>\n\n    <div [formGroup]=\"formGroup\">\n      <div class=\"govuk-form-group body-textarea\"\n           [class.govuk-form-group--error]=\"submitted && formGroup.get('body')?.hasError('required')\">\n        <div class=\"govuk-label-wrapper\">\n          <label class=\"govuk-label govuk-label--m govuk-!-font-weight-bold\" for=\"body\">\n            {{ queryCreateContext === queryCreateContextEnum.RESPOND ? 'Response detail' : 'Query Body' | rpxTranslate }}\n          </label>\n        </div>\n        <p id=\"body-error\" class=\"govuk-error-message\"\n           *ngIf=\"submitted && formGroup.get('body')?.hasError('required')\">\n          <span class=\"govuk-visually-hidden\">{{ 'Error:' | rpxTranslate }} </span>{{ queryCreateContext === queryCreateContextEnum.RESPOND ? raiseQueryErrorMessages.RESPOND_QUERY_BODY : raiseQueryErrorMessages.QUERY_BODY | rpxTranslate }}\n        </p>\n        <textarea [formControlName]=\"'body'\" class=\"govuk-textarea\"\n                  [class.govuk-textarea--error]=\"submitted && formGroup.get('body')?.hasError('required')\" id=\"body\"\n                  name=\"body\" rows=\"5\" aria-describedby=\"body-hint body-error\">\n      </textarea>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".query-respond{width:100%;max-width:720px}\n"] }]
     }], () => [{ type: CaseNotifier }], { queryItem: [{
             type: Input
         }], formGroup: [{
@@ -21600,6 +21632,8 @@ class QueryWriteRespondToQueryComponent {
             type: Input
         }], submitted: [{
             type: Input
+        }], showForm: [{
+            type: Input
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(QueryWriteRespondToQueryComponent, { className: "QueryWriteRespondToQueryComponent", filePath: "lib/shared/components/palette/query-management/components/query-write/query-write-respond-to-query/query-write-respond-to-query.component.ts", lineNumber: 14 }); })();
 
@@ -22534,11 +22568,11 @@ class FieldWriteComponent extends AbstractFieldWriteComponent {
         } if (rf & 2) {
             i0.ɵɵclassProp("grey-bar", ctx.canHaveGreyBar && !ctx.caseField.hiddenCannotChange);
             i0.ɵɵproperty("hidden", ctx.caseField.hidden);
-        } }, styles: [".form   [_nghost-%COMP%]  .grey-bar>*>.form-group, .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group, .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group:not(.form-group-error), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group:not(.form-group-error), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>.form-group select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>.form-group textarea:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group textarea:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}"] });
+        } }, styles: [".input-upload-file[_ngcontent-%COMP%]{width:100%;display:none}.upload-file-container[_ngcontent-%COMP%]{display:flex;align-items:baseline}.input-label[_ngcontent-%COMP%]{width:8rem}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group, .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group, .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group:not(.form-group-error), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group:not(.form-group-error), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form   [_nghost-%COMP%]  .grey-bar>*>.form-group input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>.form-group select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>.form-group textarea:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>*>.form-group textarea:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field input:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field select:not(.inline-block), .form   [_nghost-%COMP%]  .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FieldWriteComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-field-write', template: "<div [hidden]=\"caseField.hidden\" [class.grey-bar]=\"canHaveGreyBar && !caseField.hiddenCannotChange\">\n  <ng-container #fieldContainer></ng-container>\n</div>\n", styles: [".form :host::ng-deep .grey-bar>*>.form-group,.form :host::ng-deep .grey-bar>*>*>.form-group,.form :host::ng-deep .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form :host::ng-deep .grey-bar>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form :host::ng-deep .grey-bar>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field input:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field select:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}\n"] }]
+        args: [{ selector: 'ccd-field-write', template: "<div [hidden]=\"caseField.hidden\" [class.grey-bar]=\"canHaveGreyBar && !caseField.hiddenCannotChange\">\n  <ng-container #fieldContainer></ng-container>\n</div>\n", styles: [".input-upload-file{width:100%;display:none}.upload-file-container{display:flex;align-items:baseline}.input-label{width:8rem}.form :host::ng-deep .grey-bar>*>.form-group,.form :host::ng-deep .grey-bar>*>*>.form-group,.form :host::ng-deep .grey-bar>*>dl.case-field{margin-left:15px;padding-left:15px}.form :host::ng-deep .grey-bar>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>*>.form-group:not(.form-group-error),.form :host::ng-deep .grey-bar>*>dl.case-field:not(.form-group-error){border-left:solid 5px #b1b4b6}.form :host::ng-deep .grey-bar>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group input:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group select:not(.inline-block),.form :host::ng-deep .grey-bar>*>*>.form-group textarea:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field input:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field select:not(.inline-block),.form :host::ng-deep .grey-bar>*>dl.case-field textarea:not(.inline-block){display:block}\n"] }]
     }], () => [{ type: i0.ComponentFactoryResolver }, { type: PaletteService }], { caseFields: [{
             type: Input
         }], fieldContainer: [{