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

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/forms'), require('rx-polling'), require('rxjs'), require('@angular/common/http'), require('rxjs/operators'), require('class-transformer'), require('underscore'), require('moment'), require('util'), require('@edium/fsm'), require('ngx-md'), require('@angular/cdk/tree'), require('@angular/cdk/overlay'), require('@hmcts/media-viewer'), require('@angular/material/dialog'), require('@nicky-lenaers/ngx-scroll-to'), require('@angular-material-components/datetime-picker'), require('@angular-material-components/moment-adapter'), require('@angular/material/datepicker'), require('@angular/material/form-field'), require('@angular/material/autocomplete'), require('@angular/material/core'), require('@hmcts/ccpay-web-component'), require('@angular/cdk/portal'), require('@angular/material/input'), require('ngx-pagination'), require('@angular/material/tabs')) :
     typeof define === 'function' && define.amd ? define('@hmcts/ccd-case-ui-toolkit', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/forms', 'rx-polling', 'rxjs', '@angular/common/http', 'rxjs/operators', 'class-transformer', 'underscore', 'moment', 'util', '@edium/fsm', 'ngx-md', '@angular/cdk/tree', '@angular/cdk/overlay', '@hmcts/media-viewer', '@angular/material/dialog', '@nicky-lenaers/ngx-scroll-to', '@angular-material-components/datetime-picker', '@angular-material-components/moment-adapter', '@angular/material/datepicker', '@angular/material/form-field', '@angular/material/autocomplete', '@angular/material/core', '@hmcts/ccpay-web-component', '@angular/cdk/portal', '@angular/material/input', 'ngx-pagination', '@angular/material/tabs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.hmcts = global.hmcts || {}, global.hmcts["ccd-case-ui-toolkit"] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.forms, global["rx-polling"], global.rxjs, global.ng.common.http, global.rxjs.operators, global["class-transformer"], global.underscore, global.moment, global.util, global["@edium/fsm"], global["ngx-md"], global.ng.cdk.tree, global.ng.cdk.overlay, global.i4, global.ng.material.dialog, global["@nicky-lenaers/ngx-scroll-to"], global["@angular-material-components/datetime-picker"], global["@angular-material-components/moment-adapter"], global.ng.material.datepicker, global.ng.material.formField, global.ng.material.autocomplete, global.ng.material.core, global["@hmcts/ccpay-web-component"], global.ng.cdk.portal, global.ng.material.input, global["ngx-pagination"], global.ng.material.tabs));
-})(this, (function (exports, i0, i1, i1$1, i1$2, polling, rxjs, i1$3, operators, classTransformer, _, moment, util, fsm, i1$4, i2, i1$5, i4, i1$6, i2$1, i4$1, momentAdapter, i5, i6, i5$1, i6$1, i3, i6$2, input, i1$7, i10) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.hmcts = global.hmcts || {}, global.hmcts["ccd-case-ui-toolkit"] = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.forms, global["rx-polling"], global.rxjs, global.ng.common.http, global.rxjs.operators, global["class-transformer"], global.underscore, global.moment, global.util, global["@edium/fsm"], global["ngx-md"], global.ng.cdk.tree, global.ng.cdk.overlay, global.i5, global.ng.material.dialog, global["@nicky-lenaers/ngx-scroll-to"], global["@angular-material-components/datetime-picker"], global["@angular-material-components/moment-adapter"], global.ng.material.datepicker, global.ng.material.formField, global.ng.material.autocomplete, global.ng.material.core, global["@hmcts/ccpay-web-component"], global.ng.cdk.portal, global.ng.material.input, global["ngx-pagination"], global.ng.material.tabs));
+})(this, (function (exports, i0, i1, i1$1, i1$2, polling, rxjs, i1$3, operators, classTransformer, _, moment, util, fsm, i1$4, i4, i1$5, i5, i1$6, i2, i4$1, momentAdapter, i5$1, i6, i5$2, i6$1, i3, i6$2, input, i1$7, i10) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -33,15 +33,15 @@
     var ___namespace = /*#__PURE__*/_interopNamespace(_);
     var moment__namespace = /*#__PURE__*/_interopNamespace(moment);
     var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
-    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
-    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
     var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i5__namespace$2 = /*#__PURE__*/_interopNamespace(i5$2);
     var i6__namespace$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
@@ -118,14 +118,14 @@
         }
     }
     var _c0$Q = [[["", "footerSolsNavLinks", ""]], [["", "footerCaseWorkerNavLinks", ""]]];
-    var _c1$n = ["[footerSolsNavLinks]", "[footerCaseWorkerNavLinks]"];
+    var _c1$o = ["[footerSolsNavLinks]", "[footerCaseWorkerNavLinks]"];
     var FooterComponent = /** @class */ (function () {
         function FooterComponent() {
         }
         return FooterComponent;
     }());
     FooterComponent.ɵfac = function FooterComponent_Factory(t) { return new (t || FooterComponent)(); };
-    FooterComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: FooterComponent, selectors: [["cut-footer-bar"]], inputs: { email: "email", isSolicitor: "isSolicitor", phone: "phone", workhours: "workhours" }, ngContentSelectors: _c1$n, decls: 4, vars: 4, consts: [["id", "footer", "role", "footer", 1, "group", "js-footer"], [1, "footer-wrapper"], ["class", "footer-meta", 4, "ngIf"], [1, "footer-meta"], [1, "footer-meta-inner"], [1, "open-government-licence"], [1, "logo"], ["href", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", "rel", "license"], [1, "copyright"], ["href", "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/"], [1, "title"], [1, "footer-text"], [1, "email"], [3, "href"], [1, "phone"], [1, "work-hours"]], template: function FooterComponent_Template(rf, ctx) {
+    FooterComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: FooterComponent, selectors: [["cut-footer-bar"]], inputs: { email: "email", isSolicitor: "isSolicitor", phone: "phone", workhours: "workhours" }, ngContentSelectors: _c1$o, decls: 4, vars: 4, consts: [["id", "footer", "role", "footer", 1, "group", "js-footer"], [1, "footer-wrapper"], ["class", "footer-meta", 4, "ngIf"], [1, "footer-meta"], [1, "footer-meta-inner"], [1, "open-government-licence"], [1, "logo"], ["href", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", "rel", "license"], [1, "copyright"], ["href", "https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/"], [1, "title"], [1, "footer-text"], [1, "email"], [3, "href"], [1, "phone"], [1, "work-hours"]], template: function FooterComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵprojectionDef(_c0$Q);
                 i0__namespace.ɵɵelementStart(0, "footer", 0);
@@ -207,7 +207,7 @@
         }
     }
     var _c0$P = [[["", "headerNavigation", ""]]];
-    var _c1$m = ["[headerNavigation]"];
+    var _c1$n = ["[headerNavigation]"];
     var HeaderBarComponent = /** @class */ (function () {
         function HeaderBarComponent() {
             this.signOutRequest = new i0.EventEmitter();
@@ -218,7 +218,7 @@
         return HeaderBarComponent;
     }());
     HeaderBarComponent.ɵfac = function HeaderBarComponent_Factory(t) { return new (t || HeaderBarComponent)(); };
-    HeaderBarComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: HeaderBarComponent, selectors: [["cut-header-bar"]], inputs: { title: "title", isSolicitor: "isSolicitor", username: "username" }, outputs: { signOutRequest: "signOutRequest" }, ngContentSelectors: _c1$m, decls: 15, vars: 8, consts: [["role", "banner", "id", "global-header", 1, "with-proposition"], [1, "header-wrapper"], [1, "header-global"], [4, "ngIf"], ["class", "global-header", 4, "ngIf"], [1, "header-proposition"], [1, "content"], ["href", "#proposition-links", 1, "js-header-toggle", "menu"], ["id", "proposition-menu", 4, "ngIf"], [1, "proposition-right"], ["id", "user-name"], ["id", "sign-out", "href", "javascript:void(0)", 3, "click"], ["href", "https://www.gov.uk", "title", "Go to the GOV.UK homepage", "id", "logo", 1, "content", 2, "margin-left", "0px"], ["src", "/img/gov.uk_logotype_crown_invert_trans.png?0.23.0", "width", "36", "height", "32", "alt", ""], [1, "global-header"], [1, "title"], ["id", "proposition-menu"], [1, "title-solicitor"], ["id", "proposition-name"]], template: function HeaderBarComponent_Template(rf, ctx) {
+    HeaderBarComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: HeaderBarComponent, selectors: [["cut-header-bar"]], inputs: { title: "title", isSolicitor: "isSolicitor", username: "username" }, outputs: { signOutRequest: "signOutRequest" }, ngContentSelectors: _c1$n, decls: 15, vars: 8, consts: [["role", "banner", "id", "global-header", 1, "with-proposition"], [1, "header-wrapper"], [1, "header-global"], [4, "ngIf"], ["class", "global-header", 4, "ngIf"], [1, "header-proposition"], [1, "content"], ["href", "#proposition-links", 1, "js-header-toggle", "menu"], ["id", "proposition-menu", 4, "ngIf"], [1, "proposition-right"], ["id", "user-name"], ["id", "sign-out", "href", "javascript:void(0)", 3, "click"], ["href", "https://www.gov.uk", "title", "Go to the GOV.UK homepage", "id", "logo", 1, "content", 2, "margin-left", "0px"], ["src", "/img/gov.uk_logotype_crown_invert_trans.png?0.23.0", "width", "36", "height", "32", "alt", ""], [1, "global-header"], [1, "title"], ["id", "proposition-menu"], [1, "title-solicitor"], ["id", "proposition-name"]], template: function HeaderBarComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵprojectionDef(_c0$P);
                 i0__namespace.ɵɵelementStart(0, "header", 0);
@@ -282,14 +282,14 @@
     })();
 
     var _c0$O = [[["", "leftNavLinks", ""]], [["", "rightNavLinks", ""]]];
-    var _c1$l = ["[leftNavLinks]", "[rightNavLinks]"];
+    var _c1$m = ["[leftNavLinks]", "[rightNavLinks]"];
     var NavigationComponent = /** @class */ (function () {
         function NavigationComponent() {
         }
         return NavigationComponent;
     }());
     NavigationComponent.ɵfac = function NavigationComponent_Factory(t) { return new (t || NavigationComponent)(); };
-    NavigationComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["cut-nav-bar"]], inputs: { isSolicitor: "isSolicitor" }, ngContentSelectors: _c1$l, decls: 4, vars: 2, consts: [[1, "cut-nav-bar"]], template: function NavigationComponent_Template(rf, ctx) {
+    NavigationComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: NavigationComponent, selectors: [["cut-nav-bar"]], inputs: { isSolicitor: "isSolicitor" }, ngContentSelectors: _c1$m, decls: 4, vars: 2, consts: [[1, "cut-nav-bar"]], template: function NavigationComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵprojectionDef(_c0$O);
                 i0__namespace.ɵɵelementStart(0, "div");
@@ -437,14 +437,14 @@
     })();
 
     var _c0$N = [[["", "topBody", ""]], [["", "leftBody", ""]], [["", "rightBody", ""]]];
-    var _c1$k = ["[topBody]", "[leftBody]", "[rightBody]"];
+    var _c1$l = ["[topBody]", "[leftBody]", "[rightBody]"];
     var BodyComponent = /** @class */ (function () {
         function BodyComponent() {
         }
         return BodyComponent;
     }());
     BodyComponent.ɵfac = function BodyComponent_Factory(t) { return new (t || BodyComponent)(); };
-    BodyComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: BodyComponent, selectors: [["cut-body"]], ngContentSelectors: _c1$k, decls: 4, vars: 0, consts: [[1, "global-display"]], template: function BodyComponent_Template(rf, ctx) {
+    BodyComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: BodyComponent, selectors: [["cut-body"]], ngContentSelectors: _c1$l, decls: 4, vars: 0, consts: [[1, "global-display"]], template: function BodyComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵprojectionDef(_c0$N);
                 i0__namespace.ɵɵelementStart(0, "div", 0);
@@ -1302,14 +1302,14 @@
     })();
 
     var _c0$K = function (a0) { return { "js-hidden": a0 }; };
