@hmcts/ccd-case-ui-toolkit 7.1.71-spinner-issue → 7.1.72-ongoing-accessibility-v1

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

@@ -590,22 +590,22 @@ class DateInputComponent {
         }
     }
     dayId() {
-        return `${this.id}-day`;
+        return this.id + '-day';
     }
     monthId() {
-        return `${this.id}-month`;
+        return this.id + '-month';
     }
     yearId() {
-        return `${this.id}-year`;
+        return this.id + '-year';
     }
     hourId() {
-        return `${this.id}-hour`;
+        return this.id + '-hour';
     }
     minuteId() {
-        return `${this.id}-minute`;
+        return this.id + '-minute';
     }
     secondId() {
-        return `${this.id}-second`;
+        return this.id + '-second';
     }
     viewValue() {
         if (this.day || this.month || this.year || this.hour || this.minute || this.second) {
@@ -3272,6 +3272,7 @@ class CaseField {
     hiddenCannotChange;
     label;
     order;
+    parent;
     field_type;
     hint_text;
     security_label;
@@ -3394,6 +3395,22 @@ class CaseField {
         }
         return null;
     }
+    // Ascend the hierarchy to get the full path of the field
+    getHierachicalId(curr) {
+        const prefix = curr ? curr + "_" : "";
+        if (prefix.length < 1024) {
+            if (this.parent) {
+                return this.parent.getHierachicalId(prefix + this.id);
+            }
+            else {
+                return prefix + this.id;
+            }
+        }
+        else {
+            console.log("Path too long, possible circular reference in case field hierarchy");
+            return this.id;
+        }
+    }
     set isTranslated(val) {
         this.isTranslatedFlag = val;
     }
@@ -3483,6 +3500,12 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", Boolean)
 ], CaseField.prototype, "isCaseLink", null);
+__decorate([
+    Expose(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [String]),
+    __metadata("design:returntype", String)
+], CaseField.prototype, "getHierachicalId", null);
 
 // @dynamic
 class WizardPage {
@@ -12246,6 +12269,7 @@ class WriteComplexFieldComponent extends AbstractFieldWriteComponent {
         const fieldsFilterPipe = new FieldsFilterPipe();
         this.complexFields = fieldsFilterPipe.transform(this.caseField, true).map(field => {
             if (field && field.id) {
+                field.parent = this.caseField;
                 if (!(field instanceof CaseField)) {
                     return this.buildField(plainToClassFromExist(new CaseField(), field));
                 }
@@ -14187,8 +14211,8 @@ class WriteCaseLinkFieldComponent extends AbstractFieldWriteComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteCaseLinkFieldComponent, { className: "WriteCaseLinkFieldComponent", filePath: "lib/shared/components/palette/case-link/write-case-link-field.component.ts", lineNumber: 11 }); })();
 
-const _c0$T = (a0, a1, a2, a3, a4, a5) => ({ id: a0, label: a1, field_type: a2, display_context_parameter: a3, value: a4, hidden: a5 });
-const _c1$m = (a0, a1, a2, a3, a4) => ({ id: a0, label: a1, field_type: a2, value: a3, hidden: a4 });
+const _c0$T = (a0, a1, a2, a3, a4, a5, a6) => ({ id: a0, label: a1, field_type: a2, display_context_parameter: a3, value: a4, hidden: a5, parent: a6 });
+const _c1$m = (a0, a1, a2, a3, a4, a5) => ({ id: a0, label: a1, field_type: a2, value: a3, hidden: a4, parent: a5 });
 function ReadCollectionFieldComponent_table_0_tbody_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tbody")(1, "tr");
     i0.ɵɵelement(2, "th", 4);
@@ -14198,7 +14222,7 @@ function ReadCollectionFieldComponent_table_0_tbody_2_Template(rf, ctx) { if (rf
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("caseField", i0.ɵɵpureFunction6(3, _c0$T, ctx_r0.caseField.label, ctx_r0.caseField.label, ctx_r0.caseField.field_type.collection_field_type, ctx_r0.caseField.display_context_parameter, ctx_r0.caseField.value, ctx_r0.caseField.hidden))("context", ctx_r0.context)("topLevelFormGroup", ctx_r0.topLevelFormGroup);
+    i0.ɵɵproperty("caseField", i0.ɵɵpureFunction7(3, _c0$T, ctx_r0.caseField.label, ctx_r0.caseField.label, ctx_r0.caseField.field_type.collection_field_type, ctx_r0.caseField.display_context_parameter, ctx_r0.caseField.value, ctx_r0.caseField.hidden, ctx_r0.caseField))("context", ctx_r0.context)("topLevelFormGroup", ctx_r0.topLevelFormGroup);
 } }
 function ReadCollectionFieldComponent_table_0_tbody_3_tr_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tr")(1, "td");
@@ -14209,11 +14233,11 @@ function ReadCollectionFieldComponent_table_0_tbody_3_tr_1_Template(rf, ctx) { i
     const i_r3 = ctx.index;
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("caseField", i0.ɵɵpureFunction5(4, _c1$m, i_r3, ctx_r0.caseField.label + " " + (i_r3 + 1), ctx_r0.caseField.field_type.collection_field_type, item_r2.value, ctx_r0.caseField.hidden))("context", ctx_r0.context)("topLevelFormGroup", ctx_r0.topLevelFormGroup)("idPrefix", ctx_r0.buildIdPrefix(i_r3));
+    i0.ɵɵproperty("caseField", i0.ɵɵpureFunction6(4, _c1$m, i_r3 + "", ctx_r0.caseField.label + " " + (i_r3 + 1), ctx_r0.caseField.field_type.collection_field_type, item_r2.value, ctx_r0.caseField.hidden, ctx_r0.caseField))("context", ctx_r0.context)("topLevelFormGroup", ctx_r0.topLevelFormGroup)("idPrefix", ctx_r0.buildIdPrefix(i_r3));
 } }
 function ReadCollectionFieldComponent_table_0_tbody_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "tbody");
