@hmcts/ccd-case-ui-toolkit 5.0.25-case-file-view-all-document-count-v4 → 5.0.25-case-file-view-document-tree-functionalities-v6

package/bundles/hmcts-ccd-case-ui-toolkit.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/forms'), require('rx-polling'), require('rxjs'), require('@angular/common/http'), require('rxjs/operators'), require('class-transformer'), require('underscore'), require('moment'), require('util'), require('@edium/fsm'), require('ngx-md'), require('@angular/cdk/tree'), require('@angular/cdk/overlay'), require('@hmcts/media-viewer'), require('@angular/material/dialog'), require('@nicky-lenaers/ngx-scroll-to'), require('@angular-material-components/datetime-picker'), require('@angular-material-components/moment-adapter'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/autocomplete'), require('@angular/material/core'), require('@hmcts/ccpay-web-component'), require('@angular/cdk/portal'), require('@angular/material/input'), require('ngx-pagination'), require('@angular/material/tabs')) :
     typeof define === 'function' && define.amd ? define('@hmcts/ccd-case-ui-toolkit', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/forms', 'rx-polling', 'rxjs', '@angular/common/http', 'rxjs/operators', 'class-transformer', 'underscore', 'moment', 'util', '@edium/fsm', 'ngx-md', '@angular/cdk/tree', '@angular/cdk/overlay', '@hmcts/media-viewer', '@angular/material/dialog', '@nicky-lenaers/ngx-scroll-to', '@angular-material-components/datetime-picker', '@angular-material-components/moment-adapter', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/autocomplete', '@angular/material/core', '@hmcts/ccpay-web-component', '@angular/cdk/portal', '@angular/material/input', 'ngx-pagination', '@angular/material/tabs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.hmcts = global.hmcts || {}, global.hmcts["ccd-case-ui-toolkit"] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.forms, global["rx-polling"], global.rxjs, global.ng.common.http, global.rxjs.operators, global["class-transformer"], global.underscore, global.moment, global.util, global["@edium/fsm"], global["ngx-md"], global.ng.cdk.tree, global.ng.cdk.overlay, global.i4, global.ng.material.dialog, global["@nicky-lenaers/ngx-scroll-to"], global["@angular-material-components/datetime-picker"], global["@angular-material-components/moment-adapter"], global.ng.material.datepicker, global.ng.material.formField, global.ng.material.autocomplete, global.ng.material.core, global["@hmcts/ccpay-web-component"], global.ng.cdk.portal, global.ng.material.input, global["ngx-pagination"], global.ng.material.tabs));
-})(this, (function (exports, i0, i1, i1$1, i1$2, polling, rxjs, i1$3, operators, classTransformer, _, moment, util, fsm, i1$4, i2, i1$5, i4, i1$6, i2$1, i4$1, momentAdapter, i5, i6, i5$1, i6$1, i3, i6$2, input, i1$7, i10) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.hmcts = global.hmcts || {}, global.hmcts["ccd-case-ui-toolkit"] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.forms, global["rx-polling"], global.rxjs, global.ng.common.http, global.rxjs.operators, global["class-transformer"], global.underscore, global.moment, global.util, global["@edium/fsm"], global["ngx-md"], global.ng.cdk.tree, global.ng.cdk.overlay, global.i5, global.ng.material.dialog, global["@nicky-lenaers/ngx-scroll-to"], global["@angular-material-components/datetime-picker"], global["@angular-material-components/moment-adapter"], global.ng.material.datepicker, global.ng.material.formField, global.ng.material.autocomplete, global.ng.material.core, global["@hmcts/ccpay-web-component"], global.ng.cdk.portal, global.ng.material.input, global["ngx-pagination"], global.ng.material.tabs));
+})(this, (function (exports, i0, i1, i1$1, i1$2, polling, rxjs, i1$3, operators, classTransformer, _, moment, util, fsm, i1$4, i4, i1$5, i5, i1$6, i2, i4$1, momentAdapter, i5$1, i6, i5$2, i6$1, i3, i6$2, input, i1$7, i10) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,15 +33,15 @@
     var ___namespace = /*#__PURE__*/_interopNamespace(_);
     var moment__namespace = /*#__PURE__*/_interopNamespace(moment);
     var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
     var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
@@ -117,7 +117,7 @@
             i0__namespace.ɵɵtextInterpolate(ctx_r1.workhours);
         }
     }
-    var _c0$Q = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
+    var _c0$P = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
     var _c1$n = ["[footerSolsNavLinks]", "[footerCaseWorkerNavLinks]"];
     var FooterComponent = /** @class */ (function () {
         function FooterComponent() {
@@ -127,7 +127,7 @@
     FooterComponent.ɵfac = function FooterComponent_Factory(t) { return new (t || FooterComponent)(); };
     FooterComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: FooterComponent, selectors: [["cut-footer-bar"]], inputs: { email: "email", isSolicitor: "isSolicitor", phone: "phone", workhours: "workhours" }, ngContentSelectors: _c1$n, decls: 4, vars: 4, consts: [["id", "footer", "role", "footer", 1, "group", "js-footer"], [1, "footer-wrapper"], ["class", "footer-meta", 4, "ngIf"], [1, "footer-meta"], [1, "footer-meta-inner"], [1, "open-government-licence"], [1, "logo"], ["href", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", "rel", "license"], [1, "copyright"], ["href", "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/"], [1, "title"], [1, "footer-text"], [1, "email"], [3, "href"], [1, "phone"], [1, "work-hours"]], template: function FooterComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0__namespace.ɵɵprojectionDef(_c0$Q);
+                i0__namespace.ɵɵprojectionDef(_c0$P);
                 i0__namespace.ɵɵelementStart(0, "footer", 0);
                 i0__namespace.ɵɵelementStart(1, "div", 1);
                 i0__namespace.ɵɵtemplate(2, FooterComponent_div_2_Template, 15, 0, "div", 2);
@@ -206,7 +206,7 @@
             i0__namespace.ɵɵtextInterpolate(ctx_r2.title);
         }
     }
-    var _c0$P = [[["", "headerNavigation", ""]]];
+    var _c0$O = [[["", "headerNavigation", ""]]];
     var _c1$m = ["[headerNavigation]"];
     var HeaderBarComponent = /** @class */ (function () {
         function HeaderBarComponent() {
@@ -220,7 +220,7 @@
     HeaderBarComponent.ɵfac = function HeaderBarComponent_Factory(t) { return new (t || HeaderBarComponent)(); };
     HeaderBarComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: HeaderBarComponent, selectors: [["cut-header-bar"]], inputs: { title: "title", isSolicitor: "isSolicitor", username: "username" }, outputs: { signOutRequest: "signOutRequest" }, ngContentSelectors: _c1$m, decls: 15, vars: 8, consts: [["role", "banner", "id", "global-header", 1, "with-proposition"], [1, "header-wrapper"], [1, "header-global"], [4, "ngIf"], ["class", "global-header", 4, "ngIf"], [1, "header-proposition"], [1, "content"], ["href", "#proposition-links", 1, "js-header-toggle", "menu"], ["id", "proposition-menu", 4, "ngIf"], [1, "proposition-right"], ["id", "user-name"], ["id", "sign-out", "href", "javascript:void(0)", 3, "click"], ["href", "https://www.gov.uk", "title", "Go to the GOV.UK homepage", "id", "logo", 1, "content", 2, "margin-left", "0px"], ["src", "/img/gov.uk_logotype_crown_invert_trans.png?0.23.0", "width", "36", "height", "32", "alt", ""], [1, "global-header"], [1, "title"], ["id", "proposition-menu"], [1, "title-solicitor"], ["id", "proposition-name"]], template: function HeaderBarComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0__namespace.ɵɵprojectionDef(_c0$P);
+                i0__namespace.ɵɵprojectionDef(_c0$O);
                 i0__namespace.ɵɵelementStart(0, "header", 0);
                 i0__namespace.ɵɵelementStart(1, "div", 1);
                 i0__namespace.ɵɵelementStart(2, "div", 2);
@@ -281,7 +281,7 @@
                 }] });
     })();
 
-    var _c0$O = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
+    var _c0$N = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
     var _c1$l = ["[leftNavLinks]", "[rightNavLinks]"];
     var NavigationComponent = /** @class */ (function () {
         function NavigationComponent() {
@@ -291,7 +291,7 @@
     NavigationComponent.ɵfac = function NavigationComponent_Factory(t) { return new (t || NavigationComponent)(); };
     NavigationComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["cut-nav-bar"]], inputs: { isSolicitor: "isSolicitor" }, ngContentSelectors: _c1$l, decls: 4, vars: 2, consts: [[1, "cut-nav-bar"]], template: function NavigationComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0__namespace.ɵɵprojectionDef(_c0$O);
+                i0__namespace.ɵɵprojectionDef(_c0$N);
                 i0__namespace.ɵɵelementStart(0, "div");
                 i0__namespace.ɵɵelementStart(1, "nav", 0);
                 i0__namespace.ɵɵprojection(2);
@@ -436,7 +436,7 @@
             }], null, null);
     })();
 