-    var _c1$j = ["*"];
+    var _c1$k = ["*"];
     var TabComponent = /** @class */ (function () {
         function TabComponent() {
         }
         return TabComponent;
     }());
     TabComponent.ɵfac = function TabComponent_Factory(t) { return new (t || TabComponent)(); };
-    TabComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: TabComponent, selectors: [["cut-tab"]], inputs: { id: "id", title: "title", selected: "selected" }, ngContentSelectors: _c1$j, decls: 2, vars: 5, consts: [["role", "tabpanel", 1, "tabs-panel", 3, "id", "ngClass"]], template: function TabComponent_Template(rf, ctx) {
+    TabComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: TabComponent, selectors: [["cut-tab"]], inputs: { id: "id", title: "title", selected: "selected" }, ngContentSelectors: _c1$k, decls: 2, vars: 5, consts: [["role", "tabpanel", 1, "tabs-panel", 3, "id", "ngClass"]], template: function TabComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵprojectionDef();
                 i0__namespace.ɵɵelementStart(0, "div", 0);
@@ -1341,7 +1341,7 @@
     })();
 
     var _c0$J = ["tab"];
-    var _c1$i = function () { return ["."]; };
+    var _c1$j = function () { return ["."]; };
     var _c2$3 = function (a0) { return { "tabs-toggle-selected": a0 }; };
     function TabsComponent_li_2_Template(rf, ctx) {
         if (rf & 1) {
@@ -1356,7 +1356,7 @@
         if (rf & 2) {
             var panel_r1 = ctx.$implicit;
             i0__namespace.ɵɵadvance(1);
-            i0__namespace.ɵɵproperty("routerLink", i0__namespace.ɵɵpureFunction0(6, _c1$i))("fragment", panel_r1.id)("ngClass", i0__namespace.ɵɵpureFunction1(7, _c2$3, panel_r1.selected));
+            i0__namespace.ɵɵproperty("routerLink", i0__namespace.ɵɵpureFunction0(6, _c1$j))("fragment", panel_r1.id)("ngClass", i0__namespace.ɵɵpureFunction1(7, _c2$3, panel_r1.selected));
             i0__namespace.ɵɵattribute("aria-controls", panel_r1.id)("aria-selected", panel_r1.selected);
             i0__namespace.ɵɵadvance(2);
             i0__namespace.ɵɵtextInterpolate(panel_r1.title);
@@ -6404,10 +6404,9 @@
     })();
 
     var CaseFileViewService = /** @class */ (function () {
-        function CaseFileViewService(http, appConfig, errorService) {
+        function CaseFileViewService(http, appConfig) {
             this.http = http;
             this.appConfig = appConfig;
-            this.errorService = errorService;
         }
         /**
          * Retrieves the categories and documents for a case.
@@ -6438,12 +6437,12 @@
         };
         return CaseFileViewService;
     }());
-    CaseFileViewService.ɵfac = function CaseFileViewService_Factory(t) { return new (t || CaseFileViewService)(i0__namespace.ɵɵinject(HttpService), i0__namespace.ɵɵinject(AbstractAppConfig), i0__namespace.ɵɵinject(HttpErrorService)); };
+    CaseFileViewService.ɵfac = function CaseFileViewService_Factory(t) { return new (t || CaseFileViewService)(i0__namespace.ɵɵinject(HttpService), i0__namespace.ɵɵinject(AbstractAppConfig)); };
     CaseFileViewService.ɵprov = i0__namespace.ɵɵdefineInjectable({ token: CaseFileViewService, factory: CaseFileViewService.ɵfac });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseFileViewService, [{
                 type: i0.Injectable
-            }], function () { return [{ type: HttpService }, { type: AbstractAppConfig }, { type: HttpErrorService }]; }, null);
+            }], function () { return [{ type: HttpService }, { type: AbstractAppConfig }]; }, null);
     })();
 
     var DocumentManagementService = /** @class */ (function () {
@@ -8860,7 +8859,7 @@
         return IsCompoundPipe;
     }());
     IsCompoundPipe.COMPOUND_TYPES = [
-        'Complex', 'Label', 'AddressGlobal', 'AddressUK', 'AddressGlobalUK', 'CasePaymentHistoryViewer', 'CaseHistoryViewer', 'Organisation', 'WaysToPay'
+        'Complex', 'Label', 'AddressGlobal', 'AddressUK', 'AddressGlobalUK', 'CasePaymentHistoryViewer', 'CaseHistoryViewer', 'Organisation', 'WaysToPay', 'ComponentLauncher'
     ];
     IsCompoundPipe.EXCLUDE = [
         'CaseLink', 'JudicialUser'
@@ -9212,7 +9211,7 @@
             i0__namespace.ɵɵelementEnd();
         }
     }
-    var _c1$h = function (a0) { return { "form-group-error": a0 }; };
+    var _c1$i = function (a0) { return { "form-group-error": a0 }; };
     var _c2$2 = function (a0) { return { "govuk-input--error": a0 }; };
     function WriteAddressFieldComponent_div_1_div_4_Template(rf, ctx) {
         if (rf & 1) {
@@ -9233,7 +9232,7 @@
         }
         if (rf & 2) {
             var ctx_r2 = i0__namespace.ɵɵnextContext(2);
-            i0__namespace.ɵɵproperty("id", ctx_r2.createElementId("postcodeLookup"))("ngClass", i0__namespace.ɵɵpureFunction1(7, _c1$h, ctx_r2.missingPostcode));
+            i0__namespace.ɵɵproperty("id", ctx_r2.createElementId("postcodeLookup"))("ngClass", i0__namespace.ɵɵpureFunction1(7, _c1$i, ctx_r2.missingPostcode));
             i0__namespace.ɵɵadvance(1);
             i0__namespace.ɵɵproperty("for", ctx_r2.createElementId("postcodeInput"));
             i0__namespace.ɵɵadvance(3);
@@ -9482,6 +9481,12 @@
         return CategoriesAndDocuments;
     }());
 
+    var DocumentTreeNodeType;
+    (function (DocumentTreeNodeType) {
+        DocumentTreeNodeType["FOLDER"] = "folder";
+        DocumentTreeNodeType["DOCUMENT"] = "document";
+    })(DocumentTreeNodeType || (DocumentTreeNodeType = {}));
+
     var DocumentTreeNode = /** @class */ (function () {
         function DocumentTreeNode() {
         }
@@ -9507,9 +9512,9 @@
             var _a, _b;
             var sortAscending = function () {
                 return function (a, b) {
-                    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
-                    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
-                    if (a.type === 'category' || b.type === 'category') {
+                    var nameA = a.name.toUpperCase();
+                    var nameB = b.name.toUpperCase();
+                    if (a.type === DocumentTreeNodeType.FOLDER || b.type === DocumentTreeNodeType.FOLDER) {
                         return 0;
                     }
                     if (nameA < nameB) {
@@ -9529,9 +9534,9 @@
             var _a, _b;
             var sortDescending = function () {
                 return function (a, b) {
-                    var nameA = a.name.toUpperCase(); // ignore upper and lowercase
-                    var nameB = b.name.toUpperCase(); // ignore upper and lowercase
-                    if (a.type === 'category' || b.type === 'category') {
+                    var nameA = a.name.toUpperCase();
+                    var nameB = b.name.toUpperCase();
+                    if (a.type === DocumentTreeNodeType.FOLDER || b.type === DocumentTreeNodeType.FOLDER) {
                         return 0;
                     }
                     if (nameA > nameB) {
@@ -9582,258 +9587,69 @@
         __metadata("design:paramtypes", [])
     ], DocumentTreeNode.prototype, "childDocumentCount", null);
 
-    var categoriesAndDocumentsTestData = {
-        case_version: 1,
-        categories: [
-            {
-                category_id: 'Beers',
-                category_name: 'Beers',
-                category_order: 1,
-                documents: [
-                    {
-                        document_url: '/test',
-                        document_filename: 'Lager encyclopedia',
-                        document_binary_url: '/test/binary',
-                        attribute_path: '',
-                        upload_timestamp: ''
-                    },
-                    {
-                        document_url: '/test',
-                        document_filename: 'Beers encyclopedia',
-                        document_binary_url: '/test/binary',
-                        attribute_path: '',
-                        upload_timestamp: ''
-                    },
-                    {
-                        document_url: '/test',
-                        document_filename: 'Ale encyclopedia',
-                        document_binary_url: '/test/binary',
-                        attribute_path: '',
-                        upload_timestamp: ''
-                    }
-                ],
-                sub_categories: [
-                    {
-                        category_id: 'BeersBitters',
-                        category_name: 'Bitters',
-                        category_order: 1,
-                        documents: [],
-                        sub_categories: []
-                    },
-                    {
-                        category_id: 'BeersAmerican',
-                        category_name: 'American',
-                        category_order: 2,
-                        documents: [],
-                        sub_categories: []
-                    },
-                    {
-                        category_id: 'BeersAsian',
-                        category_name: 'Asian',
-                        category_order: 3,
-                        documents: [],
-                        sub_categories: []
-                    }
-                ]
-            },
-            {
-                category_id: 'Wines',
-                category_name: 'Wines',
-                category_order: 2,
-                documents: [],
-                sub_categories: [
-                    {
-                        category_id: 'WinesFrench',
-                        category_name: 'French',
-                        category_order: 1,
-                        documents: [],
-                        sub_categories: []
-                    },
-                    {
-                        category_id: 'WinesItalian',
-                        category_name: 'Italian',
-                        category_order: 2,
-                        documents: [],
-                        sub_categories: []
-                    }
-                ]
-            },
-            {
-                category_id: 'Spirits',
-                category_name: 'Spirits',
-                category_order: 3,
-                documents: [],
-                sub_categories: [
-                    {
-                        category_id: 'SpiritsWhisky',
-                        category_name: 'Scotch whisky',
-                        category_order: 1,
-                        documents: [],
-                        sub_categories: [
-                            {
-                                category_id: 'WhiskyHighland',
-                                category_name: 'Highland',
-                                category_order: 1,
-                                documents: [],
-                                sub_categories: [
-                                    {
-                                        category_id: 'WhiskyHighland1',
-                                        category_name: 'Highland 1',
-                                        category_order: 1,
-                                        documents: [],
-                                        sub_categories: []
-                                    }
-                                ]
-                            },
-                            {
-                                category_id: 'WhiskyLowland',
-                                category_name: 'Lowland',
-                                category_order: 2,
-                                documents: [],
-                                sub_categories: [
-                                    {
-                                        category_id: 'WhiskyLowland1',
-                                        category_name: 'Lowland 1',
-                                        category_order: 1,
-                                        documents: [
-                                            {
-                                                document_url: '/test',
-                                                document_filename: 'Details about Whisky Lowland 1',
-                                                document_binary_url: '/test/binary',
-                                                attribute_path: '',
-                                                upload_timestamp: ''
-                                            }
-                                        ],
-                                        sub_categories: []
-                                    },
-                                    {
-                                        category_id: 'WhiskyLowland2',
-                                        category_name: 'Lowland 2',
-                                        category_order: 2,
-                                        documents: [],
-                                        sub_categories: []
-                                    }
-                                ]
-                            },
-                            {
-                                category_id: 'WhiskyIslay',
-                                category_name: 'Islay',
-                                category_order: 3,
-                                documents: [
-                                    {
-                                        document_url: '/test',
-                                        document_filename: 'Details about Whisky Islay',
-                                        document_binary_url: '/test/binary',
-                                        attribute_path: '',
-                                        upload_timestamp: ''
-                                    },
-                                    {
-                                        document_url: '/test',
-                                        document_filename: 'More information about Whisky Islay',
-                                        document_binary_url: '/test/binary',
-                                        attribute_path: '',
-                                        upload_timestamp: ''
-                                    }
-                                ],
-                                sub_categories: []
-                            },
-                            {
-                                category_id: 'WhiskySpeyside',
-                                category_name: 'Speyside',
-                                category_order: 4,
-                                documents: [],
-                                sub_categories: []
-                            },
-                            {
-                                category_id: 'WhiskyCampbeltown',
-                                category_name: 'Campbeltown',
-                                category_order: 5,
-                                documents: [],
-                                sub_categories: []
-                            }
-                        ]
-                    }
-                ]
-            }
-        ],
-        uncategorised_documents: [
-            {
-                document_url: '/uncategorised-document-1',
-                document_filename: 'Uncategorised document 1',
-                document_binary_url: '/test/binary',
-                attribute_path: '',
-                upload_timestamp: ''
-            },
-            {
-                document_url: '/uncategorised-document-2',
-                document_filename: 'Uncategorised document 2',
-                document_binary_url: '/test/binary',
-                attribute_path: '',
-                upload_timestamp: ''
-            }
-        ]
-    };
-
-    function CaseFileViewOverlayMenuComponent_ng_template_0_ng_container_1_Template(rf, ctx) {
+    function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_1_Template(rf, ctx) {
         if (rf & 1) {
             i0__namespace.ɵɵelementContainerStart(0);
-            i0__namespace.ɵɵelementStart(1, "div", 4);
+            i0__namespace.ɵɵelementStart(1, "div", 6);
             i0__namespace.ɵɵtext(2);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementContainerEnd();
         }
         if (rf & 2) {
-            var ctx_r1 = i0__namespace.ɵɵnextContext(2);
+            var ctx_r2 = i0__namespace.ɵɵnextContext(2);
             i0__namespace.ɵɵadvance(2);
-            i0__namespace.ɵɵtextInterpolate(ctx_r1.title);
+            i0__namespace.ɵɵtextInterpolate(ctx_r2.title);
         }
     }
-    function CaseFileViewOverlayMenuComponent_ng_template_0_ng_container_2_img_2_Template(rf, ctx) {
+    function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_img_2_Template(rf, ctx) {
         if (rf & 1) {
-            i0__namespace.ɵɵelement(0, "img", 8);
+            i0__namespace.ɵɵelement(0, "img", 10);
         }
         if (rf & 2) {
-            var item_r3 = i0__namespace.ɵɵnextContext().$implicit;
-            var ctx_r4 = i0__namespace.ɵɵnextContext(2);
-            i0__namespace.ɵɵproperty("src", item_r3.iconSrc, i0__namespace.ɵɵsanitizeUrl)("alt", ctx_r4.title);
+            var item_r4 = i0__namespace.ɵɵnextContext().$implicit;
+            var ctx_r5 = i0__namespace.ɵɵnextContext(2);
+            i0__namespace.ɵɵpropertyInterpolate1("alt", "", ctx_r5.title, " icon'");
+            i0__namespace.ɵɵproperty("src", item_r4.iconSrc, i0__namespace.ɵɵsanitizeUrl);
         }
     }
-    function CaseFileViewOverlayMenuComponent_ng_template_0_ng_container_2_Template(rf, ctx) {
+    function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template(rf, ctx) {
         if (rf & 1) {
-            var _r7_1 = i0__namespace.ɵɵgetCurrentView();
+            var _r8_1 = i0__namespace.ɵɵgetCurrentView();
             i0__namespace.ɵɵelementContainerStart(0);
-            i0__namespace.ɵɵelementStart(1, "div", 5);
-            i0__namespace.ɵɵlistener("click", function CaseFileViewOverlayMenuComponent_ng_template_0_ng_container_2_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r7_1); var item_r3 = ctx.$implicit; var ctx_r6 = i0__namespace.ɵɵnextContext(2); item_r3.actionFn(); return ctx_r6.closeOverlay(); });
-            i0__namespace.ɵɵtemplate(2, CaseFileViewOverlayMenuComponent_ng_template_0_ng_container_2_img_2_Template, 1, 2, "img", 6);
-            i0__namespace.ɵɵelementStart(3, "div", 7);
+            i0__namespace.ɵɵelementStart(1, "div", 7);
+            i0__namespace.ɵɵlistener("click", function CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template_div_click_1_listener() { i0__namespace.ɵɵrestoreView(_r8_1); var item_r4 = ctx.$implicit; var ctx_r7 = i0__namespace.ɵɵnextContext(2); item_r4.actionFn(); return ctx_r7.closeOverlay(); });
+            i0__namespace.ɵɵtemplate(2, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_img_2_Template, 1, 2, "img", 8);
+            i0__namespace.ɵɵelementStart(3, "div", 9);
             i0__namespace.ɵɵtext(4);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementContainerEnd();
         }
         if (rf & 2) {
-            var item_r3 = ctx.$implicit;
+            var item_r4 = ctx.$implicit;
             i0__namespace.ɵɵadvance(2);
-            i0__namespace.ɵɵproperty("ngIf", item_r3.iconSrc);
+            i0__namespace.ɵɵproperty("ngIf", item_r4.iconSrc);
             i0__namespace.ɵɵadvance(2);
-            i0__namespace.ɵɵtextInterpolate(item_r3.actionText);
+            i0__namespace.ɵɵtextInterpolate(item_r4.actionText);
         }
     }
-    function CaseFileViewOverlayMenuComponent_ng_template_0_Template(rf, ctx) {
+    function CaseFileViewOverlayMenuComponent_ng_template_4_Template(rf, ctx) {
         if (rf & 1) {
-            i0__namespace.ɵɵelementStart(0, "div", 1);
-            i0__namespace.ɵɵtemplate(1, CaseFileViewOverlayMenuComponent_ng_template_0_ng_container_1_Template, 3, 1, "ng-container", 2);
-            i0__namespace.ɵɵtemplate(2, CaseFileViewOverlayMenuComponent_ng_template_0_ng_container_2_Template, 5, 2, "ng-container", 3);
+            i0__namespace.ɵɵelementStart(0, "div", 3);
+            i0__namespace.ɵɵtemplate(1, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_1_Template, 3, 1, "ng-container", 4);
+            i0__namespace.ɵɵtemplate(2, CaseFileViewOverlayMenuComponent_ng_template_4_ng_container_2_Template, 5, 2, "ng-container", 5);
             i0__namespace.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var ctx_r0 = i0__namespace.ɵɵnextContext();
+            var ctx_r1 = i0__namespace.ɵɵnextContext();
             i0__namespace.ɵɵadvance(1);
-            i0__namespace.ɵɵproperty("ngIf", ctx_r0.title);
+            i0__namespace.ɵɵproperty("ngIf", ctx_r1.title);
             i0__namespace.ɵɵadvance(1);
-            i0__namespace.ɵɵproperty("ngForOf", ctx_r0.menuItems);
+            i0__namespace.ɵɵproperty("ngForOf", ctx_r1.menuItems);
         }
     }
+    var _c0$G = [[["", "trigger", ""]]];
+    var _c1$h = ["[trigger]"];
     var CaseFileViewOverlayMenuComponent = /** @class */ (function () {
         function CaseFileViewOverlayMenuComponent() {
             this.title = '';
@@ -9848,14 +9664,24 @@
         return CaseFileViewOverlayMenuComponent;
     }());
     CaseFileViewOverlayMenuComponent.ɵfac = function CaseFileViewOverlayMenuComponent_Factory(t) { return new (t || CaseFileViewOverlayMenuComponent)(); };
-    CaseFileViewOverlayMenuComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewOverlayMenuComponent, selectors: [["ccd-case-file-view-overlay-menu"]], inputs: { title: "title", menuItems: "menuItems", cdkOverlayOrigin: "cdkOverlayOrigin", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, decls: 1, vars: 2, consts: [["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen"], [1, "overlayMenu"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "overlayMenu__title"], [1, "overlayMenu__item", 3, "click"], ["class", "overlayMenu__itemIcon", 3, "src", "alt", 4, "ngIf"], [1, "overlayMenu__actionText"], [1, "overlayMenu__itemIcon", 3, "src", "alt"]], template: function CaseFileViewOverlayMenuComponent_Template(rf, ctx) {
+    CaseFileViewOverlayMenuComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewOverlayMenuComponent, selectors: [["ccd-case-file-view-overlay-menu"]], inputs: { title: "title", menuItems: "menuItems", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngContentSelectors: _c1$h, decls: 5, vars: 4, consts: [["type", "button", "cdkOverlayOrigin", "", 1, "overlay-toggle", 3, "click"], ["trigger", "cdkOverlayOrigin"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayBackdropClass", "backdropClick"], [1, "overlay-menu"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "overlay-menu__title"], [1, "overlay-menu__item", 3, "click"], ["class", "overlay-menu__itemIcon", 3, "src", "alt", 4, "ngIf"], [1, "overlay-menu__actionText"], [1, "overlay-menu__itemIcon", 3, "src", "alt"]], template: function CaseFileViewOverlayMenuComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0__namespace.ɵɵtemplate(0, CaseFileViewOverlayMenuComponent_ng_template_0_Template, 3, 2, "ng-template", 0);
+                i0__namespace.ɵɵprojectionDef(_c0$G);
+                i0__namespace.ɵɵelementStart(0, "div");
+                i0__namespace.ɵɵelementStart(1, "button", 0, 1);
+                i0__namespace.ɵɵlistener("click", function CaseFileViewOverlayMenuComponent_Template_button_click_1_listener() { return ctx.isOpen = !ctx.isOpen; });
+                i0__namespace.ɵɵprojection(3);
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵtemplate(4, CaseFileViewOverlayMenuComponent_ng_template_4_Template, 3, 2, "ng-template", 2);
+                i0__namespace.ɵɵlistener("backdropClick", function CaseFileViewOverlayMenuComponent_Template_ng_template_backdropClick_4_listener() { return ctx.closeOverlay(); });
+                i0__namespace.ɵɵelementEnd();
             }
             if (rf & 2) {
-                i0__namespace.ɵɵproperty("cdkConnectedOverlayOrigin", ctx.cdkOverlayOrigin)("cdkConnectedOverlayOpen", ctx.isOpen);
+                var _r0 = i0__namespace.ɵɵreference(2);
+                i0__namespace.ɵɵadvance(4);
+                i0__namespace.ɵɵproperty("cdkConnectedOverlayOrigin", _r0)("cdkConnectedOverlayOpen", ctx.isOpen)("cdkConnectedOverlayHasBackdrop", true)("cdkConnectedOverlayBackdropClass", "cdk-overlay-transparent-backdrop");
             }
-        }, directives: [i1__namespace$5.CdkConnectedOverlay, i1__namespace.NgIf, i1__namespace.NgForOf], styles: [".overlayMenu[_ngcontent-%COMP%]{background-color:#fafafa;border:1px solid grey;margin-top:8px;font-size:1rem}.overlayMenu__item[_ngcontent-%COMP%], .overlayMenu__title[_ngcontent-%COMP%]{padding:10px;border-bottom:1px solid grey}.overlayMenu__item[_ngcontent-%COMP%]:last-child, .overlayMenu__title[_ngcontent-%COMP%]:last-child{border:none}.overlayMenu__title[_ngcontent-%COMP%]{padding-left:6px;padding-right:6px}.overlayMenu__item[_ngcontent-%COMP%]{display:flex;align-items:center;cursor:pointer;font-size:.875em}.overlayMenu__item[_ngcontent-%COMP%]:hover{background-color:#fff2cc}.overlayMenu__itemIcon[_ngcontent-%COMP%]{height:1.25em;width:1.25em;margin-right:6px}"] });
+        }, directives: [i1__namespace$5.CdkOverlayOrigin, i1__namespace$5.CdkConnectedOverlay, i1__namespace.NgIf, i1__namespace.NgForOf], styles: [".overlay-toggle[_ngcontent-%COMP%]{display:block;background:none;border:0;padding:0 6px;margin-right:-6px;cursor:pointer}.overlay-menu[_ngcontent-%COMP%]{background-color:#fafafa;border:1px solid grey;margin-top:8px;font-size:1rem}.overlay-menu__item[_ngcontent-%COMP%], .overlay-menu__title[_ngcontent-%COMP%]{padding:10px;border-bottom:1px solid grey}.overlay-menu__item[_ngcontent-%COMP%]:last-child, .overlay-menu__title[_ngcontent-%COMP%]:last-child{border:none}.overlay-menu__title[_ngcontent-%COMP%]{padding-left:6px;padding-right:6px}.overlay-menu__item[_ngcontent-%COMP%]{display:flex;align-items:center;cursor:pointer;font-size:.875em}.overlay-menu__item[_ngcontent-%COMP%]:hover{background-color:#fff2cc}.overlay-menu__itemIcon[_ngcontent-%COMP%]{height:1.25em;width:1.25em;margin-right:6px}"] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseFileViewOverlayMenuComponent, [{
                 type: i0.Component,
@@ -9868,8 +9694,6 @@
                     type: i0.Input
                 }], menuItems: [{
                     type: i0.Input
-                }], cdkOverlayOrigin: [{
-                    type: i0.Input
                 }], isOpen: [{
                     type: i0.Input
                 }], isOpenChange: [{
@@ -9888,12 +9712,10 @@
                 { actionText: 'Z to A descending', iconSrc: '/assets/img/sort/sort-up-arrow.svg', actionFn: function () { return _this.sortDescending.emit(); } },
             ];
         }
-        CaseFileViewFolderSortComponent.prototype.ngOnInit = function () {
-        };
         return CaseFileViewFolderSortComponent;
     }());
     CaseFileViewFolderSortComponent.ɵfac = function CaseFileViewFolderSortComponent_Factory(t) { return new (t || CaseFileViewFolderSortComponent)(); };
-    CaseFileViewFolderSortComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFolderSortComponent, selectors: [["ccd-case-file-view-folder-sort"]], outputs: { sortAscending: "sortAscending", sortDescending: "sortDescending" }, decls: 4, vars: 4, consts: [["type", "button", "cdkOverlayOrigin", "", 1, "sort-button", 3, "click"], ["trigger", "cdkOverlayOrigin"], ["src", "/assets/img/sort/sort-arrows.svg", "alt", "Sort Arrows", 1, "sort-button__arrows"], [3, "title", "menuItems", "cdkOverlayOrigin", "isOpen", "isOpenChange"]], template: function CaseFileViewFolderSortComponent_Template(rf, ctx) {
+    CaseFileViewFolderSortComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFolderSortComponent, selectors: [["ccd-case-file-view-folder-sort"]], outputs: { sortAscending: "sortAscending", sortDescending: "sortDescending" }, decls: 4, vars: 3, consts: [["type", "button", "cdkOverlayOrigin", "", 1, "sort-button", 3, "click"], ["trigger", "cdkOverlayOrigin"], ["src", "/assets/img/sort/sort-arrows.svg", "alt", "Sort Arrows", 1, "sort-button__arrows"], [3, "title", "menuItems", "isOpen", "isOpenChange"]], template: function CaseFileViewFolderSortComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "button", 0, 1);
                 i0__namespace.ɵɵlistener("click", function CaseFileViewFolderSortComponent_Template_button_click_0_listener() { return ctx.isOpen = !ctx.isOpen; });
@@ -9904,9 +9726,8 @@
                 i0__namespace.ɵɵelementEnd();
             }
             if (rf & 2) {
-                var _r0 = i0__namespace.ɵɵreference(1);
                 i0__namespace.ɵɵadvance(3);
-                i0__namespace.ɵɵproperty("title", "Sort documents by name")("menuItems", ctx.overlayMenuItems)("cdkOverlayOrigin", _r0)("isOpen", ctx.isOpen);
+                i0__namespace.ɵɵproperty("title", "Sort documents by name")("menuItems", ctx.overlayMenuItems)("isOpen", ctx.isOpen);
             }
         }, directives: [i1__namespace$5.CdkOverlayOrigin, CaseFileViewOverlayMenuComponent], styles: [".sort-button[_ngcontent-%COMP%]{display:block;background:none;border:0;padding:0 6px;margin-right:-6px;cursor:pointer}.sort-button__arrows[_ngcontent-%COMP%]{display:block;height:20px}"] });
     (function () {
@@ -9924,56 +9745,140 @@
                 }] });
     })();
 
-    var _c0$G = ["tree"];
-    function CaseFileViewFolderComponent_cdk_nested_tree_node_7_Template(rf, ctx) {
+    var CaseFileViewFolderDocumentActionsComponent = /** @class */ (function () {
+        function CaseFileViewFolderDocumentActionsComponent() {
+            var _this = this;
+            this.isOpen = false;
+            this.changeFolderAction = new i0.EventEmitter();
+            this.openInANewTabAction = new i0.EventEmitter();
+            this.downloadAction = new i0.EventEmitter();
+            this.printAction = new i0.EventEmitter();
+            this.overlayMenuItems = [
+                { actionText: 'Change folder', iconSrc: '/assets/img/case-file-view/document-menu/open_with.svg', actionFn: function () { return _this.changeFolderAction.emit(); } },
+                { actionText: 'Open in a new tab', iconSrc: '/assets/img/case-file-view/document-menu/open_in_new.svg', actionFn: function () { return _this.openInANewTabAction.emit(); } },
+                { actionText: 'Download', iconSrc: '/assets/img/case-file-view/document-menu/download.svg', actionFn: function () { return _this.downloadAction.emit(); } },
+                { actionText: 'Print', iconSrc: '/assets/img/case-file-view/document-menu/print.svg', actionFn: function () { return _this.printAction.emit(); } },
+            ];
+        }
+        return CaseFileViewFolderDocumentActionsComponent;
+    }());
+    CaseFileViewFolderDocumentActionsComponent.ɵfac = function CaseFileViewFolderDocumentActionsComponent_Factory(t) { return new (t || CaseFileViewFolderDocumentActionsComponent)(); };
+    CaseFileViewFolderDocumentActionsComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFolderDocumentActionsComponent, selectors: [["ccd-case-file-view-folder-document-actions"]], outputs: { changeFolderAction: "changeFolderAction", openInANewTabAction: "openInANewTabAction", downloadAction: "downloadAction", printAction: "printAction" }, decls: 3, vars: 2, consts: [[3, "menuItems", "isOpen", "isOpenChange"], ["trigger", ""], ["src", "/assets/img/case-file-view/document-menu/more_vert.svg", "alt", "More document options", 1, "actions-trigger-icon"]], template: function CaseFileViewFolderDocumentActionsComponent_Template(rf, ctx) {
+            if (rf & 1) {
+                i0__namespace.ɵɵelementStart(0, "ccd-case-file-view-overlay-menu", 0);
+                i0__namespace.ɵɵlistener("isOpenChange", function CaseFileViewFolderDocumentActionsComponent_Template_ccd_case_file_view_overlay_menu_isOpenChange_0_listener($event) { return ctx.isOpen = $event; });
+                i0__namespace.ɵɵelementContainerStart(1, 1);
+                i0__namespace.ɵɵelement(2, "img", 2);
+                i0__namespace.ɵɵelementContainerEnd();
+                i0__namespace.ɵɵelementEnd();
+            }
+            if (rf & 2) {
+                i0__namespace.ɵɵproperty("menuItems", ctx.overlayMenuItems)("isOpen", ctx.isOpen);
+            }
+        }, directives: [CaseFileViewOverlayMenuComponent], styles: [".actions-trigger-icon[_ngcontent-%COMP%]{display:block;height:24px;margin-right:-5px}"] });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseFileViewFolderDocumentActionsComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ccd-case-file-view-folder-document-actions',
+                        templateUrl: './case-file-view-folder-document-actions.component.html',
+                        styleUrls: ['./case-file-view-folder-document-actions.component.scss']
+                    }]
+            }], function () { return []; }, { changeFolderAction: [{
+                    type: i0.Output
+                }], openInANewTabAction: [{
+                    type: i0.Output
+                }], downloadAction: [{
+                    type: i0.Output
+                }], printAction: [{
+                    type: i0.Output
+                }] });
+    })();
+
+    function CaseFileViewFolderComponent_div_8_div_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0__namespace.ɵɵelementStart(0, "cdk-nested-tree-node", 7);
-            i0__namespace.ɵɵelementStart(1, "div", 8);
-            i0__namespace.ɵɵelementStart(2, "button", 9);
-            i0__namespace.ɵɵelement(3, "img", 10);
+            i0__namespace.ɵɵelementStart(0, "div");
+            i0__namespace.ɵɵtext(1, " No results found ");
             i0__namespace.ɵɵelementEnd();
