@hmcts/ccd-case-ui-toolkit 7.1.76-hint-text-1 → 7.1.76

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

@@ -13,7 +13,7 @@ import * as i1$2 from '@angular/common/http';
 import { HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
 import { distinctUntilChanged, catchError, map, publish, refCount, switchMap, debounceTime, delay, finalize, timeout, mergeMap, retryWhen, tap, delayWhen, publishReplay, take, first, takeUntil, filter } from 'rxjs/operators';
 import { polling } from 'rx-polling-hmcts';
-import { Type, Expose, plainToClassFromExist, plainToClass } from 'class-transformer';
+import { Type, Exclude, Expose, plainToClassFromExist, plainToClass } from 'class-transformer';
 import moment from 'moment';
 import { __decorate, __metadata } from 'tslib';
 import * as _ from 'underscore';
@@ -404,7 +404,7 @@ class BodyComponent {
 const _c0$12 = a0 => ({ "govuk-input--error": a0 });
 function DateInputComponent_div_19_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 15)(1, "label", 8);
+    i0.ɵɵelementStart(0, "div", 15)(1, "span", 8);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -414,15 +414,16 @@ function DateInputComponent_div_19_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r6 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("for", ctx_r6.hourId());
+    i0.ɵɵattribute("id", "hour-label-" + ctx_r6.hourId());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 6, "Hour"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 7, "Hour"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r6.hourId())("name", ctx_r6.hourId())("value", ctx_r6.displayHour)("ngClass", i0.ɵɵpureFunction1(8, _c0$12, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.hourId())("name", ctx_r6.hourId())("value", ctx_r6.displayHour)("ngClass", i0.ɵɵpureFunction1(9, _c0$12, ctx_r6.isInvalid));
+    i0.ɵɵattribute("aria-labelledby", "hour-label-" + ctx_r6.hourId());
 } }
 function DateInputComponent_div_20_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 17)(1, "label", 8);
+    i0.ɵɵelementStart(0, "div", 17)(1, "span", 8);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
@@ -432,29 +433,39 @@ function DateInputComponent_div_20_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const ctx_r6 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("for", ctx_r6.minuteId());
+    i0.ɵɵattribute("id", "minute-label-" + ctx_r6.hourId());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 6, "Minute"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 7, "Minute"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r6.minuteId())("name", ctx_r6.minuteId())("value", ctx_r6.displayMinute)("ngClass", i0.ɵɵpureFunction1(8, _c0$12, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.minuteId())("name", ctx_r6.minuteId())("value", ctx_r6.displayMinute)("ngClass", i0.ɵɵpureFunction1(9, _c0$12, ctx_r6.isInvalid));
+    i0.ɵɵattribute("aria-labelledby", "minute-label-" + ctx_r6.minuteId());
 } }
 function DateInputComponent_div_21_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18)(1, "label", 8);
