@hmcts/ccd-case-ui-toolkit 7.1.49 → 7.1.50-exui-2748-rc1

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

@@ -10253,11 +10253,11 @@ class SaveOrDiscardDialogComponent {
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 8, "Save"));
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 10, "Discard"));
-        } }, dependencies: [i1.RpxTranslatePipe], styles: [".x[_ngcontent-%COMP%]{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}.dialog-header[_ngcontent-%COMP%]{text-align:right}.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{margin:0 0 21px 25px}.action-button[_ngcontent-%COMP%]{margin:0 15px 0 25px}"] });
+        } }, dependencies: [i1.RpxTranslatePipe], styles: [".x[_ngcontent-%COMP%]{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media (prefers-color-scheme: dark){.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{color:#000}}.dialog-header[_ngcontent-%COMP%]{text-align:right}.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{margin:0 0 21px 25px}.action-button[_ngcontent-%COMP%]{margin:0 15px 0 25px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SaveOrDiscardDialogComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-save-or-discard-dialog', template: "<div>\n  <div class=\"dialog-header\">\n    <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n  </div>\n  <div>\n    <h2 class=\"heading-h2 dialog-title\">{{'Would you like to save changes to this page?' | rpxTranslate}}</h2>\n  </div>\n  <div class=\"dialog-info\">\n    <span class=\"text-info\">{{'You will be taken back to your case list.' | rpxTranslate}}</span>\n  </div>\n  <div>\n    <button type=\"button\" title=\"Save\" class=\"button action-button\" (click)=\"save()\">{{'Save' | rpxTranslate}}</button>\n    <button type=\"button\" title=\"Discard\" class=\"button button-secondary\" (click)=\"discard()\">{{'Discard' | rpxTranslate}}</button>\n  </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
+        args: [{ selector: 'ccd-save-or-discard-dialog', template: "<div>\n  <div class=\"dialog-header\">\n    <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n  </div>\n  <div>\n    <h2 class=\"heading-h2 dialog-title\">{{'Would you like to save changes to this page?' | rpxTranslate}}</h2>\n  </div>\n  <div class=\"dialog-info\">\n    <span class=\"text-info\">{{'You will be taken back to your case list.' | rpxTranslate}}</span>\n  </div>\n  <div>\n    <button type=\"button\" title=\"Save\" class=\"button action-button\" (click)=\"save()\">{{'Save' | rpxTranslate}}</button>\n    <button type=\"button\" title=\"Discard\" class=\"button button-secondary\" (click)=\"discard()\">{{'Discard' | rpxTranslate}}</button>\n  </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media (prefers-color-scheme: dark){.dialog-title,.dialog-info{color:#000}}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
     }], () => [{ type: i1$3.MatLegacyDialogRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SaveOrDiscardDialogComponent, { className: "SaveOrDiscardDialogComponent", filePath: "lib/shared/components/dialogs/save-or-discard-dialog/save-or-discard-dialog.component.ts", lineNumber: 9 }); })();
 
@@ -13565,11 +13565,11 @@ class RemoveDialogComponent {
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 8, "Remove"));
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 10, "Cancel"));
-        } }, dependencies: [i1.RpxTranslatePipe], styles: [".x[_ngcontent-%COMP%]{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}.dialog-header[_ngcontent-%COMP%]{text-align:right}.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{margin:0 0 21px 25px}.action-button[_ngcontent-%COMP%]{margin:0 15px 0 25px}"] });
+        } }, dependencies: [i1.RpxTranslatePipe], styles: [".x[_ngcontent-%COMP%]{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media (prefers-color-scheme: dark){.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{color:#000}}.dialog-header[_ngcontent-%COMP%]{text-align:right}.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{margin:0 0 21px 25px}.action-button[_ngcontent-%COMP%]{margin:0 15px 0 25px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RemoveDialogComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-remove-dialog', template: "<div>\n  <div class=\"dialog-header\">\n    <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n  </div>\n  <div>\n    <h2 class=\"heading-h2 dialog-title\">{{'Are you sure you want to remove the item?' | rpxTranslate}}</h2>\n  </div>\n  <div class=\"dialog-info\">\n    <span class=\"text-info\">\n      {{'You are about to permanently remove an item, are you sure you want to remove this item?' | rpxTranslate}}\n    </span>\n  </div>\n  <div>\n    <button type=\"button\" title=\"Remove\" class=\"button action-button\" (click)=\"remove()\">{{'Remove' | rpxTranslate}}</button>\n    <button type=\"button\" title=\"Cancel\" class=\"button button-secondary\" (click)=\"cancel()\">{{'Cancel' | rpxTranslate}}</button>\n  </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
+        args: [{ selector: 'ccd-remove-dialog', template: "<div>\n  <div class=\"dialog-header\">\n    <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n  </div>\n  <div>\n    <h2 class=\"heading-h2 dialog-title\">{{'Are you sure you want to remove the item?' | rpxTranslate}}</h2>\n  </div>\n  <div class=\"dialog-info\">\n    <span class=\"text-info\">\n      {{'You are about to permanently remove an item, are you sure you want to remove this item?' | rpxTranslate}}\n    </span>\n  </div>\n  <div>\n    <button type=\"button\" title=\"Remove\" class=\"button action-button\" (click)=\"remove()\">{{'Remove' | rpxTranslate}}</button>\n    <button type=\"button\" title=\"Cancel\" class=\"button button-secondary\" (click)=\"cancel()\">{{'Cancel' | rpxTranslate}}</button>\n  </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media (prefers-color-scheme: dark){.dialog-title,.dialog-info{color:#000}}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
     }], () => [{ type: i1$3.MatLegacyDialogRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RemoveDialogComponent, { className: "RemoveDialogComponent", filePath: "lib/shared/components/dialogs/remove-dialog/remove-dialog.component.ts", lineNumber: 9 }); })();
 