-            i0__namespace.ɵɵelementStart(4, "span", 11);
+        }
+    }
+    function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_3_Template(rf, ctx) {
+        if (rf & 1) {
+            var _r6_1 = i0__namespace.ɵɵgetCurrentView();
+            i0__namespace.ɵɵelementStart(0, "cdk-nested-tree-node", 12);
+            i0__namespace.ɵɵelementStart(1, "button", 13);
+            i0__namespace.ɵɵelementStart(2, "div", 14);
+            i0__namespace.ɵɵelement(3, "img", 15);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementStart(4, "span", 16);
             i0__namespace.ɵɵtext(5);
             i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementStart(6, "div", 17);
+            i0__namespace.ɵɵelementStart(7, "ccd-case-file-view-folder-document-actions", 18);
+            i0__namespace.ɵɵlistener("changeFolderAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_3_Template_ccd_case_file_view_folder_document_actions_changeFolderAction_7_listener() { i0__namespace.ɵɵrestoreView(_r6_1); var ctx_r5 = i0__namespace.ɵɵnextContext(2); return ctx_r5.triggerDocumentAction("changeFolder"); })("openInANewTabAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_3_Template_ccd_case_file_view_folder_document_actions_openInANewTabAction_7_listener() { i0__namespace.ɵɵrestoreView(_r6_1); var ctx_r7 = i0__namespace.ɵɵnextContext(2); return ctx_r7.triggerDocumentAction("openInANewTab"); })("downloadAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_3_Template_ccd_case_file_view_folder_document_actions_downloadAction_7_listener() { i0__namespace.ɵɵrestoreView(_r6_1); var ctx_r8 = i0__namespace.ɵɵnextContext(2); return ctx_r8.triggerDocumentAction("download"); })("printAction", function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_3_Template_ccd_case_file_view_folder_document_actions_printAction_7_listener() { i0__namespace.ɵɵrestoreView(_r6_1); var ctx_r9 = i0__namespace.ɵɵnextContext(2); return ctx_r9.triggerDocumentAction("print"); });
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var node_r2 = ctx.$implicit;
+            var node_r4 = ctx.$implicit;
             i0__namespace.ɵɵadvance(5);
-            i0__namespace.ɵɵtextInterpolate(node_r2.name);
+            i0__namespace.ɵɵtextInterpolate(node_r4.name);
         }
     }
-    function CaseFileViewFolderComponent_cdk_nested_tree_node_8_Template(rf, ctx) {
+    function CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template(rf, ctx) {
         if (rf & 1) {
-            i0__namespace.ɵɵelementStart(0, "cdk-nested-tree-node", 7);
-            i0__namespace.ɵɵelementStart(1, "div", 12);
-            i0__namespace.ɵɵelementStart(2, "button", 13);
-            i0__namespace.ɵɵelement(3, "img", 14);
-            i0__namespace.ɵɵelementStart(4, "span", 15);
+            i0__namespace.ɵɵelementStart(0, "cdk-nested-tree-node", 12);
+            i0__namespace.ɵɵelementStart(1, "button", 13);
+            i0__namespace.ɵɵelementStart(2, "div", 19);
+            i0__namespace.ɵɵelement(3, "img", 20);
+            i0__namespace.ɵɵelementStart(4, "span", 21);
             i0__namespace.ɵɵtext(5);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
-            i0__namespace.ɵɵelementStart(6, "span", 16);
+            i0__namespace.ɵɵelementStart(6, "span", 22);
             i0__namespace.ɵɵtext(7);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementStart(8, "div");
-            i0__namespace.ɵɵelementContainer(9, 17);
+            i0__namespace.ɵɵelementContainer(9, 23);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
         }
         if (rf & 2) {
-            var node_r3 = ctx.$implicit;
-            var ctx_r1 = i0__namespace.ɵɵnextContext();
+            var node_r10 = ctx.$implicit;
+            var ctx_r3 = i0__namespace.ɵɵnextContext(2);
             i0__namespace.ɵɵadvance(2);
-            i0__namespace.ɵɵattribute("aria-label", "toggle " + node_r3.name);
-            i0__namespace.ɵɵadvance(3);
-            i0__namespace.ɵɵtextInterpolate(node_r3.childDocumentCount);
+            i0__namespace.ɵɵattribute("aria-label", "toggle " + node_r10.name);
+            i0__namespace.ɵɵadvance(1);
+            i0__namespace.ɵɵproperty("src", ctx_r3.nestedTreeControl.isExpanded(node_r10) ? "/assets/images/folder-open.png" : "/assets/images/folder.png", i0__namespace.ɵɵsanitizeUrl);
             i0__namespace.ɵɵadvance(2);
-            i0__namespace.ɵɵtextInterpolate(node_r3.name);
+            i0__namespace.ɵɵtextInterpolate(node_r10.childDocumentCount);
+            i0__namespace.ɵɵadvance(2);
+            i0__namespace.ɵɵtextInterpolate(node_r10.name);
             i0__namespace.ɵɵadvance(1);
-            i0__namespace.ɵɵclassProp("document-tree-invisible", !ctx_r1.nestedTreeControl.isExpanded(node_r3));
+            i0__namespace.ɵɵclassProp("document-tree-invisible", !ctx_r3.nestedTreeControl.isExpanded(node_r10));
+        }
+    }
+    function CaseFileViewFolderComponent_div_8_Template(rf, ctx) {
+        if (rf & 1) {
+            i0__namespace.ɵɵelementStart(0, "div", 7);
+            i0__namespace.ɵɵtemplate(1, CaseFileViewFolderComponent_div_8_div_1_Template, 2, 0, "div", 8);
+            i0__namespace.ɵɵelementStart(2, "cdk-tree", 9);
+            i0__namespace.ɵɵtemplate(3, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_3_Template, 8, 1, "cdk-nested-tree-node", 10);
+            i0__namespace.ɵɵtemplate(4, CaseFileViewFolderComponent_div_8_cdk_nested_tree_node_4_Template, 10, 6, "cdk-nested-tree-node", 11);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r0 = i0__namespace.ɵɵnextContext();
+            i0__namespace.ɵɵadvance(1);
+            i0__namespace.ɵɵproperty("ngIf", !ctx_r0.nestedDataSource || ctx_r0.nestedDataSource.length === 0);
+            i0__namespace.ɵɵadvance(1);
+            i0__namespace.ɵɵproperty("dataSource", ctx_r0.nestedDataSource)("treeControl", ctx_r0.nestedTreeControl);
+            i0__namespace.ɵɵadvance(2);
+            i0__namespace.ɵɵproperty("cdkTreeNodeDefWhen", ctx_r0.nestedChildren);
         }
     }
     var CaseFileViewFolderComponent = /** @class */ (function () {
@@ -9981,37 +9886,34 @@
             this.categories = [];
             this.getChildren = function (node) { return rxjs.of(node.children); };
             this.nestedChildren = function (_, nodeData) { return nodeData.children; };
-            this.nestedTreeControl = new i2.NestedTreeControl(this.getChildren);
+            this.nestedTreeControl = new i4.NestedTreeControl(this.getChildren);
         }
-        Object.defineProperty(CaseFileViewFolderComponent.prototype, "documentCount", {
-            get: function () {
-                var _a;
-                if ((_a = this.nestedDataSource) === null || _a === void 0 ? void 0 : _a.length) {
-                    return this.nestedDataSource.reduce(function (acc, item) {
-                        return acc + item.childDocumentCount;
-                    }, 0);
-                }
-                else {
-                    return 0;
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
         CaseFileViewFolderComponent.prototype.ngOnInit = function () {
             var _this = this;
+            this.documentFilterFormGroup = new i1$2.FormGroup({});
+            this.documentSearchFormControl = new i1$2.FormControl('');
+            this.documentFilterFormGroup.addControl(CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME, this.documentSearchFormControl);
+            // Listen to search input and initiate filter documents if at least three characters entered
+            this.documentFilterSubscription = this.documentSearchFormControl.valueChanges.pipe(operators.tap(function (searchTerm) { return _this.searchTermLength = searchTerm.length; }), operators.switchMap(function (searchTerm) { return _this.filter(searchTerm.toLowerCase()).pipe(); })).subscribe(function (documentTreeData) {
+                _this.nestedDataSource = documentTreeData;
+                _this.nestedTreeControl.dataNodes = documentTreeData;
+                _this.searchTermLength >= CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS
+                    ? _this.nestedTreeControl.expandAll()
+                    : _this.nestedTreeControl.collapseAll();
+            });
+            // Subscribe to the input categories and documents, and generate tree data and initialise cdk tree
             this.categoriesAndDocumentsSubscription = this.categoriesAndDocuments.subscribe(function (categoriesAndDocuments) {
-                // Using the mock data for now as we have to display the documents as well for demo purpose
-                var categories = _this.loadCategories(); // categoriesAndDocuments.categories;
+                var categories = categoriesAndDocuments.categories;
                 // Generate document tree data from categories
-                var treeData = _this.generateTreeData(categories);
+                _this.documentTreeData = _this.generateTreeData(categories);
                 // Append uncategorised documents
                 if (categoriesAndDocuments.uncategorised_documents && categoriesAndDocuments.uncategorised_documents.length > 0) {
                     var uncategorisedDocuments = _this.getUncategorisedDocuments(categoriesAndDocuments.uncategorised_documents);
-                    treeData.push(uncategorisedDocuments);
+                    _this.documentTreeData.push(uncategorisedDocuments);
                 }
                 // Initialise cdk tree with generated data
-                _this.nestedDataSource = treeData;
+                _this.nestedDataSource = _this.documentTreeData;
+                _this.nestedTreeControl.dataNodes = _this.documentTreeData;
             });
         };
         CaseFileViewFolderComponent.prototype.generateTreeData = function (categories) {
@@ -10019,7 +9921,7 @@
             return categories.reduce(function (tree, node) {
                 var newDocumentTreeNode = new DocumentTreeNode();
                 newDocumentTreeNode.name = node.category_name;
-                newDocumentTreeNode.type = 'category';
+                newDocumentTreeNode.type = DocumentTreeNodeType.FOLDER;
                 newDocumentTreeNode.children = __spread(_this.generateTreeData(node.sub_categories), _this.getDocuments(node.documents));
                 return __spread(tree, [
                     newDocumentTreeNode,
@@ -10031,7 +9933,7 @@
             documents.forEach(function (document) {
                 var documentTreeNode = new DocumentTreeNode();
                 documentTreeNode.name = document.document_filename;
-                documentTreeNode.type = 'document';
+                documentTreeNode.type = DocumentTreeNodeType.DOCUMENT;
                 documentsToReturn.push(documentTreeNode);
             });
             return documentsToReturn;
@@ -10041,15 +9943,53 @@
             uncategorisedDocuments.forEach(function (document) {
                 var documentTreeNode = new DocumentTreeNode();
                 documentTreeNode.name = document.document_filename;
-                documentTreeNode.type = 'document';
+                documentTreeNode.type = DocumentTreeNodeType.DOCUMENT;
                 documents.push(documentTreeNode);
             });
             var uncategorisedNode = new DocumentTreeNode();
             uncategorisedNode.name = CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE;
-            uncategorisedNode.type = 'category';
+            uncategorisedNode.type = DocumentTreeNodeType.FOLDER;
             uncategorisedNode.children = documents;
             return uncategorisedNode;
         };
+        CaseFileViewFolderComponent.prototype.filter = function (searchTerm) {
+            // Make a copy of the data so we do not mutate the original
+            function copy(node) {
+                var documentTreeNode = new DocumentTreeNode();
+                return Object.assign(documentTreeNode, node);
+            }
+            var filteredData = this.documentTreeData;
+            if (searchTerm && searchTerm.length >= CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS && this.documentFilterFormGroup.controls[CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME].value.length > 2) {
+                filteredData = this.documentTreeData.map(copy).filter(function filterTreeData(node) {
+                    if (node.name && node.name.toLowerCase().includes(searchTerm) && node.type === DocumentTreeNodeType.DOCUMENT) {
+                        return true;
+                    }
+                    // Call recursively if node has children
+                    if (node.children) {
+                        return (node.children = node.children.map(copy).filter(filterTreeData)).length;
+                    }
+                });
+            }
+            return rxjs.of(filteredData);
+        };
+        CaseFileViewFolderComponent.prototype.triggerDocumentAction = function (actionType) {
+            switch (actionType) {
+                case ('changeFolder'):
+                    console.log('changeFolder!');
+                    break;
+                case ('openInANewTab'):
+                    console.log('openInANewTab!');
+                    break;
+                case ('download'):
+                    console.log('download!');
+                    break;
+                case ('print'):
+                    console.log('print!');
+                    break;
+                default:
+                    return;
+            }
+        };
         CaseFileViewFolderComponent.prototype.sortDataSourceAscAlphabetically = function () {
             var sortedData = this.nestedDataSource.map(function (item) {
                 item.sortChildrenAscending();
@@ -10068,11 +10008,6 @@
             });
             this.updateNodeData(sortedData);
         };
-        CaseFileViewFolderComponent.prototype.ngOnDestroy = function () {
-            if (this.categoriesAndDocumentsSubscription) {
-                this.categoriesAndDocumentsSubscription.unsubscribe();
-            }
-        };
         CaseFileViewFolderComponent.prototype.updateNodeData = function (data) {
             var _this = this;
             var prevSelected = this.nestedTreeControl.expansionModel.selected.map(function (item) {
@@ -10094,49 +10029,43 @@
             });
             newObjects.forEach(function (object) { return _this.nestedTreeControl.expand(object); });
         };
-        CaseFileViewFolderComponent.prototype.loadCategories = function () {
-            return categoriesAndDocumentsTestData.categories;
+        CaseFileViewFolderComponent.prototype.ngOnDestroy = function () {
+            var _a, _b;
+            (_a = this.categoriesAndDocumentsSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            (_b = this.documentFilterSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
         };
         return CaseFileViewFolderComponent;
     }());
     CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE = 'Uncategorised documents';
+    CaseFileViewFolderComponent.DOCUMENT_SEARCH_FORM_CONTROL_NAME = 'documentSearchFormControl';
+    CaseFileViewFolderComponent.MINIMUM_SEARCH_CHARACTERS = 3;
     CaseFileViewFolderComponent.ɵfac = function CaseFileViewFolderComponent_Factory(t) { return new (t || CaseFileViewFolderComponent)(); };
-    CaseFileViewFolderComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], viewQuery: function CaseFileViewFolderComponent_Query(rf, ctx) {
-            if (rf & 1) {
-                i0__namespace.ɵɵviewQuery(_c0$G, 3);
-            }
-            if (rf & 2) {
-                var _t = void 0;
-                i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.tree = _t.first);
-            }
-        }, inputs: { categoriesAndDocuments: "categoriesAndDocuments" }, decls: 9, vars: 4, consts: [[1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], [1, "document-tree-container"], [3, "dataSource", "treeControl"], ["class", "document-tree-node", 4, "cdkTreeNodeDef"], ["class", "document-tree-node", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-node"], [1, "node"], ["mat-icon-button", "", "disabled", "", 1, "node__icon"], ["src", "/assets/images/document.png", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], ["cdkTreeNodeToggle", "", 1, "node"], ["mat-icon-button", "", 1, "node__icon"], ["src", "/assets/images/folder.png", "alt", "Folder icon", 1, "node__iconImg"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) {
+    CaseFileViewFolderComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments" }, decls: 9, vars: 2, consts: [[1, "document-filter-container"], [1, "form-group", "document-filter", 3, "formGroup"], ["type", "search", "id", "document-search", "name", "documentSearchFormControl", "formControlName", "documentSearchFormControl", "placeholder", "Search by document name", 1, "form-control", "document-search"], [1, "document-folders-header"], [1, "document-folders-header__title"], [3, "sortAscending", "sortDescending"], ["class", "document-tree-container", 4, "ngIf"], [1, "document-tree-container"], [4, "ngIf"], [3, "dataSource", "treeControl"], ["class", "document-tree-node", 4, "cdkTreeNodeDef"], ["class", "document-tree-node", 4, "cdkTreeNodeDef", "cdkTreeNodeDefWhen"], [1, "document-tree-node"], ["cdkTreeNodeToggle", "", 1, "node"], ["mat-icon-button", "", "disabled", "", 1, "node__icon"], ["src", "/assets/images/document.png", "alt", "Document icon", 1, "node__iconImg"], [1, "node__name", "node-name-document"], [1, "node__document-options"], [3, "changeFolderAction", "openInANewTabAction", "downloadAction", "printAction"], ["mat-icon-button", "", 1, "node__icon"], ["alt", "Folder icon", 1, "node__iconImg", 3, "src"], [1, "node__count"], [1, "node__name", "node__name--folder"], ["cdkTreeNodeOutlet", ""]], template: function CaseFileViewFolderComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "div", 0);
                 i0__namespace.ɵɵelementStart(1, "div", 1);
-                i0__namespace.ɵɵtext(2);
+                i0__namespace.ɵɵelement(2, "input", 2);
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(3, "div");
-                i0__namespace.ɵɵelementStart(4, "ccd-case-file-view-folder-sort", 2);
-                i0__namespace.ɵɵlistener("sortAscending", function CaseFileViewFolderComponent_Template_ccd_case_file_view_folder_sort_sortAscending_4_listener() { return ctx.sortDataSourceAscAlphabetically(); })("sortDescending", function CaseFileViewFolderComponent_Template_ccd_case_file_view_folder_sort_sortDescending_4_listener() { return ctx.sortDataSourceDescAlphabetically(); });
                 i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(3, "div", 3);
+                i0__namespace.ɵɵelementStart(4, "div", 4);
+                i0__namespace.ɵɵtext(5, "Documents");
                 i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(6, "div");
+                i0__namespace.ɵɵelementStart(7, "ccd-case-file-view-folder-sort", 5);
+                i0__namespace.ɵɵlistener("sortAscending", function CaseFileViewFolderComponent_Template_ccd_case_file_view_folder_sort_sortAscending_7_listener() { return ctx.sortDataSourceAscAlphabetically(); })("sortDescending", function CaseFileViewFolderComponent_Template_ccd_case_file_view_folder_sort_sortDescending_7_listener() { return ctx.sortDataSourceDescAlphabetically(); });
                 i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(5, "div", 3);
-                i0__namespace.ɵɵelementStart(6, "cdk-tree", 4);
-                i0__namespace.ɵɵtemplate(7, CaseFileViewFolderComponent_cdk_nested_tree_node_7_Template, 6, 1, "cdk-nested-tree-node", 5);
-                i0__namespace.ɵɵtemplate(8, CaseFileViewFolderComponent_cdk_nested_tree_node_8_Template, 10, 5, "cdk-nested-tree-node", 6);
                 i0__namespace.ɵɵelementEnd();
                 i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵtemplate(8, CaseFileViewFolderComponent_div_8_Template, 5, 4, "div", 6);
             }
             if (rf & 2) {
-                i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵtextInterpolate1("Documents (", ctx.documentCount, ")");
-                i0__namespace.ɵɵadvance(4);
-                i0__namespace.ɵɵproperty("dataSource", ctx.nestedDataSource)("treeControl", ctx.nestedTreeControl);
-                i0__namespace.ɵɵadvance(2);
-                i0__namespace.ɵɵproperty("cdkTreeNodeDefWhen", ctx.nestedChildren);
+                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵproperty("formGroup", ctx.documentFilterFormGroup);
+                i0__namespace.ɵɵadvance(7);
+                i0__namespace.ɵɵproperty("ngIf", ctx.documentTreeData);
             }
-        }, directives: [CaseFileViewFolderSortComponent, i2__namespace.CdkTree, i2__namespace.CdkTreeNodeDef, i2__namespace.CdkNestedTreeNode, i2__namespace.CdkTreeNodeToggle, i2__namespace.CdkTreeNodeOutlet], styles: [".document-folders-header[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #c9c9c9;padding:10px}.document-folders-header__title[_ngcontent-%COMP%]{font-weight:700}.document-tree-container[_ngcontent-%COMP%]{margin:4px}.document-tree-container[_ngcontent-%COMP%]   .document-tree-invisible[_ngcontent-%COMP%]{display:none}.document-tree-container[_ngcontent-%COMP%]   .document-tree[_ngcontent-%COMP%]   li[_ngcontent-%COMP%], .document-tree-container[_ngcontent-%COMP%]   .document-tree[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]{margin-top:0;margin-bottom:0;list-style-type:none}.document-tree-container[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]{display:block}.document-tree-container[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]{padding-left:40px}.node[_ngcontent-%COMP%]{display:flex;align-items:center;padding:6px 0}.node__icon[_ngcontent-%COMP%]{position:relative;background:none;border:0}.node__iconImg[_ngcontent-%COMP%]{display:block;height:24px}.node__count[_ngcontent-%COMP%]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;padding-top:4px}.node__name[_ngcontent-%COMP%]{margin-left:6px}"] });
+        }, directives: [i1__namespace$3.NgControlStatusGroup, i1__namespace$3.FormGroupDirective, i1__namespace$3.DefaultValueAccessor, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlName, CaseFileViewFolderSortComponent, i1__namespace.NgIf, i4__namespace.CdkTree, i4__namespace.CdkTreeNodeDef, i4__namespace.CdkNestedTreeNode, i4__namespace.CdkTreeNodeToggle, CaseFileViewFolderDocumentActionsComponent, i4__namespace.CdkTreeNodeOutlet], styles: [".document-filter-container[_ngcontent-%COMP%]{border-bottom:2px solid #c9c9c9;padding-bottom:4px}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]{height:70%;padding:8px 8px 0;margin-bottom:10px}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]   .document-search[_ngcontent-%COMP%]{background:url(/assets/images/icon-search-black.svg) no-repeat 100% #fff;background-position-x:calc(100% - 4px);padding-right:30px;width:100%}.document-filter-container[_ngcontent-%COMP%]   .documents-title[_ngcontent-%COMP%]{height:30%;margin-left:8px;font-weight:700}.document-folders-header[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #c9c9c9;padding:10px}.document-folders-header__title[_ngcontent-%COMP%]{font-weight:700}.document-tree-container[_ngcontent-%COMP%]{margin:4px;overflow-x:hidden;overflow-y:scroll;height:400px}.document-tree-container[_ngcontent-%COMP%]   .document-tree-invisible[_ngcontent-%COMP%]{display:none}.document-tree-container[_ngcontent-%COMP%]   .document-tree[_ngcontent-%COMP%]   li[_ngcontent-%COMP%], .document-tree-container[_ngcontent-%COMP%]   .document-tree[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%]{margin-top:0;margin-bottom:0;list-style-type:none}.document-tree-container[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]{display:block}.document-tree-container[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]   .document-tree-node[_ngcontent-%COMP%]{padding-left:40px}.node[_ngcontent-%COMP%]{display:flex;align-items:center;width:100%;padding:6px;background:none;border:0;cursor:pointer;white-space:nowrap}.node__icon[_ngcontent-%COMP%]{position:relative;display:inline-block}.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:6px;font-size:1rem}.node__document-options[_ngcontent-%COMP%]{margin-left:auto;margin-right:0}.document-tree[_ngcontent-%COMP%]::-webkit-scrollbar{width:.5em}.document-tree[_ngcontent-%COMP%]::-webkit-scrollbar-button{display:none}.document-tree[_ngcontent-%COMP%]::-webkit-scrollbar-track-piece{background:#eee}.document-tree[_ngcontent-%COMP%]::-webkit-scrollbar-thumb{background:#ccc}"] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
                 type: i0.Component,
@@ -10147,21 +10076,61 @@
                     }]
             }], function () { return []; }, { categoriesAndDocuments: [{
                     type: i0.Input
-                }], tree: [{
-                    type: i0.ViewChild,
-                    args: ['tree', { static: true }]
                 }] });
     })();
 