-    i0.ɵɵtemplate(1, ReadCollectionFieldComponent_table_0_tbody_3_tr_1_Template, 3, 10, "tr", 6);
+    i0.ɵɵtemplate(1, ReadCollectionFieldComponent_table_0_tbody_3_tr_1_Template, 3, 11, "tr", 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -14223,7 +14247,7 @@ function ReadCollectionFieldComponent_table_0_tbody_3_Template(rf, ctx) { if (rf
 function ReadCollectionFieldComponent_table_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "table", 1);
     i0.ɵɵelementContainerStart(1, 2);
-    i0.ɵɵtemplate(2, ReadCollectionFieldComponent_table_0_tbody_2_Template, 5, 10, "tbody", 3)(3, ReadCollectionFieldComponent_table_0_tbody_3_Template, 2, 1, "tbody", 3);
+    i0.ɵɵtemplate(2, ReadCollectionFieldComponent_table_0_tbody_2_Template, 5, 11, "tbody", 3)(3, ReadCollectionFieldComponent_table_0_tbody_3_Template, 2, 1, "tbody", 3);
     i0.ɵɵelementContainerEnd();
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -14258,7 +14282,7 @@ class ReadCollectionFieldComponent extends AbstractFieldReadComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ReadCollectionFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-read-collection-field', template: "<table *ngIf=\"caseField.value && caseField.value.length \" class=\"collection-field-table\" aria-describedby=\"collection table\">\n  <ng-container [ngSwitch]=\"isDisplayContextParameterAvailable\">\n    <tbody *ngSwitchCase=\"true\">\n    <tr>\n      <th id=\"hiddenHeader\" style=\"display: none;\"></th>\n      <td>\n        <ccd-field-read\n          [caseField]=\"{\n            id: caseField.label,\n            label: caseField.label,\n            field_type: caseField.field_type.collection_field_type,\n            display_context_parameter: caseField.display_context_parameter,\n            value: caseField.value,\n            hidden: caseField.hidden\n          }\"\n          [context]=\"context\"\n          [topLevelFormGroup]=\"topLevelFormGroup\">\n        </ccd-field-read>\n      </td>\n    </tr>\n    </tbody>\n    <tbody *ngSwitchCase=\"false\">\n    <tr *ngFor=\"let item of caseField.value; let i = index\">\n      <td>\n        <ccd-field-read\n          [caseField]=\"{\n            id: i,\n            label: caseField.label + ' ' + (i + 1),\n            field_type: caseField.field_type.collection_field_type,\n            value: item.value,\n            hidden: caseField.hidden\n          }\"\n          [context]=\"context\"\n          [topLevelFormGroup]=\"topLevelFormGroup\"\n          [idPrefix]=\"buildIdPrefix(i)\">\n        </ccd-field-read>\n      </td>\n    </tr>\n    </tbody>\n  </ng-container>\n</table>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
+        args: [{ selector: 'ccd-read-collection-field', template: "<table *ngIf=\"caseField.value && caseField.value.length \" class=\"collection-field-table\" aria-describedby=\"collection table\">\n  <ng-container [ngSwitch]=\"isDisplayContextParameterAvailable\">\n    <tbody *ngSwitchCase=\"true\">\n    <tr>\n      <th id=\"hiddenHeader\" style=\"display: none;\"></th>\n      <td>\n        <ccd-field-read\n          [caseField]=\"{\n            id: caseField.label,\n            label: caseField.label,\n            field_type: caseField.field_type.collection_field_type,\n            display_context_parameter: caseField.display_context_parameter,\n            value: caseField.value,\n            hidden: caseField.hidden,\n            parent: caseField\n          }\"\n          [context]=\"context\"\n          [topLevelFormGroup]=\"topLevelFormGroup\">\n        </ccd-field-read>\n      </td>\n    </tr>\n    </tbody>\n    <tbody *ngSwitchCase=\"false\">\n    <tr *ngFor=\"let item of caseField.value; let i = index\">\n      <td>\n        <ccd-field-read\n          [caseField]=\"{\n            id: i + '',\n            label: caseField.label + ' ' + (i + 1),\n            field_type: caseField.field_type.collection_field_type,\n            value: item.value,\n            hidden: caseField.hidden,\n            parent: caseField\n          }\"\n          [context]=\"context\"\n          [topLevelFormGroup]=\"topLevelFormGroup\"\n          [idPrefix]=\"buildIdPrefix(i)\">\n        </ccd-field-read>\n      </td>\n    </tr>\n    </tbody>\n  </ng-container>\n</table>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ReadCollectionFieldComponent, { className: "ReadCollectionFieldComponent", filePath: "lib/shared/components/palette/collection/read-collection-field.component.ts", lineNumber: 10 }); })();
 
@@ -14349,49 +14373,49 @@ function WriteCollectionFieldComponent_h2_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r0.formArray.errors);
 } }
-function WriteCollectionFieldComponent_div_9_div_1_Template(rf, ctx) { if (rf & 1) {
+function WriteCollectionFieldComponent_div_9_div_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1, 0)(2, "div", 14)(3, "div", 15)(4, "label", 16)(5, "h3", 17);
-    i0.ɵɵtext(6);
-    i0.ɵɵpipe(7, "rpxTranslate");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 18)(9, "button", 19);
-    i0.ɵɵlistener("click", function WriteCollectionFieldComponent_div_9_div_1_Template_button_click_9_listener() { const i_r3 = i0.ɵɵrestoreView(_r2).index; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openModal(i_r3)); });
-    i0.ɵɵtext(10);
-    i0.ɵɵpipe(11, "rpxTranslate");
+    i0.ɵɵelementStart(0, "div", 1, 0)(2, "div", 15)(3, "div", 16)(4, "legend", 17)(5, "label", 18)(6, "h3", 19);
+    i0.ɵɵtext(7);
+    i0.ɵɵpipe(8, "rpxTranslate");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(9, "div", 20)(10, "button", 21);
+    i0.ɵɵlistener("click", function WriteCollectionFieldComponent_div_9_div_2_Template_button_click_10_listener() { const i_r3 = i0.ɵɵrestoreView(_r2).index; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.openModal(i_r3)); });
+    i0.ɵɵtext(11);
+    i0.ɵɵpipe(12, "rpxTranslate");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelement(12, "ccd-field-write", 20);
+    i0.ɵɵelement(13, "ccd-field-write", 22);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r4 = ctx.$implicit;
     const i_r3 = ctx.index;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("id", ctx_r0.buildIdPrefix(i_r3) + i_r3);
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(5);
     i0.ɵɵproperty("for", item_r4.prefix + i_r3);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 15, ctx_r0.itemLabel(i_r3)));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(8, 15, ctx_r0.itemLabel(i_r3)));
     i0.ɵɵadvance(3);
     i0.ɵɵattributeInterpolate1("aria-label", "Remove ", ctx_r0.itemLabel(i_r3), "");
     i0.ɵɵproperty("disabled", ctx_r0.isNotAuthorisedToDelete(i_r3));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(11, 17, "Remove"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(12, 17, "Remove"));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("caseField", item_r4.caseField)("caseFields", ctx_r0.caseFields)("formGroup", ctx_r0.formGroup)("parent", item_r4.container)("idPrefix", item_r4.prefix)("hidden", item_r4.caseField.hidden)("isExpanded", ctx_r0.isExpanded)("isInSearchBlock", ctx_r0.isInSearchBlock);
 } }
 function WriteCollectionFieldComponent_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵtemplate(1, WriteCollectionFieldComponent_div_9_div_1_Template, 13, 19, "div", 13);
-    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(0, "div", 12)(1, "fieldset", 13);
+    i0.ɵɵtemplate(2, WriteCollectionFieldComponent_div_9_div_2_Template, 14, 19, "div", 14);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("hidden", ctx_r0.caseField.hidden);
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", ctx_r0.collItems);
 } }
 function WriteCollectionFieldComponent_button_10_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 21);