@@ -14247,11 +14247,11 @@ class DocumentDialogComponent {
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 8, "Replace file"));
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 10, "Cancel"));
-        } }, dependencies: [i1.RpxTranslatePipe], styles: [".x[_ngcontent-%COMP%]{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}.dialog-header[_ngcontent-%COMP%]{text-align:right}.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{margin:0 0 21px 25px}.action-button[_ngcontent-%COMP%]{margin:0 15px 0 25px}"] });
+        } }, dependencies: [i1.RpxTranslatePipe], styles: [".x[_ngcontent-%COMP%]{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media (prefers-color-scheme: dark){.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{color:#000}}.dialog-header[_ngcontent-%COMP%]{text-align:right}.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{margin:0 0 21px 25px}.action-button[_ngcontent-%COMP%]{margin:0 15px 0 25px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DocumentDialogComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-document-dialog', template: "<div>\n  <div class=\"dialog-header\">\n    <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n  </div>\n  <div>\n    <h2 class=\"heading-h2 dialog-title\">{{'Are you sure you want to replace the existing file?' | rpxTranslate}}</h2>\n  </div>\n  <div class=\"dialog-info\">\n    <span class=\"text-info\">{{'You are about to delete the original file uploaded. Are you sure you want to proceed?' | rpxTranslate}}</span>\n  </div>\n  <div>\n    <button type=\"button\" title=\"Replace\" class=\"button action-button\" (click)=\"replace()\">{{'Replace file' | rpxTranslate}}</button>\n    <button type=\"button\" title=\"Cancel\" class=\"button button-secondary\" (click)=\"cancel()\">{{'Cancel' | rpxTranslate}}</button>\n  </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
+        args: [{ selector: 'ccd-document-dialog', template: "<div>\n  <div class=\"dialog-header\">\n    <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n  </div>\n  <div>\n    <h2 class=\"heading-h2 dialog-title\">{{'Are you sure you want to replace the existing file?' | rpxTranslate}}</h2>\n  </div>\n  <div class=\"dialog-info\">\n    <span class=\"text-info\">{{'You are about to delete the original file uploaded. Are you sure you want to proceed?' | rpxTranslate}}</span>\n  </div>\n  <div>\n    <button type=\"button\" title=\"Replace\" class=\"button action-button\" (click)=\"replace()\">{{'Replace file' | rpxTranslate}}</button>\n    <button type=\"button\" title=\"Cancel\" class=\"button button-secondary\" (click)=\"cancel()\">{{'Cancel' | rpxTranslate}}</button>\n  </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media (prefers-color-scheme: dark){.dialog-title,.dialog-info{color:#000}}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
     }], () => [{ type: i1$3.MatLegacyDialogRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DocumentDialogComponent, { className: "DocumentDialogComponent", filePath: "lib/shared/components/dialogs/document-dialog/document-dialog.component.ts", lineNumber: 9 }); })();
 