+    function CaseFileViewFieldComponent_div_0_Template(rf, ctx) {
+        if (rf & 1) {
+            i0__namespace.ɵɵelementStart(0, "div", 2);
+            i0__namespace.ɵɵelementStart(1, "h1", 3);
+            i0__namespace.ɵɵtext(2, "Sorry, there is a problem with the service");
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementStart(3, "p", 4);
+            i0__namespace.ɵɵtext(4, "Try again later.");
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+        }
+    }
+    function CaseFileViewFieldComponent_div_1_Template(rf, ctx) {
+        if (rf & 1) {
+            i0__namespace.ɵɵelementStart(0, "div");
+            i0__namespace.ɵɵelementStart(1, "h2", 5);
+            i0__namespace.ɵɵtext(2, "Case file");
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementStart(3, "div", 6);
+            i0__namespace.ɵɵelementStart(4, "div", 7);
+            i0__namespace.ɵɵelement(5, "ccd-case-file-view-folder", 8);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelement(6, "div", 9);
+            i0__namespace.ɵɵelementStart(7, "div", 10);
+            i0__namespace.ɵɵelement(8, "mv-media-viewer", 11);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var ctx_r1 = i0__namespace.ɵɵnextContext();
+            i0__namespace.ɵɵadvance(5);
+            i0__namespace.ɵɵproperty("categoriesAndDocuments", ctx_r1.categoriesAndDocuments$);
+            i0__namespace.ɵɵadvance(3);
+            i0__namespace.ɵɵproperty("url", "")("showToolbar", true)("contentType", "pdf");
+        }
+    }
     var CaseFileViewFieldComponent = /** @class */ (function () {
         function CaseFileViewFieldComponent(elementRef, route, caseFileViewService) {
             this.elementRef = elementRef;
             this.route = route;
             this.caseFileViewService = caseFileViewService;
+            this.getCategoriesAndDocumentsError = false;
         }
         CaseFileViewFieldComponent.prototype.ngOnInit = function () {
+            var _this = this;
             var cid = this.route.snapshot.paramMap.get(CaseFileViewFieldComponent.PARAM_CASE_ID);
             this.categoriesAndDocuments$ = this.caseFileViewService.getCategoriesAndDocuments(cid);
+            this.categoriesAndDocumentsSubscription = this.categoriesAndDocuments$.subscribe({
+                next: function (_) { },
+                error: function (_) { return _this.getCategoriesAndDocumentsError = true; }
+            });
         };
         CaseFileViewFieldComponent.prototype.ngAfterViewInit = function () {
             var slider = this.elementRef.nativeElement.querySelector('.slider');
@@ -10185,32 +10154,26 @@
                 documentTreeContainer.setAttribute('style', "width: " + calculatedWidth + "%");
             });
         };