-    var _c0$N = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
+    var _c0$M = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
     var _c1$k = ["[topBody]", "[leftBody]", "[rightBody]"];
     var BodyComponent = /** @class */ (function () {
         function BodyComponent() {
@@ -446,7 +446,7 @@
     BodyComponent.ɵfac = function BodyComponent_Factory(t) { return new (t || BodyComponent)(); };
     BodyComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: BodyComponent, selectors: [["cut-body"]], ngContentSelectors: _c1$k, decls: 4, vars: 0, consts: [[1, "global-display"]], template: function BodyComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0__namespace.ɵɵprojectionDef(_c0$N);
+                i0__namespace.ɵɵprojectionDef(_c0$M);
                 i0__namespace.ɵɵelementStart(0, "div", 0);
                 i0__namespace.ɵɵprojection(1);
                 i0__namespace.ɵɵprojection(2, 1);
@@ -793,7 +793,7 @@
         return typeof state === "function" ? receiver === state : state.has(receiver);
     }
 
-    var _c0$M = function (a0) { return { "govuk-input--error": a0 }; };
+    var _c0$L = function (a0) { return { "govuk-input--error": a0 }; };
     function DateInputComponent_div_16_Template(rf, ctx) {
         if (rf & 1) {
             var _r8_1 = i0__namespace.ɵɵgetCurrentView();
@@ -811,7 +811,7 @@
             i0__namespace.ɵɵadvance(1);
             i0__namespace.ɵɵproperty("for", ctx_r3.hourId());
             i0__namespace.ɵɵadvance(2);
-            i0__namespace.ɵɵproperty("id", ctx_r3.hourId())("name", ctx_r3.hourId())("value", ctx_r3.displayHour)("ngClass", i0__namespace.ɵɵpureFunction1(5, _c0$M, ctx_r3.isInvalid));
+            i0__namespace.ɵɵproperty("id", ctx_r3.hourId())("name", ctx_r3.hourId())("value", ctx_r3.displayHour)("ngClass", i0__namespace.ɵɵpureFunction1(5, _c0$L, ctx_r3.isInvalid));
         }
     }
     function DateInputComponent_div_17_Template(rf, ctx) {
@@ -831,7 +831,7 @@
             i0__namespace.ɵɵadvance(1);
             i0__namespace.ɵɵproperty("for", ctx_r4.minuteId());
             i0__namespace.ɵɵadvance(2);
-            i0__namespace.ɵɵproperty("id", ctx_r4.minuteId())("name", ctx_r4.minuteId())("value", ctx_r4.displayMinute)("ngClass", i0__namespace.ɵɵpureFunction1(5, _c0$M, ctx_r4.isInvalid));
+            i0__namespace.ɵɵproperty("id", ctx_r4.minuteId())("name", ctx_r4.minuteId())("value", ctx_r4.displayMinute)("ngClass", i0__namespace.ɵɵpureFunction1(5, _c0$L, ctx_r4.isInvalid));
         }
     }
     function DateInputComponent_div_18_Template(rf, ctx) {
@@ -851,7 +851,7 @@
             i0__namespace.ɵɵadvance(1);
             i0__namespace.ɵɵproperty("for", ctx_r5.secondId());
             i0__namespace.ɵɵadvance(2);
-            i0__namespace.ɵɵproperty("id", ctx_r5.secondId())("name", ctx_r5.secondId())("value", ctx_r5.displaySecond)("ngClass", i0__namespace.ɵɵpureFunction1(5, _c0$M, ctx_r5.isInvalid));
+            i0__namespace.ɵɵproperty("id", ctx_r5.secondId())("name", ctx_r5.secondId())("value", ctx_r5.displaySecond)("ngClass", i0__namespace.ɵɵpureFunction1(5, _c0$L, ctx_r5.isInvalid));
         }
     }
     var DateInputComponent = /** @class */ (function () {
@@ -1085,15 +1085,15 @@
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵproperty("for", ctx.dayId());
                 i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0__namespace.ɵɵpureFunction1(18, _c0$M, ctx.isInvalid));
+                i0__namespace.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0__namespace.ɵɵpureFunction1(18, _c0$L, ctx.isInvalid));
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵproperty("for", ctx.monthId());
                 i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0__namespace.ɵɵpureFunction1(20, _c0$M, ctx.isInvalid));
+                i0__namespace.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0__namespace.ɵɵpureFunction1(20, _c0$L, ctx.isInvalid));
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵproperty("for", ctx.yearId());
                 i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0__namespace.ɵɵpureFunction1(22, _c0$M, ctx.isInvalid));
+                i0__namespace.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0__namespace.ɵɵpureFunction1(22, _c0$L, ctx.isInvalid));
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵproperty("ngIf", ctx.isDateTime);
                 i0__namespace.ɵɵadvance(1);
@@ -1174,7 +1174,7 @@
             i0__namespace.ɵɵelementContainerEnd();
         }
     }
-    var _c0$L = ["*"];
+    var _c0$K = ["*"];
     exports.AlertMessageType = void 0;
     (function (AlertMessageType) {
         AlertMessageType["WARNING"] = "warning";
@@ -1195,7 +1195,7 @@
     AlertComponent.TYPE_ERROR = 'error';
     AlertComponent.TYPE_INFORMATION = 'information';
     AlertComponent.ɵfac = function AlertComponent_Factory(t) { return new (t || AlertComponent)(); };
-    AlertComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: AlertComponent, selectors: [["cut-alert"]], inputs: { type: "type", showIcon: "showIcon" }, ngContentSelectors: _c0$L, decls: 10, vars: 10, consts: [[1, "hmcts-banner"], [3, "ngSwitch"], [4, "ngSwitchCase"], [1, "hmcts-banner__message"], [1, "hmcts-banner__assistive"], ["fill", "currentColor", "role", "presentation", "focusable", "false", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 25 25", "height", "25", "width", "25", 1, "hmcts-banner__icon"], ["d", "M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"], ["d", "M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"], ["d", "M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n      C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z"]], template: function AlertComponent_Template(rf, ctx) {
+    AlertComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: AlertComponent, selectors: [["cut-alert"]], inputs: { type: "type", showIcon: "showIcon" }, ngContentSelectors: _c0$K, decls: 10, vars: 10, consts: [[1, "hmcts-banner"], [3, "ngSwitch"], [4, "ngSwitchCase"], [1, "hmcts-banner__message"], [1, "hmcts-banner__assistive"], ["fill", "currentColor", "role", "presentation", "focusable", "false", "xmlns", "http://www.w3.org/2000/svg", "viewBox", "0 0 25 25", "height", "25", "width", "25", 1, "hmcts-banner__icon"], ["d", "M13.6,15.4h-2.3v-4.5h2.3V15.4z M13.6,19.8h-2.3v-2.2h2.3V19.8z M0,23.2h25L12.5,2L0,23.2z"], ["d", "M25,6.2L8.7,23.2L0,14.1l4-4.2l4.7,4.9L21,2L25,6.2z"], ["d", "M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\n      C13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z"]], template: function AlertComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵprojectionDef();
                 i0__namespace.ɵɵelementStart(0, "div", 0);
@@ -1301,7 +1301,7 @@
             }], null, null);
     })();
 
-    var _c0$K = function (a0) { return { "js-hidden": a0 }; };
+    var _c0$J = function (a0) { return { "js-hidden": a0 }; };
     var _c1$j = ["*"];
     var TabComponent = /** @class */ (function () {
         function TabComponent() {
@@ -1317,7 +1317,7 @@
                 i0__namespace.ɵɵelementEnd();
             }
             if (rf & 2) {
-                i0__namespace.ɵɵproperty("id", ctx.id)("ngClass", i0__namespace.ɵɵpureFunction1(3, _c0$K, !ctx.selected));
+                i0__namespace.ɵɵproperty("id", ctx.id)("ngClass", i0__namespace.ɵɵpureFunction1(3, _c0$J, !ctx.selected));
                 i0__namespace.ɵɵattribute("aria-hidden", !ctx.selected);
             }
         }, directives: [i1__namespace.NgClass], styles: [".tabs-toggle[_ngcontent-%COMP%]{display:block;padding:10px 15px 3px;margin-bottom:8px}.tabs-toggle[aria-selected=true][_ngcontent-%COMP%]{color:#0b0c0c;text-decoration:none;border-bottom:none}.tabs-toggle[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#005ea5}@media (max-width:640px){.tabs-list[_ngcontent-%COMP%]{border-bottom:1px solid #bfc1c3;margin-left:-15px;margin-right:-15px}.tabs-toggle[_ngcontent-%COMP%]{border-top:1px solid #bfc1c3}.tabs-toggle[_ngcontent-%COMP%]:focus{color:#0b0c0c;outline:none}}@media (min-width:641px){.tabs-panel[_ngcontent-%COMP%]{border-top:1px solid #bfc1c3;clear:both;overflow:hidden}.tabs-list[_ngcontent-%COMP%]{float:left}.tabs-list-item[_ngcontent-%COMP%]{float:left;position:relative;bottom:-1px;padding-top:10px}.tabs-toggle[_ngcontent-%COMP%]{background-color:#dee0e2;border:1px solid transparent;float:left;margin:0 6px 0 0;text-decoration:none}.tabs-toggle[_ngcontent-%COMP%]:visited{color:#005ea5}.tabs-toggle-selected[_ngcontent-%COMP%], .tabs-toggle[aria-selected=true][_ngcontent-%COMP%]{background-color:#fff;border-bottom:0;border-color:#bfc1c3;padding-bottom:11px;margin-bottom:0;color:#0b0c0c}}"] });