+    i0.ɵɵelementStart(0, "div", 18)(1, "span", 8);
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "rpxTranslate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "input", 16, 5);
-    i0.ɵɵlistener("input", function DateInputComponent_div_21_Template_input_input_4_listener() { i0.ɵɵrestoreView(_r10); const secondInput_r11 = i0.ɵɵreference(5); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.secondChange(secondInput_r11.value)); })("keyup", function DateInputComponent_div_21_Template_input_keyup_4_listener() { i0.ɵɵrestoreView(_r10); const secondInput_r11 = i0.ɵɵreference(5); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.secondChange(secondInput_r11.value)); })("focus", function DateInputComponent_div_21_Template_input_focus_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.inputFocus()); });
+    i0.ɵɵelementStart(4, "label", 19);
+    i0.ɵɵtext(5);
+    i0.ɵɵpipe(6, "rpxTranslate");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "input", 16, 5);
+    i0.ɵɵlistener("input", function DateInputComponent_div_21_Template_input_input_7_listener() { i0.ɵɵrestoreView(_r10); const secondInput_r11 = i0.ɵɵreference(8); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.secondChange(secondInput_r11.value)); })("keyup", function DateInputComponent_div_21_Template_input_keyup_7_listener() { i0.ɵɵrestoreView(_r10); const secondInput_r11 = i0.ɵɵreference(8); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.secondChange(secondInput_r11.value)); })("focus", function DateInputComponent_div_21_Template_input_focus_7_listener() { i0.ɵɵrestoreView(_r10); const ctx_r6 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r6.inputFocus()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r6 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
+    i0.ɵɵattribute("id", "second-label-" + ctx_r6.secondId());
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 9, "Second"));
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("for", ctx_r6.secondId());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 6, "Second"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(6, 11, "Second"));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r6.secondId())("name", ctx_r6.secondId())("value", ctx_r6.displaySecond)("ngClass", i0.ɵɵpureFunction1(8, _c0$12, ctx_r6.isInvalid));
+    i0.ɵɵproperty("id", ctx_r6.secondId())("name", ctx_r6.secondId())("value", ctx_r6.displaySecond)("ngClass", i0.ɵɵpureFunction1(13, _c0$12, ctx_r6.isInvalid));
+    i0.ɵɵattribute("aria-labelledby", "second-label-" + ctx_r6.secondId());
 } }
 class DateInputComponent {
     id;
@@ -590,22 +601,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) {
@@ -658,50 +669,53 @@ class DateInputComponent {
                     useExisting: forwardRef(() => DateInputComponent),
                     multi: true
                 }
-            ])], decls: 22, vars: 33, consts: [["dayInput", ""], ["monthInput", ""], ["yearInput", ""], ["hourInput", ""], ["minuteInput", ""], ["secondInput", ""], [1, "form-date"], [1, "form-group", "form-group-day"], [1, "form-label", 3, "for"], ["type", "text", "pattern", "[0-9]*", "inputmode", "numeric", 1, "form-control", 3, "change", "keyup", "focus", "id", "name", "value", "ngClass"], [1, "form-group", "form-group-month"], [1, "form-group", "form-group-year"], ["class", "form-group form-group-hour", 4, "ngIf"], ["class", "form-group form-group-minute", 4, "ngIf"], ["class", "form-group form-group-second", 4, "ngIf"], [1, "form-group", "form-group-hour"], ["type", "number", 1, "form-control", 3, "input", "keyup", "focus", "id", "name", "value", "ngClass"], [1, "form-group", "form-group-minute"], [1, "form-group", "form-group-second"]], template: function DateInputComponent_Template(rf, ctx) { if (rf & 1) {
+            ])], decls: 22, vars: 36, consts: [["dayInput", ""], ["monthInput", ""], ["yearInput", ""], ["hourInput", ""], ["minuteInput", ""], ["secondInput", ""], [1, "form-date"], [1, "form-group", "form-group-day"], [1, "form-label"], ["type", "text", "pattern", "[0-9]*", "inputmode", "numeric", 1, "form-control", 3, "change", "keyup", "focus", "id", "name", "value", "ngClass"], [1, "form-group", "form-group-month"], [1, "form-group", "form-group-year"], ["class", "form-group form-group-hour", 4, "ngIf"], ["class", "form-group form-group-minute", 4, "ngIf"], ["class", "form-group form-group-second", 4, "ngIf"], [1, "form-group", "form-group-hour"], ["type", "number", 1, "form-control", 3, "input", "keyup", "focus", "id", "name", "value", "ngClass"], [1, "form-group", "form-group-minute"], [1, "form-group", "form-group-second"], [1, "form-label", 3, "for"]], template: function DateInputComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 6)(1, "div", 7)(2, "label", 8);
+            i0.ɵɵelementStart(0, "div", 6)(1, "div", 7)(2, "span", 8);
             i0.ɵɵtext(3);
             i0.ɵɵpipe(4, "rpxTranslate");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(5, "input", 9, 0);
             i0.ɵɵlistener("change", function DateInputComponent_Template_input_change_5_listener() { i0.ɵɵrestoreView(_r1); const dayInput_r2 = i0.ɵɵreference(6); return i0.ɵɵresetView(ctx.dayChange(dayInput_r2.value)); })("keyup", function DateInputComponent_Template_input_keyup_5_listener() { i0.ɵɵrestoreView(_r1); const dayInput_r2 = i0.ɵɵreference(6); return i0.ɵɵresetView(ctx.dayChange(dayInput_r2.value)); })("focus", function DateInputComponent_Template_input_focus_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.inputFocus()); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "div", 10)(8, "label", 8);
+            i0.ɵɵelementStart(7, "div", 10)(8, "span", 8);
             i0.ɵɵtext(9);
             i0.ɵɵpipe(10, "rpxTranslate");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(11, "input", 9, 1);
             i0.ɵɵlistener("change", function DateInputComponent_Template_input_change_11_listener() { i0.ɵɵrestoreView(_r1); const monthInput_r3 = i0.ɵɵreference(12); return i0.ɵɵresetView(ctx.monthChange(monthInput_r3.value)); })("keyup", function DateInputComponent_Template_input_keyup_11_listener() { i0.ɵɵrestoreView(_r1); const monthInput_r3 = i0.ɵɵreference(12); return i0.ɵɵresetView(ctx.monthChange(monthInput_r3.value)); })("focus", function DateInputComponent_Template_input_focus_11_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.inputFocus()); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(13, "div", 11)(14, "label", 8);
