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

package/fesm2015/hmcts-ccd-case-ui-toolkit.js

@@ -19,22 +19,24 @@ import { isUndefined } from 'util';
 import { StateMachine } from '@edium/fsm';
 import * as i1$4 from 'ngx-md';
 import { NgxMdModule } from 'ngx-md';
-import * as i2 from '@angular/cdk/tree';
+import * as i4 from '@angular/cdk/tree';
 import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
 import * as i1$5 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
+import * as i5 from '@hmcts/media-viewer';
+import { MediaViewerModule } from '@hmcts/media-viewer';
 import * as i1$6 from '@angular/material/dialog';
 import { MatDialogConfig } from '@angular/material/dialog';
-import * as i2$1 from '@nicky-lenaers/ngx-scroll-to';
+import * as i2 from '@nicky-lenaers/ngx-scroll-to';
 import { ScrollToModule } from '@nicky-lenaers/ngx-scroll-to';
-import * as i4 from '@angular-material-components/datetime-picker';
+import * as i4$1 from '@angular-material-components/datetime-picker';
 import { NGX_MAT_DATE_FORMATS, NgxMatDateAdapter, NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
 import { NgxMatMomentAdapter, NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular-material-components/moment-adapter';
-import * as i5 from '@angular/material/datepicker';
+import * as i5$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i6 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5$1 from '@angular/material/autocomplete';
+import * as i5$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i6$1 from '@angular/material/core';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
@@ -112,13 +114,13 @@ function FooterComponent_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.workhours);
 } }
-const _c0$Q = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
+const _c0$P = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
 const _c1$n = ["[footerSolsNavLinks]", "[footerCaseWorkerNavLinks]"];
 class FooterComponent {
 }
 FooterComponent.ɵfac = function FooterComponent_Factory(t) { return new (t || FooterComponent)(); };
 FooterComponent.ɵcmp = i0.ɵɵ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.ɵɵprojectionDef(_c0$Q);
+        i0.ɵɵprojectionDef(_c0$P);
         i0.ɵɵelementStart(0, "footer", 0);
         i0.ɵɵelementStart(1, "div", 1);
         i0.ɵɵtemplate(2, FooterComponent_div_2_Template, 15, 0, "div", 2);
@@ -185,7 +187,7 @@ function HeaderBarComponent_div_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r2.title);
 } }
-const _c0$P = [[["", "headerNavigation", ""]]];
+const _c0$O = [[["", "headerNavigation", ""]]];
 const _c1$m = ["[headerNavigation]"];
 class HeaderBarComponent {
     constructor() {
@@ -197,7 +199,7 @@ class HeaderBarComponent {
 }
 HeaderBarComponent.ɵfac = function HeaderBarComponent_Factory(t) { return new (t || HeaderBarComponent)(); };
 HeaderBarComponent.ɵcmp = i0.ɵɵ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.ɵɵprojectionDef(_c0$P);
+        i0.ɵɵprojectionDef(_c0$O);
         i0.ɵɵelementStart(0, "header", 0);
         i0.ɵɵelementStart(1, "div", 1);
         i0.ɵɵelementStart(2, "div", 2);
@@ -254,13 +256,13 @@ HeaderBarComponent.ɵcmp = i0.ɵɵdefineComponent({ type: HeaderBarComponent, se
             type: Output
         }] }); })();
 
-const _c0$O = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
+const _c0$N = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
 const _c1$l = ["[leftNavLinks]", "[rightNavLinks]"];
 class NavigationComponent {
 }
 NavigationComponent.ɵfac = function NavigationComponent_Factory(t) { return new (t || NavigationComponent)(); };
 NavigationComponent.ɵcmp = i0.ɵɵ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.ɵɵprojectionDef(_c0$O);
+        i0.ɵɵprojectionDef(_c0$N);
         i0.ɵɵelementStart(0, "div");
         i0.ɵɵelementStart(1, "nav", 0);
         i0.ɵɵprojection(2);
@@ -306,7 +308,7 @@ NavigationItemComponent.ɵcmp = i0.ɵɵdefineComponent({ type: NavigationItemCom
         i0.ɵɵtextInterpolate(ctx.label);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", ctx.imageLink);
-    } }, directives: [i1$1.RouterLinkWithHref, i1$1.RouterLinkActive, i1.NgIf], styles: ["a[_ngcontent-%COMP%]{text-decoration:none;padding-right:10px;font-size:18px}a[_ngcontent-%COMP%], a.active[_ngcontent-%COMP%], a[_ngcontent-%COMP%]:focus{color:#fff}a[_ngcontent-%COMP%]:focus{background-color:#005ea5}input[_ngcontent-%COMP%]{float:right;background-color:#00823b;margin-top:-3px}.item-bold[_ngcontent-%COMP%]{font-size:18px;font-weight:700}"] });
+    } }, directives: [i1$1.RouterLinkWithHref, i1$1.RouterLinkActive, i1.NgIf], styles: ["a[_ngcontent-%COMP%]{text-decoration:none;padding-right:10px;font-size:18px}a[_ngcontent-%COMP%], a.active[_ngcontent-%COMP%]{color:#fff}a[_ngcontent-%COMP%]:focus{background-color:#005ea5;color:#fff}input[_ngcontent-%COMP%]{float:right;background-color:#00823b;margin-top:-3px}.item-bold[_ngcontent-%COMP%]{font-size:18px;font-weight:700}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NavigationItemComponent, [{
         type: Component,
         args: [{
@@ -377,13 +379,13 @@ HeadersModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[CommonModule, RouterMod
             }]
     }], null, null); })();
 