@@ -1340,7 +1340,7 @@
                 }] });
     })();
 
-    var _c0$J = ["tab"];
+    var _c0$I = ["tab"];
     var _c1$i = function () { return ["."]; };
     var _c2$3 = function (a0) { return { "tabs-toggle-selected": a0 }; };
     function TabsComponent_li_2_Template(rf, ctx) {
@@ -1394,7 +1394,7 @@
             }
         }, viewQuery: function TabsComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0__namespace.ɵɵviewQuery(_c0$J, 1);
+                i0__namespace.ɵɵviewQuery(_c0$I, 1);
             }
             if (rf & 2) {
                 var _t = void 0;
@@ -1473,7 +1473,7 @@
             }], null, null);
     })();
 
-    var _c0$I = function (a0, a1) { return { caseLocked: a0, someoneViewing: a1 }; };
+    var _c0$H = function (a0, a1) { return { caseLocked: a0, someoneViewing: a1 }; };
     var ActivityBannerComponent = /** @class */ (function () {
         function ActivityBannerComponent() {
         }
@@ -1494,7 +1494,7 @@
                 i0__namespace.ɵɵelementEnd();
             }
             if (rf & 2) {
-                i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(4, _c0$I, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
+                i0__namespace.ɵɵproperty("ngClass", i0__namespace.ɵɵpureFunction2(4, _c0$H, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵpropertyInterpolate("alt", ctx.description);
                 i0__namespace.ɵɵpropertyInterpolate("src", ctx.imageLink, i0__namespace.ɵɵsanitizeUrl);
@@ -6404,10 +6404,9 @@
     })();
 
     var CaseFileViewService = /** @class */ (function () {
-        function CaseFileViewService(http, appConfig, errorService) {
+        function CaseFileViewService(http, appConfig) {
             this.http = http;
             this.appConfig = appConfig;
-            this.errorService = errorService;
         }
         /**
          * Retrieves the categories and documents for a case.
@@ -6438,12 +6437,12 @@
         };
         return CaseFileViewService;
     }());
-    CaseFileViewService.ɵfac = function CaseFileViewService_Factory(t) { return new (t || CaseFileViewService)(i0__namespace.ɵɵinject(HttpService), i0__namespace.ɵɵinject(AbstractAppConfig), i0__namespace.ɵɵinject(HttpErrorService)); };
+    CaseFileViewService.ɵfac = function CaseFileViewService_Factory(t) { return new (t || CaseFileViewService)(i0__namespace.ɵɵinject(HttpService), i0__namespace.ɵɵinject(AbstractAppConfig)); };
     CaseFileViewService.ɵprov = i0__namespace.ɵɵdefineInjectable({ token: CaseFileViewService, factory: CaseFileViewService.ɵfac });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseFileViewService, [{
                 type: i0.Injectable
-            }], function () { return [{ type: HttpService }, { type: AbstractAppConfig }, { type: HttpErrorService }]; }, null);
+            }], function () { return [{ type: HttpService }, { type: AbstractAppConfig }]; }, null);
     })();
 
     var DocumentManagementService = /** @class */ (function () {
@@ -8860,7 +8859,7 @@
         return IsCompoundPipe;
     }());
     IsCompoundPipe.COMPOUND_TYPES = [
-        'Complex', 'Label', 'AddressGlobal', 'AddressUK', 'AddressGlobalUK', 'CasePaymentHistoryViewer', 'CaseHistoryViewer', 'Organisation', 'WaysToPay'
+        'Complex', 'Label', 'AddressGlobal', 'AddressUK', 'AddressGlobalUK', 'CasePaymentHistoryViewer', 'CaseHistoryViewer', 'Organisation', 'WaysToPay', 'ComponentLauncher'
     ];
     IsCompoundPipe.EXCLUDE = [
         'CaseLink', 'JudicialUser'
@@ -9204,7 +9203,7 @@
             }], null, null);
     })();
 
-    var _c0$H = ["writeComplexFieldComponent"];
+    var _c0$G = ["writeComplexFieldComponent"];
     function WriteAddressFieldComponent_div_1_div_4_span_4_Template(rf, ctx) {
         if (rf & 1) {
             i0__namespace.ɵɵelementStart(0, "span", 14);
@@ -9418,7 +9417,7 @@
     WriteAddressFieldComponent.ɵfac = function WriteAddressFieldComponent_Factory(t) { return new (t || WriteAddressFieldComponent)(i0__namespace.ɵɵdirectiveInject(AddressesService), i0__namespace.ɵɵdirectiveInject(IsCompoundPipe)); };
     WriteAddressFieldComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: WriteAddressFieldComponent, selectors: [["ccd-write-address-field"]], viewQuery: function WriteAddressFieldComponent_Query(rf, ctx) {
             if (rf & 1) {
-                i0__namespace.ɵɵviewQuery(_c0$H, 1);
+                i0__namespace.ɵɵviewQuery(_c0$G, 1);
                 i0__namespace.ɵɵviewQuery(FocusElementDirective, 1);
             }
             if (rf & 2) {
@@ -9482,6 +9481,12 @@
         return CategoriesAndDocuments;
     }());
 
+    var DocumentTreeNodeType;
+    (function (DocumentTreeNodeType) {
+        DocumentTreeNodeType["FOLDER"] = "folder";
+        DocumentTreeNodeType["DOCUMENT"] = "document";
+    })(DocumentTreeNodeType || (DocumentTreeNodeType = {}));
+
     var DocumentTreeNode = /** @class */ (function () {
         function DocumentTreeNode() {
         }
@@ -9507,9 +9512,9 @@
             var _a, _b;
             var sortAscending = function () {
                 return function (a, b) {
-                    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
-                    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
-                    if (a.type === 'category' || b.type === 'category') {
+                    var nameA = a.name.toUpperCase();
+                    var nameB = b.name.toUpperCase();
+                    if (a.type === DocumentTreeNodeType.FOLDER || b.type === DocumentTreeNodeType.FOLDER) {
                         return 0;
                     }
                     if (nameA < nameB) {
@@ -9529,9 +9534,9 @@
             var _a, _b;
             var sortDescending = function () {
                 return function (a, b) {
-                    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
-                    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
-                    if (a.type === 'category' || b.type === 'category') {
+                    var nameA = a.name.toUpperCase();
+                    var nameB = b.name.toUpperCase();
+                    if (a.type === DocumentTreeNodeType.FOLDER || b.type === DocumentTreeNodeType.FOLDER) {
                         return 0;
                     }
                     if (nameA > nameB) {
@@ -9582,198 +9587,6 @@
         __metadata("design:paramtypes", [])
     ], DocumentTreeNode.prototype, "childDocumentCount", null);
 
-    var categoriesAndDocumentsTestData = {
-        case_version: 1,
-        categories: [
-            {
-                category_id: 'Beers',
-                category_name: 'Beers',
-                category_order: 1,
-                documents: [
-                    {
-                        document_url: '/test',
-                        document_filename: 'Lager encyclopedia',
-                        document_binary_url: '/test/binary',
-                        attribute_path: '',
-                        upload_timestamp: ''
-                    },
-                    {
-                        document_url: '/test',
-                        document_filename: 'Beers encyclopedia',
-                        document_binary_url: '/test/binary',
-                        attribute_path: '',
-                        upload_timestamp: ''
-                    },
-                    {
-                        document_url: '/test',
-                        document_filename: 'Ale encyclopedia',
-                        document_binary_url: '/test/binary',
-                        attribute_path: '',
-                        upload_timestamp: ''
-                    }
-                ],
-                sub_categories: [
-                    {
-                        category_id: 'BeersBitters',
-                        category_name: 'Bitters',
-                        category_order: 1,
-                        documents: [],
-                        sub_categories: []
-                    },
-                    {
-                        category_id: 'BeersAmerican',
-                        category_name: 'American',
-                        category_order: 2,
-                        documents: [],
-                        sub_categories: []
-                    },
-                    {
-                        category_id: 'BeersAsian',
-                        category_name: 'Asian',
-                        category_order: 3,
-                        documents: [],
-                        sub_categories: []
-                    }
-                ]
-            },
-            {
-                category_id: 'Wines',
-                category_name: 'Wines',
-                category_order: 2,
-                documents: [],
-                sub_categories: [
-                    {
-                        category_id: 'WinesFrench',
-                        category_name: 'French',
-                        category_order: 1,
-                        documents: [],
-                        sub_categories: []
-                    },
-                    {
-                        category_id: 'WinesItalian',
-                        category_name: 'Italian',
-                        category_order: 2,
-                        documents: [],
-                        sub_categories: []
-                    }
-                ]
-            },
-            {
-                category_id: 'Spirits',
-                category_name: 'Spirits',
-                category_order: 3,
-                documents: [],
-                sub_categories: [
-                    {
-                        category_id: 'SpiritsWhisky',
-                        category_name: 'Scotch whisky',
-                        category_order: 1,
-                        documents: [],
-                        sub_categories: [
-                            {
-                                category_id: 'WhiskyHighland',
-                                category_name: 'Highland',
-                                category_order: 1,
-                                documents: [],
-                                sub_categories: [
-                                    {
-                                        category_id: 'WhiskyHighland1',
-                                        category_name: 'Highland 1',
-                                        category_order: 1,
-                                        documents: [],
-                                        sub_categories: []
-                                    }
-                                ]
-                            },
-                            {
-                                category_id: 'WhiskyLowland',
-                                category_name: 'Lowland',
-                                category_order: 2,
-                                documents: [],
-                                sub_categories: [
-                                    {
-                                        category_id: 'WhiskyLowland1',
-                                        category_name: 'Lowland 1',
-                                        category_order: 1,
-                                        documents: [
-                                            {
-                                                document_url: '/test',
-                                                document_filename: 'Details about Whisky Lowland 1',
-                                                document_binary_url: '/test/binary',
-                                                attribute_path: '',
-                                                upload_timestamp: ''
-                                            }
-                                        ],
-                                        sub_categories: []
-                                    },
-                                    {
-                                        category_id: 'WhiskyLowland2',
-                                        category_name: 'Lowland 2',
-                                        category_order: 2,
-                                        documents: [],
-                                        sub_categories: []
-                                    }
-                                ]
-                            },
-                            {
-                                category_id: 'WhiskyIslay',
-                                category_name: 'Islay',
-                                category_order: 3,
-                                documents: [
-                                    {
-                                        document_url: '/test',
-                                        document_filename: 'Details about Whisky Islay',
-                                        document_binary_url: '/test/binary',
-                                        attribute_path: '',
-                                        upload_timestamp: ''
-                                    },
-                                    {
-                                        document_url: '/test',
-                                        document_filename: 'More information about Whisky Islay',
-                                        document_binary_url: '/test/binary',
-                                        attribute_path: '',
-                                        upload_timestamp: ''
-                                    }
-                                ],
-                                sub_categories: []
-                            },
-                            {
-                                category_id: 'WhiskySpeyside',
-                                category_name: 'Speyside',
-                                category_order: 4,
-                                documents: [],
-                                sub_categories: []
-                            },
-                            {
-                                category_id: 'WhiskyCampbeltown',
-                                category_name: 'Campbeltown',
-                                category_order: 5,
-                                documents: [],
-                                sub_categories: []
-                            }
-                        ]
-                    }
-                ]
-            }
-        ],
-        uncategorised_documents: [
-            {
-                document_url: '/uncategorised-document-1',
-                document_filename: 'Uncategorised document 1',
-                document_binary_url: '/test/binary',
-                attribute_path: '',
-                upload_timestamp: ''
-            },
-            {
-                document_url: '/uncategorised-document-2',
-                document_filename: 'Uncategorised document 2',
-                document_binary_url: '/test/binary',
-                attribute_path: '',
-                upload_timestamp: ''
-            }
-        ]
-    };
-
     function CaseFileViewOverlayMenuComponent_ng_template_0_ng_container_1_Template(rf, ctx) {
         if (rf & 1) {
             i0__namespace.ɵɵelementContainerStart(0);
@@ -9924,56 +9737,84 @@
                 }] });
     })();
 
-    var _c0$G = ["tree"];
-    function CaseFileViewFolderComponent_cdk_nested_tree_node_7_Template(rf, ctx) {
+    function CaseFileViewFolderComponent_div_8_div_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0__namespace.ɵɵelementStart(0, "cdk-nested-tree-node", 7);
-            i0__namespace.ɵɵelementStart(1, "div", 8);
-            i0__namespace.ɵɵelementStart(2, "button", 9);
-            i0__namespace.ɵɵelement(3, "img", 10);
+            i0__namespace.ɵɵelementStart(0, "div");
+            i0__namespace.ɵɵtext(1, " No results found ");
+            i0__namespace.ɵɵelementEnd();
+        }
+    }
+    function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_3_Template(rf, ctx) {
+        if (rf & 1) {
+            i0__namespace.ɵɵelementStart(0, "cdk-nested-tree-node", 12);
+            i0__namespace.ɵɵelementStart(1, "div", 13);
+            i0__namespace.ɵɵelementStart(2, "button", 14);
+            i0__namespace.ɵɵelement(3, "img", 15);
             i0__namespace.ɵɵelementEnd();
-            i0__namespace.ɵɵelementStart(4, "span", 11);
+            i0__namespace.ɵɵelementStart(4, "span", 16);
             i0__namespace.ɵɵtext(5);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var node_r2 = ctx.$implicit;
+            var node_r4 = ctx.$implicit;
             i0__namespace.ɵɵadvance(5);
-            i0__namespace.ɵɵtextInterpolate(node_r2.name);
+            i0__namespace.ɵɵtextInterpolate(node_r4.name);
         }
     }
-    function CaseFileViewFolderComponent_cdk_nested_tree_node_8_Template(rf, ctx) {
+    function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template(rf, ctx) {
         if (rf & 1) {
-            i0__namespace.ɵɵelementStart(0, "cdk-nested-tree-node", 7);
-            i0__namespace.ɵɵelementStart(1, "div", 12);
-            i0__namespace.ɵɵelementStart(2, "button", 13);
-            i0__namespace.ɵɵelement(3, "img", 14);
-            i0__namespace.ɵɵelementStart(4, "span", 15);
+            i0__namespace.ɵɵelementStart(0, "cdk-nested-tree-node", 12);
+            i0__namespace.ɵɵelementStart(1, "div", 13);
+            i0__namespace.ɵɵelementStart(2, "button", 17);
+            i0__namespace.ɵɵelement(3, "img", 18);
+            i0__namespace.ɵɵelementStart(4, "span", 19);
             i0__namespace.ɵɵtext(5);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
-            i0__namespace.ɵɵelementStart(6, "span", 16);
+            i0__namespace.ɵɵelementStart(6, "span", 20);
             i0__namespace.ɵɵtext(7);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementStart(8, "div");
-            i0__namespace.ɵɵelementContainer(9, 17);
+            i0__namespace.ɵɵelementContainer(9, 21);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var node_r3 = ctx.$implicit;
-            var ctx_r1 = i0__namespace.ɵɵnextContext();
+            var node_r5 = ctx.$implicit;
+            var ctx_r3 = i0__namespace.ɵɵnextContext(2);
             i0__namespace.ɵɵadvance(2);
-            i0__namespace.ɵɵattribute("aria-label", "toggle " + node_r3.name);
-            i0__namespace.ɵɵadvance(3);
-            i0__namespace.ɵɵtextInterpolate(node_r3.childDocumentCount);
+            i0__namespace.ɵɵattribute("aria-label", "toggle " + node_r5.name);
+            i0__namespace.ɵɵadvance(1);
+            i0__namespace.ɵɵproperty("src", ctx_r3.nestedTreeControl.isExpanded(node_r5) ? "/assets/images/folder-open.png" : "/assets/images/folder.png", i0__namespace.ɵɵsanitizeUrl);
+            i0__namespace.ɵɵadvance(2);
+            i0__namespace.ɵɵtextInterpolate(node_r5.childDocumentCount);
             i0__namespace.ɵɵadvance(2);
-            i0__namespace.ɵɵtextInterpolate(node_r3.name);
+            i0__namespace.ɵɵtextInterpolate(node_r5.name);
             i0__namespace.ɵɵadvance(1);
-            i0__namespace.ɵɵclassProp("document-tree-invisible", !ctx_r1.nestedTreeControl.isExpanded(node_r3));
+            i0__namespace.ɵɵclassProp("document-tree-invisible", !ctx_r3.nestedTreeControl.isExpanded(node_r5));
+        }
+    }
+    function CaseFileViewFolderComponent_div_8_Template(rf, ctx) {
+        if (rf & 1) {
+            i0__namespace.ɵɵelementStart(0, "div", 7);
+            i0__namespace.ɵɵtemplate(1, CaseFileViewFolderComponent_div_8_div_1_Template, 2, 0, "div", 8);
+            i0__namespace.ɵɵelementStart(2, "cdk-tree", 9);
+            i0__namespace.ɵɵtemplate(3, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_3_Template, 6, 1, "cdk-nested-tree-node", 10);
+            i0__namespace.ɵɵtemplate(4, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template, 10, 6, "cdk-nested-tree-node", 11);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r0 = i0__namespace.ɵɵnextContext();
+            i0__namespace.ɵɵadvance(1);
+            i0__namespace.ɵɵproperty("ngIf", !ctx_r0.nestedDataSource || ctx_r0.nestedDataSource.length === 0);
+            i0__namespace.ɵɵadvance(1);
+            i0__namespace.ɵɵproperty("dataSource", ctx_r0.nestedDataSource)("treeControl", ctx_r0.nestedTreeControl);
+            i0__namespace.ɵɵadvance(2);
+            i0__namespace.ɵɵproperty("cdkTreeNodeDefWhen", ctx_r0.nestedChildren);
         }
     }
     var CaseFileViewFolderComponent = /** @class */ (function () {
@@ -9981,37 +9822,34 @@
             this.categories = [];
             this.getChildren = function (node) { return rxjs.of(node.children); };
             this.nestedChildren = function (_, nodeData) { return nodeData.children; };
-            this.nestedTreeControl = new i2.NestedTreeControl(this.getChildren);
+            this.nestedTreeControl = new i4.NestedTreeControl(this.getChildren);
         }
-        Object.defineProperty(CaseFileViewFolderComponent.prototype, "documentCount", {
-            get: function () {
-                var _a;
-                if ((_a = this.nestedDataSource) === null || _a === void 0 ? void 0 : _a.length) {
-                    return this.nestedDataSource.reduce(function (acc, item) {
-                        return acc + item.childDocumentCount;
-                    }, 0);
-                }
-                else {
-                    return 0;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
         CaseFileViewFolderComponent.prototype.ngOnInit = function () {
             var _this = this;
+            this.documentFilterFormGroup = new i1$2.FormGroup({});
+            this.documentSearchFormControl = new i1$2.FormControl('');
+            this.documentFilterFormGroup.addControl(CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME, this.documentSearchFormControl);
+            // Listen to search input and initiate filter documents if at least three characters entered
+            this.documentFilterSubscription = this.documentSearchFormControl.valueChanges.pipe(operators.tap(function (searchTerm) { return _this.searchTermLength = searchTerm.length; }), operators.switchMap(function (searchTerm) { return _this.filter(searchTerm.toLowerCase()).pipe(); })).subscribe(function (documentTreeData) {
+                _this.nestedDataSource = documentTreeData;
+                _this.nestedTreeControl.dataNodes = documentTreeData;
+                _this.searchTermLength >= CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS
+                    ? _this.nestedTreeControl.expandAll()
+                    : _this.nestedTreeControl.collapseAll();
+            });
+            // Subscribe to the input categories and documents, and generate tree data and initialise cdk tree
             this.categoriesAndDocumentsSubscription = this.categoriesAndDocuments.subscribe(function (categoriesAndDocuments) {
-                // Using the mock data for now as we have to display the documents as well for demo purpose
-                var categories = _this.loadCategories(); // categoriesAndDocuments.categories;
+                var categories = categoriesAndDocuments.categories;
                 // Generate document tree data from categories
-                var treeData = _this.generateTreeData(categories);
+                _this.documentTreeData = _this.generateTreeData(categories);
                 // Append uncategorised documents
                 if (categoriesAndDocuments.uncategorised_documents && categoriesAndDocuments.uncategorised_documents.length > 0) {
                     var uncategorisedDocuments = _this.getUncategorisedDocuments(categoriesAndDocuments.uncategorised_documents);
-                    treeData.push(uncategorisedDocuments);
+                    _this.documentTreeData.push(uncategorisedDocuments);
                 }
                 // Initialise cdk tree with generated data
-                _this.nestedDataSource = treeData;
+                _this.nestedDataSource = _this.documentTreeData;
+                _this.nestedTreeControl.dataNodes = _this.documentTreeData;
             });
         };
         CaseFileViewFolderComponent.prototype.generateTreeData = function (categories) {
@@ -10019,7 +9857,7 @@
             return categories.reduce(function (tree, node) {
                 var newDocumentTreeNode = new DocumentTreeNode();
                 newDocumentTreeNode.name = node.category_name;
-                newDocumentTreeNode.type = 'category';
+                newDocumentTreeNode.type = DocumentTreeNodeType.FOLDER;
                 newDocumentTreeNode.children = __spread(_this.generateTreeData(node.sub_categories), _this.getDocuments(node.documents));
                 return __spread(tree, [
                     newDocumentTreeNode,
@@ -10031,7 +9869,7 @@
             documents.forEach(function (document) {
                 var documentTreeNode = new DocumentTreeNode();
                 documentTreeNode.name = document.document_filename;
-                documentTreeNode.type = 'document';
+                documentTreeNode.type = DocumentTreeNodeType.DOCUMENT;
                 documentsToReturn.push(documentTreeNode);
             });
             return documentsToReturn;
@@ -10041,15 +9879,35 @@
             uncategorisedDocuments.forEach(function (document) {
                 var documentTreeNode = new DocumentTreeNode();
                 documentTreeNode.name = document.document_filename;
-                documentTreeNode.type = 'document';
+                documentTreeNode.type = DocumentTreeNodeType.DOCUMENT;
                 documents.push(documentTreeNode);
             });
             var uncategorisedNode = new DocumentTreeNode();
             uncategorisedNode.name = CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE;
-            uncategorisedNode.type = 'category';
+            uncategorisedNode.type = DocumentTreeNodeType.FOLDER;
             uncategorisedNode.children = documents;
             return uncategorisedNode;
         };
+        CaseFileViewFolderComponent.prototype.filter = function (searchTerm) {
+            // Make a copy of the data so we do not mutate the original
+            function copy(node) {
+                var documentTreeNode = new DocumentTreeNode();
+                return Object.assign(documentTreeNode, node);
+            }
+            var filteredData = this.documentTreeData;
+            if (searchTerm && searchTerm.length >= CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS && this.documentFilterFormGroup.controls[CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME].value.length > 2) {
+                filteredData = this.documentTreeData.map(copy).filter(function filterTreeData(node) {
+                    if (node.name && node.name.toLowerCase().includes(searchTerm) && node.type === DocumentTreeNodeType.DOCUMENT) {
+                        return true;
+                    }
+                    // Call recursively if node has children
+                    if (node.children) {
+                        return (node.children = node.children.map(copy).filter(filterTreeData)).length;
+                    }
+                });
+            }
+            return rxjs.of(filteredData);
+        };
         CaseFileViewFolderComponent.prototype.sortDataSourceAscAlphabetically = function () {
             var sortedData = this.nestedDataSource.map(function (item) {
                 item.sortChildrenAscending();
@@ -10068,11 +9926,6 @@
             });
             this.updateNodeData(sortedData);
         };
-        CaseFileViewFolderComponent.prototype.ngOnDestroy = function () {
-            if (this.categoriesAndDocumentsSubscription) {
-                this.categoriesAndDocumentsSubscription.unsubscribe();
-            }
-        };
         CaseFileViewFolderComponent.prototype.updateNodeData = function (data) {
             var _this = this;
             var prevSelected = this.nestedTreeControl.expansionModel.selected.map(function (item) {
@@ -10094,49 +9947,43 @@
             });
             newObjects.forEach(function (object) { return _this.nestedTreeControl.expand(object); });
         };
-        CaseFileViewFolderComponent.prototype.loadCategories = function () {
-            return categoriesAndDocumentsTestData.categories;
+        CaseFileViewFolderComponent.prototype.ngOnDestroy = function () {
+            var _a, _b;
+            (_a = this.categoriesAndDocumentsSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            (_b = this.documentFilterSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
         };
         return CaseFileViewFolderComponent;
     }());
     CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE = 'Uncategorised documents';
+    CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME = 'documentSearchFormControl';
+    CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS = 3;
     CaseFileViewFolderComponent.ɵfac = function CaseFileViewFolderComponent_Factory(t) { return new (t || CaseFileViewFolderComponent)(); };
-    CaseFileViewFolderComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], viewQuery: function CaseFileViewFolderComponent_Query(rf, ctx) {
-            if (rf & 1) {
-                i0__namespace.ɵɵviewQuery(_c0$G, 3);
-            }
-            if (rf & 2) {
-                var _t = void 0;
-                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.tree = _t.first);
-            }
-        }, inputs: { categoriesAndDocuments: "categoriesAndDocuments" }, decls: 9, vars: 4, consts: [[1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], [1, "document-tree-container"], [3, "dataSource", "treeControl"], ["class", "document-tree-node", 4, "cdkTreeNodeDef"], ["class", "document-tree-node", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-node"], [1, "node"], ["mat-icon-button", "", "disabled", "", 1, "node__icon"], ["src", "/assets/images/document.png", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], ["cdkTreeNodeToggle", "", 1, "node"], ["mat-icon-button", "", 1, "node__icon"], ["src", "/assets/images/folder.png", "alt", "Folder icon", 1, "node__iconImg"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) {
+    CaseFileViewFolderComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments" }, decls: 9, vars: 2, 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", 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-node", 4, "cdkTreeNodeDef"], ["class", "document-tree-node", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-node"], ["cdkTreeNodeToggle", "", 1, "node"], ["mat-icon-button", "", "disabled", "", 1, "node__icon"], ["src", "/assets/images/document.png", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], ["mat-icon-button", "", 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__namespace.ɵɵelementStart(0, "div", 0);
                 i0__namespace.ɵɵelementStart(1, "div", 1);
-                i0__namespace.ɵɵtext(2);
+                i0__namespace.ɵɵelement(2, "input", 2);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(3, "div");
-                i0__namespace.ɵɵelementStart(4, "ccd-case-file-view-folder-sort", 2);
-                i0__namespace.ɵɵlistener("sortAscending", function CaseFileViewFolderComponent_Template_ccd_case_file_view_folder_sort_sortAscending_4_listener() { return ctx.sortDataSourceAscAlphabetically(); })("sortDescending", function CaseFileViewFolderComponent_Template_ccd_case_file_view_folder_sort_sortDescending_4_listener() { return ctx.sortDataSourceDescAlphabetically(); });
                 i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(3, "div", 3);
+                i0__namespace.ɵɵelementStart(4, "div", 4);
+                i0__namespace.ɵɵtext(5, "Documents");
                 i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(6, "div");
+                i0__namespace.ɵɵelementStart(7, "ccd-case-file-view-folder-sort", 5);
+                i0__namespace.ɵɵlistener("sortAscending", function CaseFileViewFolderComponent_Template_ccd_case_file_view_folder_sort_sortAscending_7_listener() { return ctx.sortDataSourceAscAlphabetically(); })("sortDescending", function CaseFileViewFolderComponent_Template_ccd_case_file_view_folder_sort_sortDescending_7_listener() { return ctx.sortDataSourceDescAlphabetically(); });
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(5, "div", 3);
-                i0__namespace.ɵɵelementStart(6, "cdk-tree", 4);
-                i0__namespace.ɵɵtemplate(7, CaseFileViewFolderComponent_cdk_nested_tree_node_7_Template, 6, 1, "cdk-nested-tree-node", 5);
-                i0__namespace.ɵɵtemplate(8, CaseFileViewFolderComponent_cdk_nested_tree_node_8_Template, 10, 5, "cdk-nested-tree-node", 6);
                 i0__namespace.ɵɵelementEnd();
                 i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵtemplate(8, CaseFileViewFolderComponent_div_8_Template, 5, 4, "div", 6);
             }
             if (rf & 2) {
-                i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵtextInterpolate1("Documents (", ctx.documentCount, ")");
-                i0__namespace.ɵɵadvance(4);
-                i0__namespace.ɵɵproperty("dataSource", ctx.nestedDataSource)("treeControl", ctx.nestedTreeControl);
-                i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵproperty("cdkTreeNodeDefWhen", ctx.nestedChildren);
+                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵproperty("formGroup", ctx.documentFilterFormGroup);
+                i0__namespace.ɵɵadvance(7);
+                i0__namespace.ɵɵproperty("ngIf", ctx.documentTreeData);
             }
-        }, directives: [CaseFileViewFolderSortComponent, i2__namespace.CdkTree, i2__namespace.CdkTreeNodeDef, i2__namespace.CdkNestedTreeNode, i2__namespace.CdkTreeNodeToggle, i2__namespace.CdkTreeNodeOutlet], styles: [".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}.document-tree-container[_ngcontent-%COMP%]{margin:4px}.document-tree-container[_ngcontent-%COMP%]   .document-tree-invisible[_ngcontent-%COMP%]{display:none}.document-tree-container[_ngcontent-%COMP%]   .document-tree[_ngcontent-%COMP%]   li[_ngcontent-%COMP%], .document-tree-container[_ngcontent-%COMP%]   .document-tree[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]{margin-top:0;margin-bottom:0;list-style-type:none}.document-tree-container[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]{display:block}.document-tree-container[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]{padding-left:40px}.node[_ngcontent-%COMP%]{display:flex;align-items:center;padding:6px 0}.node__icon[_ngcontent-%COMP%]{position:relative;background:none;border:0}.node__iconImg[_ngcontent-%COMP%]{display:block;height:24px}.node__count[_ngcontent-%COMP%]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;padding-top:4px}.node__name[_ngcontent-%COMP%]{margin-left:6px}"] });
+        }, directives: [i1__namespace$3.NgControlStatusGroup, i1__namespace$3.FormGroupDirective, i1__namespace$3.DefaultValueAccessor, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlName, CaseFileViewFolderSortComponent, i1__namespace.NgIf, i4__namespace.CdkTree, i4__namespace.CdkTreeNodeDef, i4__namespace.CdkNestedTreeNode, i4__namespace.CdkTreeNodeToggle, i4__namespace.CdkTreeNodeOutlet], styles: [".document-filter-container[_ngcontent-%COMP%]{border-bottom:2px solid #c9c9c9;padding-bottom:4px}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]{height:70%;padding:8px 8px 0;margin-bottom:10px}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]   .document-search[_ngcontent-%COMP%]{background:url(/assets/images/icon-search-black.svg) no-repeat 100% #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-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}.document-tree-container[_ngcontent-%COMP%]{margin:4px;overflow-x:hidden;overflow-y:scroll;height:400px}.document-tree-container[_ngcontent-%COMP%]   .document-tree-invisible[_ngcontent-%COMP%]{display:none}.document-tree-container[_ngcontent-%COMP%]   .document-tree[_ngcontent-%COMP%]   li[_ngcontent-%COMP%], .document-tree-container[_ngcontent-%COMP%]   .document-tree[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]{margin-top:0;margin-bottom:0;list-style-type:none}.document-tree-container[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]{display:block}.document-tree-container[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]{padding-left:40px}.node[_ngcontent-%COMP%]{display:flex;align-items:center;padding:6px 0;white-space:nowrap;cursor:pointer}.node__icon[_ngcontent-%COMP%]{position:relative;background:none;border:0;padding:6px}.node__iconImg[_ngcontent-%COMP%]{display:block;height:24px;width:24px}.node__count[_ngcontent-%COMP%]{color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding-top:4px}.node__name[_ngcontent-%COMP%]{margin-left:4px}.document-tree[_ngcontent-%COMP%]::-webkit-scrollbar{width:.5em}.document-tree[_ngcontent-%COMP%]::-webkit-scrollbar-button{display:none}.document-tree[_ngcontent-%COMP%]::-webkit-scrollbar-track-piece{background:#eee}.document-tree[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#ccc}"] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
                 type: i0.Component,
@@ -10147,21 +9994,61 @@
                     }]
             }], function () { return []; }, { categoriesAndDocuments: [{
                     type: i0.Input
-                }], tree: [{
-                    type: i0.ViewChild,
-                    args: ['tree', { static: true }]
                 }] });
     })();
 
+    function CaseFileViewFieldComponent_div_0_Template(rf, ctx) {
+        if (rf & 1) {
+            i0__namespace.ɵɵelementStart(0, "div", 2);
+            i0__namespace.ɵɵelementStart(1, "h1", 3);
+            i0__namespace.ɵɵtext(2, "Sorry, there is a problem with the service");
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementStart(3, "p", 4);
+            i0__namespace.ɵɵtext(4, "Try again later.");
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+        }
+    }
+    function CaseFileViewFieldComponent_div_1_Template(rf, ctx) {
+        if (rf & 1) {
+            i0__namespace.ɵɵelementStart(0, "div");
+            i0__namespace.ɵɵelementStart(1, "h2", 5);
+            i0__namespace.ɵɵtext(2, "Case file");
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementStart(3, "div", 6);
+            i0__namespace.ɵɵelementStart(4, "div", 7);
+            i0__namespace.ɵɵelement(5, "ccd-case-file-view-folder", 8);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelement(6, "div", 9);
+            i0__namespace.ɵɵelementStart(7, "div", 10);
+            i0__namespace.ɵɵelement(8, "mv-media-viewer", 11);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r1 = i0__namespace.ɵɵnextContext();
+            i0__namespace.ɵɵadvance(5);
+            i0__namespace.ɵɵproperty("categoriesAndDocuments", ctx_r1.categoriesAndDocuments$);
+            i0__namespace.ɵɵadvance(3);
+            i0__namespace.ɵɵproperty("url", "")("showToolbar", true)("contentType", "pdf");
+        }
+    }
     var CaseFileViewFieldComponent = /** @class */ (function () {
         function CaseFileViewFieldComponent(elementRef, route, caseFileViewService) {
             this.elementRef = elementRef;
             this.route = route;
             this.caseFileViewService = caseFileViewService;
+            this.getCategoriesAndDocumentsError = false;
         }
         CaseFileViewFieldComponent.prototype.ngOnInit = function () {
+            var _this = this;
             var cid = this.route.snapshot.paramMap.get(CaseFileViewFieldComponent.PARAM_CASE_ID);
             this.categoriesAndDocuments$ = this.caseFileViewService.getCategoriesAndDocuments(cid);
+            this.categoriesAndDocumentsSubscription = this.categoriesAndDocuments$.subscribe({
+                next: function (_) { },
+                error: function (_) { return _this.getCategoriesAndDocumentsError = true; }
+            });
         };
         CaseFileViewFieldComponent.prototype.ngAfterViewInit = function () {
             var slider = this.elementRef.nativeElement.querySelector('.slider');
@@ -10185,32 +10072,26 @@
                 documentTreeContainer.setAttribute('style', "width: " + calculatedWidth + "%");
             });
         };
+        CaseFileViewFieldComponent.prototype.ngOnDestroy = function () {
+            if (this.categoriesAndDocumentsSubscription) {
+                this.categoriesAndDocumentsSubscription.unsubscribe();
+            }
+        };
         return CaseFileViewFieldComponent;
     }());
     CaseFileViewFieldComponent.PARAM_CASE_ID = 'cid';
     CaseFileViewFieldComponent.ɵfac = function CaseFileViewFieldComponent_Factory(t) { return new (t || CaseFileViewFieldComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.ElementRef), i0__namespace.ɵɵdirectiveInject(i1__namespace$1.ActivatedRoute), i0__namespace.ɵɵdirectiveInject(CaseFileViewService)); };
-    CaseFileViewFieldComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], decls: 8, vars: 4, consts: [[1, "govuk-heading-l"], ["id", "case-file-view", 1, "govuk-form-group"], [1, "document-tree-container"], [3, "categoriesAndDocuments"], [1, "slider"], [1, "media-viewer-container"], [3, "url", "downloadFileName", "showToolbar", "contentType"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) {
+    CaseFileViewFieldComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], decls: 2, vars: 2, consts: [["class", "govuk-grid-column-two-thirds", 4, "ngIf"], [4, "ngIf"], [1, "govuk-grid-column-two-thirds"], [1, "govuk-heading-xl"], [1, "govuk-body"], [1, "govuk-heading-l"], ["id", "case-file-view", 1, "govuk-form-group"], [1, "document-tree-container"], [3, "categoriesAndDocuments"], [1, "slider"], [1, "media-viewer-container"], [3, "url", "downloadFileName", "showToolbar", "contentType"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0__namespace.ɵɵelementStart(0, "h2", 0);
-                i0__namespace.ɵɵtext(1, "Case file");
-                i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(2, "div", 1);
-                i0__namespace.ɵɵelementStart(3, "div", 2);
-                i0__namespace.ɵɵelement(4, "ccd-case-file-view-folder", 3);
-                i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelement(5, "div", 4);
-                i0__namespace.ɵɵelementStart(6, "div", 5);
-                i0__namespace.ɵɵelement(7, "mv-media-viewer", 6);
-                i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵtemplate(0, CaseFileViewFieldComponent_div_0_Template, 5, 0, "div", 0);
+                i0__namespace.ɵɵtemplate(1, CaseFileViewFieldComponent_div_1_Template, 9, 4, "div", 1);
             }
             if (rf & 2) {
-                i0__namespace.ɵɵadvance(4);
-                i0__namespace.ɵɵproperty("categoriesAndDocuments", ctx.categoriesAndDocuments$);
-                i0__namespace.ɵɵadvance(3);
-                i0__namespace.ɵɵproperty("url", "")("showToolbar", true)("contentType", "pdf");
+                i0__namespace.ɵɵproperty("ngIf", ctx.getCategoriesAndDocumentsError);
+                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵproperty("ngIf", !ctx.getCategoriesAndDocumentsError);
             }
-        }, directives: [CaseFileViewFolderComponent, i4__namespace.ɵcs], styles: ["#case-file-view[_ngcontent-%COMP%]{display:flex;border:2px solid #c9c9c9}#case-file-view[_ngcontent-%COMP%]   .document-tree-container[_ngcontent-%COMP%]{background-color:#faf8f8;width:30%;min-height:400px;min-width:10%}#case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]{width:.2%;background-color:#6b6b6b}#case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]:focus, #case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]:hover{cursor:col-resize}#case-file-view[_ngcontent-%COMP%]   .media-viewer-container[_ngcontent-%COMP%]{flex:1 1 0%}"] });
+        }, directives: [i1__namespace.NgIf, CaseFileViewFolderComponent, i5__namespace.ɵcs], styles: ["#case-file-view[_ngcontent-%COMP%]{display:flex;border:2px solid #c9c9c9}#case-file-view[_ngcontent-%COMP%]   .document-tree-container[_ngcontent-%COMP%]{background-color:#faf8f8;width:30%;min-height:400px;min-width:10%}#case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]{width:.2%;background-color:#6b6b6b}#case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]:focus, #case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]:hover{cursor:col-resize}#case-file-view[_ngcontent-%COMP%]   .media-viewer-container[_ngcontent-%COMP%]{flex:1 1 0%}"] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseFileViewFieldComponent, [{
                 type: i0.Component,
@@ -11038,7 +10919,7 @@
         };
         return WriteCollectionFieldComponent;
     }(AbstractFieldWriteComponent));