+    i0.ɵɵelementStart(0, "button", 23);
     i0.ɵɵlistener("click", function WriteCollectionFieldComponent_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.addItem(false)); });
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "rpxTranslate");
@@ -14430,6 +14454,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
         this.caseField.value.forEach((item, index) => {
             const prefix = this.buildIdPrefix(index);
             const caseField = this.buildCaseField(item, index);
+            caseField.parent = this.caseField;
             const container = this.getContainer(index);
             if (this.collItems.length <= index) {
                 this.collItems.length = index + 1;
@@ -14708,7 +14733,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.items = _t);
-        } }, inputs: { caseFields: "caseFields" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 11, consts: [["collectionItem", ""], [1, "form-group", 3, "id"], [1, "panel", "collection-indicator"], [1, "heading-h2", "error-spacing"], ["type", "button", 1, "button", "write-collection-add-item__top", 3, "click", "disabled"], ["class", "heading-h2 error-spacing", 4, "ngIf"], ["class", "form-group", 3, "hidden", 4, "ngIf"], ["class", "button write-collection-add-item__bottom", "type", "button", 3, "disabled", "click", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-hint"], [1, "error-message"], [1, "form-group", 3, "hidden"], ["class", "form-group", 3, "id", 4, "ngFor", "ngForOf"], [1, "collection-title"], [1, "float-left"], [3, "for"], [1, "heading-h3"], [1, "float-right"], ["type", "button", 1, "button", "button-secondary", 3, "click", "disabled"], [3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"], ["type", "button", 1, "button", "write-collection-add-item__bottom", 3, "click", "disabled"]], template: function WriteCollectionFieldComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { caseFields: "caseFields" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 11, vars: 11, consts: [["collectionItem", ""], [1, "form-group", 3, "id"], [1, "panel", "collection-indicator"], [1, "heading-h2", "error-spacing"], ["type", "button", 1, "button", "write-collection-add-item__top", 3, "click", "disabled"], ["class", "heading-h2 error-spacing", 4, "ngIf"], ["class", "form-group", 3, "hidden", 4, "ngIf"], ["class", "button write-collection-add-item__bottom", "type", "button", 3, "disabled", "click", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "form-hint"], [1, "error-message"], [1, "form-group", 3, "hidden"], [1, "govuk-fieldset"], ["class", "form-group", 3, "id", 4, "ngFor", "ngForOf"], [1, "collection-title"], [1, "float-left"], [1, "govuk-fieldset__legend"], [3, "for"], [1, "heading-h3"], [1, "float-right"], ["type", "button", 1, "button", "button-secondary", 3, "click", "disabled"], [3, "caseField", "caseFields", "formGroup", "parent", "idPrefix", "hidden", "isExpanded", "isInSearchBlock"], ["type", "button", 1, "button", "write-collection-add-item__bottom", 3, "click", "disabled"]], template: function WriteCollectionFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "h2", 3);
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "ccdFieldLabel");
@@ -14718,7 +14743,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵtext(6);
             i0.ɵɵpipe(7, "rpxTranslate");
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(8, WriteCollectionFieldComponent_h2_8_Template, 3, 2, "h2", 5)(9, WriteCollectionFieldComponent_div_9_Template, 2, 2, "div", 6)(10, WriteCollectionFieldComponent_button_10_Template, 3, 4, "button", 7);
+            i0.ɵɵtemplate(8, WriteCollectionFieldComponent_h2_8_Template, 3, 2, "h2", 5)(9, WriteCollectionFieldComponent_div_9_Template, 3, 2, "div", 6)(10, WriteCollectionFieldComponent_button_10_Template, 3, 4, "button", 7);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵproperty("id", ctx.id());
@@ -14738,7 +14763,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteCollectionFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-collection-field', template: "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"panel collection-indicator\">\n\n    <h2 class=\"heading-h2 error-spacing\">\n      {{(caseField | ccdFieldLabel)}}\n    </h2>\n    <button class=\"button write-collection-add-item__top\" type=\"button\" (click)=\"addItem(true)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\">{{'Add new' | rpxTranslate}}</button>\n    <h2 class=\"heading-h2 error-spacing\" *ngIf=\"caseField.hint_text || formArray.errors\">\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">\n      <markdown>{{caseField.hint_text | rpxTranslate }}</markdown>\n      </span>\n      <span *ngIf=\"formArray.errors\" class=\"error-message\">\n        {{(formArray.errors | ccdFirstError:caseField.label)}}\n      </span>\n    </h2>\n\n    <div class=\"form-group\" [hidden]=\"caseField.hidden\" *ngIf=\"caseField.value && caseField.value.length\">\n      <div *ngFor=\"let item of collItems; let i = index\" #collectionItem\n           [id]=\"this.buildIdPrefix(i) + i\" class=\"form-group\">\n        <div class=\"collection-title\">\n          <div class=\"float-left\">\n            <label [for]=\"item.prefix + i\"><h3 class=\"heading-h3\">{{itemLabel(i) | rpxTranslate}}</h3></label>\n          </div>\n          <div class=\"float-right\">\n            <button class=\"button button-secondary\" type=\"button\" (click)=\"openModal(i)\"\n                    [disabled]=\"isNotAuthorisedToDelete(i)\"\n                    attr.aria-label=\"Remove {{ itemLabel(i) }}\">{{'Remove' | rpxTranslate}}</button>\n          </div>\n        </div>\n        <ccd-field-write [caseField]=\"item.caseField\"\n                         [caseFields]=\"caseFields\"\n                         [formGroup]=\"formGroup\"\n                         [parent]=\"item.container\"\n                         [idPrefix]=\"item.prefix\"\n                         [hidden]=\"item.caseField.hidden\"\n                         [isExpanded]=\"isExpanded\"\n                         [isInSearchBlock]=\"isInSearchBlock\">\n        </ccd-field-write>\n      </div>\n\n    </div>\n\n    <button class=\"button write-collection-add-item__bottom\" type=\"button\" (click)=\"addItem(false)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\" *ngIf=\"caseField.value && caseField.value.length\">{{'Add new' | rpxTranslate }}</button>\n\n  </div>\n\n</div>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
+        args: [{ selector: 'ccd-write-collection-field', template: "<div class=\"form-group\" [id]=\"id()\">\n\n  <div class=\"panel collection-indicator\">\n\n    <h2 class=\"heading-h2 error-spacing\">\n      {{(caseField | ccdFieldLabel)}}\n    </h2>\n    <button class=\"button write-collection-add-item__top\" type=\"button\" (click)=\"addItem(true)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\">{{'Add new' | rpxTranslate}}</button>\n    <h2 class=\"heading-h2 error-spacing\" *ngIf=\"caseField.hint_text || formArray.errors\">\n      <span *ngIf=\"caseField.hint_text\" class=\"form-hint\">\n      <markdown>{{caseField.hint_text | rpxTranslate }}</markdown>\n      </span>\n      <span *ngIf=\"formArray.errors\" class=\"error-message\">\n        {{(formArray.errors | ccdFirstError:caseField.label)}}\n      </span>\n    </h2>\n\n    <div class=\"form-group\" [hidden]=\"caseField.hidden\" *ngIf=\"caseField.value && caseField.value.length\">\n      <fieldset class=\"govuk-fieldset\">\n        <div *ngFor=\"let item of collItems; let i = index\" #collectionItem\n            [id]=\"this.buildIdPrefix(i) + i\" class=\"form-group\">\n          <div class=\"collection-title\">\n            <div class=\"float-left\">\n              <legend class=\"govuk-fieldset__legend\">\n                <label [for]=\"item.prefix + i\"><h3 class=\"heading-h3\">{{itemLabel(i) | rpxTranslate}}</h3></label>\n              </legend>\n            </div>\n            <div class=\"float-right\">\n              <button class=\"button button-secondary\" type=\"button\" (click)=\"openModal(i)\"\n                      [disabled]=\"isNotAuthorisedToDelete(i)\"\n                      attr.aria-label=\"Remove {{ itemLabel(i) }}\">{{'Remove' | rpxTranslate}}</button>\n            </div>\n          </div>\n          <ccd-field-write [caseField]=\"item.caseField\"\n                          [caseFields]=\"caseFields\"\n                          [formGroup]=\"formGroup\"\n                          [parent]=\"item.container\"\n                          [idPrefix]=\"item.prefix\"\n                          [hidden]=\"item.caseField.hidden\"\n                          [isExpanded]=\"isExpanded\"\n                          [isInSearchBlock]=\"isInSearchBlock\">\n          </ccd-field-write>\n        </div>\n      </fieldset>\n    </div>\n\n    <button class=\"button write-collection-add-item__bottom\" type=\"button\" (click)=\"addItem(false)\" [disabled]=\"isNotAuthorisedToCreate() || isSearchFilter()\" *ngIf=\"caseField.value && caseField.value.length\">{{'Add new' | rpxTranslate }}</button>\n\n  </div>\n\n</div>\n", styles: [".collection-field-table tr:first-child>td{padding-top:0}.collection-field-table tr:last-child>td{border-bottom:none}.collection-field-table td.collection-actions{width:1px;white-space:nowrap}.error-spacing{margin-top:10px}.collection-title{height:51px}.float-left{float:left;padding-top:8px}.float-right{float:right}.complex-panel{margin:13px 0;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px 5px 2px;border-bottom:1px solid #bfc1c3;display:block;color:#0b0c0c;font-family:nta,Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media (min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top}.complex-panel .complex-panel-table>tbody>tr:last-child>th,.complex-panel .complex-panel-table>tbody>tr:last-child>td{border-bottom:none}.complex-panel .complex-panel-simple-field th{padding-left:5px;width:295px}.complex-panel .complex-panel-compound-field td{padding:5px}.collection-indicator{border-left:solid 5px #b1b4b6}\n"] }]
     }], () => [{ type: i1$3.MatLegacyDialog }, { type: i2.ScrollToService }, { type: ProfileNotifier }, { type: i0.ChangeDetectorRef }], { caseFields: [{
             type: Input
         }], items: [{
@@ -14781,6 +14806,9 @@ class ReadComplexFieldComponent extends AbstractFieldReadComponent {
         }
         if (this.caseField?.field_type && this.caseField.field_type.complex_fields) {
             this.caseField?.field_type?.complex_fields?.forEach((field) => {
+                if (field && this.caseField) {
+                    field.parent = this.caseField;
+                }
                 if (field?.isDynamic()) {
                     field.list_items = this.caseField.value[field.id]?.list_items;
                     field.value = {
@@ -23860,7 +23888,7 @@ function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_1_Template(
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r1.title);
 } }
-function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_img_2_Template(rf, ctx) { if (rf & 1) {
+function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_3_img_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "img", 10);
 } if (rf & 2) {
     const item_r4 = i0.ɵɵnextContext().$implicit;
@@ -23868,35 +23896,34 @@ function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_img_2_Tem
     i0.ɵɵpropertyInterpolate1("alt", "", ctx_r1.title, " icon'");
     i0.ɵɵproperty("src", item_r4.iconSrc, i0.ɵɵsanitizeUrl);
 } }
-function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 7);
-    i0.ɵɵlistener("click", function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template_div_click_1_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); item_r4.actionFn(); return i0.ɵɵresetView(ctx_r1.closeOverlay()); })("keyup", function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template_div_keyup_1_listener($event) { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView($event.key === "Enter" ? ctx_r1.actionAndClose(item_r4.actionFn()) : null); });
-    i0.ɵɵtemplate(2, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_img_2_Template, 1, 3, "img", 8);
+    i0.ɵɵelementStart(1, "li", 7);
+    i0.ɵɵlistener("click", function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_3_Template_li_click_1_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); item_r4.actionFn(); return i0.ɵɵresetView(ctx_r1.closeOverlay()); })("keydown.enter", function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_3_Template_li_keydown_enter_1_listener() { const item_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); item_r4.actionFn(); return i0.ɵɵresetView(ctx_r1.closeOverlay()); });
+    i0.ɵɵtemplate(2, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_3_img_2_Template, 1, 3, "img", 8);
     i0.ɵɵelementStart(3, "span", 9);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const item_r4 = ctx.$implicit;