+            i0.ɵɵelementStart(13, "div", 11)(14, "span", 8);
             i0.ɵɵtext(15);
             i0.ɵɵpipe(16, "rpxTranslate");
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(17, "input", 9, 2);
             i0.ɵɵlistener("change", function DateInputComponent_Template_input_change_17_listener() { i0.ɵɵrestoreView(_r1); const yearInput_r4 = i0.ɵɵreference(18); return i0.ɵɵresetView(ctx.yearChange(yearInput_r4.value)); })("keyup", function DateInputComponent_Template_input_keyup_17_listener() { i0.ɵɵrestoreView(_r1); const yearInput_r4 = i0.ɵɵreference(18); return i0.ɵɵresetView(ctx.yearChange(yearInput_r4.value)); })("focus", function DateInputComponent_Template_input_focus_17_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.inputFocus()); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(19, DateInputComponent_div_19_Template, 6, 10, "div", 12)(20, DateInputComponent_div_20_Template, 6, 10, "div", 13)(21, DateInputComponent_div_21_Template, 6, 10, "div", 14);
+            i0.ɵɵtemplate(19, DateInputComponent_div_19_Template, 6, 11, "div", 12)(20, DateInputComponent_div_20_Template, 6, 11, "div", 13)(21, DateInputComponent_div_21_Template, 9, 15, "div", 14);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("for", ctx.dayId());
+            i0.ɵɵattribute("id", "day-label-" + ctx.dayId());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 21, "Day"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 24, "Day"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0.ɵɵpureFunction1(27, _c0$12, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0.ɵɵpureFunction1(30, _c0$12, ctx.isInvalid));
+            i0.ɵɵattribute("aria-labelledby", "day-label-" + ctx.dayId());
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("for", ctx.monthId());
+            i0.ɵɵattribute("id", "month-label-" + ctx.monthId());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 23, "Month"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(10, 26, "Month"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(29, _c0$12, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(32, _c0$12, ctx.isInvalid));
+            i0.ɵɵattribute("aria-labelledby", "month-label-" + ctx.monthId());
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("for", ctx.yearId());
+            i0.ɵɵattribute("id", "year-label-" + ctx.yearId());
             i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 25, "Year"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 28, "Year"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(31, _c0$12, ctx.isInvalid));
+            i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(34, _c0$12, ctx.isInvalid));
+            i0.ɵɵattribute("aria-labelledby", "year-label-" + ctx.yearId());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.isDateTime);
             i0.ɵɵadvance();
@@ -723,7 +737,7 @@ class DateInputComponent {
                         useExisting: forwardRef(() => DateInputComponent),
                         multi: true
                     }