-    WriteCollectionFieldComponent.ɵfac = function WriteCollectionFieldComponent_Factory(t) { return new (t || WriteCollectionFieldComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialog), i0__namespace.ɵɵdirectiveInject(i2__namespace$1.ScrollToService), i0__namespace.ɵɵdirectiveInject(ProfileNotifier)); };
+    WriteCollectionFieldComponent.ɵfac = function WriteCollectionFieldComponent_Factory(t) { return new (t || WriteCollectionFieldComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialog), i0__namespace.ɵɵdirectiveInject(i2__namespace.ScrollToService), i0__namespace.ɵɵdirectiveInject(ProfileNotifier)); };
     WriteCollectionFieldComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: WriteCollectionFieldComponent, selectors: [["ccd-write-collection-field"]], viewQuery: function WriteCollectionFieldComponent_Query(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵviewQuery(_c0$D, 1);
@@ -11087,7 +10968,7 @@
                         templateUrl: './write-collection-field.html',
                         styleUrls: ['./collection-field.scss']
                     }]
-            }], function () { return [{ type: i1__namespace$6.MatDialog }, { type: i2__namespace$1.ScrollToService }, { type: ProfileNotifier }]; }, { caseFields: [{
+            }], function () { return [{ type: i1__namespace$6.MatDialog }, { type: i2__namespace.ScrollToService }, { type: ProfileNotifier }]; }, { caseFields: [{
                     type: i0.Input
                 }], formGroup: [{
                     type: i0.Input
@@ -12191,7 +12072,7 @@
                 i0__namespace.ɵɵadvance(1);
                 i0__namespace.ɵɵproperty("color", ctx.color)("touchUi", ctx.touchUi)("hideTime", ctx.hideTime)("startView", ctx.startView)("stepHour", ctx.stepHour)("stepSecond", ctx.stepSecond)("stepMinute", ctx.stepMinute)("showSeconds", ctx.showSeconds)("showSpinners", ctx.showSpinners)("disableMinute", ctx.disableMinute)("enableMeridian", ctx.enableMeridian);
             }
-        }, directives: [i1__namespace.NgClass, i1__namespace.NgIf, i1__namespace$3.DefaultValueAccessor, i4__namespace$1.NgxMatDatetimeInput, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlDirective, i5__namespace.MatDatepickerToggle, i6__namespace.MatSuffix, i4__namespace$1.NgxMatDatetimePicker], pipes: [FieldLabelPipe, FirstErrorPipe], styles: ["@charset \"UTF-8\";.datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #fd0;border:1px solid #000}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #fd0}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.cdk-overlay-container .mat-datepicker-content{border:1px solid #000;border-radius:0;max-width:295px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid #000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid #000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th.ng-star-inserted{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;-moz-column-width:20px;column-width:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th{visibility:hidden}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:after{visibility:visible;color:#000;position:relative;left:-15px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:first-of-type:after{content:\"MON\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(2):after{left:-12px;content:\"TUE\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(3):after{left:-18px;content:\"WED\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(4):after{left:-14px;content:\"THU\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(5):after{left:-10px;content:\"FRI\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(6):after{content:\"SAT\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(7):after{content:\"SUN\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #fd0;border:2px solid #000;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #fd0}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:first-of-type{visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #fd0;border:2px solid #000;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{height:80px;padding-top:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table{margin-left:0!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tbody{position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon-button .mat-button-wrapper{width:auto;height:auto}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon-button:focus{outline:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child{position:absolute;left:49px;top:15px;z-index:2}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:first-child [aria-label=\"expand_less icon\"]{position:absolute;left:-2px;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(3) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:82px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(5) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:169px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:last-child [aria-label=\"expand_less icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(2) [aria-label=\"expand_less icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2){display:flex;padding:20px 0 20px 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field{width:50px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field:before{color:#000;content:\"Hours\";position:relative;top:-5px;left:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-child(3) .mat-form-field:before{color:#000;content:\"Minutes\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:last-child{text-align:left;left:-15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .mat-form-field-disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-of-type(5) .mat-form-field:before{color:#000;content:\"Seconds\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian{border-bottom:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button{height:30px;top:21px;border-radius:0;color:#000;border-color:#000;background-color:#dee0e2;display:flex;justify-content:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button .mat-button-wrapper{position:relative;top:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4){display:flex;padding:2rem 0 2rem 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td:last-child{text-align:left}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child{position:absolute;left:49px;top:40px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:first-child [aria-label=\"expand_more icon\"]{position:absolute;top:15px;left:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(3) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;left:82px!important;top:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(5) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;top:15px;left:169px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:last-child [aria-label=\"expand_more icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:last-child.ng-star-inserted [aria-label=\"expand_more icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr td{padding:0;border-bottom:0;position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .spacer{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon{visibility:hidden;display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-button-wrapper{display:block;width:15px;height:8px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-wrapper{padding-bottom:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field{width:auto;max-width:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_less icon\"].mat-icon-button .mat-button-wrapper:after{content:\" \u25B2\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_more icon\"].mat-icon-button .mat-button-wrapper:after{content:\"\u25BC\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex .mat-form-field-infix{border:1px solid #000;height:20px;width:37px;display:flex;justify-content:center;align-items:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-underline{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input{height:33px;width:37px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px 0 #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #fd0}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}"], encapsulation: 2 });
+        }, directives: [i1__namespace.NgClass, i1__namespace.NgIf, i1__namespace$3.DefaultValueAccessor, i4__namespace$1.NgxMatDatetimeInput, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlDirective, i5__namespace$1.MatDatepickerToggle, i6__namespace.MatSuffix, i4__namespace$1.NgxMatDatetimePicker], pipes: [FieldLabelPipe, FirstErrorPipe], styles: ["@charset \"UTF-8\";.datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #fd0;border:1px solid #000}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #fd0}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.cdk-overlay-container .mat-datepicker-content{border:1px solid #000;border-radius:0;max-width:295px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid #000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid #000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th.ng-star-inserted{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;-moz-column-width:20px;column-width:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th{visibility:hidden}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:after{visibility:visible;color:#000;position:relative;left:-15px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:first-of-type:after{content:\"MON\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(2):after{left:-12px;content:\"TUE\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(3):after{left:-18px;content:\"WED\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(4):after{left:-14px;content:\"THU\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(5):after{left:-10px;content:\"FRI\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(6):after{content:\"SAT\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(7):after{content:\"SUN\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #fd0;border:2px solid #000;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #fd0}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:first-of-type{visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #fd0;border:2px solid #000;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{height:80px;padding-top:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table{margin-left:0!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tbody{position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon-button .mat-button-wrapper{width:auto;height:auto}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon-button:focus{outline:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child{position:absolute;left:49px;top:15px;z-index:2}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:first-child [aria-label=\"expand_less icon\"]{position:absolute;left:-2px;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(3) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:82px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(5) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:169px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:last-child [aria-label=\"expand_less icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(2) [aria-label=\"expand_less icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2){display:flex;padding:20px 0 20px 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field{width:50px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field:before{color:#000;content:\"Hours\";position:relative;top:-5px;left:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-child(3) .mat-form-field:before{color:#000;content:\"Minutes\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:last-child{text-align:left;left:-15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .mat-form-field-disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-of-type(5) .mat-form-field:before{color:#000;content:\"Seconds\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian{border-bottom:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button{height:30px;top:21px;border-radius:0;color:#000;border-color:#000;background-color:#dee0e2;display:flex;justify-content:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button .mat-button-wrapper{position:relative;top:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4){display:flex;padding:2rem 0 2rem 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td:last-child{text-align:left}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child{position:absolute;left:49px;top:40px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:first-child [aria-label=\"expand_more icon\"]{position:absolute;top:15px;left:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(3) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;left:82px!important;top:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(5) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;top:15px;left:169px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:last-child [aria-label=\"expand_more icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:last-child.ng-star-inserted [aria-label=\"expand_more icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr td{padding:0;border-bottom:0;position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .spacer{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon{visibility:hidden;display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-button-wrapper{display:block;width:15px;height:8px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-wrapper{padding-bottom:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field{width:auto;max-width:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_less icon\"].mat-icon-button .mat-button-wrapper:after{content:\" \u25B2\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_more icon\"].mat-icon-button .mat-button-wrapper:after{content:\"\u25BC\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex .mat-form-field-infix{border:1px solid #000;height:20px;width:37px;display:flex;justify-content:center;align-items:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-underline{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input{height:33px;width:37px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px 0 #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #fd0}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}"], encapsulation: 2 });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatetimePickerComponent, [{
                 type: i0.Component,
@@ -14741,7 +14622,7 @@
                 i0__namespace.ɵɵadvance(1);
                 i0__namespace.ɵɵproperty("ngIf", !(ctx.filteredJudicialUsers == null ? null : ctx.filteredJudicialUsers.length) && ctx.showAutocomplete);
             }
-        }, directives: [i1__namespace$3.NgControlStatusGroup, i1__namespace$3.FormGroupDirective, i1__namespace.NgIf, i1__namespace$3.DefaultValueAccessor, i5__namespace$1.MatAutocompleteTrigger, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlDirective, i5__namespace$1.MatAutocomplete, i1__namespace.NgForOf, i6__namespace$1.MatOption, i1__namespace.NgClass], pipes: [FieldLabelPipe], styles: [".mat-option[_ngcontent-%COMP%]:hover{background:#2596be}.mat-option.select-option[_ngcontent-%COMP%]:hover{background:#1d70b8;color:#fff}.hide-autocomplete[_ngcontent-%COMP%]{display:none}"] });
+        }, directives: [i1__namespace$3.NgControlStatusGroup, i1__namespace$3.FormGroupDirective, i1__namespace.NgIf, i1__namespace$3.DefaultValueAccessor, i5__namespace$2.MatAutocompleteTrigger, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlDirective, i5__namespace$2.MatAutocomplete, i1__namespace.NgForOf, i6__namespace$1.MatOption, i1__namespace.NgClass], pipes: [FieldLabelPipe], styles: [".mat-option[_ngcontent-%COMP%]:hover{background:#2596be}.mat-option.select-option[_ngcontent-%COMP%]:hover{background:#1d70b8;color:#fff}.hide-autocomplete[_ngcontent-%COMP%]{display:none}"] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WriteJudicialUserFieldComponent, [{
                 type: i0.Component,
@@ -20062,13 +19943,13 @@
                 i4$1.NgxMatNativeDateModule,
                 i6.MatFormFieldModule,
                 input.MatInputModule,
-                i5.MatDatepickerModule,
-                i5$1.MatAutocompleteModule,
-                i2.CdkTreeModule,
+                i5$1.MatDatepickerModule,
+                i5$2.MatAutocompleteModule,
+                i4.CdkTreeModule,
                 i1$5.OverlayModule,
                 i3.PaymentLibModule,
-                i2$1.ScrollToModule.forRoot(),
-                i4.MediaViewerModule
+                i2.ScrollToModule.forRoot(),
+                i5.MediaViewerModule
             ], i4$1.NgxMatDatetimePickerModule,
             i4$1.NgxMatNativeDateModule,
             i4$1.NgxMatTimepickerModule,
@@ -20172,11 +20053,11 @@
                 i4$1.NgxMatNativeDateModule,
                 i6.MatFormFieldModule,
                 input.MatInputModule,
-                i5.MatDatepickerModule,
-                i5$1.MatAutocompleteModule,
-                i2.CdkTreeModule,
+                i5$1.MatDatepickerModule,
+                i5$2.MatAutocompleteModule,
+                i4.CdkTreeModule,
                 i1$5.OverlayModule,
-                i3.PaymentLibModule, i2__namespace$1.ScrollToModule, i4.MediaViewerModule], exports: [i4$1.NgxMatDatetimePickerModule,
+                i3.PaymentLibModule, i2__namespace.ScrollToModule, i5.MediaViewerModule], exports: [i4$1.NgxMatDatetimePickerModule,
                 i4$1.NgxMatNativeDateModule,
                 i4$1.NgxMatTimepickerModule,
                 TabsModule,
@@ -20280,13 +20161,13 @@
                             i4$1.NgxMatNativeDateModule,
                             i6.MatFormFieldModule,
                             input.MatInputModule,
-                            i5.MatDatepickerModule,
-                            i5$1.MatAutocompleteModule,
-                            i2.CdkTreeModule,
+                            i5$1.MatDatepickerModule,
+                            i5$2.MatAutocompleteModule,
+                            i4.CdkTreeModule,
                             i1$5.OverlayModule,
                             i3.PaymentLibModule,
-                            i2$1.ScrollToModule.forRoot(),
-                            i4.MediaViewerModule
+                            i2.ScrollToModule.forRoot(),
+                            i5.MediaViewerModule
                         ],
                         declarations: __spread([
                             FixedListPipe,