-const _c0$N = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
+const _c0$M = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
 const _c1$k = ["[topBody]", "[leftBody]", "[rightBody]"];
 class BodyComponent {
 }
 BodyComponent.ɵfac = function BodyComponent_Factory(t) { return new (t || BodyComponent)(); };
 BodyComponent.ɵcmp = i0.ɵɵ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.ɵɵprojectionDef(_c0$N);
+        i0.ɵɵprojectionDef(_c0$M);
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵprojection(1);
         i0.ɵɵprojection(2, 1);
@@ -400,7 +402,7 @@ BodyComponent.ɵcmp = i0.ɵɵdefineComponent({ type: BodyComponent, selectors: [
             }]
     }], null, null); })();
 
-const _c0$M = function (a0) { return { "govuk-input--error": a0 }; };
+const _c0$L = function (a0) { return { "govuk-input--error": a0 }; };
 function DateInputComponent_div_16_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12);
@@ -416,7 +418,7 @@ function DateInputComponent_div_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("for", ctx_r3.hourId());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r3.hourId())("name", ctx_r3.hourId())("value", ctx_r3.displayHour)("ngClass", i0.ɵɵpureFunction1(5, _c0$M, ctx_r3.isInvalid));
+    i0.ɵɵproperty("id", ctx_r3.hourId())("name", ctx_r3.hourId())("value", ctx_r3.displayHour)("ngClass", i0.ɵɵpureFunction1(5, _c0$L, ctx_r3.isInvalid));
 } }
 function DateInputComponent_div_17_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
@@ -433,7 +435,7 @@ function DateInputComponent_div_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("for", ctx_r4.minuteId());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r4.minuteId())("name", ctx_r4.minuteId())("value", ctx_r4.displayMinute)("ngClass", i0.ɵɵpureFunction1(5, _c0$M, ctx_r4.isInvalid));
+    i0.ɵɵproperty("id", ctx_r4.minuteId())("name", ctx_r4.minuteId())("value", ctx_r4.displayMinute)("ngClass", i0.ɵɵpureFunction1(5, _c0$L, ctx_r4.isInvalid));
 } }
 function DateInputComponent_div_18_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
@@ -450,7 +452,7 @@ function DateInputComponent_div_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(1);
     i0.ɵɵproperty("for", ctx_r5.secondId());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("id", ctx_r5.secondId())("name", ctx_r5.secondId())("value", ctx_r5.displaySecond)("ngClass", i0.ɵɵpureFunction1(5, _c0$M, ctx_r5.isInvalid));
+    i0.ɵɵproperty("id", ctx_r5.secondId())("name", ctx_r5.secondId())("value", ctx_r5.displaySecond)("ngClass", i0.ɵɵpureFunction1(5, _c0$L, ctx_r5.isInvalid));
 } }
 class DateInputComponent {
     constructor() {
@@ -679,15 +681,15 @@ DateInputComponent.ɵcmp = i0.ɵɵdefineComponent({ type: DateInputComponent, se
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("for", ctx.dayId());
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0.ɵɵpureFunction1(18, _c0$M, ctx.isInvalid));
+        i0.ɵɵproperty("id", ctx.dayId())("name", ctx.dayId())("value", ctx.displayDay)("ngClass", i0.ɵɵpureFunction1(18, _c0$L, ctx.isInvalid));
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("for", ctx.monthId());
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(20, _c0$M, ctx.isInvalid));
+        i0.ɵɵproperty("id", ctx.monthId())("name", ctx.monthId())("value", ctx.displayMonth)("ngClass", i0.ɵɵpureFunction1(20, _c0$L, ctx.isInvalid));
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("for", ctx.yearId());
         i0.ɵɵadvance(2);
-        i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(22, _c0$M, ctx.isInvalid));
+        i0.ɵɵproperty("id", ctx.yearId())("name", ctx.yearId())("value", ctx.displayYear)("ngClass", i0.ɵɵpureFunction1(22, _c0$L, ctx.isInvalid));
         i0.ɵɵadvance(2);
         i0.ɵɵproperty("ngIf", ctx.isDateTime);
         i0.ɵɵadvance(1);
@@ -757,7 +759,7 @@ function AlertComponent_ng_container_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } }
-const _c0$L = ["*"];
+const _c0$K = ["*"];
 var AlertMessageType;
 (function (AlertMessageType) {
     AlertMessageType["WARNING"] = "warning";
@@ -777,7 +779,7 @@ AlertComponent.TYPE_SUCCESS = 'success';
 AlertComponent.TYPE_ERROR = 'error';
 AlertComponent.TYPE_INFORMATION = 'information';
 AlertComponent.ɵfac = function AlertComponent_Factory(t) { return new (t || AlertComponent)(); };
-AlertComponent.ɵcmp = i0.ɵɵ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) { if (rf & 1) {
+AlertComponent.ɵcmp = i0.ɵɵ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.ɵɵprojectionDef();
         i0.ɵɵelementStart(0, "div", 0);
         i0.ɵɵelementContainerStart(1, 1);
@@ -866,7 +868,7 @@ AlertModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[CommonModule]] });
             }]
     }], null, null); })();
 