@@ -14272,8 +14272,8 @@ class FileUploadStateService {
 
 const _c0$R = ["fileInput"];
 const _c1$l = a0 => ({ "form-group-error bottom-30": a0 });
-function WriteDocumentFieldComponent_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 11);
+function WriteDocumentFieldComponent_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -14282,8 +14282,8 @@ function WriteDocumentFieldComponent_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r1.caseField.hint_text), " ");
 } }
-function WriteDocumentFieldComponent_ccd_read_document_field_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ccd-read-document-field", 12);
+function WriteDocumentFieldComponent_ccd_read_document_field_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ccd-read-document-field", 13);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("caseField", ctx_r1.caseField);
@@ -14628,41 +14628,46 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 19, consts: [["fileInput", ""], [1, "form-group", 3, "ngClass"], [1, "form-label"], ["class", "form-hint", 4, "ngIf"], ["role", "alert", "tabindex", "0", 1, "error-message", 3, "hidden"], [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"], [3, "caseField"]], template: function WriteDocumentFieldComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 20, vars: 23, consts: [["fileInput", ""], [1, "form-group", 3, "ngClass"], [3, "for"], [1, "form-label"], ["class", "form-hint", 4, "ngIf"], ["role", "alert", "tabindex", "0", 1, "error-message", 3, "hidden"], [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"], [3, "caseField"]], template: function WriteDocumentFieldComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 1)(1, "legend", 2);
-            i0.ɵɵtext(2);
+            i0.ɵɵelementStart(0, "div", 1)(1, "label", 2)(2, "span", 3);
             i0.ɵɵpipe(3, "ccdFieldLabel");
+            i0.ɵɵtext(4);
+            i0.ɵɵpipe(5, "ccdFieldLabel");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(6, WriteDocumentFieldComponent_span_6_Template, 3, 3, "span", 4);
+            i0.ɵɵelementStart(7, "span", 5);
+            i0.ɵɵtext(8);
+            i0.ɵɵpipe(9, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, WriteDocumentFieldComponent_span_4_Template, 3, 3, "span", 3);
-            i0.ɵɵelementStart(5, "span", 4);
-            i0.ɵɵtext(6);
-            i0.ɵɵpipe(7, "rpxTranslate");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(8, "div");
-            i0.ɵɵtemplate(9, WriteDocumentFieldComponent_ccd_read_document_field_9_Template, 1, 1, "ccd-read-document-field", 5);
+            i0.ɵɵelementStart(10, "div");
+            i0.ɵɵtemplate(11, WriteDocumentFieldComponent_ccd_read_document_field_11_Template, 1, 1, "ccd-read-document-field", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(10, "div", 6)(11, "div", 7);
-            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.ɵɵelementStart(12, "div", 7)(13, "div", 8);
+            i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_div_click_13_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileSelectEvent()); })("keyup", function WriteDocumentFieldComponent_Template_div_keyup_13_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileSelectEvent()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "input", 8, 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(14, "input", 9, 0);
+            i0.ɵɵlistener("keydown.Tab", function WriteDocumentFieldComponent_Template_input_keydown_Tab_14_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileValidationsOnTab()); })("change", function WriteDocumentFieldComponent_Template_input_change_14_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileChangeEvent($event, ctx.caseField.field_type.regular_expression)); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(14, "div", 9)(15, "button", 10);
-            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(16, "div", 10)(17, "button", 11);
+            i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancelUpload()); });
+            i0.ɵɵtext(18);
+            i0.ɵɵpipe(19, "rpxTranslate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(17, _c1$l, !ctx.valid));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(21, _c1$l, !ctx.valid));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("for", ctx.id());
+            i0.ɵɵadvance();
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 13, ctx.caseField));
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 11, ctx.caseField), " ");
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 15, ctx.caseField));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.caseField.hint_text);
             i0.ɵɵadvance();
             i0.ɵɵproperty("hidden", !(ctx.fileUploadMessages && !ctx.valid));
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(7, 13, ctx.fileUploadMessages), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 17, ctx.fileUploadMessages), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.caseField);
             i0.ɵɵadvance(2);