+        CaseFileViewFieldComponent.prototype.ngOnDestroy = function () {
+            if (this.categoriesAndDocumentsSubscription) {
+                this.categoriesAndDocumentsSubscription.unsubscribe();
+            }
+        };
         return CaseFileViewFieldComponent;
     }());
     CaseFileViewFieldComponent.PARAM_CASE_ID = 'cid';
     CaseFileViewFieldComponent.ɵfac = function CaseFileViewFieldComponent_Factory(t) { return new (t || CaseFileViewFieldComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.ElementRef), i0__namespace.ɵɵdirectiveInject(i1__namespace$1.ActivatedRoute), i0__namespace.ɵɵdirectiveInject(CaseFileViewService)); };
-    CaseFileViewFieldComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], decls: 8, vars: 4, consts: [[1, "govuk-heading-l"], ["id", "case-file-view", 1, "govuk-form-group"], [1, "document-tree-container"], [3, "categoriesAndDocuments"], [1, "slider"], [1, "media-viewer-container"], [3, "url", "downloadFileName", "showToolbar", "contentType"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) {
+    CaseFileViewFieldComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFieldComponent, selectors: [["ccd-case-file-view-field"]], decls: 2, vars: 2, consts: [["class", "govuk-grid-column-two-thirds", 4, "ngIf"], [4, "ngIf"], [1, "govuk-grid-column-two-thirds"], [1, "govuk-heading-xl"], [1, "govuk-body"], [1, "govuk-heading-l"], ["id", "case-file-view", 1, "govuk-form-group"], [1, "document-tree-container"], [3, "categoriesAndDocuments"], [1, "slider"], [1, "media-viewer-container"], [3, "url", "downloadFileName", "showToolbar", "contentType"]], template: function CaseFileViewFieldComponent_Template(rf, ctx) {
             if (rf & 1) {
-                i0__namespace.ɵɵelementStart(0, "h2", 0);
-                i0__namespace.ɵɵtext(1, "Case file");
-                i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementStart(2, "div", 1);
-                i0__namespace.ɵɵelementStart(3, "div", 2);
-                i0__namespace.ɵɵelement(4, "ccd-case-file-view-folder", 3);
-                i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelement(5, "div", 4);
-                i0__namespace.ɵɵelementStart(6, "div", 5);
-                i0__namespace.ɵɵelement(7, "mv-media-viewer", 6);
-                i0__namespace.ɵɵelementEnd();
-                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵtemplate(0, CaseFileViewFieldComponent_div_0_Template, 5, 0, "div", 0);
+                i0__namespace.ɵɵtemplate(1, CaseFileViewFieldComponent_div_1_Template, 9, 4, "div", 1);
             }
             if (rf & 2) {
-                i0__namespace.ɵɵadvance(4);
-                i0__namespace.ɵɵproperty("categoriesAndDocuments", ctx.categoriesAndDocuments$);
-                i0__namespace.ɵɵadvance(3);
-                i0__namespace.ɵɵproperty("url", "")("showToolbar", true)("contentType", "pdf");
+                i0__namespace.ɵɵproperty("ngIf", ctx.getCategoriesAndDocumentsError);
+                i0__namespace.ɵɵadvance(1);
+                i0__namespace.ɵɵproperty("ngIf", !ctx.getCategoriesAndDocumentsError);
             }
-        }, directives: [CaseFileViewFolderComponent, i4__namespace.ɵcs], styles: ["#case-file-view[_ngcontent-%COMP%]{display:flex;border:2px solid #c9c9c9}#case-file-view[_ngcontent-%COMP%]   .document-tree-container[_ngcontent-%COMP%]{background-color:#faf8f8;width:30%;min-height:400px;min-width:10%}#case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]{width:.2%;background-color:#6b6b6b}#case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]:focus, #case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]:hover{cursor:col-resize}#case-file-view[_ngcontent-%COMP%]   .media-viewer-container[_ngcontent-%COMP%]{flex:1 1 0%}"] });
+        }, directives: [i1__namespace.NgIf, CaseFileViewFolderComponent, i5__namespace.ɵcs], styles: ["#case-file-view[_ngcontent-%COMP%]{display:flex;border:2px solid #c9c9c9}#case-file-view[_ngcontent-%COMP%]   .document-tree-container[_ngcontent-%COMP%]{background-color:#faf8f8;width:30%;min-height:400px;min-width:10%}#case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]{width:.2%;background-color:#6b6b6b}#case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]:focus, #case-file-view[_ngcontent-%COMP%]   .slider[_ngcontent-%COMP%]:hover{cursor:col-resize}#case-file-view[_ngcontent-%COMP%]   .media-viewer-container[_ngcontent-%COMP%]{flex:1 1 0%}"] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseFileViewFieldComponent, [{
                 type: i0.Component,
@@ -11038,7 +11001,7 @@
         };
         return WriteCollectionFieldComponent;
     }(AbstractFieldWriteComponent));
