@hmcts/ccd-case-ui-toolkit 7.1.71 → 7.1.72-exui-1832-rc1

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

@@ -15017,7 +15017,7 @@ class FileUploadStateService {
 const _c0$R = ["fileInput"];
 const _c1$l = 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();
@@ -15027,7 +15027,7 @@ function WriteDocumentFieldComponent_span_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, ctx_r1.caseField.hint_text), " ");
 } }
 function WriteDocumentFieldComponent_ccd_read_document_field_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ccd-read-document-field", 13);
+    i0.ɵɵelement(0, "ccd-read-document-field", 16);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("caseField", ctx_r1.caseField);
@@ -15039,6 +15039,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
     dialog;
     fileUploadStateService;
     jurisdictionService;
+    rpxTranslationService;
     static DOCUMENT_URL = 'document_url';
     static DOCUMENT_BINARY_URL = 'document_binary_url';
     static DOCUMENT_FILENAME = 'document_filename';
@@ -15049,6 +15050,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
     static UPLOAD_ERROR_INVALID_FORMAT = 'Document format is not supported';
     static UPLOAD_WAITING_FILE_STATUS = 'Uploading...';
     static ERROR_UPLOADING_FILE = 'Error Uploading File';
+    static NO_FILE_CHOSED = 'No file chosen';
     fileInput;
     selectedFile;
     valid = true;
@@ -15060,12 +15062,13 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
     dialogSubscription;
     caseNotifierSubscription;
     jurisdictionSubs;
+    fileName = WriteDocumentFieldComponent.NO_FILE_CHOSED;
     uploadedDocument;
     dialogConfig;
     secureModeOn;
     jurisdictionId;
     caseTypeId;
-    constructor(appConfig, caseNotifier, documentManagement, dialog, fileUploadStateService, jurisdictionService) {
+    constructor(appConfig, caseNotifier, documentManagement, dialog, fileUploadStateService, jurisdictionService, rpxTranslationService) {
         super();
         this.appConfig = appConfig;
         this.caseNotifier = caseNotifier;
@@ -15073,9 +15076,15 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
         this.dialog = dialog;
         this.fileUploadStateService = fileUploadStateService;
         this.jurisdictionService = jurisdictionService;
+        this.rpxTranslationService = rpxTranslationService;
     }
     ngOnInit() {
         this.secureModeOn = this.appConfig.getDocumentSecureMode();
+        if (this.rpxTranslationService.language === 'cy') {
+            this.rpxTranslationService.getTranslation$(WriteDocumentFieldComponent.NO_FILE_CHOSED).subscribe((translation) => {
+                this.fileName = translation;
+            });
+        }
         if (this.secureModeOn) {
             this.subscribeToCaseDetails();
         }
@@ -15134,6 +15143,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);
@@ -15368,13 +15378,13 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
         this.valid = false;
         this.fileUploadStateService.setUploadInProgress(false);
     }
-    static ɵfac = function WriteDocumentFieldComponent_Factory(t) { return new (t || WriteDocumentFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(FileUploadStateService), i0.ɵɵdirectiveInject(JurisdictionService)); };
+    static ɵfac = function WriteDocumentFieldComponent_Factory(t) { return new (t || WriteDocumentFieldComponent)(i0.ɵɵdirectiveInject(AbstractAppConfig), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(FileUploadStateService), i0.ɵɵdirectiveInject(JurisdictionService), i0.ɵɵdirectiveInject(i1.RpxTranslationService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDocumentFieldComponent, selectors: [["ccd-write-document-field"]], viewQuery: function WriteDocumentFieldComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$R, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
-        } }, 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) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 27, vars: 28, 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"], [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"], [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");
@@ -15392,49 +15402,62 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
             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(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.ɵɵelementStart(14, "div", 9)(15, "label", 10);
+            i0.ɵɵtext(16);
+            i0.ɵɵpipe(17, "rpxTranslate");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "span", 11)(19, "span");
+            i0.ɵɵtext(20);
             i0.ɵɵelementEnd()()();
-            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.ɵɵelementStart(21, "input", 12, 0);
+            i0.ɵɵlistener("keydown.Tab", function WriteDocumentFieldComponent_Template_input_keydown_Tab_21_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileValidationsOnTab()); })("change", function WriteDocumentFieldComponent_Template_input_change_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileChangeEvent($event, ctx.caseField.field_type.regular_expression)); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(23, "div", 13)(24, "button", 14);
+            i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancelUpload()); });
+            i0.ɵɵtext(25);
+            i0.ɵɵpipe(26, "rpxTranslate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(21, _c1$l, !ctx.valid));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(26, _c1$l, !ctx.valid));
             i0.ɵɵadvance();
             i0.ɵɵproperty("for", ctx.id());
             i0.ɵɵadvance();
-            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 13, ctx.caseField));
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 16, ctx.caseField));
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 15, ctx.caseField));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 18, 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(9, 17, ctx.fileUploadMessages), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(9, 20, ctx.fileUploadMessages), " ");
             i0.ɵɵadvance(3);
             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.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(17, 22, "Choose file"), " ");
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(ctx.fileName);
             i0.ɵɵadvance();
             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(19, 19, "Cancel upload"));
-        } }, encapsulation: 2 });
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(26, 24, "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\">\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: [{
+        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\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}}\n      </label>\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  </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    {{'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 }, { type: i1.RpxTranslationService }], { 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: 25 }); })();
 
 class DynamicListPipe {
     static EMPTY = '';
@@ -23606,11 +23629,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: [{
@@ -33347,7 +33370,9 @@ class CaseHistoryComponent {
         this.caseHistoryService = caseHistoryService;
     }
     ngOnInit() {
-        this.caseSubscription = this.caseNotifier.caseView.subscribe(caseDetails => {
+        this.caseSubscription = this.caseNotifier.caseView
+            .pipe(take(1))
+            .subscribe((caseDetails) => {
             this.caseDetails = caseDetails;
             const eventId = this.route.snapshot.paramMap.get(CaseHistoryComponent.PARAM_EVENT_ID) || this.event;
             this.caseHistoryService