-const _c0$K = function (a0) { return { "js-hidden": a0 }; };
+const _c0$J = function (a0) { return { "js-hidden": a0 }; };
 const _c1$j = ["*"];
 class TabComponent {
 }
@@ -877,7 +879,7 @@ TabComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TabComponent, selectors: [["
         i0.ɵɵprojection(1);
         i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵproperty("id", ctx.id)("ngClass", i0.ɵɵpureFunction1(3, _c0$K, !ctx.selected));
+        i0.ɵɵproperty("id", ctx.id)("ngClass", i0.ɵɵpureFunction1(3, _c0$J, !ctx.selected));
         i0.ɵɵattribute("aria-hidden", !ctx.selected);
     } }, directives: [i1.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}}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabComponent, [{
@@ -897,7 +899,7 @@ TabComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TabComponent, selectors: [["
             type: Input
         }] }); })();
 
-const _c0$J = ["tab"];
+const _c0$I = ["tab"];
 const _c1$i = function () { return ["."]; };
 const _c2$3 = function (a0) { return { "tabs-toggle-selected": a0 }; };
 function TabsComponent_li_2_Template(rf, ctx) { if (rf & 1) {
@@ -942,7 +944,7 @@ TabsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TabsComponent, selectors: [
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panels = _t);
     } }, viewQuery: function TabsComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$J, 1);
+        i0.ɵɵviewQuery(_c0$I, 1);
     } if (rf & 2) {
         let _t;
         i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabs = _t);
@@ -1007,7 +1009,7 @@ TabsModule.ɵinj = i0.ɵɵdefineInjector({ imports: [[
             }]
     }], null, null); })();
 