-    const i_r5 = ctx.index;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("id", "overlay-menu__item" + i_r5);
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", item_r4.iconSrc);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r4.actionText);
 } }
 function CaseFileViewOverlayMenuComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵtemplate(1, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_1_Template, 3, 1, "ng-container", 4)(2, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template, 5, 3, "ng-container", 5);
-    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(1, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_1_Template, 3, 1, "ng-container", 4);
+    i0.ɵɵelementStart(2, "ul");
+    i0.ɵɵtemplate(3, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_3_Template, 5, 2, "ng-container", 5);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.title);
-    i0.ɵɵadvance();
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", ctx_r1.menuItems);
 } }
 class CaseFileViewOverlayMenuComponent {
@@ -23909,30 +23936,37 @@ class CaseFileViewOverlayMenuComponent {
         this.isOpen = isOpen;
         this.isOpenChange.emit(isOpen);
     }
-    actionAndClose(func) {
-        func();
-        this.closeOverlay();
+    setOpen() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            setTimeout(() => {
+                const el = document.querySelector('.overlay-menu__item:first-of-type');
+                if (el) {
+                    el.focus();
+                }
+            }, 0);
+        }
     }
     static ɵfac = function CaseFileViewOverlayMenuComponent_Factory(t) { return new (t || CaseFileViewOverlayMenuComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewOverlayMenuComponent, selectors: [["ccd-case-file-view-overlay-menu"]], inputs: { title: "title", menuItems: "menuItems", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngContentSelectors: _c1$9, decls: 5, vars: 4, consts: [["trigger", "cdkOverlayOrigin"], ["type", "button", "cdkOverlayOrigin", "", 1, "overlay-toggle", 3, "click"], ["cdkConnectedOverlay", "", 3, "backdropClick", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayBackdropClass"], [1, "overlay-menu"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "overlay-menu__title"], ["tabindex", "0", 1, "overlay-menu__item", 3, "click", "keyup", "id"], ["class", "overlay-menu__itemIcon", 3, "src", "alt", 4, "ngIf"], [1, "overlay-menu__actionText"], [1, "overlay-menu__itemIcon", 3, "src", "alt"]], template: function CaseFileViewOverlayMenuComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewOverlayMenuComponent, selectors: [["ccd-case-file-view-overlay-menu"]], inputs: { title: "title", menuItems: "menuItems", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngContentSelectors: _c1$9, decls: 5, vars: 4, consts: [["trigger", "cdkOverlayOrigin"], ["type", "button", "cdkOverlayOrigin", "", 1, "overlay-toggle", 3, "click"], ["cdkConnectedOverlay", "", 3, "backdropClick", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayBackdropClass"], [1, "overlay-menu"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "overlay-menu__title"], ["tabindex", "0", 1, "overlay-menu__item", 3, "click", "keydown.enter"], ["class", "overlay-menu__itemIcon", 3, "src", "alt", 4, "ngIf"], [1, "overlay-menu__actionText"], [1, "overlay-menu__itemIcon", 3, "src", "alt"]], template: function CaseFileViewOverlayMenuComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef(_c0$t);
             i0.ɵɵelementStart(0, "div")(1, "button", 1, 0);
-            i0.ɵɵlistener("click", function CaseFileViewOverlayMenuComponent_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r1); $event.stopPropagation(); return i0.ɵɵresetView(ctx.isOpen = !ctx.isOpen); });
+            i0.ɵɵlistener("click", function CaseFileViewOverlayMenuComponent_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r1); $event.stopPropagation(); return i0.ɵɵresetView(ctx.setOpen()); });
             i0.ɵɵprojection(3);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, CaseFileViewOverlayMenuComponent_ng_template_4_Template, 3, 2, "ng-template", 2);
