@hmcts/ccd-case-ui-toolkit 7.0.73 → 7.0.74-exui-1832-rc1

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

@@ -14115,7 +14115,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();
@@ -14125,7 +14125,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();
@@ -14135,7 +14135,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);
@@ -14167,6 +14167,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
     dialogSubscription;
     caseNotifierSubscription;
     jurisdictionSubs;
+    fileName = 'No file chosen';
     uploadedDocument;
     dialogConfig;
     secureModeOn;
@@ -14234,6 +14235,7 @@ class WriteDocumentFieldComponent extends AbstractFieldWriteComponent {
     fileChangeEvent(fileInput) {
         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);
@@ -14467,7 +14469,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: 26, vars: 27, 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");
@@ -14481,22 +14483,30 @@ 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)); });
+            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);
+            i0.ɵɵpipe(19, "rpxTranslate");
             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(20, "input", 12, 0);
+            i0.ɵɵlistener("keydown.Tab", function WriteDocumentFieldComponent_Template_input_keydown_Tab_20_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileValidationsOnTab()); })("change", function WriteDocumentFieldComponent_Template_input_change_20_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.fileChangeEvent($event)); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(22, "div", 13)(23, "button", 14);
+            i0.ɵɵlistener("click", function WriteDocumentFieldComponent_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.cancelUpload()); });
+            i0.ɵɵtext(24);
+            i0.ɵɵpipe(25, "rpxTranslate");
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(18, _c1$l, !ctx.valid));
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(25, _c1$l, !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, 15, ctx.caseField));
             i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 14, ctx.caseField));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(5, 17, ctx.caseField));
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.caseField.hint_text);
             i0.ɵɵadvance();
@@ -14505,23 +14515,29 @@ 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, 19, "Choose file"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(19, 21, ctx.fileName));
+            i0.ɵɵadvance(2);
             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(25, 23, "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)\"\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 | rpxTranslate}}</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)\"\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 = '';
@@ -21602,19 +21618,18 @@ function WriteYesNoFieldComponent_div_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(2, "label", 12);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "rpxTranslate");
-    i0.ɵɵpipe(5, "rpxTranslate");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const value_r2 = ctx.$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(14, _c1$b, ctx_r0.yesNoControl.value === value_r2));
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(12, _c1$b, ctx_r0.yesNoControl.value === value_r2));
     i0.ɵɵadvance();
     i0.ɵɵproperty("id", ctx_r0.createElementId(value_r2))("name", ctx_r0.id())("formControl", ctx_r0.yesNoControl)("value", value_r2);
     i0.ɵɵattribute("name", ctx_r0.id());
     i0.ɵɵadvance();
     i0.ɵɵproperty("for", ctx_r0.createElementId(value_r2));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.caseField.label ? i0.ɵɵpipeBind1(5, 12, i0.ɵɵpipeBind3(4, 8, ctx_r0.caseField.label, null, value_r2)) : value_r2);
+    i0.ɵɵtextInterpolate(ctx_r0.caseField.label ? i0.ɵɵpipeBind3(4, 8, ctx_r0.caseField.label, null, value_r2) : value_r2);
 } }
 class WriteYesNoFieldComponent extends AbstractFieldWriteComponent {
     yesNoService;
@@ -21634,7 +21649,7 @@ class WriteYesNoFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵelementEnd();
             i0.ɵɵtemplate(4, WriteYesNoFieldComponent_span_4_Template, 3, 3, "span", 3)(5, WriteYesNoFieldComponent_span_5_Template, 3, 4, "span", 4);
             i0.ɵɵelementStart(6, "div", 5);
-            i0.ɵɵtemplate(7, WriteYesNoFieldComponent_div_7_Template, 6, 16, "div", 6);
+            i0.ɵɵtemplate(7, WriteYesNoFieldComponent_div_7_Template, 5, 14, "div", 6);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵproperty("id", ctx.id())("ngClass", i0.ɵɵpureFunction1(7, _c0$y, !ctx.yesNoControl.valid && (ctx.yesNoControl.dirty || ctx.yesNoControl.touched)));
@@ -21652,7 +21667,7 @@ class WriteYesNoFieldComponent extends AbstractFieldWriteComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteYesNoFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-yes-no-field', template: "<div [id]=\"id()\" class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !yesNoControl.valid && (yesNoControl.dirty || yesNoControl.touched)}\">\n\t<fieldset class=\"inline\">\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n    <span class=\"error-message\" *ngIf=\"yesNoControl.errors && (yesNoControl.dirty || yesNoControl.touched)\">\n      {{yesNoControl.errors | ccdFirstError:caseField.label}}\n    </span>\n\n    <div [id]=\"createElementId('radio')\">\n  \t  <div class=\"multiple-choice\" *ngFor=\"let value of yesNoValues\" [ngClass]=\"{selected: yesNoControl.value === value}\">\n  \t    <input class=\"form-control\" [id]=\"createElementId(value)\" [attr.name]=\"id()\" [name]=\"id()\" type=\"radio\" [formControl]=\"yesNoControl\" [value]=\"value\">\n        <label class=\"form-label\" [for]=\"createElementId(value)\">{{caseField.label ? (caseField.label | rpxTranslate:null:value | rpxTranslate) : value}}</label>\n  \t  </div>\n    </div>\n\t</fieldset>\n</div>\n" }]
+        args: [{ selector: 'ccd-write-yes-no-field', template: "<div [id]=\"id()\" class=\"form-group bottom-30\" [ngClass]=\"{'form-group-error': !yesNoControl.valid && (yesNoControl.dirty || yesNoControl.touched)}\">\n\t<fieldset class=\"inline\">\n    <legend>\n      <span class=\"form-label\" *ngIf=\"caseField.label\">{{caseField | ccdFieldLabel}}</span>\n    </legend>\n    <span class=\"form-hint\" *ngIf=\"caseField.hint_text\">{{caseField.hint_text | rpxTranslate}}</span>\n    <span class=\"error-message\" *ngIf=\"yesNoControl.errors && (yesNoControl.dirty || yesNoControl.touched)\">\n      {{yesNoControl.errors | ccdFirstError:caseField.label}}\n    </span>\n\n    <div [id]=\"createElementId('radio')\">\n  \t  <div class=\"multiple-choice\" *ngFor=\"let value of yesNoValues\" [ngClass]=\"{selected: yesNoControl.value === value}\">\n  \t    <input class=\"form-control\" [id]=\"createElementId(value)\" [attr.name]=\"id()\" [name]=\"id()\" type=\"radio\" [formControl]=\"yesNoControl\" [value]=\"value\">\n        <label class=\"form-label\" [for]=\"createElementId(value)\">{{caseField.label ? (caseField.label | rpxTranslate:null:value) : value}}</label>\n  \t  </div>\n    </div>\n\t</fieldset>\n</div>\n" }]
     }], () => [{ type: YesNoService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteYesNoFieldComponent, { className: "WriteYesNoFieldComponent", filePath: "lib/shared/components/palette/yes-no/write-yes-no-field.component.ts", lineNumber: 10 }); })();
 
@@ -21893,11 +21908,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: [{