-                ], template: "<div class=\"form-date\">\n  <div class=\"form-group form-group-day\">\n    <label class=\"form-label\" [for]=\"dayId()\">{{'Day' | rpxTranslate}}</label>\n    <input #dayInput\n           class=\"form-control\"\n           [id]=\"dayId()\"\n           [name]=\"dayId()\"\n           type=\"text\"\n           pattern=\"[0-9]*\"\n           inputmode=\"numeric\"\n           [value]=\"displayDay\"\n           (change)=\"dayChange(dayInput.value)\"\n           (keyup)=\"dayChange(dayInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n\n  <div class=\"form-group form-group-month\">\n    <label class=\"form-label\" [for]=\"monthId()\">{{'Month' | rpxTranslate}}</label>\n    <input #monthInput\n           class=\"form-control\"\n           [id]=\"monthId()\"\n           [name]=\"monthId()\"\n           type=\"text\"\n           pattern=\"[0-9]*\"\n           inputmode=\"numeric\"\n           [value]=\"displayMonth\"\n           (change)=\"monthChange(monthInput.value)\"\n           (keyup)=\"monthChange(monthInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n\n  <div class=\"form-group form-group-year\">\n    <label class=\"form-label\" [for]=\"yearId()\">{{'Year' | rpxTranslate}}</label>\n    <input #yearInput\n           class=\"form-control\"\n           [id]=\"yearId()\"\n           [name]=\"yearId()\"\n           type=\"text\"\n           pattern=\"[0-9]*\"\n           inputmode=\"numeric\"\n           [value]=\"displayYear\"\n           (change)=\"yearChange(yearInput.value)\"\n           (keyup)=\"yearChange(yearInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n\n  <div class=\"form-group form-group-hour\" *ngIf=\"isDateTime\">\n    <label class=\"form-label\" [for]=\"hourId()\">{{'Hour' | rpxTranslate}}</label>\n    <input #hourInput\n           class=\"form-control\"\n           [id]=\"hourId()\"\n           [name]=\"hourId()\"\n           type=\"number\"\n           [value]=\"displayHour\"\n           (input)=\"hourChange(hourInput.value)\"\n           (keyup)=\"hourChange(hourInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n\n  <div class=\"form-group form-group-minute\" *ngIf=\"isDateTime\">\n    <label class=\"form-label\" [for]=\"minuteId()\">{{'Minute' | rpxTranslate}}</label>\n    <input #minuteInput\n           class=\"form-control\"\n           [id]=\"minuteId()\"\n           [name]=\"minuteId()\"\n           type=\"number\"\n           [value]=\"displayMinute\"\n           (input)=\"minuteChange(minuteInput.value)\"\n           (keyup)=\"minuteChange(minuteInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n\n  <div class=\"form-group form-group-second\" *ngIf=\"isDateTime\">\n    <label class=\"form-label\" [for]=\"secondId()\">{{'Second' | rpxTranslate}}</label>\n    <input #secondInput\n           class=\"form-control\"\n           [id]=\"secondId()\"\n           [name]=\"secondId()\"\n           type=\"number\"\n           [value]=\"displaySecond\"\n           (input)=\"secondChange(secondInput.value)\"\n           (keyup)=\"secondChange(secondInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n</div>\n" }]
+                ], template: "<div class=\"form-date\">\n  <div class=\"form-group form-group-day\">\n    <span class=\"form-label\" [attr.id]=\"'day-label-'+dayId()\">{{'Day' | rpxTranslate}}</span>\n    <input #dayInput\n           class=\"form-control\"\n           [id]=\"dayId()\"\n           [name]=\"dayId()\"\n           type=\"text\"\n           pattern=\"[0-9]*\"\n           inputmode=\"numeric\"\n           [attr.aria-labelledby]=\"'day-label-'+dayId()\"\n           [value]=\"displayDay\"\n           (change)=\"dayChange(dayInput.value)\"\n           (keyup)=\"dayChange(dayInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n\n  <div class=\"form-group form-group-month\">\n    <span class=\"form-label\" [attr.id]=\"'month-label-'+ monthId()\">{{'Month' | rpxTranslate}}</span>\n    <input #monthInput\n           class=\"form-control\"\n           [id]=\"monthId()\"\n           [name]=\"monthId()\"\n           type=\"text\"\n           pattern=\"[0-9]*\"\n           inputmode=\"numeric\"\n           [attr.aria-labelledby]=\"'month-label-'+ monthId()\"\n           [value]=\"displayMonth\"\n           (change)=\"monthChange(monthInput.value)\"\n           (keyup)=\"monthChange(monthInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n\n  <div class=\"form-group form-group-year\">\n    <span class=\"form-label\" [attr.id]=\"'year-label-'+ yearId()\">{{'Year' | rpxTranslate}}</span>\n    <input #yearInput\n           class=\"form-control\"\n           [id]=\"yearId()\"\n           [name]=\"yearId()\"\n           type=\"text\"\n           pattern=\"[0-9]*\"\n           inputmode=\"numeric\"\n           [attr.aria-labelledby]=\"'year-label-'+ yearId()\"\n           [value]=\"displayYear\"\n           (change)=\"yearChange(yearInput.value)\"\n           (keyup)=\"yearChange(yearInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n\n  <div class=\"form-group form-group-hour\" *ngIf=\"isDateTime\">\n    <span class=\"form-label\" [attr.id]=\"'hour-label-'+ hourId()\">{{'Hour' | rpxTranslate}}</span>\n    <input #hourInput\n           class=\"form-control\"\n           [id]=\"hourId()\"\n           [name]=\"hourId()\"\n           type=\"number\"\n           [attr.aria-labelledby]=\"'hour-label-'+ hourId()\"\n           [value]=\"displayHour\"\n           (input)=\"hourChange(hourInput.value)\"\n           (keyup)=\"hourChange(hourInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n\n  <div class=\"form-group form-group-minute\" *ngIf=\"isDateTime\">\n    <span class=\"form-label\" [attr.id]=\"'minute-label-'+ hourId()\">{{'Minute' | rpxTranslate}}</span>\n    <input #minuteInput\n           class=\"form-control\"\n           [id]=\"minuteId()\"\n           [name]=\"minuteId()\"\n           type=\"number\"\n           [attr.aria-labelledby]=\"'minute-label-'+ minuteId()\"\n           [value]=\"displayMinute\"\n           (input)=\"minuteChange(minuteInput.value)\"\n           (keyup)=\"minuteChange(minuteInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n\n  <div class=\"form-group form-group-second\" *ngIf=\"isDateTime\">\n    <span class=\"form-label\" [attr.id]=\"'second-label-'+ secondId()\">{{'Second' | rpxTranslate}}</span>\n    <label class=\"form-label\" [for]=\"secondId()\">{{'Second' | rpxTranslate}}</label>\n    <input #secondInput\n           class=\"form-control\"\n           [id]=\"secondId()\"\n           [name]=\"secondId()\"\n           type=\"number\"\n           [attr.aria-labelledby]=\"'second-label-'+ secondId()\"\n           [value]=\"displaySecond\"\n           (input)=\"secondChange(secondInput.value)\"\n           (keyup)=\"secondChange(secondInput.value)\"\n           (focus)=\"inputFocus()\"\n           [ngClass]=\"{'govuk-input--error': isInvalid}\">\n  </div>\n</div>\n" }]
     }], null, { id: [{
             type: Input
         }], mandatory: [{
@@ -3272,6 +3286,7 @@ class CaseField {
     hiddenCannotChange;
     label;
     order;
+    parent;
     field_type;
     hint_text;
     security_label;
@@ -3394,6 +3409,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;
     }
@@ -3401,6 +3432,10 @@ class CaseField {
         return this.isTranslatedFlag;
     }
 }
+__decorate([
+    Exclude(),
+    __metadata("design:type", CaseField)
+], CaseField.prototype, "parent", void 0);
 __decorate([
     Type(() => FieldType),
     __metadata("design:type", FieldType)
@@ -3483,6 +3518,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 {
@@ -12254,6 +12295,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));
                 }
@@ -14195,8 +14237,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);
@@ -14206,7 +14248,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");
@@ -14217,11 +14259,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);
@@ -14231,7 +14273,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) {
@@ -14266,7 +14308,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 }); })();
 