+            i0.ɵɵtemplate(4, CaseFileViewOverlayMenuComponent_ng_template_4_Template, 4, 2, "ng-template", 2);
             i0.ɵɵlistener("backdropClick", function CaseFileViewOverlayMenuComponent_Template_ng_template_backdropClick_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeOverlay()); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            const trigger_r6 = i0.ɵɵreference(2);
+            const trigger_r5 = i0.ɵɵreference(2);
             i0.ɵɵadvance(4);
-            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r6)("cdkConnectedOverlayOpen", ctx.isOpen)("cdkConnectedOverlayHasBackdrop", true)("cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop");
+            i0.ɵɵproperty("cdkConnectedOverlayOrigin", trigger_r5)("cdkConnectedOverlayOpen", ctx.isOpen)("cdkConnectedOverlayHasBackdrop", true)("cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop");
         } }, dependencies: [i5.NgForOf, i5.NgIf, i2$2.CdkConnectedOverlay, i2$2.CdkOverlayOrigin], styles: [".overlay-toggle[_ngcontent-%COMP%]{display:block;background:none;border:0;padding:0 6px;margin-right:-4px;cursor:pointer}.overlay-menu[_ngcontent-%COMP%]{background-color:#fafafa;border:1px solid grey;margin-top:8px;font-size:1rem}.overlay-menu__title[_ngcontent-%COMP%], .overlay-menu__item[_ngcontent-%COMP%]{padding:10px;border-bottom:1px solid grey}.overlay-menu__title[_ngcontent-%COMP%]:last-child, .overlay-menu__item[_ngcontent-%COMP%]:last-child{border:none}.overlay-menu__title[_ngcontent-%COMP%]{padding-left:6px;padding-right:6px}.overlay-menu__item[_ngcontent-%COMP%]{display:flex;align-items:center;cursor:pointer;font-size:.875em}.overlay-menu__item[_ngcontent-%COMP%]:hover{background-color:#fff2cc}.overlay-menu__item[_ngcontent-%COMP%]:focus{border:2px solid #ffbf47}.overlay-menu__itemIcon[_ngcontent-%COMP%]{height:1.25em;width:1.25em;margin-right:6px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewOverlayMenuComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-file-view-overlay-menu', template: "<div>\n  <button type=\"button\" class=\"overlay-toggle\"\n          (click)=\"$event.stopPropagation(); isOpen = !isOpen\"\n          cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n    <ng-content select=\"[trigger]\"></ng-content>\n  </button>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"closeOverlay()\"\n  >\n    <div class=\"overlay-menu\">\n      <ng-container *ngIf=\"title\">\n        <div class=\"overlay-menu__title\">{{title}}</div>\n      </ng-container>\n\n      <ng-container *ngFor=\"let item of menuItems; index as i\">\n        <div class=\"overlay-menu__item\" tabindex=\"0\" [id]=\"'overlay-menu__item' + i\" (click)=\"item.actionFn(); closeOverlay();\" (keyup)=\"$event.key === 'Enter' ? actionAndClose(item.actionFn()) : null\">\n          <img *ngIf=\"item.iconSrc\" [src]=\"item.iconSrc\" class=\"overlay-menu__itemIcon\" alt=\"{{title}} icon'\" />\n          <span class=\"overlay-menu__actionText\">{{item.actionText}}</span>\n        </div>\n      </ng-container>\n    </div>\n  </ng-template>\n</div>\n", styles: [".overlay-toggle{display:block;background:none;border:0;padding:0 6px;margin-right:-4px;cursor:pointer}.overlay-menu{background-color:#fafafa;border:1px solid grey;margin-top:8px;font-size:1rem}.overlay-menu__title,.overlay-menu__item{padding:10px;border-bottom:1px solid grey}.overlay-menu__title:last-child,.overlay-menu__item:last-child{border:none}.overlay-menu__title{padding-left:6px;padding-right:6px}.overlay-menu__item{display:flex;align-items:center;cursor:pointer;font-size:.875em}.overlay-menu__item:hover{background-color:#fff2cc}.overlay-menu__item:focus{border:2px solid #ffbf47}.overlay-menu__itemIcon{height:1.25em;width:1.25em;margin-right:6px}\n"] }]