@@ -14673,12 +14678,12 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("disabled", !ctx.isUploadInProgress());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 15, "Cancel upload"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(19, 19, "Cancel upload"));
         } }, encapsulation: 2 });
 }
 (() => { (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  <legend class=\"form-label\">\n    {{ caseField | ccdFieldLabel }}\n  </legend>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">\n    {{ caseField.hint_text | rpxTranslate }}\n  </span>\n  <span class=\"error-message\"\n        role=\"alert\"\n        tabindex=\"0\"\n        [hidden]=\"!(fileUploadMessages && !valid)\">\n    {{ fileUploadMessages | rpxTranslate }}\n  </span>\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}}\">{{(caseField | ccdFieldLabel)}}</span>\n  </label>\n  <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">\n    {{ caseField.hint_text | rpxTranslate }}\n  </span>\n  <span class=\"error-message\"\n        role=\"alert\"\n        tabindex=\"0\"\n        [hidden]=\"!(fileUploadMessages && !valid)\">\n    {{ fileUploadMessages | rpxTranslate }}\n  </span>\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" }]
     }], () => [{ type: AbstractAppConfig }, { type: CaseNotifier }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: FileUploadStateService }, { type: JurisdictionService }], { fileInput: [{
             type: ViewChild,
             args: ['fileInput', { static: false }]
@@ -33100,11 +33105,11 @@ class DeleteOrCancelDialogComponent {
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(15, 8, "Delete draft"));
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(18, 10, "Cancel"));
-        } }, dependencies: [i1.RpxTranslatePipe], styles: [".x[_ngcontent-%COMP%]{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}.dialog-header[_ngcontent-%COMP%]{text-align:right}.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{margin:0 0 21px 25px}.action-button[_ngcontent-%COMP%]{margin:0 15px 0 25px}"] });
+        } }, dependencies: [i1.RpxTranslatePipe], styles: [".x[_ngcontent-%COMP%]{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media (prefers-color-scheme: dark){.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{color:#000}}.dialog-header[_ngcontent-%COMP%]{text-align:right}.dialog-title[_ngcontent-%COMP%], .dialog-info[_ngcontent-%COMP%]{margin:0 0 21px 25px}.action-button[_ngcontent-%COMP%]{margin:0 15px 0 25px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DeleteOrCancelDialogComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-delete-or-cancel-dialog', template: "<div>\n    <div class=\"dialog-header\">\n      <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n    </div>\n    <div>\n      <h2 class=\"heading-h2 dialog-title\">{{'Are you sure you want to delete this draft?' | rpxTranslate}}</h2>\n    </div>\n    <div class=\"dialog-info\">\n      <span class=\"text-info\">{{'You are about to delete this draft. Are you sure you want to proceed?' | rpxTranslate}}</span>\n    </div>\n    <div>\n      <button type=\"button\" title=\"Delete\" class=\"button action-button\" (click)=\"delete()\">{{'Delete draft' | rpxTranslate}}</button>\n      <button type=\"button\" title=\"Cancel\" class=\"button button-secondary\" (click)=\"cancel()\">{{'Cancel' | rpxTranslate}}</button>\n    </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
+        args: [{ selector: 'ccd-delete-or-cancel-dialog', template: "<div>\n    <div class=\"dialog-header\">\n      <h2 (click)=\"cancel()\" class=\"heading-h2 x\">X</h2>\n    </div>\n    <div>\n      <h2 class=\"heading-h2 dialog-title\">{{'Are you sure you want to delete this draft?' | rpxTranslate}}</h2>\n    </div>\n    <div class=\"dialog-info\">\n      <span class=\"text-info\">{{'You are about to delete this draft. Are you sure you want to proceed?' | rpxTranslate}}</span>\n    </div>\n    <div>\n      <button type=\"button\" title=\"Delete\" class=\"button action-button\" (click)=\"delete()\">{{'Delete draft' | rpxTranslate}}</button>\n      <button type=\"button\" title=\"Cancel\" class=\"button button-secondary\" (click)=\"cancel()\">{{'Cancel' | rpxTranslate}}</button>\n    </div>\n</div>\n", styles: [".x{margin:0;padding:9px 9px 0 0;font-size:24px;font-weight:700;font-style:normal;font-stretch:normal;cursor:pointer;color:#6e7071}@media (prefers-color-scheme: dark){.dialog-title,.dialog-info{color:#000}}.dialog-header{text-align:right}.dialog-title,.dialog-info{margin:0 0 21px 25px}.action-button{margin:0 15px 0 25px}\n"] }]
     }], () => [{ type: i1$3.MatLegacyDialogRef }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DeleteOrCancelDialogComponent, { className: "DeleteOrCancelDialogComponent", filePath: "lib/shared/components/dialogs/delete-or-cancel-dialog/delete-or-cancel-dialog.component.ts", lineNumber: 9 }); })();