@@ -14357,49 +14399,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");
@@ -14438,6 +14480,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;
@@ -14716,7 +14759,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");
@@ -14726,7 +14769,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());
@@ -14746,7 +14789,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: [{
@@ -14789,6 +14832,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 = {
@@ -22115,7 +22161,7 @@ class QueryWriteAddDocumentsComponent {
         this.mockDocumentCaseField = Object.assign(new CaseField(), {
             id: QueryWriteAddDocumentsComponent.DOCUMENTS_FORM_CONTROL_NAME,
             label: this.label ? this.label : 'Attach a document',
-            hint_text: this.hintText,
+            hint_text: this.hintText ? this.hintText : 'Only attach documents related to your query. For all other documents use your case management document upload function.',
             display_context: 'OPTIONAL',
             display_context_parameter: '#COLLECTION(allowInsert,allowUpdate)',
             field_type: Object.assign(new FieldType(), {
@@ -23502,7 +23548,7 @@ class FieldReadComponent extends AbstractFieldReadComponent {
             const componentClass = this.paletteService.getFieldComponentClass(this.caseField, false);
             const injector = Injector.create({
                 providers: [],
-                parent: this.fieldContainer.injector
+                parent: this.fieldContainer?.injector
             });
             const component = this.resolver.resolveComponentFactory(componentClass).create(injector);
             // Provide component @Inputs
@@ -23523,7 +23569,7 @@ class FieldReadComponent extends AbstractFieldReadComponent {
             component.instance['caseReference'] = this.caseReference;
             component.instance['context'] = this.context;
             component.instance['labelCanBeTranslated'] = this.labelCanBeTranslated(this.caseField);
-            this.fieldContainer.insert(component.hostView);
+            this.fieldContainer?.insert(component.hostView);
         });
     }
     labelCanBeTranslated(caseField) {
@@ -23871,7 +23917,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;
@@ -23879,35 +23925,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 {
@@ -23920,30 +23965,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$1.CdkConnectedOverlay, i2$1.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: [{
@@ -24224,10 +24276,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);
@@ -24508,7 +24560,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()();
@@ -24526,11 +24578,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$1.CdkNestedTreeNode, i7$1.CdkTreeNodeDef, i7$1.CdkTreeNodeToggle, i7$1.CdkTree, i7$1.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$1.CdkNestedTreeNode, i7$1.CdkTreeNodeDef, i7$1.CdkTreeNodeToggle, i7$1.CdkTree, i7$1.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: [{
@@ -28326,6 +28378,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");
@@ -28344,12 +28399,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 }); })();