+        args: [{ selector: 'ccd-case-file-view-overlay-menu', template: "<div>\n  <button type=\"button\" class=\"overlay-toggle\"\n          (click)=\"$event.stopPropagation(); setOpen()\"\n          cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n    <ng-content select=\"[trigger]\"></ng-content>\n  </button>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n    (backdropClick)=\"closeOverlay()\"\n  >\n    <div class=\"overlay-menu\">\n      <ng-container *ngIf=\"title\">\n        <div class=\"overlay-menu__title\">{{title}}</div>\n      </ng-container>\n\n      <ul>\n        <ng-container *ngFor=\"let item of menuItems;\">\n          <li class=\"overlay-menu__item\" tabindex=\"0\" (click)=\"item.actionFn(); closeOverlay();\" (keydown.enter)=\"item.actionFn(); closeOverlay();\">\n            <img *ngIf=\"item.iconSrc\" [src]=\"item.iconSrc\" class=\"overlay-menu__itemIcon\" alt=\"{{title}} icon'\" />\n            <span class=\"overlay-menu__actionText\">{{item.actionText}}</span>\n          </li>\n        </ng-container>\n      </ul>\n    </div>\n  </ng-template>\n</div>\n", styles: [".overlay-toggle{display:block;background:none;border:0;padding:0 6px;margin-right:-4px;cursor:pointer}.overlay-menu{background-color:#fafafa;border:1px solid grey;margin-top:8px;font-size:1rem}.overlay-menu__title,.overlay-menu__item{padding:10px;border-bottom:1px solid grey}.overlay-menu__title:last-child,.overlay-menu__item:last-child{border:none}.overlay-menu__title{padding-left:6px;padding-right:6px}.overlay-menu__item{display:flex;align-items:center;cursor:pointer;font-size:.875em}.overlay-menu__item:hover{background-color:#fff2cc}.overlay-menu__item:focus{border:2px solid #ffbf47}.overlay-menu__itemIcon{height:1.25em;width:1.25em;margin-right:6px}\n"] }]
     }], null, { title: [{
             type: Input
         }], menuItems: [{
@@ -24213,10 +24247,10 @@ function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template(rf, c
     i0.ɵɵelementStart(7, "span", 17);
     i0.ɵɵtext(8);
     i0.ɵɵpipe(9, "ccdDate");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(10, "div", 18)(11, "ccd-case-file-view-folder-document-actions", 19);
     i0.ɵɵlistener("changeFolderAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_changeFolderAction_11_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("changeFolder", node_r2)); })("openInANewTabAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_openInANewTabAction_11_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("openInANewTab", node_r2)); })("downloadAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_downloadAction_11_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("download", node_r2)); })("printAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template_ccd_case_file_view_folder_document_actions_printAction_11_listener() { const node_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.triggerDocumentAction("print", node_r2)); });
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const node_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -24497,7 +24531,7 @@ class CaseFileViewFolderComponent {
         a.remove();
     }
     static ɵfac = function CaseFileViewFolderComponent_Factory(t) { return new (t || CaseFileViewFolderComponent)(i0.ɵɵdirectiveInject(WindowService), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(DocumentManagementService), i0.ɵɵdirectiveInject(i1$3.MatLegacyDialog), i0.ɵɵdirectiveInject(AbstractAppConfig)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, decls: 9, vars: 3, consts: [[1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", "aria-label", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], [3, "dataSource", "treeControl"], ["class", "document-tree-container__node document-tree-container__node--document", 4, "cdkTreeNodeDef"], ["class", "document-tree-container__node document-tree-container__folder", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-container__node", "document-tree-container__node--document"], [1, "node", 3, "click"], ["disabled", "", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options"], [3, "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction", "allowMoving"], [1, "document-tree-container__node", "document-tree-container__folder"], ["cdkTreeNodeToggle", "", 1, "node"], [1, "node__icon"], ["alt", "Folder icon", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments", allowMoving: "allowMoving" }, outputs: { clickedDocument: "clickedDocument", moveDocument: "moveDocument" }, decls: 9, vars: 3, consts: [[1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", "aria-label", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], [3, "dataSource", "treeControl"], ["class", "document-tree-container__node document-tree-container__node--document", 4, "cdkTreeNodeDef"], ["class", "document-tree-container__node document-tree-container__folder", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-container__node", "document-tree-container__node--document"], [1, "node", "case-file__node", 3, "click"], ["disabled", "", 1, "node__icon"], ["src", "/assets/img/case-file-view/case-file-view-document.svg", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-upload-timestamp"], [1, "node__document-options", "case-file__action"], [3, "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction", "allowMoving"], [1, "document-tree-container__node", "document-tree-container__folder"], ["cdkTreeNodeToggle", "", 1, "node"], [1, "node__icon"], ["alt", "Folder icon", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
             i0.ɵɵelement(2, "input", 2);
             i0.ɵɵelementEnd()();
@@ -24515,11 +24549,11 @@ class CaseFileViewFolderComponent {
             i0.ɵɵtextInterpolate1("Documents (", ctx.documentCount, ")");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.documentTreeData);
-        } }, dependencies: [i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i7.CdkNestedTreeNode, i7.CdkTreeNodeDef, i7.CdkTreeNodeToggle, i7.CdkTree, i7.CdkTreeNodeOutlet, CaseFileViewFolderSortComponent, CaseFileViewFolderDocumentActionsComponent, DatePipe], styles: ["[_nghost-%COMP%]{display:flex;height:100%;flex-direction:column}[_nghost-%COMP%]   .document-tree-container[_ngcontent-%COMP%]{flex:1 0}.document-filter-container[_ngcontent-%COMP%]{border-bottom:2px solid #C9C9C9}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]{padding:10px}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]   .document-search[_ngcontent-%COMP%]{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container[_ngcontent-%COMP%]   .documents-title[_ngcontent-%COMP%]{height:30%;margin-left:8px;font-weight:700}.document-tree-container[_ngcontent-%COMP%]{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node[_ngcontent-%COMP%]{display:block}.document-tree-container__node[_ngcontent-%COMP%]   .document-tree-container__node[_ngcontent-%COMP%]{padding-left:40px}.document-tree-container[_ngcontent-%COMP%]   .document-tree-invisible[_ngcontent-%COMP%]{display:none}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:7px}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-button{display:none}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title[_ngcontent-%COMP%]{font-weight:700}.node[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected[_ngcontent-%COMP%]{background:#fff2cc}.node__icon[_ngcontent-%COMP%]{position:relative;display:inline-block}.node__count[_ngcontent-%COMP%]{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg[_ngcontent-%COMP%]{display:block;height:30px;width:30px}.node__name[_ngcontent-%COMP%]{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options[_ngcontent-%COMP%]{margin-left:auto;margin-right:0}.node__document-upload-timestamp[_ngcontent-%COMP%]{font-size:.8rem;float:left;padding-left:10px}"] });
+        } }, dependencies: [i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.FormGroupDirective, i4.FormControlName, i7.CdkNestedTreeNode, i7.CdkTreeNodeDef, i7.CdkTreeNodeToggle, i7.CdkTree, i7.CdkTreeNodeOutlet, CaseFileViewFolderSortComponent, CaseFileViewFolderDocumentActionsComponent, DatePipe], styles: ["[_nghost-%COMP%]{display:flex;height:100%;flex-direction:column}[_nghost-%COMP%]   .document-tree-container[_ngcontent-%COMP%]{flex:1 0}.document-filter-container[_ngcontent-%COMP%]{border-bottom:2px solid #C9C9C9}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]{padding:10px}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]   .document-search[_ngcontent-%COMP%]{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container[_ngcontent-%COMP%]   .documents-title[_ngcontent-%COMP%]{height:30%;margin-left:8px;font-weight:700}.document-tree-container[_ngcontent-%COMP%]{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node[_ngcontent-%COMP%]{display:block}.document-tree-container__node[_ngcontent-%COMP%]   .document-tree-container__node[_ngcontent-%COMP%]{padding-left:40px}.document-tree-container[_ngcontent-%COMP%]   .document-tree-invisible[_ngcontent-%COMP%]{display:none}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar{width:7px}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-button{display:none}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title[_ngcontent-%COMP%]{font-weight:700}.node[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected[_ngcontent-%COMP%]{background:#fff2cc}.node__icon[_ngcontent-%COMP%]{position:relative;display:inline-block}.node__count[_ngcontent-%COMP%]{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg[_ngcontent-%COMP%]{display:block;height:30px;width:30px}.node__name[_ngcontent-%COMP%]{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options[_ngcontent-%COMP%]{margin-left:auto;margin-right:0}.node__document-upload-timestamp[_ngcontent-%COMP%]{font-size:.8rem;float:left;padding-left:10px}.node.case-file__node[_ngcontent-%COMP%]{width:80%;float:left}.node__document-options.case-file__action[_ngcontent-%COMP%]{width:15%;float:left;box-sizing:border-box;padding:12px}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\"\n      aria-label=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <span class=\"document-folders-header__title\">Documents ({{ documentCount }})</span>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp | ccdDate : 'local' :'dd MMM YYYY HH:mm'}}</span>\n          </span>\n          <div class=\"node__document-options\">\n            <ccd-case-file-view-folder-document-actions\n              (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n              (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n              (downloadAction)=\"triggerDocumentAction('download', node)\"\n              (printAction)=\"triggerDocumentAction('print', node)\"\n              [allowMoving]=\"allowMoving\"\n            >\n            </ccd-case-file-view-folder-document-actions>\n          </div>\n        </button>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}\n"] }]
+        args: [{ selector: 'ccd-case-file-view-folder', template: "<div class=\"document-filter-container\">\n  <div class=\"form-group document-filter\" [formGroup]=\"documentFilterFormGroup\">\n    <input class=\"form-control document-search\"\n      type=\"search\"\n      id=\"document-search\"\n      name=\"documentSearchFormControl\"\n      formControlName=\"documentSearchFormControl\"\n      placeholder=\"Search by document name\"\n      aria-label=\"Search by document name\">\n  </div>\n</div>\n\n<div class=\"document-folders-header\">\n  <span class=\"document-folders-header__title\">Documents ({{ documentCount }})</span>\n  <div>\n    <ccd-case-file-view-folder-sort\n      (sortAscending)=\"sortDataSourceAscending($event)\"\n      (sortDescending)=\"sortDataSourceDescending($event)\"\n    ></ccd-case-file-view-folder-sort>\n  </div>\n</div>\n\n<div class=\"document-tree-container\" *ngIf=\"documentTreeData\">\n  <div *ngIf=\"!nestedDataSource || nestedDataSource.length === 0\">\n    No results found\n  </div>\n  <div>\n    <cdk-tree [dataSource]=\"nestedDataSource\" [treeControl]=\"nestedTreeControl\">\n      <!-- document -->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__node--document\" *cdkTreeNodeDef=\"let node\">\n        <button class=\"node case-file__node\" (click)=\"selectedNodeItem = node; clickedDocument.emit(node)\"\n                [class.node--selected]=\"selectedNodeItem?.name === node.name\">\n          <div class=\"node__icon\" disabled>\n            <img src=\"/assets/img/case-file-view/case-file-view-document.svg\" class=\"node__iconImg\" alt=\"Document icon\">\n          </div>\n          <span class=\"node__name node-name-document\">\n            {{node.name}}\n            <br>\n            <span class=\"node__document-upload-timestamp\">{{node.upload_timestamp | ccdDate : 'local' :'dd MMM YYYY HH:mm'}}</span>\n          </span>\n        </button>\n        <div class=\"node__document-options case-file__action\">\n          <ccd-case-file-view-folder-document-actions\n            (changeFolderAction)=\"triggerDocumentAction('changeFolder', node)\"\n            (openInANewTabAction)=\"triggerDocumentAction('openInANewTab', node)\"\n            (downloadAction)=\"triggerDocumentAction('download', node)\"\n            (printAction)=\"triggerDocumentAction('print', node)\"\n            [allowMoving]=\"allowMoving\"\n          >\n          </ccd-case-file-view-folder-document-actions>\n        </div>\n      </cdk-nested-tree-node>\n      <!-- folder-->\n      <cdk-nested-tree-node class=\"document-tree-container__node document-tree-container__folder\" *cdkTreeNodeDef=\"let node; when: nestedChildren\">\n        <button class=\"node\" cdkTreeNodeToggle>\n          <div class=\"node__icon\" [attr.aria-label]=\"'toggle ' + node.name\" >\n            <img class=\"node__iconImg\"\n                 [src]=\"nestedTreeControl.isExpanded(node) ? '/assets/images/folder-open.png' : '/assets/images/folder.png'\" alt=\"Folder icon\">\n            <span class=\"node__count\">{{node.childDocumentCount}}</span>\n          </div>\n          <span class=\"node__name node__name--folder\">{{node.name}}</span>\n        </button>\n\n        <div [class.document-tree-invisible]=\"!nestedTreeControl.isExpanded(node)\">\n          <ng-container cdkTreeNodeOutlet></ng-container>\n        </div>\n      </cdk-nested-tree-node>\n    </cdk-tree>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;flex-direction:column}:host .document-tree-container{flex:1 0}.document-filter-container{border-bottom:2px solid #C9C9C9}.document-filter-container .document-filter{padding:10px}.document-filter-container .document-filter .document-search{background:url(/assets/images/icon-search-black.svg) no-repeat right #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container .documents-title{height:30%;margin-left:8px;font-weight:700}.document-tree-container{padding:4px;overflow-x:hidden;overflow-y:scroll}.document-tree-container__node{display:block}.document-tree-container__node .document-tree-container__node{padding-left:40px}.document-tree-container .document-tree-invisible{display:none}.document-tree-container::-webkit-scrollbar{width:7px}.document-tree-container::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:9999px;background-color:#aaa}.document-tree-container::-webkit-scrollbar-button{display:none}.document-tree-container::-webkit-scrollbar-track-piece{background:#eee}.document-tree-container::-webkit-scrollbar-thumb{background:#ccc}.document-folders-header{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #C9C9C9;padding:10px}.document-folders-header__title{font-weight:700}.node{display:flex;align-items:center;width:100%;padding:10px;background:none;border:0;cursor:pointer;white-space:nowrap}.node--selected{background:#fff2cc}.node__icon{position:relative;display:inline-block}.node__count{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.875rem;padding-top:4px}.node__iconImg{display:block;height:30px;width:30px}.node__name{margin-left:6px;font-size:1rem;overflow:hidden;text-overflow:ellipsis}.node__document-options{margin-left:auto;margin-right:0}.node__document-upload-timestamp{font-size:.8rem;float:left;padding-left:10px}.node.case-file__node{width:80%;float:left}.node__document-options.case-file__action{width:15%;float:left;box-sizing:border-box;padding:12px}\n"] }]
     }], () => [{ type: WindowService }, { type: i1$1.Router }, { type: DocumentManagementService }, { type: i1$3.MatLegacyDialog }, { type: AbstractAppConfig }], { categoriesAndDocuments: [{
             type: Input
         }], allowMoving: [{
@@ -28315,6 +28349,9 @@ class WriteDateFieldComponent extends AbstractFieldWriteComponent {
     isDateTime() {
         return this.caseField.field_type.id === 'DateTime';
     }
+    getId() {
+        return this.caseField.getHierachicalId();
+    }
     static ɵfac = /*@__PURE__*/ (() => { let ɵWriteDateFieldComponent_BaseFactory; return function WriteDateFieldComponent_Factory(t) { return (ɵWriteDateFieldComponent_BaseFactory || (ɵWriteDateFieldComponent_BaseFactory = i0.ɵɵgetInheritedFactory(WriteDateFieldComponent)))(t || WriteDateFieldComponent); }; })();
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WriteDateFieldComponent, selectors: [["ccd-write-date-field"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 14, consts: [[1, "form-group", "bottom-30", 3, "id", "ngClass"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [3, "id", "isDateTime", "mandatory", "isInvalid", "formControl"], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function WriteDateFieldComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "fieldset")(2, "legend");
@@ -28333,12 +28370,12 @@ class WriteDateFieldComponent extends AbstractFieldWriteComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.dateControl && ctx.dateControl.errors && (ctx.dateControl.dirty || ctx.dateControl.touched));
             i0.ɵɵadvance();
-            i0.ɵɵproperty("id", ctx.id())("isDateTime", ctx.isDateTime())("mandatory", i0.ɵɵpipeBind1(7, 10, ctx.caseField))("isInvalid", ctx.dateControl.errors && (ctx.dateControl.dirty || ctx.dateControl.touched))("formControl", ctx.dateControl);
+            i0.ɵɵproperty("id", ctx.getId())("isDateTime", ctx.isDateTime())("mandatory", i0.ɵɵpipeBind1(7, 10, ctx.caseField))("isInvalid", ctx.dateControl.errors && (ctx.dateControl.dirty || ctx.dateControl.touched))("formControl", ctx.dateControl);
         } }, dependencies: [i5.NgClass, i5.NgIf, i4.NgControlStatus, i4.FormControlDirective, DateInputComponent, FieldLabelPipe, FirstErrorPipe, IsMandatoryPipe, i1.RpxTranslatePipe], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WriteDateFieldComponent, [{
         type: Component,
-        args: [{ selector: 'ccd-write-date-field', template: "<div class=\"form-group bottom-30\" [id]=\"id()\" [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && (dateControl.dirty || dateControl.touched)}\">\n\n  <fieldset>\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=\"dateControl && dateControl.errors && (dateControl.dirty || dateControl.touched)\">\n      {{(dateControl.errors | ccdFirstError:caseField.label)}}\n    </span>\n    <cut-date-input [id]=\"id()\"\n                    [isDateTime]=\"isDateTime()\"\n                    [mandatory]=\"caseField | ccdIsMandatory\"\n                    [isInvalid]=\"dateControl.errors && (dateControl.dirty || dateControl.touched)\"\n                    [formControl]=\"dateControl\"></cut-date-input>\n\n  </fieldset>\n</div>\n" }]
+        args: [{ selector: 'ccd-write-date-field', template: "<div class=\"form-group bottom-30\" [id]=\"id()\" [ngClass]=\"{'form-group-error': dateControl && !dateControl.valid && (dateControl.dirty || dateControl.touched)}\">\n\n  <fieldset>\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=\"dateControl && dateControl.errors && (dateControl.dirty || dateControl.touched)\">\n      {{(dateControl.errors | ccdFirstError:caseField.label)}}\n    </span>\n    <cut-date-input [id]=\"getId()\"\n                    [isDateTime]=\"isDateTime()\"\n                    [mandatory]=\"caseField | ccdIsMandatory\"\n                    [isInvalid]=\"dateControl.errors && (dateControl.dirty || dateControl.touched)\"\n                    [formControl]=\"dateControl\"></cut-date-input>\n\n  </fieldset>\n</div>\n" }]
     }], null, null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WriteDateFieldComponent, { className: "WriteDateFieldComponent", filePath: "lib/shared/components/palette/date/write-date-field.component.ts", lineNumber: 9 }); })();
 
@@ -33757,6 +33794,9 @@ class EventTriggerResolver {
         // if route is 'trigger/:eid'
         return !route.firstChild || !route.firstChild.url.length;
     }
+    resetCachedEventTrigger() {
+        this.cachedEventTrigger = null;
+    }
     getAndCacheEventTrigger(route) {
         const cid = route.parent.paramMap.get(EventTriggerResolver.PARAM_CASE_ID);
         // tslint:disable-next-line: prefer-const
@@ -33818,6 +33858,7 @@ class CaseEventTriggerComponent {
     activityPollingService;
     sessionStorageService;
     loadingService;
+    eventTriggerResolver;
     static EVENT_COMPLETION_MESSAGE = `Case #%CASEREFERENCE% has been updated with event: %NAME%`;
     static CALLBACK_FAILED_MESSAGE = ' but the callback service cannot be completed';
     BANNER = DisplayMode.BANNER;
@@ -33827,7 +33868,7 @@ class CaseEventTriggerComponent {
     caseSubscription;
     parentUrl;
     routerCurrentNavigation;
-    constructor(ngZone, casesService, caseNotifier, router, alertService, route, caseReferencePipe, activityPollingService, sessionStorageService, loadingService) {
+    constructor(ngZone, casesService, caseNotifier, router, alertService, route, caseReferencePipe, activityPollingService, sessionStorageService, loadingService, eventTriggerResolver) {
         this.ngZone = ngZone;
         this.casesService = casesService;
         this.caseNotifier = caseNotifier;
@@ -33838,6 +33879,7 @@ class CaseEventTriggerComponent {
         this.activityPollingService = activityPollingService;
         this.sessionStorageService = sessionStorageService;
         this.loadingService = loadingService;
+        this.eventTriggerResolver = eventTriggerResolver;
         this.routerCurrentNavigation = this.router.getCurrentNavigation();
     }
     ngOnInit() {
@@ -33871,6 +33913,7 @@ class CaseEventTriggerComponent {
         if (!this.route.snapshot.data.case && this.caseSubscription) {
             this.caseSubscription.unsubscribe();
         }
+        this.eventTriggerResolver.resetCachedEventTrigger();
     }
     postEditActivity() {
         return this.activityPollingService.postEditActivity(this.caseDetails.case_id);
@@ -33938,7 +33981,7 @@ class CaseEventTriggerComponent {
     isDataLoaded() {
         return !!(this.eventTrigger && this.caseDetails);
     }
-    static ɵfac = function CaseEventTriggerComponent_Factory(t) { return new (t || CaseEventTriggerComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(AlertService), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseReferencePipe), i0.ɵɵdirectiveInject(ActivityPollingService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(LoadingService)); };
+    static ɵfac = function CaseEventTriggerComponent_Factory(t) { return new (t || CaseEventTriggerComponent)(i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(CasesService), i0.ɵɵdirectiveInject(CaseNotifier), i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(AlertService), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseReferencePipe), i0.ɵɵdirectiveInject(ActivityPollingService), i0.ɵɵdirectiveInject(SessionStorageService), i0.ɵɵdirectiveInject(LoadingService), i0.ɵɵdirectiveInject(EventTriggerResolver)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CaseEventTriggerComponent, selectors: [["ccd-case-event-trigger"]], decls: 1, vars: 1, consts: [["class", "screen-990", 4, "ngIf"], [1, "screen-990"], [3, "caseId", "displayMode"], [3, "cancelled", "submitted", "caseDetails", "submit", "validate", "eventTrigger"]], template: function CaseEventTriggerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, CaseEventTriggerComponent_div_0_Template, 3, 6, "div", 0);
         } if (rf & 2) {
@@ -33948,8 +33991,8 @@ class CaseEventTriggerComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseEventTriggerComponent, [{
         type: Component,
         args: [{ selector: 'ccd-case-event-trigger', template: "<div *ngIf=\"isDataLoaded()\" class=\"screen-990\">\n  <ccd-activity [caseId]=\"caseDetails.case_id\" [displayMode]=\"BANNER\"></ccd-activity>\n  <ccd-case-edit [caseDetails]=\"caseDetails\"\n                 [submit]=\"submit()\"\n                 [validate]=\"validate()\"\n                 [eventTrigger]=\"eventTrigger\"\n                 (cancelled)=\"cancel()\"\n                 (submitted)=\"submitted($event)\"></ccd-case-edit>\n</div>\n" }]
-    }], () => [{ type: i0.NgZone }, { type: CasesService }, { type: CaseNotifier }, { type: i1$1.Router }, { type: AlertService }, { type: i1$1.ActivatedRoute }, { type: CaseReferencePipe }, { type: ActivityPollingService }, { type: SessionStorageService }, { type: LoadingService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventTriggerComponent, { className: "CaseEventTriggerComponent", filePath: "lib/shared/components/case-viewer/case-event-trigger/case-event-trigger.component.ts", lineNumber: 14 }); })();
+    }], () => [{ type: i0.NgZone }, { type: CasesService }, { type: CaseNotifier }, { type: i1$1.Router }, { type: AlertService }, { type: i1$1.ActivatedRoute }, { type: CaseReferencePipe }, { type: ActivityPollingService }, { type: SessionStorageService }, { type: LoadingService }, { type: EventTriggerResolver }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CaseEventTriggerComponent, { className: "CaseEventTriggerComponent", filePath: "lib/shared/components/case-viewer/case-event-trigger/case-event-trigger.component.ts", lineNumber: 15 }); })();
 
 function CaseViewComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");