-    WriteCollectionFieldComponent.ɵfac = function WriteCollectionFieldComponent_Factory(t) { return new (t || WriteCollectionFieldComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialog), i0__namespace.ɵɵdirectiveInject(i2__namespace$1.ScrollToService), i0__namespace.ɵɵdirectiveInject(ProfileNotifier)); };
+    WriteCollectionFieldComponent.ɵfac = function WriteCollectionFieldComponent_Factory(t) { return new (t || WriteCollectionFieldComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialog), i0__namespace.ɵɵdirectiveInject(i2__namespace.ScrollToService), i0__namespace.ɵɵdirectiveInject(ProfileNotifier)); };
     WriteCollectionFieldComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: WriteCollectionFieldComponent, selectors: [["ccd-write-collection-field"]], viewQuery: function WriteCollectionFieldComponent_Query(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵviewQuery(_c0$D, 1);
@@ -11087,7 +11050,7 @@
                         templateUrl: './write-collection-field.html',
                         styleUrls: ['./collection-field.scss']
                     }]
-            }], function () { return [{ type: i1__namespace$6.MatDialog }, { type: i2__namespace$1.ScrollToService }, { type: ProfileNotifier }]; }, { caseFields: [{
+            }], function () { return [{ type: i1__namespace$6.MatDialog }, { type: i2__namespace.ScrollToService }, { type: ProfileNotifier }]; }, { caseFields: [{
                     type: i0.Input
                 }], formGroup: [{
                     type: i0.Input
@@ -12191,7 +12154,7 @@
                 i0__namespace.ɵɵadvance(1);
                 i0__namespace.ɵɵproperty("color", ctx.color)("touchUi", ctx.touchUi)("hideTime", ctx.hideTime)("startView", ctx.startView)("stepHour", ctx.stepHour)("stepSecond", ctx.stepSecond)("stepMinute", ctx.stepMinute)("showSeconds", ctx.showSeconds)("showSpinners", ctx.showSpinners)("disableMinute", ctx.disableMinute)("enableMeridian", ctx.enableMeridian);
             }
-        }, directives: [i1__namespace.NgClass, i1__namespace.NgIf, i1__namespace$3.DefaultValueAccessor, i4__namespace$1.NgxMatDatetimeInput, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlDirective, i5__namespace.MatDatepickerToggle, i6__namespace.MatSuffix, i4__namespace$1.NgxMatDatetimePicker], pipes: [FieldLabelPipe, FirstErrorPipe], styles: ["@charset \"UTF-8\";.datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #fd0;border:1px solid #000}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #fd0}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.cdk-overlay-container .mat-datepicker-content{border:1px solid #000;border-radius:0;max-width:295px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid #000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid #000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th.ng-star-inserted{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;-moz-column-width:20px;column-width:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th{visibility:hidden}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:after{visibility:visible;color:#000;position:relative;left:-15px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:first-of-type:after{content:\"MON\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(2):after{left:-12px;content:\"TUE\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(3):after{left:-18px;content:\"WED\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(4):after{left:-14px;content:\"THU\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(5):after{left:-10px;content:\"FRI\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(6):after{content:\"SAT\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(7):after{content:\"SUN\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #fd0;border:2px solid #000;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #fd0}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:first-of-type{visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #fd0;border:2px solid #000;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{height:80px;padding-top:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table{margin-left:0!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tbody{position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon-button .mat-button-wrapper{width:auto;height:auto}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon-button:focus{outline:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child{position:absolute;left:49px;top:15px;z-index:2}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:first-child [aria-label=\"expand_less icon\"]{position:absolute;left:-2px;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(3) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:82px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(5) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:169px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:last-child [aria-label=\"expand_less icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(2) [aria-label=\"expand_less icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2){display:flex;padding:20px 0 20px 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field{width:50px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field:before{color:#000;content:\"Hours\";position:relative;top:-5px;left:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-child(3) .mat-form-field:before{color:#000;content:\"Minutes\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:last-child{text-align:left;left:-15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .mat-form-field-disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-of-type(5) .mat-form-field:before{color:#000;content:\"Seconds\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian{border-bottom:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button{height:30px;top:21px;border-radius:0;color:#000;border-color:#000;background-color:#dee0e2;display:flex;justify-content:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button .mat-button-wrapper{position:relative;top:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4){display:flex;padding:2rem 0 2rem 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td:last-child{text-align:left}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child{position:absolute;left:49px;top:40px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:first-child [aria-label=\"expand_more icon\"]{position:absolute;top:15px;left:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(3) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;left:82px!important;top:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(5) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;top:15px;left:169px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:last-child [aria-label=\"expand_more icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:last-child.ng-star-inserted [aria-label=\"expand_more icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr td{padding:0;border-bottom:0;position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .spacer{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon{visibility:hidden;display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-button-wrapper{display:block;width:15px;height:8px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-wrapper{padding-bottom:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field{width:auto;max-width:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_less icon\"].mat-icon-button .mat-button-wrapper:after{content:\" \u25B2\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_more icon\"].mat-icon-button .mat-button-wrapper:after{content:\"\u25BC\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex .mat-form-field-infix{border:1px solid #000;height:20px;width:37px;display:flex;justify-content:center;align-items:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-underline{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input{height:33px;width:37px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px 0 #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #fd0}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}"], encapsulation: 2 });
+        }, directives: [i1__namespace.NgClass, i1__namespace.NgIf, i1__namespace$3.DefaultValueAccessor, i4__namespace$1.NgxMatDatetimeInput, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlDirective, i5__namespace$1.MatDatepickerToggle, i6__namespace.MatSuffix, i4__namespace$1.NgxMatDatetimePicker], pipes: [FieldLabelPipe, FirstErrorPipe], styles: ["@charset \"UTF-8\";.datepicker-container{display:inline-block;position:relative;min-width:298px}.datepicker-container .govuk-input{height:35px;min-width:298px;width:auto;padding-right:40px;border:1px solid #000}.datepicker-container .govuk-input:focus{outline:1px solid #fd0;border:1px solid #000}.datepicker-container .govuk-input::-ms-clear{display:none}.datepicker-container .datepicker-wrapper-input{position:relative;display:inline-block;top:-20%;border:0}.datepicker-container .datepicker-wrapper-input:focus{border:0;outline:none}.datepicker-container .mat-icon-button{height:32px;width:32px}.datepicker-container .mat-icon-button:focus{outline:1px solid #fd0}.datepicker-container .mat-icon-button .mat-datepicker-toggle-default-icon{position:relative;top:-5px}.datepicker-container .mat-datepicker-toggle{position:absolute;right:0}.cdk-overlay-container .mat-datepicker-content{border:1px solid #000;border-radius:0;max-width:295px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table{width:calc(100% - 1px);table-layout:fixed}.cdk-overlay-container .mat-datepicker-content .mat-calendar-header{height:34px;border-bottom:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button{left:14%;min-width:125px;border-right:1px ridge #bfc1c3;border-left:1px ridge #bfc1c3;border-radius:0;top:-20px;width:200%}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button .mat-button-wrapper{text-align:center;font-weight:700}.cdk-overlay-container .mat-datepicker-content .mat-calendar-period-button:focus{border:2px solid #000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button{left:-73%;top:-20px;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-previous-button:after{border-left-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button{top:-20px;left:1%;border:2px solid transparent;border-radius:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-next-button:after{border-right-width:5px;border-top-width:5px;color:#000;padding:4px;top:-2px;left:-2px}.cdk-overlay-container .mat-datepicker-content .mat-button-wrapper{text-transform:capitalize!important}.cdk-overlay-container .mat-datepicker-content .mat-calendar{border-bottom:1px solid #000}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider{padding:0;border-bottom:none}.cdk-overlay-container .mat-datepicker-content .mat-calendar-table-header-divider:after{height:0}.cdk-overlay-container .mat-datepicker-content .mat-calendar-content{padding:0}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header{color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header th.ng-star-inserted{font-weight:700;font-size:15px;padding-top:2%;padding-bottom:2%;-moz-column-width:20px;column-width:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th{visibility:hidden}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:after{visibility:visible;color:#000;position:relative;left:-15px}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:first-of-type:after{content:\"MON\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(2):after{left:-12px;content:\"TUE\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(3):after{left:-18px;content:\"WED\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(4):after{left:-14px;content:\"THU\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(5):after{left:-10px;content:\"FRI\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(6):after{content:\"SAT\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-table-header tr:first-of-type th:nth-of-type(7):after{content:\"SUN\"}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-label{font-weight:700;font-size:large;color:#000}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-selected{border:none;background-color:transparent;color:#fff}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-today{border:none;box-shadow:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell{border:1px ridge #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-month-view .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #fd0;border:2px solid #000;outline-offset:1px;z-index:1}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table{border-collapse:separate;border-spacing:10px}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-multi-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:2px solid #fd0}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table{border-collapse:separate;border-spacing:20px}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table tr:first-of-type{visibility:collapse}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-active{background-color:#5694ca}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell{border:1px solid #bfc1c3}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-cell-content{border:none}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell .mat-calendar-body-selected{border:none;box-shadow:none;background-color:transparent}.cdk-overlay-container .mat-datepicker-content ngx-mat-year-view .mat-calendar-table .mat-calendar-body-cell[aria-selected=true]{background-color:#1d70b8;outline:3px solid #fd0;border:2px solid #000;outline-offset:1px}.cdk-overlay-container .mat-datepicker-content .time-container{height:80px;padding-top:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table{margin-left:0!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tbody{position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon-button .mat-button-wrapper{width:auto;height:auto}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon-button:focus{outline:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child{position:absolute;left:49px;top:15px;z-index:2}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:first-child [aria-label=\"expand_less icon\"]{position:absolute;left:-2px;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(3) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:82px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-child(5) [aria-label=\"expand_less icon\"].mat-icon-button{position:absolute;left:169px!important;top:25px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:last-child [aria-label=\"expand_less icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:first-child td:nth-last-child(2) [aria-label=\"expand_less icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2){display:flex;padding:20px 0 20px 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field{width:50px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:first-child .mat-form-field:before{color:#000;content:\"Hours\";position:relative;top:-5px;left:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-child(3) .mat-form-field:before{color:#000;content:\"Minutes\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:last-child{text-align:left;left:-15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .mat-form-field-disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) td:nth-of-type(5) .mat-form-field:before{color:#000;content:\"Seconds\";position:relative;top:-5px;font-size:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian{border-bottom:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button{height:30px;top:21px;border-radius:0;color:#000;border-color:#000;background-color:#dee0e2;display:flex;justify-content:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(2) .meridian .mat-button .mat-button-wrapper{position:relative;top:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4){display:flex;padding:2rem 0 2rem 15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td{margin-right:30px;text-align:right}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:nth-child(4) td:last-child{text-align:left}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child{position:absolute;left:49px;top:40px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child button:disabled{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:first-child [aria-label=\"expand_more icon\"]{position:absolute;top:15px;left:-2px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(3) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;left:82px!important;top:15px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:nth-child(5) [aria-label=\"expand_more icon\"].mat-icon-button{position:absolute;top:15px;left:169px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:last-child [aria-label=\"expand_more icon\"].mat-icon-button{left:65px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr:last-child td:last-child.ng-star-inserted [aria-label=\"expand_more icon\"].mat-icon-button{left:153px!important}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr td{padding:0;border-bottom:0;position:relative}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .spacer{display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-icon{visibility:hidden;display:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-button-wrapper{display:block;width:15px;height:8px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-wrapper{padding-bottom:0}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field{width:auto;max-width:none}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_less icon\"].mat-icon-button .mat-button-wrapper:after{content:\" \u25B2\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr [aria-label=\"expand_more icon\"].mat-icon-button .mat-button-wrapper:after{content:\"\u25BC\"}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex{width:100%}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-flex .mat-form-field-infix{border:1px solid #000;height:20px;width:37px;display:flex;justify-content:center;align-items:center}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr .mat-form-field-underline{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input{height:33px;width:37px}.cdk-overlay-container .mat-datepicker-content .time-container .ngx-mat-timepicker .table tr input:focus{border-color:#000}.cdk-overlay-container .mat-datepicker-content .actions{padding-bottom:20px;margin-top:20px;justify-content:flex-start}.cdk-overlay-container .mat-datepicker-content .actions .mat-button{background-color:#00823b;position:relative;display:-moz-inline-stack;display:inline-block;padding:.526315em .789473em .263157em;border:none;border-radius:0;outline:1px solid transparent;outline-offset:-1px;-webkit-appearance:none;box-shadow:0 2px 0 #003618;font-size:1em;line-height:1.25;text-decoration:none;-webkit-font-smoothing:antialiased;color:#fff;box-sizing:border-box;vertical-align:top;width:80px;cursor:pointer}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:focus{outline:2px solid #fd0}.cdk-overlay-container .mat-datepicker-content .actions .mat-button:hover{background-color:#006400}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-icon{visibility:hidden}.cdk-overlay-container .mat-datepicker-content .actions .mat-button .mat-button-wrapper:before{color:#fff;content:\"Confirm\";position:relative;font-size:15px;left:-3px}"], encapsulation: 2 });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(DatetimePickerComponent, [{
                 type: i0.Component,
@@ -14741,7 +14704,7 @@
                 i0__namespace.ɵɵadvance(1);
                 i0__namespace.ɵɵproperty("ngIf", !(ctx.filteredJudicialUsers == null ? null : ctx.filteredJudicialUsers.length) && ctx.showAutocomplete);
             }
-        }, directives: [i1__namespace$3.NgControlStatusGroup, i1__namespace$3.FormGroupDirective, i1__namespace.NgIf, i1__namespace$3.DefaultValueAccessor, i5__namespace$1.MatAutocompleteTrigger, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlDirective, i5__namespace$1.MatAutocomplete, i1__namespace.NgForOf, i6__namespace$1.MatOption, i1__namespace.NgClass], pipes: [FieldLabelPipe], styles: [".mat-option[_ngcontent-%COMP%]:hover{background:#2596be}.mat-option.select-option[_ngcontent-%COMP%]:hover{background:#1d70b8;color:#fff}.hide-autocomplete[_ngcontent-%COMP%]{display:none}"] });
+        }, directives: [i1__namespace$3.NgControlStatusGroup, i1__namespace$3.FormGroupDirective, i1__namespace.NgIf, i1__namespace$3.DefaultValueAccessor, i5__namespace$2.MatAutocompleteTrigger, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlDirective, i5__namespace$2.MatAutocomplete, i1__namespace.NgForOf, i6__namespace$1.MatOption, i1__namespace.NgClass], pipes: [FieldLabelPipe], styles: [".mat-option[_ngcontent-%COMP%]:hover{background:#2596be}.mat-option.select-option[_ngcontent-%COMP%]:hover{background:#1d70b8;color:#fff}.hide-autocomplete[_ngcontent-%COMP%]{display:none}"] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(WriteJudicialUserFieldComponent, [{
                 type: i0.Component,
@@ -20024,7 +19987,8 @@
         CaseFileViewFieldComponent,
         CaseFileViewFolderComponent,
         CaseFileViewFolderSortComponent,
-        CaseFileViewOverlayMenuComponent
+        CaseFileViewOverlayMenuComponent,
+        CaseFileViewFolderDocumentActionsComponent
     ];
     var PaletteModule = /** @class */ (function () {
         function PaletteModule() {
@@ -20062,13 +20026,13 @@
                 i4$1.NgxMatNativeDateModule,
                 i6.MatFormFieldModule,
                 input.MatInputModule,
-                i5.MatDatepickerModule,
-                i5$1.MatAutocompleteModule,
-                i2.CdkTreeModule,
+                i5$1.MatDatepickerModule,
+                i5$2.MatAutocompleteModule,
+                i4.CdkTreeModule,
                 i1$5.OverlayModule,
                 i3.PaymentLibModule,
-                i2$1.ScrollToModule.forRoot(),
-                i4.MediaViewerModule
+                i2.ScrollToModule.forRoot(),
+                i5.MediaViewerModule
             ], i4$1.NgxMatDatetimePickerModule,
             i4$1.NgxMatNativeDateModule,
             i4$1.NgxMatTimepickerModule,
@@ -20153,7 +20117,8 @@
                 CaseFileViewFieldComponent,
                 CaseFileViewFolderComponent,
                 CaseFileViewFolderSortComponent,
-                CaseFileViewOverlayMenuComponent, CaseFileViewOverlayMenuComponent], imports: [i1.CommonModule,
+                CaseFileViewOverlayMenuComponent,
+                CaseFileViewFolderDocumentActionsComponent], imports: [i1.CommonModule,
                 i1$1.RouterModule,
                 i1$2.FormsModule,
                 i1$2.ReactiveFormsModule,
@@ -20172,11 +20137,11 @@
                 i4$1.NgxMatNativeDateModule,
                 i6.MatFormFieldModule,
                 input.MatInputModule,
-                i5.MatDatepickerModule,
-                i5$1.MatAutocompleteModule,
-                i2.CdkTreeModule,
+                i5$1.MatDatepickerModule,
+                i5$2.MatAutocompleteModule,
+                i4.CdkTreeModule,
                 i1$5.OverlayModule,
-                i3.PaymentLibModule, i2__namespace$1.ScrollToModule, i4.MediaViewerModule], exports: [i4$1.NgxMatDatetimePickerModule,
+                i3.PaymentLibModule, i2__namespace.ScrollToModule, i5.MediaViewerModule], exports: [i4$1.NgxMatDatetimePickerModule,
                 i4$1.NgxMatNativeDateModule,
                 i4$1.NgxMatTimepickerModule,
                 TabsModule,
@@ -20254,7 +20219,8 @@
                 CaseFileViewFieldComponent,
                 CaseFileViewFolderComponent,
                 CaseFileViewFolderSortComponent,
-                CaseFileViewOverlayMenuComponent] });
+                CaseFileViewOverlayMenuComponent,
+                CaseFileViewFolderDocumentActionsComponent] });
     })();
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PaletteModule, [{
@@ -20280,13 +20246,13 @@
                             i4$1.NgxMatNativeDateModule,
                             i6.MatFormFieldModule,
                             input.MatInputModule,
-                            i5.MatDatepickerModule,
-                            i5$1.MatAutocompleteModule,
-                            i2.CdkTreeModule,
+                            i5$1.MatDatepickerModule,
+                            i5$2.MatAutocompleteModule,
+                            i4.CdkTreeModule,
                             i1$5.OverlayModule,
                             i3.PaymentLibModule,
-                            i2$1.ScrollToModule.forRoot(),
-                            i4.MediaViewerModule
+                            i2.ScrollToModule.forRoot(),
+                            i5.MediaViewerModule
                         ],
                         declarations: __spread([
                             FixedListPipe,
@@ -20294,9 +20260,7 @@
                             DynamicListPipe,
                             DynamicRadioListPipe,
                             DocumentUrlPipe
-                        ], PALETTE_COMPONENTS, [
-                            CaseFileViewOverlayMenuComponent,
-                        ]),
+                        ], PALETTE_COMPONENTS),
                         exports: __spread([
                             i4$1.NgxMatDatetimePickerModule,
                             i4$1.NgxMatNativeDateModule,
@@ -28803,6 +28767,7 @@
     exports.CaseFieldService = CaseFieldService;
     exports.CaseFileViewFieldComponent = CaseFileViewFieldComponent;
     exports.CaseFileViewFolderComponent = CaseFileViewFolderComponent;
+    exports.CaseFileViewFolderDocumentActionsComponent = CaseFileViewFolderDocumentActionsComponent;
     exports.CaseFileViewFolderSortComponent = CaseFileViewFolderSortComponent;
     exports.CaseFileViewOverlayMenuComponent = CaseFileViewOverlayMenuComponent;
     exports.CaseFileViewService = CaseFileViewService;