-const _c0$I = function (a0, a1) { return { caseLocked: a0, someoneViewing: a1 }; };
+const _c0$H = function (a0, a1) { return { caseLocked: a0, someoneViewing: a1 }; };
 class ActivityBannerComponent {
     constructor() { }
     ngOnInit() {
@@ -1024,7 +1026,7 @@ ActivityBannerComponent.ɵcmp = i0.ɵɵdefineComponent({ type: ActivityBannerCom
         i0.ɵɵelementEnd();
         i0.ɵɵelementEnd();
     } if (rf & 2) {
-        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c0$I, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
+        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(4, _c0$H, ctx.bannerType === "editor", ctx.bannerType === "viewer"));
         i0.ɵɵadvance(2);
         i0.ɵɵpropertyInterpolate("alt", ctx.description);
         i0.ɵɵpropertyInterpolate("src", ctx.imageLink, i0.ɵɵsanitizeUrl);
@@ -5656,10 +5658,9 @@ CaseFieldService.ɵprov = i0.ɵɵdefineInjectable({ token: CaseFieldService, fac
     }], null, null); })();
 
 class CaseFileViewService {
-    constructor(http, appConfig, errorService) {
+    constructor(http, appConfig) {
         this.http = http;
         this.appConfig = appConfig;
-        this.errorService = errorService;
     }
     /**
      * Retrieves the categories and documents for a case.
@@ -5689,11 +5690,11 @@ class CaseFileViewService {
         return of(null);
     }
 }
-CaseFileViewService.ɵfac = function CaseFileViewService_Factory(t) { return new (t || CaseFileViewService)(i0.ɵɵinject(HttpService), i0.ɵɵinject(AbstractAppConfig), i0.ɵɵinject(HttpErrorService)); };
+CaseFileViewService.ɵfac = function CaseFileViewService_Factory(t) { return new (t || CaseFileViewService)(i0.ɵɵinject(HttpService), i0.ɵɵinject(AbstractAppConfig)); };
 CaseFileViewService.ɵprov = i0.ɵɵdefineInjectable({ token: CaseFileViewService, factory: CaseFileViewService.ɵfac });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CaseFileViewService, [{
         type: Injectable
-    }], function () { return [{ type: HttpService }, { type: AbstractAppConfig }, { type: HttpErrorService }]; }, null); })();
+    }], function () { return [{ type: HttpService }, { type: AbstractAppConfig }]; }, null); })();
 
 class DocumentManagementService {
     constructor(http, appConfig) {
@@ -7602,7 +7603,7 @@ class 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'
@@ -7825,7 +7826,7 @@ FieldLabelPipe.ɵpipe = i0.ɵɵdefinePipe({ name: "ccdFieldLabel", type: FieldLa
             }]
     }], null, null); })();
 
-const _c0$H = ["writeComplexFieldComponent"];
+const _c0$G = ["writeComplexFieldComponent"];
 function WriteAddressFieldComponent_div_1_div_4_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 14);
     i0.ɵɵtext(1, "Enter the Postcode");
@@ -8018,7 +8019,7 @@ class WriteAddressFieldComponent extends AbstractFieldWriteComponent {
 }
 WriteAddressFieldComponent.ɵfac = function WriteAddressFieldComponent_Factory(t) { return new (t || WriteAddressFieldComponent)(i0.ɵɵdirectiveInject(AddressesService), i0.ɵɵdirectiveInject(IsCompoundPipe)); };
 WriteAddressFieldComponent.ɵcmp = i0.ɵɵdefineComponent({ type: WriteAddressFieldComponent, selectors: [["ccd-write-address-field"]], viewQuery: function WriteAddressFieldComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$H, 1);
+        i0.ɵɵviewQuery(_c0$G, 1);
         i0.ɵɵviewQuery(FocusElementDirective, 1);
     } if (rf & 2) {
         let _t;
@@ -8066,6 +8067,12 @@ class CaseFileViewDocument {
 class CategoriesAndDocuments {
 }
 
+var DocumentTreeNodeType;
+(function (DocumentTreeNodeType) {
+    DocumentTreeNodeType["FOLDER"] = "folder";
+    DocumentTreeNodeType["DOCUMENT"] = "document";
+})(DocumentTreeNodeType || (DocumentTreeNodeType = {}));
+
 class DocumentTreeNode {
     get childDocumentCount() {
         const countChildren = (childNodes) => {
@@ -8085,9 +8092,9 @@ class DocumentTreeNode {
         var _a, _b;
         const sortAscending = () => {
             return (a, b) => {
-                const nameA = a.name.toUpperCase(); // ignore upper and lowercase
-                const nameB = b.name.toUpperCase(); // ignore upper and lowercase
-                if (a.type === 'category' || b.type === 'category') {
+                const nameA = a.name.toUpperCase();
+                const nameB = b.name.toUpperCase();
+                if (a.type === DocumentTreeNodeType.FOLDER || b.type === DocumentTreeNodeType.FOLDER) {
                     return 0;
                 }
                 if (nameA < nameB) {
@@ -8107,9 +8114,9 @@ class DocumentTreeNode {
         var _a, _b;
         const sortDescending = () => {
             return (a, b) => {
-                const nameA = a.name.toUpperCase(); // ignore upper and lowercase
-                const nameB = b.name.toUpperCase(); // ignore upper and lowercase
-                if (a.type === 'category' || b.type === 'category') {
+                const nameA = a.name.toUpperCase();
+                const nameB = b.name.toUpperCase();
+                if (a.type === DocumentTreeNodeType.FOLDER || b.type === DocumentTreeNodeType.FOLDER) {
                     return 0;
                 }
                 if (nameA > nameB) {
@@ -8156,198 +8163,6 @@ __decorate([
     __metadata("design:paramtypes", [])
 ], DocumentTreeNode.prototype, "childDocumentCount", null);
 
-const 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.ɵɵelementContainerStart(0);
     i0.ɵɵelementStart(1, "div", 4);
@@ -8473,51 +8288,74 @@ CaseFileViewFolderSortComponent.ɵcmp = i0.ɵɵdefineComponent({ type: CaseFileV
             type: Output
         }] }); })();
 
-const _c0$G = ["tree"];
-function CaseFileViewFolderComponent_cdk_nested_tree_node_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "cdk-nested-tree-node", 7);
-    i0.ɵɵelementStart(1, "div", 8);
-    i0.ɵɵelementStart(2, "button", 9);
-    i0.ɵɵelement(3, "img", 10);
+function CaseFileViewFolderComponent_div_8_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵtext(1, " No results found ");
+    i0.ɵɵelementEnd();
+} }
+function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "cdk-nested-tree-node", 12);
+    i0.ɵɵelementStart(1, "div", 13);
+    i0.ɵɵelementStart(2, "button", 14);
+    i0.ɵɵelement(3, "img", 15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 11);
+    i0.ɵɵelementStart(4, "span", 16);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r2 = ctx.$implicit;
+    const node_r4 = ctx.$implicit;
     i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate(node_r2.name);
-} }
-function CaseFileViewFolderComponent_cdk_nested_tree_node_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "cdk-nested-tree-node", 7);
-    i0.ɵɵelementStart(1, "div", 12);
-    i0.ɵɵelementStart(2, "button", 13);
-    i0.ɵɵelement(3, "img", 14);
-    i0.ɵɵelementStart(4, "span", 15);
+    i0.ɵɵtextInterpolate(node_r4.name);
+} }
+function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "cdk-nested-tree-node", 12);
+    i0.ɵɵelementStart(1, "div", 13);
+    i0.ɵɵelementStart(2, "button", 17);
+    i0.ɵɵelement(3, "img", 18);
+    i0.ɵɵelementStart(4, "span", 19);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 16);
+    i0.ɵɵelementStart(6, "span", 20);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "div");
-    i0.ɵɵelementContainer(9, 17);
+    i0.ɵɵelementContainer(9, 21);
     i0.ɵɵelementEnd();
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const node_r3 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext();
+    const node_r5 = ctx.$implicit;
+    const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵattribute("aria-label", "toggle " + node_r3.name);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(node_r3.childDocumentCount);
+    i0.ɵɵattribute("aria-label", "toggle " + node_r5.name);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("src", ctx_r3.nestedTreeControl.isExpanded(node_r5) ? "/assets/images/folder-open.png" : "/assets/images/folder.png", i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(node_r5.childDocumentCount);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(node_r3.name);
+    i0.ɵɵtextInterpolate(node_r5.name);
+    i0.ɵɵadvance(1);
+    i0.ɵɵclassProp("document-tree-invisible", !ctx_r3.nestedTreeControl.isExpanded(node_r5));
+} }
+function CaseFileViewFolderComponent_div_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵtemplate(1, CaseFileViewFolderComponent_div_8_div_1_Template, 2, 0, "div", 8);
+    i0.ɵɵelementStart(2, "cdk-tree", 9);
+    i0.ɵɵtemplate(3, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_3_Template, 6, 1, "cdk-nested-tree-node", 10);
+    i0.ɵɵtemplate(4, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template, 10, 6, "cdk-nested-tree-node", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵclassProp("document-tree-invisible", !ctx_r1.nestedTreeControl.isExpanded(node_r3));
+    i0.ɵɵproperty("ngIf", !ctx_r0.nestedDataSource || ctx_r0.nestedDataSource.length === 0);
+    i0.ɵɵadvance(1);
+    i0.ɵɵproperty("dataSource", ctx_r0.nestedDataSource)("treeControl", ctx_r0.nestedTreeControl);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("cdkTreeNodeDefWhen", ctx_r0.nestedChildren);
 } }
 class CaseFileViewFolderComponent {
     constructor() {
@@ -8526,37 +8364,38 @@ class CaseFileViewFolderComponent {
         this.nestedChildren = (_, nodeData) => nodeData.children;
         this.nestedTreeControl = new NestedTreeControl(this.getChildren);
     }
-    get documentCount() {
-        var _a;
-        if ((_a = this.nestedDataSource) === null || _a === void 0 ? void 0 : _a.length) {
-            return this.nestedDataSource.reduce((acc, item) => {
-                return acc + item.childDocumentCount;
-            }, 0);
-        }
-        else {
-            return 0;
-        }
-    }
     ngOnInit() {
+        this.documentFilterFormGroup = new FormGroup({});
+        this.documentSearchFormControl = new 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(tap((searchTerm) => this.searchTermLength = searchTerm.length), switchMap((searchTerm) => this.filter(searchTerm.toLowerCase()).pipe())).subscribe(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(categoriesAndDocuments => {
-            // Using the mock data for now as we have to display the documents as well for demo purpose
-            const categories = this.loadCategories(); // categoriesAndDocuments.categories;
+            const categories = categoriesAndDocuments.categories;
             // Generate document tree data from categories
-            const treeData = this.generateTreeData(categories);
+            this.documentTreeData = this.generateTreeData(categories);
             // Append uncategorised documents
             if (categoriesAndDocuments.uncategorised_documents && categoriesAndDocuments.uncategorised_documents.length > 0) {
                 const 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;
         });
     }
     generateTreeData(categories) {
         return categories.reduce((tree, node) => {
             const newDocumentTreeNode = new DocumentTreeNode();
             newDocumentTreeNode.name = node.category_name;
-            newDocumentTreeNode.type = 'category';
+            newDocumentTreeNode.type = DocumentTreeNodeType.FOLDER;
             newDocumentTreeNode.children = [...this.generateTreeData(node.sub_categories), ...this.getDocuments(node.documents)];
             return [
                 ...tree,
@@ -8569,7 +8408,7 @@ class CaseFileViewFolderComponent {
         documents.forEach(document => {
             const documentTreeNode = new DocumentTreeNode();
             documentTreeNode.name = document.document_filename;
-            documentTreeNode.type = 'document';
+            documentTreeNode.type = DocumentTreeNodeType.DOCUMENT;
             documentsToReturn.push(documentTreeNode);
         });
         return documentsToReturn;
@@ -8579,15 +8418,35 @@ class CaseFileViewFolderComponent {
         uncategorisedDocuments.forEach(document => {
             const documentTreeNode = new DocumentTreeNode();
             documentTreeNode.name = document.document_filename;
-            documentTreeNode.type = 'document';
+            documentTreeNode.type = DocumentTreeNodeType.DOCUMENT;
             documents.push(documentTreeNode);
         });
         const uncategorisedNode = new DocumentTreeNode();
         uncategorisedNode.name = CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE;
-        uncategorisedNode.type = 'category';
+        uncategorisedNode.type = DocumentTreeNodeType.FOLDER;
         uncategorisedNode.children = documents;
         return uncategorisedNode;
     }
+    filter(searchTerm) {
+        // Make a copy of the data so we do not mutate the original
+        function copy(node) {
+            const documentTreeNode = new DocumentTreeNode();
+            return Object.assign(documentTreeNode, node);
+        }
+        let 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 of(filteredData);
+    }
     sortDataSourceAscAlphabetically() {
         const sortedData = this.nestedDataSource.map(item => {
             item.sortChildrenAscending();
@@ -8606,11 +8465,6 @@ class CaseFileViewFolderComponent {
         });
         this.updateNodeData(sortedData);
     }
-    ngOnDestroy() {
-        if (this.categoriesAndDocumentsSubscription) {
-            this.categoriesAndDocumentsSubscription.unsubscribe();
-        }
-    }
     updateNodeData(data) {
         const prevSelected = this.nestedTreeControl.expansionModel.selected.map((item) => {
             return item.name;
@@ -8631,42 +8485,39 @@ class CaseFileViewFolderComponent {
         });
         newObjects.forEach(object => this.nestedTreeControl.expand(object));
     }
-    loadCategories() {
-        return categoriesAndDocumentsTestData.categories;
+    ngOnDestroy() {
+        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();
     }
 }
 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.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], viewQuery: function CaseFileViewFolderComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(_c0$G, 3);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵ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) { if (rf & 1) {
+CaseFileViewFolderComponent.ɵcmp = i0.ɵɵ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.ɵɵelementStart(0, "div", 0);
         i0.ɵɵelementStart(1, "div", 1);
-        i0.ɵɵtext(2);
+        i0.ɵɵelement(2, "input", 2);
         i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(3, "div");
-        i0.ɵɵelementStart(4, "ccd-case-file-view-folder-sort", 2);
-        i0.ɵɵ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.ɵɵelementEnd();
+        i0.ɵɵelementStart(3, "div", 3);
+        i0.ɵɵelementStart(4, "div", 4);
+        i0.ɵɵtext(5, "Documents");
         i0.ɵɵelementEnd();
+        i0.ɵɵelementStart(6, "div");
+        i0.ɵɵelementStart(7, "ccd-case-file-view-folder-sort", 5);
+        i0.ɵɵ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.ɵɵelementEnd();
-        i0.ɵɵelementStart(5, "div", 3);
-        i0.ɵɵelementStart(6, "cdk-tree", 4);
-        i0.ɵɵtemplate(7, CaseFileViewFolderComponent_cdk_nested_tree_node_7_Template, 6, 1, "cdk-nested-tree-node", 5);
-        i0.ɵɵtemplate(8, CaseFileViewFolderComponent_cdk_nested_tree_node_8_Template, 10, 5, "cdk-nested-tree-node", 6);
         i0.ɵɵelementEnd();
         i0.ɵɵelementEnd();
+        i0.ɵɵtemplate(8, CaseFileViewFolderComponent_div_8_Template, 5, 4, "div", 6);
     } if (rf & 2) {
-        i0.ɵɵadvance(2);
-        i0.ɵɵtextInterpolate1("Documents (", ctx.documentCount, ")");
-        i0.ɵɵadvance(4);
-        i0.ɵɵproperty("dataSource", ctx.nestedDataSource)("treeControl", ctx.nestedTreeControl);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("cdkTreeNodeDefWhen", ctx.nestedChildren);
-    } }, directives: [CaseFileViewFolderSortComponent, i2.CdkTree, i2.CdkTreeNodeDef, i2.CdkNestedTreeNode, i2.CdkTreeNodeToggle, i2.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}"] });
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("formGroup", ctx.documentFilterFormGroup);
+        i0.ɵɵadvance(7);
+        i0.ɵɵproperty("ngIf", ctx.documentTreeData);
+    } }, directives: [i1$3.NgControlStatusGroup, i1$3.FormGroupDirective, i1$3.DefaultValueAccessor, i1$3.NgControlStatus, i1$3.FormControlName, CaseFileViewFolderSortComponent, i1.NgIf, i4.CdkTree, i4.CdkTreeNodeDef, i4.CdkNestedTreeNode, i4.CdkTreeNodeToggle, i4.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.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
         type: Component,
         args: [{
@@ -8676,20 +8527,54 @@ CaseFileViewFolderComponent.ɵcmp = i0.ɵɵdefineComponent({ type: CaseFileViewF
             }]
     }], function () { return []; }, { categoriesAndDocuments: [{
             type: Input
-        }], tree: [{
-            type: ViewChild,
-            args: ['tree', { static: true }]
         }] }); })();
 
+function CaseFileViewFieldComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵelementStart(1, "h1", 3);
+    i0.ɵɵtext(2, "Sorry, there is a problem with the service");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 4);
+    i0.ɵɵtext(4, "Try again later.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} }
+function CaseFileViewFieldComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelementStart(1, "h2", 5);
+    i0.ɵɵtext(2, "Case file");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 6);
+    i0.ɵɵelementStart(4, "div", 7);
+    i0.ɵɵelement(5, "ccd-case-file-view-folder", 8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(6, "div", 9);
+    i0.ɵɵelementStart(7, "div", 10);
+    i0.ɵɵelement(8, "mv-media-viewer", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("categoriesAndDocuments", ctx_r1.categoriesAndDocuments$);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("url", "")("showToolbar", true)("contentType", "pdf");
+} }
 class CaseFileViewFieldComponent {
     constructor(elementRef, route, caseFileViewService) {
         this.elementRef = elementRef;
         this.route = route;
         this.caseFileViewService = caseFileViewService;
+        this.getCategoriesAndDocumentsError = false;
     }
     ngOnInit() {
         const cid = this.route.snapshot.paramMap.get(CaseFileViewFieldComponent.PARAM_CASE_ID);
         this.categoriesAndDocuments$ = this.caseFileViewService.getCategoriesAndDocuments(cid);
+        this.categoriesAndDocumentsSubscription = this.categoriesAndDocuments$.subscribe({
+            next: _ => { },
+            error: _ => this.getCategoriesAndDocumentsError = true
+        });
     }
     ngAfterViewInit() {
         const slider = this.elementRef.nativeElement.querySelector('.slider');
@@ -8713,26 +8598,22 @@ class CaseFileViewFieldComponent {
             documentTreeContainer.setAttribute('style', `width: ${calculatedWidth}%`);
         });
     }
+    ngOnDestroy() {
+        if (this.categoriesAndDocumentsSubscription) {
+            this.categoriesAndDocumentsSubscription.unsubscribe();
+        }
+    }
 }
 CaseFileViewFieldComponent.PARAM_CASE_ID = 'cid';
 CaseFileViewFieldComponent.ɵfac = function CaseFileViewFieldComponent_Factory(t) { return new (t || CaseFileViewFieldComponent)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$1.ActivatedRoute), i0.ɵɵdirectiveInject(CaseFileViewService)); };
-CaseFileViewFieldComponent.ɵcmp = i0.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], decls: 8, vars: 1, 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"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "h2", 0);
-        i0.ɵɵtext(1, "Case file");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(2, "div", 1);
-        i0.ɵɵelementStart(3, "div", 2);
-        i0.ɵɵelement(4, "ccd-case-file-view-folder", 3);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelement(5, "div", 4);
-        i0.ɵɵelementStart(6, "div", 5);
-        i0.ɵɵtext(7, " Media viewer ");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
+CaseFileViewFieldComponent.ɵcmp = i0.ɵɵ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.ɵɵtemplate(0, CaseFileViewFieldComponent_div_0_Template, 5, 0, "div", 0);
+        i0.ɵɵtemplate(1, CaseFileViewFieldComponent_div_1_Template, 9, 4, "div", 1);
     } if (rf & 2) {
-        i0.ɵɵadvance(4);
-        i0.ɵɵproperty("categoriesAndDocuments", ctx.categoriesAndDocuments$);
-    } }, directives: [CaseFileViewFolderComponent], 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%}"] });
+        i0.ɵɵproperty("ngIf", ctx.getCategoriesAndDocumentsError);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !ctx.getCategoriesAndDocumentsError);
+    } }, directives: [i1.NgIf, CaseFileViewFolderComponent, i5.ɵ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.ɵsetClassMetadata(CaseFileViewFieldComponent, [{
         type: Component,
         args: [{
@@ -9477,7 +9358,7 @@ class WriteCollectionFieldComponent extends AbstractFieldWriteComponent {
         return notSimple.indexOf(caseField.field_type.collection_field_type.type) < 0;
     }
 }
-WriteCollectionFieldComponent.ɵfac = function WriteCollectionFieldComponent_Factory(t) { return new (t || WriteCollectionFieldComponent)(i0.ɵɵdirectiveInject(i1$6.MatDialog), i0.ɵɵdirectiveInject(i2$1.ScrollToService), i0.ɵɵdirectiveInject(ProfileNotifier)); };
+WriteCollectionFieldComponent.ɵfac = function WriteCollectionFieldComponent_Factory(t) { return new (t || WriteCollectionFieldComponent)(i0.ɵɵdirectiveInject(i1$6.MatDialog), i0.ɵɵdirectiveInject(i2.ScrollToService), i0.ɵɵdirectiveInject(ProfileNotifier)); };
 WriteCollectionFieldComponent.ɵcmp = i0.ɵɵdefineComponent({ type: WriteCollectionFieldComponent, selectors: [["ccd-write-collection-field"]], viewQuery: function WriteCollectionFieldComponent_Query(rf, ctx) { if (rf & 1) {
         i0.ɵɵviewQuery(_c0$D, 1);
     } if (rf & 2) {
@@ -9519,7 +9400,7 @@ WriteCollectionFieldComponent.ɵcmp = i0.ɵɵdefineComponent({ type: WriteCollec
                 templateUrl: './write-collection-field.html',
                 styleUrls: ['./collection-field.scss']
             }]
-    }], function () { return [{ type: i1$6.MatDialog }, { type: i2$1.ScrollToService }, { type: ProfileNotifier }]; }, { caseFields: [{
+    }], function () { return [{ type: i1$6.MatDialog }, { type: i2.ScrollToService }, { type: ProfileNotifier }]; }, { caseFields: [{
             type: Input
         }], formGroup: [{
             type: Input
@@ -10463,7 +10344,7 @@ DatetimePickerComponent.ɵcmp = i0.ɵɵdefineComponent({ type: DatetimePickerCom
         i0.ɵɵproperty("for", _r6);
         i0.ɵɵadvance(1);
         i0.ɵɵ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.NgClass, i1.NgIf, i1$3.DefaultValueAccessor, i4.NgxMatDatetimeInput, i1$3.NgControlStatus, i1$3.FormControlDirective, i5.MatDatepickerToggle, i6.MatSuffix, i4.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.NgClass, i1.NgIf, i1$3.DefaultValueAccessor, i4$1.NgxMatDatetimeInput, i1$3.NgControlStatus, i1$3.FormControlDirective, i5$1.MatDatepickerToggle, i6.MatSuffix, i4$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.ɵsetClassMetadata(DatetimePickerComponent, [{
         type: Component,
         args: [{
@@ -12615,7 +12496,7 @@ WriteJudicialUserFieldComponent.ɵcmp = i0.ɵɵdefineComponent({ type: WriteJudi
         i0.ɵɵproperty("ngForOf", ctx.filteredJudicialUsers);
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", !(ctx.filteredJudicialUsers == null ? null : ctx.filteredJudicialUsers.length) && ctx.showAutocomplete);
-    } }, directives: [i1$3.NgControlStatusGroup, i1$3.FormGroupDirective, i1.NgIf, i1$3.DefaultValueAccessor, i5$1.MatAutocompleteTrigger, i1$3.NgControlStatus, i1$3.FormControlDirective, i5$1.MatAutocomplete, i1.NgForOf, i6$1.MatOption, i1.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$3.NgControlStatusGroup, i1$3.FormGroupDirective, i1.NgIf, i1$3.DefaultValueAccessor, i5$2.MatAutocompleteTrigger, i1$3.NgControlStatus, i1$3.FormControlDirective, i5$2.MatAutocomplete, i1.NgForOf, i6$1.MatOption, i1.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.ɵsetClassMetadata(WriteJudicialUserFieldComponent, [{
         type: Component,
         args: [{
@@ -17185,7 +17066,8 @@ PaletteModule.ɵinj = i0.ɵɵdefineInjector({ providers: [
             CdkTreeModule,
             OverlayModule,
             PaymentLibModule,
-            ScrollToModule.forRoot()
+            ScrollToModule.forRoot(),
+            MediaViewerModule
         ], NgxMatDatetimePickerModule,
         NgxMatNativeDateModule,
         NgxMatTimepickerModule,
@@ -17292,7 +17174,7 @@ PaletteModule.ɵinj = i0.ɵɵdefineInjector({ providers: [
         MatAutocompleteModule,
         CdkTreeModule,
         OverlayModule,
-        PaymentLibModule, i2$1.ScrollToModule], exports: [NgxMatDatetimePickerModule,
+        PaymentLibModule, i2.ScrollToModule, MediaViewerModule], exports: [NgxMatDatetimePickerModule,
         NgxMatNativeDateModule,
         NgxMatTimepickerModule,
         TabsModule,
@@ -17399,7 +17281,8 @@ PaletteModule.ɵinj = i0.ɵɵdefineInjector({ providers: [
                     CdkTreeModule,
                     OverlayModule,
                     PaymentLibModule,
-                    ScrollToModule.forRoot()
+                    ScrollToModule.forRoot(),
+                    MediaViewerModule
                 ],
                 declarations: [
                     FixedListPipe,
@@ -18183,7 +18066,7 @@ PaginationComponent.ɵcmp = i0.ɵɵdefineComponent({ type: PaginationComponent,
         i0.ɵɵproperty("id", ctx.id)("maxSize", ctx.maxSize);
         i0.ɵɵadvance(3);
         i0.ɵɵproperty("ngIf", !(ctx.autoHide && _r0.pages.length <= 1));
-    } }, directives: [i1$7.PaginationControlsDirective, i1.NgIf, i1.NgForOf], pipes: [i1.DecimalPipe], styles: [".ngx-pagination[_ngcontent-%COMP%]{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]:before{content:\" \";display:table}.ngx-pagination[_ngcontent-%COMP%]:after{clear:both}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0;display:inline-block}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover, .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#e6e6e6}.ngx-pagination[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%]{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{display:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]:hover{background:transparent}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{cursor:pointer}.ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before{margin-right:.5rem;border-width:3px 0 0 3px}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before{display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;transform:rotate(-45deg);content:\"\"}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after{margin-left:.5rem;border-width:0 3px 3px 0}.ngx-pagination[_ngcontent-%COMP%]   .show-for-sr[_ngcontent-%COMP%]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:none}@media screen and (max-width:601px){.ngx-pagination.responsive[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination.responsive[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"] });
+    } }, directives: [i1$7.PaginationControlsDirective, i1.NgIf, i1.NgForOf], pipes: [i1.DecimalPipe], styles: [".ngx-pagination[_ngcontent-%COMP%]{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]:before{content:\" \";display:table}.ngx-pagination[_ngcontent-%COMP%]:after{clear:both}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0;display:inline-block}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover, .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#e6e6e6}.ngx-pagination[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%]{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{display:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]:hover{background:transparent}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{cursor:pointer}.ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before{margin-right:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;transform:rotate(-45deg);content:\"\";border-width:3px 0 0 3px}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after{margin-left:.5rem;display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;transform:rotate(-45deg);content:\"\";border-width:0 3px 3px 0}.ngx-pagination[_ngcontent-%COMP%]   .show-for-sr[_ngcontent-%COMP%]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:none}@media screen and (max-width:601px){.ngx-pagination.responsive[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination.responsive[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"] });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationComponent, [{
         type: Component,
         args: [{