@hmcts/ccd-case-ui-toolkit 5.0.25-angular11-upgrade → 5.0.25-case-file-view-media-viewer-integration

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/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/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.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, i1$5, i2, i4, momentAdapter, i5, i6, i5$1, i6$1, i3, i6$2, input, i1$6, i10) { 'use strict';
+    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('@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', '@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.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, i1$5, i4, i1$6, i2, i4$1, momentAdapter, i5, i6, i5$1, 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 }; }
 
@@ -34,15 +34,17 @@
     var moment__namespace = /*#__PURE__*/_interopNamespace(moment);
     var i1__namespace$4 = /*#__PURE__*/_interopNamespace(i1$4);
     var i1__namespace$5 = /*#__PURE__*/_interopNamespace(i1$5);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
+    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$1 = /*#__PURE__*/_interopNamespace(i6$1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
     var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
-    var i1__namespace$6 = /*#__PURE__*/_interopNamespace(i1$6);
+    var i1__namespace$7 = /*#__PURE__*/_interopNamespace(i1$7);
     var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
 
     function FooterComponent_div_2_Template(rf, ctx) {
@@ -6400,6 +6402,49 @@
             }], null, null);
     })();
 
+    var CaseFileViewService = /** @class */ (function () {
+        function CaseFileViewService(http, appConfig, errorService) {
+            this.http = http;
+            this.appConfig = appConfig;
+            this.errorService = errorService;
+        }
+        /**
+         * Retrieves the categories and documents for a case.
+         *
+         * @param caseRef 16-digit Case Reference number of the case
+         * @returns An `Observable` of the `CategoriesAndDocuments` for the case
+         */
+        CaseFileViewService.prototype.getCategoriesAndDocuments = function (caseRef) {
+            var url = this.appConfig.getCategoriesAndDocumentsUrl();
+            if (url) {
+                url += "/" + caseRef;
+                return this.http.get(url, { observe: 'body' });
+            }
+            return rxjs.of(null);
+        };
+        CaseFileViewService.prototype.updateDocumentCategory = function (caseRef, caseVersion, attributePath, categoryId) {
+            var url = this.appConfig.getDocumentDataUrl();
+            if (url) {
+                url += "/" + caseRef;
+                var body = {
+                    case_version: caseVersion,
+                    attribute_path: attributePath,
+                    category_id: categoryId
+                };
+                return this.http.put(url, body, { observe: 'body' });
+            }
+            return rxjs.of(null);
+        };
+        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.ɵ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);
+    })();
+
     var DocumentManagementService = /** @class */ (function () {
         function DocumentManagementService(http, appConfig) {
             this.http = http;
@@ -9414,6 +9459,373 @@
                 }] });
     })();
 
+    function CaseFileViewFolderComponent_cdk_nested_tree_node_6_Template(rf, ctx) {
+        if (rf & 1) {
+            i0__namespace.ɵɵelementStart(0, "cdk-nested-tree-node", 7);
+            i0__namespace.ɵɵelementStart(1, "div", 8);
+            i0__namespace.ɵɵelement(2, "button", 9);
+            i0__namespace.ɵɵelementStart(3, "span", 10);
+            i0__namespace.ɵɵtext(4);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var node_r2 = ctx.$implicit;
+            i0__namespace.ɵɵadvance(4);
+            i0__namespace.ɵɵtextInterpolate(node_r2.name);
+        }
+    }
+    function CaseFileViewFolderComponent_cdk_nested_tree_node_7_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", 11);
+            i0__namespace.ɵɵelementStart(3, "span", 12);
+            i0__namespace.ɵɵtext(4);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementStart(5, "span", 13);
+            i0__namespace.ɵɵtext(6);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementStart(7, "div");
+            i0__namespace.ɵɵelementContainer(8, 14);
+            i0__namespace.ɵɵelementEnd();
+            i0__namespace.ɵɵelementEnd();
+        }
+        if (rf & 2) {
+            var node_r3 = ctx.$implicit;
+            var ctx_r1 = i0__namespace.ɵɵnextContext();
+            i0__namespace.ɵɵadvance(2);
+            i0__namespace.ɵɵattribute("aria-label", "toggle " + node_r3.name);
+            i0__namespace.ɵɵadvance(2);
+            i0__namespace.ɵɵtextInterpolate(node_r3.count);
+            i0__namespace.ɵɵadvance(2);
+            i0__namespace.ɵɵtextInterpolate(node_r3.name);
+            i0__namespace.ɵɵadvance(1);
+            i0__namespace.ɵɵclassProp("document-tree-invisible", !ctx_r1.nestedTreeControl.isExpanded(node_r3));
+        }
+    }
+    var CaseFileViewFolderComponent = /** @class */ (function () {
+        function CaseFileViewFolderComponent() {
+            this.categories = [];
+            this.getChildren = function (node) { return rxjs.of(node.children); };
+            this.nestedChildren = function (_, nodeData) { return nodeData.children; };
+            this.nestedTreeControl = new i1$5.NestedTreeControl(this.getChildren);
+        }
+        CaseFileViewFolderComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            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;
+                // Generate document tree data from categories
+                var treeData = _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);
+                }
+                // Initialise cdk tree with generated data
+                _this.nestedDataSource = treeData;
+            });
+        };
+        CaseFileViewFolderComponent.prototype.generateTreeData = function (categories) {
+            var _this = this;
+            return categories.reduce(function (tree, node) { return __spread(tree, [
+                {
+                    name: node.category_name,
+                    children: __spread(_this.generateTreeData(node.sub_categories), _this.getDocuments(node.documents))
+                },
+            ]); }, []);
+        };
+        CaseFileViewFolderComponent.prototype.getDocuments = function (documents) {
+            var documentsToReturn = [];
+            documents.forEach(function (document) {
+                documentsToReturn.push({ name: document.document_filename });
+            });
+            return documentsToReturn;
+        };
+        CaseFileViewFolderComponent.prototype.getUncategorisedDocuments = function (uncategorisedDocuments) {
+            var documents = [];
+            uncategorisedDocuments.forEach(function (document) {
+                documents.push({ name: document.document_filename });
+            });
+            return { name: CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE, children: documents };
+        };
+        CaseFileViewFolderComponent.prototype.ngOnDestroy = function () {
+            if (this.categoriesAndDocumentsSubscription) {
+                this.categoriesAndDocumentsSubscription.unsubscribe();
+            }
+        };
+        CaseFileViewFolderComponent.prototype.loadCategories = function () {
+            return [
+                {
+                    category_id: 'Beers',
+                    category_name: 'Beers',
+                    category_order: 1,
+                    documents: [
+                        {
+                            document_url: '/test',
+                            document_filename: 'Beers 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: []
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ];
+        };
+        return CaseFileViewFolderComponent;
+    }());
+    CaseFileViewFolderComponent.UNCATEGORISED_DOCUMENTS_TITLE = 'Uncategorised documents';
+    CaseFileViewFolderComponent.ɵfac = function CaseFileViewFolderComponent_Factory(t) { return new (t || CaseFileViewFolderComponent)(); };
+    CaseFileViewFolderComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFileViewFolderComponent, selectors: [["ccd-case-file-view-folder"]], inputs: { categoriesAndDocuments: "categoriesAndDocuments" }, decls: 8, vars: 3, consts: [[1, "document-filter-container"], [1, "document-filter"], [1, "documents-title"], [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, "icon", "icon-document"], [1, "node-name", "node-name-document"], ["mat-icon-button", "", "cdkTreeNodeToggle", "", 1, "icon", "icon-folder"], [1, "document-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.ɵɵelement(1, "div", 1);
+                i0__namespace.ɵɵelementStart(2, "div", 2);
+                i0__namespace.ɵɵtext(3, "Documents");
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementStart(4, "div", 3);
+                i0__namespace.ɵɵelementStart(5, "cdk-tree", 4);
+                i0__namespace.ɵɵtemplate(6, CaseFileViewFolderComponent_cdk_nested_tree_node_6_Template, 5, 1, "cdk-nested-tree-node", 5);
+                i0__namespace.ɵɵtemplate(7, CaseFileViewFolderComponent_cdk_nested_tree_node_7_Template, 9, 5, "cdk-nested-tree-node", 6);
+                i0__namespace.ɵɵelementEnd();
+                i0__namespace.ɵɵelementEnd();
+            }
+            if (rf & 2) {
+                i0__namespace.ɵɵadvance(5);
+                i0__namespace.ɵɵproperty("dataSource", ctx.nestedDataSource)("treeControl", ctx.nestedTreeControl);
+                i0__namespace.ɵɵadvance(2);
+                i0__namespace.ɵɵproperty("cdkTreeNodeDefWhen", ctx.nestedChildren);
+            }
+        }, directives: [i1__namespace$5.CdkTree, i1__namespace$5.CdkTreeNodeDef, i1__namespace$5.CdkNestedTreeNode, i1__namespace$5.CdkTreeNodeToggle, i1__namespace$5.CdkTreeNodeOutlet], styles: [".document-filter-container[_ngcontent-%COMP%]{height:60px;border-bottom:2px solid #c9c9c9;padding-bottom:4px}.document-filter-container[_ngcontent-%COMP%]   .document-filter[_ngcontent-%COMP%]{height:70%}.document-filter-container[_ngcontent-%COMP%]   .documents-title[_ngcontent-%COMP%]{height:30%;margin-left:8px;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}.document-tree-container[_ngcontent-%COMP%]   .node[_ngcontent-%COMP%]{display:flex;padding:4px}.document-tree-container[_ngcontent-%COMP%]   .icon[_ngcontent-%COMP%]{width:36px;height:36px;background-size:100%;border:0;background-color:#fff}.document-tree-container[_ngcontent-%COMP%]   .icon-folder[_ngcontent-%COMP%]{background-image:url(/assets/images/folder.png)}.document-tree-container[_ngcontent-%COMP%]   .icon-document[_ngcontent-%COMP%]{background-image:url(/assets/images/document.png)}.document-tree-container[_ngcontent-%COMP%]   .node-name[_ngcontent-%COMP%]{margin-left:6px}.document-tree-container[_ngcontent-%COMP%]   .node-name-document[_ngcontent-%COMP%], .document-tree-container[_ngcontent-%COMP%]   .node-name-folder[_ngcontent-%COMP%]{margin-top:4px}.document-tree-container[_ngcontent-%COMP%]   .document-count[_ngcontent-%COMP%]{color:#fff}"] });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseFileViewFolderComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ccd-case-file-view-folder',
+                        styleUrls: ['./case-file-view-folder.component.scss'],
+                        templateUrl: './case-file-view-folder.component.html'
+                    }]
+            }], function () { return []; }, { categoriesAndDocuments: [{
+                    type: i0.Input
+                }] });
+    })();
+
+    var CaseFileViewFieldComponent = /** @class */ (function () {
+        function CaseFileViewFieldComponent(elementRef, route, caseFileViewService) {
+            this.elementRef = elementRef;
+            this.route = route;
+            this.caseFileViewService = caseFileViewService;
+        }
+        CaseFileViewFieldComponent.prototype.ngOnInit = function () {
+            var cid = this.route.snapshot.paramMap.get(CaseFileViewFieldComponent.PARAM_CASE_ID);
+            this.categoriesAndDocuments$ = this.caseFileViewService.getCategoriesAndDocuments(cid);
+        };
+        CaseFileViewFieldComponent.prototype.ngAfterViewInit = function () {
+            var slider = this.elementRef.nativeElement.querySelector('.slider');
+            var documentTreeContainer = this.elementRef.nativeElement.querySelector('.document-tree-container');
+            var mousedown$ = rxjs.fromEvent(slider, 'mousedown');
+            var mousemove$ = rxjs.fromEvent(document, 'mousemove');
+            var mouseup$ = rxjs.fromEvent(document, 'mouseup');
+            var drag$ = mousedown$.pipe(operators.switchMap(function (start) {
+                var x = start.clientX;
+                var documentTreeContainerWidth = documentTreeContainer.getBoundingClientRect().width;
+                return mousemove$.pipe(operators.map(function (move) {
+                    move.preventDefault();
+                    return {
+                        dx: move.clientX - x,
+                        documentTreeContainerWidth: documentTreeContainerWidth
+                    };
+                }), operators.takeUntil(mouseup$));
+            }));
+            drag$.subscribe(function (pos) {
+                var calculatedWidth = ((pos.documentTreeContainerWidth + pos.dx) * 100) / slider.parentElement.getBoundingClientRect().width;
+                documentTreeContainer.setAttribute('style', "width: " + calculatedWidth + "%");
+            });
+        };
+        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) {
+            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();
+            }
+            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");
+            }
+        }, 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%}"] });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseFileViewFieldComponent, [{
+                type: i0.Component,
+                args: [{
+                        selector: 'ccd-case-file-view-field',
+                        templateUrl: './case-file-view-field.component.html',
+                        styleUrls: ['./case-file-view-field.component.scss']
+                    }]
+            }], function () { return [{ type: i0__namespace.ElementRef }, { type: i1__namespace$1.ActivatedRoute }, { type: CaseFileViewService }]; }, null);
+    })();
+
     function ReadCaseLinkFieldComponent_a_0_Template(rf, ctx) {
         if (rf & 1) {
             i0__namespace.ɵɵelementStart(0, "a", 1);
@@ -9776,7 +10188,7 @@
         };
         return RemoveDialogComponent;
     }());
-    RemoveDialogComponent.ɵfac = function RemoveDialogComponent_Factory(t) { return new (t || RemoveDialogComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$5.MatDialogRef)); };
+    RemoveDialogComponent.ɵfac = function RemoveDialogComponent_Factory(t) { return new (t || RemoveDialogComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialogRef)); };
     RemoveDialogComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: RemoveDialogComponent, selectors: [["ccd-remove-dialog"]], decls: 15, vars: 0, consts: [[1, "dialog-header"], [1, "heading-h2", "x", 3, "click"], [1, "heading-h2", "dialog-title"], [1, "dialog-info"], [1, "text-info"], ["type", "button", "title", "Remove", 1, "button", "action-button", 3, "click"], ["type", "button", "title", "Cancel", 1, "button", "button-secondary", 3, "click"]], template: function RemoveDialogComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "div");
@@ -9817,7 +10229,7 @@
                         templateUrl: './remove-dialog.component.html',
                         styleUrls: ['../action-dialog.component.scss']
                     }]
-            }], function () { return [{ type: i1__namespace$5.MatDialogRef }]; }, null);
+            }], function () { return [{ type: i1__namespace$6.MatDialogRef }]; }, null);
     })();
 
     var _c0$D = ["collectionItem"];
@@ -10196,7 +10608,7 @@
         };
         WriteCollectionFieldComponent.prototype.openModal = function (i) {
             var _this = this;
-            var dialogConfig = new i1$5.MatDialogConfig();
+            var dialogConfig = new i1$6.MatDialogConfig();
             dialogConfig.disableClose = true;
             dialogConfig.autoFocus = true;
             dialogConfig.ariaLabel = 'Label';
@@ -10230,7 +10642,7 @@
         };
         return WriteCollectionFieldComponent;
     }(AbstractFieldWriteComponent));
-    WriteCollectionFieldComponent.ɵfac = function WriteCollectionFieldComponent_Factory(t) { return new (t || WriteCollectionFieldComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$5.MatDialog), i0__namespace.ɵɵdirectiveInject(i2__namespace.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);
@@ -10279,7 +10691,7 @@
                         templateUrl: './write-collection-field.html',
                         styleUrls: ['./collection-field.scss']
                     }]
-            }], function () { return [{ type: i1__namespace$5.MatDialog }, { type: i2__namespace.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
@@ -11324,7 +11736,7 @@
         };
         return DatetimePickerComponent;
     }(AbstractFormFieldComponent));
-    DatetimePickerComponent.ɵfac = function DatetimePickerComponent_Factory(t) { return new (t || DatetimePickerComponent)(i0__namespace.ɵɵdirectiveInject(FormatTranslatorService), i0__namespace.ɵɵdirectiveInject(i4.NGX_MAT_DATE_FORMATS)); };
+    DatetimePickerComponent.ɵfac = function DatetimePickerComponent_Factory(t) { return new (t || DatetimePickerComponent)(i0__namespace.ɵɵdirectiveInject(FormatTranslatorService), i0__namespace.ɵɵdirectiveInject(i4$1.NGX_MAT_DATE_FORMATS)); };
     DatetimePickerComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: DatetimePickerComponent, selectors: [["ccd-datetime-picker"]], viewQuery: function DatetimePickerComponent_Query(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵviewQuery(_c0$B, 1);
@@ -11336,8 +11748,8 @@
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.inputElement = _t.first);
             }
         }, inputs: { dateControl: "dateControl" }, features: [i0__namespace.ɵɵProvidersFeature([
-                { provide: i4.NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },
-                { provide: i4.NgxMatDateAdapter, useClass: momentAdapter.NgxMatMomentAdapter },
+                { provide: i4$1.NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },
+                { provide: i4$1.NgxMatDateAdapter, useClass: momentAdapter.NgxMatMomentAdapter },
                 { provide: momentAdapter.NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
             ]), i0__namespace.ɵɵInheritDefinitionFeature], decls: 14, vars: 26, consts: [[1, "govuk-form-group", "bottom-30", 3, "id", "ngClass"], ["class", "form-label", 4, "ngIf"], ["class", "form-hint", 4, "ngIf"], ["class", "error-message", 4, "ngIf"], [1, "datepicker-container"], ["ng-model-options", "{timezone:'utc'}", 1, "govuk-input", 3, "min", "max", "formControl", "ngxMatDatetimePicker", "focusin", "focusout", "dateChange"], ["input", ""], ["matSuffix", "", "id", "pickerOpener", 3, "for"], [3, "color", "touchUi", "hideTime", "startView", "stepHour", "stepSecond", "stepMinute", "showSeconds", "showSpinners", "disableMinute", "enableMeridian", "yearSelected", "monthSelected", "opened"], ["picker", ""], [1, "form-label"], [1, "form-hint"], [1, "error-message"]], template: function DatetimePickerComponent_Template(rf, ctx) {
             if (rf & 1) {
@@ -11383,7 +11795,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.NgxMatDatetimeInput, i1__namespace$3.NgControlStatus, i1__namespace$3.FormControlDirective, i5__namespace.MatDatepickerToggle, i6__namespace.MatSuffix, i4__namespace.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.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,
@@ -11393,15 +11805,15 @@
                         styleUrls: ['./datetime-picker.component.scss'],
                         encapsulation: i0.ViewEncapsulation.None,
                         providers: [
-                            { provide: i4.NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },
-                            { provide: i4.NgxMatDateAdapter, useClass: momentAdapter.NgxMatMomentAdapter },
+                            { provide: i4$1.NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },
+                            { provide: i4$1.NgxMatDateAdapter, useClass: momentAdapter.NgxMatMomentAdapter },
                             { provide: momentAdapter.NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
                         ]
                     }]
             }], function () {
             return [{ type: FormatTranslatorService }, { type: undefined, decorators: [{
                             type: i0.Inject,
-                            args: [i4.NGX_MAT_DATE_FORMATS]
+                            args: [i4$1.NGX_MAT_DATE_FORMATS]
                         }] }];
         }, { datetimePicker: [{
                     type: i0.ViewChild,
@@ -11670,7 +12082,7 @@
         };
         return DocumentDialogComponent;
     }());
-    DocumentDialogComponent.ɵfac = function DocumentDialogComponent_Factory(t) { return new (t || DocumentDialogComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$5.MatDialogRef)); };
+    DocumentDialogComponent.ɵfac = function DocumentDialogComponent_Factory(t) { return new (t || DocumentDialogComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialogRef)); };
     DocumentDialogComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: DocumentDialogComponent, selectors: [["ccd-document-dialog"]], decls: 15, vars: 0, consts: [[1, "dialog-header"], [1, "heading-h2", "x", 3, "click"], [1, "heading-h2", "dialog-title"], [1, "dialog-info"], [1, "text-info"], ["type", "button", "title", "Replace", 1, "button", "action-button", 3, "click"], ["type", "button", "title", "Cancel", 1, "button", "button-secondary", 3, "click"]], template: function DocumentDialogComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "div");
@@ -11711,11 +12123,11 @@
                         templateUrl: './document-dialog.component.html',
                         styleUrls: ['../action-dialog.component.scss']
                     }]
-            }], function () { return [{ type: i1__namespace$5.MatDialogRef }]; }, null);
+            }], function () { return [{ type: i1__namespace$6.MatDialogRef }]; }, null);
     })();
 
     function initDialog() {
-        var dialogConfig = new i1$5.MatDialogConfig();
+        var dialogConfig = new i1$6.MatDialogConfig();
         dialogConfig.disableClose = true;
         dialogConfig.autoFocus = true;
         dialogConfig.ariaLabel = 'Label';
@@ -12039,7 +12451,7 @@
     WriteDocumentFieldComponent.UPLOAD_ERROR_FILE_REQUIRED = 'File required';
     WriteDocumentFieldComponent.UPLOAD_ERROR_NOT_AVAILABLE = 'Document upload facility is not available at the moment';
     WriteDocumentFieldComponent.UPLOAD_WAITING_FILE_STATUS = 'Uploading...';
-    WriteDocumentFieldComponent.ɵfac = function WriteDocumentFieldComponent_Factory(t) { return new (t || WriteDocumentFieldComponent)(i0__namespace.ɵɵdirectiveInject(AbstractAppConfig), i0__namespace.ɵɵdirectiveInject(CaseNotifier), i0__namespace.ɵɵdirectiveInject(DocumentManagementService), i0__namespace.ɵɵdirectiveInject(i1__namespace$5.MatDialog), i0__namespace.ɵɵdirectiveInject(FileUploadStateService)); };
+    WriteDocumentFieldComponent.ɵfac = function WriteDocumentFieldComponent_Factory(t) { return new (t || WriteDocumentFieldComponent)(i0__namespace.ɵɵdirectiveInject(AbstractAppConfig), i0__namespace.ɵɵdirectiveInject(CaseNotifier), i0__namespace.ɵɵdirectiveInject(DocumentManagementService), i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialog), i0__namespace.ɵɵdirectiveInject(FileUploadStateService)); };
     WriteDocumentFieldComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: WriteDocumentFieldComponent, selectors: [["ccd-write-document-field"]], viewQuery: function WriteDocumentFieldComponent_Query(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵviewQuery(_c0$z, 1);
@@ -12113,7 +12525,7 @@
                         selector: 'ccd-write-document-field',
                         templateUrl: './write-document-field.html'
                     }]
-            }], function () { return [{ type: AbstractAppConfig }, { type: CaseNotifier }, { type: DocumentManagementService }, { type: i1__namespace$5.MatDialog }, { type: FileUploadStateService }]; }, { fileInput: [{
+            }], function () { return [{ type: AbstractAppConfig }, { type: CaseNotifier }, { type: DocumentManagementService }, { type: i1__namespace$6.MatDialog }, { type: FileUploadStateService }]; }, { fileInput: [{
                     type: i0.ViewChild,
                     args: ['fileInput', { static: false }]
                 }], clickout: [{
@@ -16158,6 +16570,9 @@
 
     var PaletteService = /** @class */ (function () {
         function PaletteService() {
+            this.componentLauncherRegistry = {
+                CaseFileView: CaseFileViewFieldComponent
+            };
         }
         PaletteService.prototype.getFieldComponentClass = function (caseField, write) {
             switch (caseField.field_type.type) {
@@ -16217,10 +16632,21 @@
                     return CaseHistoryViewerFieldComponent;
                 case 'WaysToPay':
                     return WaysToPayFieldComponent;
+                case 'ComponentLauncher':
+                    return this.getComponentLauncherComponent(caseField);
                 default:
                     return UnsupportedFieldComponent;
             }
         };
+        PaletteService.prototype.getComponentLauncherComponent = function (caseField) {
+            // Extract the value passed for #ARGUMENT(...) in the CaseField display_context_parameter and return the matching
+            // component from the componentLauncherRegistry
+            var argumentValue = caseField.display_context_parameter.match(/#ARGUMENT\((.*?)\)/)[1];
+            if (argumentValue && this.componentLauncherRegistry.hasOwnProperty(argumentValue)) {
+                return this.componentLauncherRegistry[argumentValue];
+            }
+            return UnsupportedFieldComponent;
+        };
         return PaletteService;
     }());
     PaletteService.ɵfac = function PaletteService_Factory(t) { return new (t || PaletteService)(); };
@@ -16523,7 +16949,7 @@
         };
         return SaveOrDiscardDialogComponent;
     }());
-    SaveOrDiscardDialogComponent.ɵfac = function SaveOrDiscardDialogComponent_Factory(t) { return new (t || SaveOrDiscardDialogComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$5.MatDialogRef)); };
+    SaveOrDiscardDialogComponent.ɵfac = function SaveOrDiscardDialogComponent_Factory(t) { return new (t || SaveOrDiscardDialogComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialogRef)); };
     SaveOrDiscardDialogComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: SaveOrDiscardDialogComponent, selectors: [["ccd-save-or-discard-dialog"]], decls: 15, vars: 0, consts: [[1, "dialog-header"], [1, "heading-h2", "x", 3, "click"], [1, "heading-h2", "dialog-title"], [1, "dialog-info"], [1, "text-info"], ["type", "button", "title", "Save", 1, "button", "action-button", 3, "click"], ["type", "button", "title", "Discard", 1, "button", "button-secondary", 3, "click"]], template: function SaveOrDiscardDialogComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "div");
@@ -16564,7 +16990,7 @@
                         templateUrl: './save-or-discard-dialog.component.html',
                         styleUrls: ['../action-dialog.component.scss']
                     }]
-            }], function () { return [{ type: i1__namespace$5.MatDialogRef }]; }, null);
+            }], function () { return [{ type: i1__namespace$6.MatDialogRef }]; }, null);
     })();
 
     var CaseEditPageText;
@@ -16770,7 +17196,7 @@
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵtextInterpolate(ctx.loadingText);
             }
-        }, styles: [".spinner-container{position:fixed;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center;background:hsla(0,0%,100%,.5);z-index:99}.spinner-container .spinner-inner-container p{text-align:center}.spinner-container .spinner-inner-container .spinner{border:10px solid #ddd;border-top-color:#000;border-radius:50%;width:40px;height:40px;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}"], encapsulation: 2 });
+        }, styles: [".spinner-container{position:fixed;top:0;left:0;height:100%;width:100%;display:flex;justify-content:center;align-items:center;background:hsla(0,0%,100%,.5);z-index:99}.spinner-container .spinner-inner-container p{text-align:center}.spinner-container .spinner-inner-container .spinner{border:10px solid #ddd;border-top-color:#000;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}"], encapsulation: 2 });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(LoadingSpinnerComponent, [{
                 type: i0.Component,
@@ -17435,7 +17861,7 @@
         };
         return CaseEditPageComponent;
     }());
-    CaseEditPageComponent.ɵfac = function CaseEditPageComponent_Factory(t) { return new (t || CaseEditPageComponent)(i0__namespace.ɵɵdirectiveInject(CaseEditComponent), i0__namespace.ɵɵdirectiveInject(i1__namespace$1.ActivatedRoute), i0__namespace.ɵɵdirectiveInject(FormValueService), i0__namespace.ɵɵdirectiveInject(FormErrorService), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(PageValidationService), i0__namespace.ɵɵdirectiveInject(i1__namespace$5.MatDialog), i0__namespace.ɵɵdirectiveInject(CaseFieldService)); };
+    CaseEditPageComponent.ɵfac = function CaseEditPageComponent_Factory(t) { return new (t || CaseEditPageComponent)(i0__namespace.ɵɵdirectiveInject(CaseEditComponent), i0__namespace.ɵɵdirectiveInject(i1__namespace$1.ActivatedRoute), i0__namespace.ɵɵdirectiveInject(FormValueService), i0__namespace.ɵɵdirectiveInject(FormErrorService), i0__namespace.ɵɵdirectiveInject(i0__namespace.ChangeDetectorRef), i0__namespace.ɵɵdirectiveInject(PageValidationService), i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialog), i0__namespace.ɵɵdirectiveInject(CaseFieldService)); };
     CaseEditPageComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseEditPageComponent, selectors: [["ccd-case-edit-page"]], decls: 13, vars: 12, consts: [[4, "ngIf"], [4, "ngIf", "ngIfThen", "ngIfElse"], ["titleBlock", ""], ["idBlock", ""], ["class", "govuk-error-summary", "aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 4, "ngIf"], ["class", "error-summary", "role", "status", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 4, "ngIf"], [3, "triggerTextContinue", "triggerTextIgnore", "callbackErrorsSubject", "callbackErrorsContext"], [1, "width-50"], ["class", "form", 3, "formGroup", "submit", 4, "ngIf"], ["class", "govuk-heading-l", 4, "ngIf"], [1, "govuk-heading-l"], [1, "govuk-caption-l"], [3, "content"], ["class", "heading-h2", 4, "ngIf"], [1, "heading-h2"], ["aria-labelledby", "error-summary-title", "role", "alert", "tabindex", "-1", "data-module", "govuk-error-summary", 1, "govuk-error-summary"], ["id", "error-summary-title", 1, "govuk-error-summary__title"], ["class", "govuk-error-summary__body", 4, "ngFor", "ngForOf"], [1, "govuk-error-summary__body"], [1, "govuk-list", "govuk-error-summary__list"], [1, "validation-error", 3, "click"], ["role", "status", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 1, "error-summary"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h1", "error-summary-heading"], ["id", "edit-case-event_error-summary-body", 1, "govuk-error-summary__body"], ["href", "get-help", "target", "_blank"], ["id", "edit-case-event_error-summary-heading-3", 1, "heading-h3", "error-summary-heading"], ["class", "error-summary-list", 4, "ngIf"], [1, "error-summary-list"], ["class", "ccd-error-summary-li", 4, "ngFor", "ngForOf"], [1, "ccd-error-summary-li"], [1, "form", 3, "formGroup", "submit"], ["id", "fieldset-case-data"], [2, "display", "none"], ["id", "caseEditForm", 3, "fields", "formGroup", "caseFields", "pageChangeSubject", "valuesChanged", 4, "ngIf"], ["class", "grid-row", 4, "ngIf"], [1, "form-group", "form-group-related"], ["type", "button", 1, "button", "button-secondary", 3, "disabled", "click"], ["type", "submit", 1, "button", 3, "disabled"], [1, "cancel"], ["href", "javascript:void(0)", 3, "click"], ["id", "caseEditForm", 3, "fields", "formGroup", "caseFields", "pageChangeSubject", "valuesChanged"], [1, "grid-row"], [1, "column-two-thirds", "rightBorderSeparator"], ["id", "caseEditForm1", 3, "fields", "formGroup", "caseFields"], [1, "column-one-third"], ["id", "caseEditForm2", 3, "fields", "formGroup", "caseFields"]], template: function CaseEditPageComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵtemplate(0, CaseEditPageComponent_ccd_loading_spinner_0_Template, 1, 0, "ccd-loading-spinner", 0);
@@ -17481,7 +17907,7 @@
                         templateUrl: 'case-edit-page.html',
                         styleUrls: ['./case-edit-page.scss']
                     }]
-            }], function () { return [{ type: CaseEditComponent }, { type: i1__namespace$1.ActivatedRoute }, { type: FormValueService }, { type: FormErrorService }, { type: i0__namespace.ChangeDetectorRef }, { type: PageValidationService }, { type: i1__namespace$5.MatDialog }, { type: CaseFieldService }]; }, null);
+            }], function () { return [{ type: CaseEditComponent }, { type: i1__namespace$1.ActivatedRoute }, { type: FormValueService }, { type: FormErrorService }, { type: i0__namespace.ChangeDetectorRef }, { type: PageValidationService }, { type: i1__namespace$6.MatDialog }, { type: CaseFieldService }]; }, null);
     })();
 
     var Confirmation = /** @class */ (function () {
@@ -18567,89 +18993,6 @@
             }], null, null);
     })();
 
-    var IsReadOnlyPipe = /** @class */ (function () {
-        function IsReadOnlyPipe(caseFieldService) {
-            this.caseFieldService = caseFieldService;
-        }
-        IsReadOnlyPipe.prototype.transform = function (field) {
-            return this.caseFieldService.isReadOnly(field);
-        };
-        return IsReadOnlyPipe;
-    }());
-    IsReadOnlyPipe.ɵfac = function IsReadOnlyPipe_Factory(t) { return new (t || IsReadOnlyPipe)(i0__namespace.ɵɵdirectiveInject(CaseFieldService)); };
-    IsReadOnlyPipe.ɵpipe = i0__namespace.ɵɵdefinePipe({ name: "ccdIsReadOnly", type: IsReadOnlyPipe, pure: true });
-    (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(IsReadOnlyPipe, [{
-                type: i0.Pipe,
-                args: [{
-                        name: 'ccdIsReadOnly'
-                    }]
-            }], function () { return [{ type: CaseFieldService }]; }, null);
-    })();
-
-    var PaletteUtilsModule = /** @class */ (function () {
-        function PaletteUtilsModule() {
-        }
-        return PaletteUtilsModule;
-    }());
-    PaletteUtilsModule.ɵfac = function PaletteUtilsModule_Factory(t) { return new (t || PaletteUtilsModule)(); };
-    PaletteUtilsModule.ɵmod = i0__namespace.ɵɵdefineNgModule({ type: PaletteUtilsModule });
-    PaletteUtilsModule.ɵinj = i0__namespace.ɵɵdefineInjector({ providers: [
-            IsCompoundPipe
-        ], imports: [[
-                i1.CommonModule
-            ]] });
-    (function () {
-        (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(PaletteUtilsModule, { declarations: [DatePipe,
-                FieldLabelPipe,
-                FirstErrorPipe,
-                IsCompoundPipe,
-                IsMandatoryPipe,
-                IsReadOnlyPipe,
-                IsReadOnlyAndNotCollectionPipe,
-                DashPipe], imports: [i1.CommonModule], exports: [DatePipe,
-                FieldLabelPipe,
-                FirstErrorPipe,
-                IsCompoundPipe,
-                IsMandatoryPipe,
-                IsReadOnlyPipe,
-                IsReadOnlyAndNotCollectionPipe,
-                DashPipe] });
-    })();
-    (function () {
-        (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PaletteUtilsModule, [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i1.CommonModule
-                        ],
-                        declarations: [
-                            DatePipe,
-                            FieldLabelPipe,
-                            FirstErrorPipe,
-                            IsCompoundPipe,
-                            IsMandatoryPipe,
-                            IsReadOnlyPipe,
-                            IsReadOnlyAndNotCollectionPipe,
-                            DashPipe
-                        ],
-                        exports: [
-                            DatePipe,
-                            FieldLabelPipe,
-                            FirstErrorPipe,
-                            IsCompoundPipe,
-                            IsMandatoryPipe,
-                            IsReadOnlyPipe,
-                            IsReadOnlyAndNotCollectionPipe,
-                            DashPipe
-                        ],
-                        providers: [
-                            IsCompoundPipe
-                        ]
-                    }]
-            }], null, null);
-    })();
-
     var CcdCollectionTableCaseFieldsFilterPipe = /** @class */ (function () {
         function CcdCollectionTableCaseFieldsFilterPipe() {
         }
@@ -18850,7 +19193,7 @@
         '',
         {}
     ];
-    ReadFieldsFilterPipe.ALWAYS_NULL_FIELDS = ['CasePaymentHistoryViewer', 'WaysToPay'];
+    ReadFieldsFilterPipe.ALWAYS_NULL_FIELDS = ['CasePaymentHistoryViewer', 'WaysToPay', 'ComponentLauncher'];
     ReadFieldsFilterPipe.NESTED_TYPES = {
         Complex: ReadFieldsFilterPipe.isValidComplex,
         Collection: ReadFieldsFilterPipe.isValidCollection
@@ -18903,8 +19246,8 @@
         function CcdPageFieldsPipe() {
         }
         CcdPageFieldsPipe.prototype.transform = function (page, dataFormGroup) {
-            var complex_fields = Object.keys(dataFormGroup.controls).map(function (key) {
-                var control = dataFormGroup.controls[key];
+            var complex_fields = Object.keys(dataFormGroup.controls['data'].controls).map(function (key) {
+                var control = dataFormGroup.controls['data'].get(key);
                 return control['caseField'];
             }).filter(function (field) {
                 return !!page.case_fields.find(function (pcf) { return pcf.id === field.id; });
@@ -19128,6 +19471,89 @@
         return OrderSummary;
     }());
 
+    var IsReadOnlyPipe = /** @class */ (function () {
+        function IsReadOnlyPipe(caseFieldService) {
+            this.caseFieldService = caseFieldService;
+        }
+        IsReadOnlyPipe.prototype.transform = function (field) {
+            return this.caseFieldService.isReadOnly(field);
+        };
+        return IsReadOnlyPipe;
+    }());
+    IsReadOnlyPipe.ɵfac = function IsReadOnlyPipe_Factory(t) { return new (t || IsReadOnlyPipe)(i0__namespace.ɵɵdirectiveInject(CaseFieldService)); };
+    IsReadOnlyPipe.ɵpipe = i0__namespace.ɵɵdefinePipe({ name: "ccdIsReadOnly", type: IsReadOnlyPipe, pure: true });
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(IsReadOnlyPipe, [{
+                type: i0.Pipe,
+                args: [{
+                        name: 'ccdIsReadOnly'
+                    }]
+            }], function () { return [{ type: CaseFieldService }]; }, null);
+    })();
+
+    var PaletteUtilsModule = /** @class */ (function () {
+        function PaletteUtilsModule() {
+        }
+        return PaletteUtilsModule;
+    }());
+    PaletteUtilsModule.ɵfac = function PaletteUtilsModule_Factory(t) { return new (t || PaletteUtilsModule)(); };
+    PaletteUtilsModule.ɵmod = i0__namespace.ɵɵdefineNgModule({ type: PaletteUtilsModule });
+    PaletteUtilsModule.ɵinj = i0__namespace.ɵɵdefineInjector({ providers: [
+            IsCompoundPipe
+        ], imports: [[
+                i1.CommonModule
+            ]] });
+    (function () {
+        (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(PaletteUtilsModule, { declarations: [DatePipe,
+                FieldLabelPipe,
+                FirstErrorPipe,
+                IsCompoundPipe,
+                IsMandatoryPipe,
+                IsReadOnlyPipe,
+                IsReadOnlyAndNotCollectionPipe,
+                DashPipe], imports: [i1.CommonModule], exports: [DatePipe,
+                FieldLabelPipe,
+                FirstErrorPipe,
+                IsCompoundPipe,
+                IsMandatoryPipe,
+                IsReadOnlyPipe,
+                IsReadOnlyAndNotCollectionPipe,
+                DashPipe] });
+    })();
+    (function () {
+        (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PaletteUtilsModule, [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i1.CommonModule
+                        ],
+                        declarations: [
+                            DatePipe,
+                            FieldLabelPipe,
+                            FirstErrorPipe,
+                            IsCompoundPipe,
+                            IsMandatoryPipe,
+                            IsReadOnlyPipe,
+                            IsReadOnlyAndNotCollectionPipe,
+                            DashPipe
+                        ],
+                        exports: [
+                            DatePipe,
+                            FieldLabelPipe,
+                            FirstErrorPipe,
+                            IsCompoundPipe,
+                            IsMandatoryPipe,
+                            IsReadOnlyPipe,
+                            IsReadOnlyAndNotCollectionPipe,
+                            DashPipe
+                        ],
+                        providers: [
+                            IsCompoundPipe
+                        ]
+                    }]
+            }], null, null);
+    })();
+
     var PALETTE_COMPONENTS = [
         UnsupportedFieldComponent,
         DatetimePickerComponent,
@@ -19197,7 +19623,10 @@
         WriteFixedListFieldComponent,
         WriteFixedRadioListFieldComponent,
         WriteCaseLinkFieldComponent,
-        WriteCollectionFieldComponent
+        WriteCollectionFieldComponent,
+        // ComponentLauncher web components
+        CaseFileViewFieldComponent,
+        CaseFileViewFolderComponent
     ];
     var PaletteModule = /** @class */ (function () {
         function PaletteModule() {
@@ -19230,18 +19659,20 @@
                 TabsModule,
                 LabelSubstitutorModule,
                 i1$4.NgxMdModule,
-                i4.NgxMatDatetimePickerModule,
-                i4.NgxMatTimepickerModule,
-                i4.NgxMatNativeDateModule,
+                i4$1.NgxMatDatetimePickerModule,
+                i4$1.NgxMatTimepickerModule,
+                i4$1.NgxMatNativeDateModule,
                 i6.MatFormFieldModule,
                 input.MatInputModule,
                 i5.MatDatepickerModule,
                 i5$1.MatAutocompleteModule,
+                i1$5.CdkTreeModule,
                 i3.PaymentLibModule,
-                i2.ScrollToModule.forRoot()
-            ], i4.NgxMatDatetimePickerModule,
-            i4.NgxMatNativeDateModule,
-            i4.NgxMatTimepickerModule,
+                i2.ScrollToModule.forRoot(),
+                i4.MediaViewerModule
+            ], i4$1.NgxMatDatetimePickerModule,
+            i4$1.NgxMatNativeDateModule,
+            i4$1.NgxMatTimepickerModule,
             TabsModule,
             PaletteUtilsModule,
             PipesModule] });
@@ -19318,7 +19749,10 @@
                 WriteFixedListFieldComponent,
                 WriteFixedRadioListFieldComponent,
                 WriteCaseLinkFieldComponent,
-                WriteCollectionFieldComponent], imports: [i1.CommonModule,
+                WriteCollectionFieldComponent,
+                // ComponentLauncher web components
+                CaseFileViewFieldComponent,
+                CaseFileViewFolderComponent], imports: [i1.CommonModule,
                 i1$1.RouterModule,
                 i1$2.FormsModule,
                 i1$2.ReactiveFormsModule,
@@ -19332,16 +19766,17 @@
                 TabsModule,
                 LabelSubstitutorModule,
                 i1$4.NgxMdModule,
-                i4.NgxMatDatetimePickerModule,
-                i4.NgxMatTimepickerModule,
-                i4.NgxMatNativeDateModule,
+                i4$1.NgxMatDatetimePickerModule,
+                i4$1.NgxMatTimepickerModule,
+                i4$1.NgxMatNativeDateModule,
                 i6.MatFormFieldModule,
                 input.MatInputModule,
                 i5.MatDatepickerModule,
                 i5$1.MatAutocompleteModule,
-                i3.PaymentLibModule, i2__namespace.ScrollToModule], exports: [i4.NgxMatDatetimePickerModule,
-                i4.NgxMatNativeDateModule,
-                i4.NgxMatTimepickerModule,
+                i1$5.CdkTreeModule,
+                i3.PaymentLibModule, i2__namespace.ScrollToModule, i4.MediaViewerModule], exports: [i4$1.NgxMatDatetimePickerModule,
+                i4$1.NgxMatNativeDateModule,
+                i4$1.NgxMatTimepickerModule,
                 TabsModule,
                 PaletteUtilsModule,
                 PipesModule, UnsupportedFieldComponent,
@@ -19412,7 +19847,10 @@
                 WriteFixedListFieldComponent,
                 WriteFixedRadioListFieldComponent,
                 WriteCaseLinkFieldComponent,
-                WriteCollectionFieldComponent] });
+                WriteCollectionFieldComponent,
+                // ComponentLauncher web components
+                CaseFileViewFieldComponent,
+                CaseFileViewFolderComponent] });
     })();
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PaletteModule, [{
@@ -19433,15 +19871,17 @@
                             TabsModule,
                             LabelSubstitutorModule,
                             i1$4.NgxMdModule,
-                            i4.NgxMatDatetimePickerModule,
-                            i4.NgxMatTimepickerModule,
-                            i4.NgxMatNativeDateModule,
+                            i4$1.NgxMatDatetimePickerModule,
+                            i4$1.NgxMatTimepickerModule,
+                            i4$1.NgxMatNativeDateModule,
                             i6.MatFormFieldModule,
                             input.MatInputModule,
                             i5.MatDatepickerModule,
                             i5$1.MatAutocompleteModule,
+                            i1$5.CdkTreeModule,
                             i3.PaymentLibModule,
-                            i2.ScrollToModule.forRoot()
+                            i2.ScrollToModule.forRoot(),
+                            i4.MediaViewerModule
                         ],
                         declarations: __spread([
                             FixedListPipe,
@@ -19451,9 +19891,9 @@
                             DocumentUrlPipe
                         ], PALETTE_COMPONENTS),
                         exports: __spread([
-                            i4.NgxMatDatetimePickerModule,
-                            i4.NgxMatNativeDateModule,
-                            i4.NgxMatTimepickerModule,
+                            i4$1.NgxMatDatetimePickerModule,
+                            i4$1.NgxMatNativeDateModule,
+                            i4$1.NgxMatTimepickerModule,
                             TabsModule,
                             PaletteUtilsModule,
                             PipesModule
@@ -20324,7 +20764,7 @@
                 i0__namespace.ɵɵadvance(3);
                 i0__namespace.ɵɵproperty("ngIf", !(ctx.autoHide && _r0.pages.length <= 1));
             }
-        }, directives: [i1__namespace$6.PaginationControlsDirective, i1__namespace.NgIf, i1__namespace.NgForOf], pipes: [i1__namespace.DecimalPipe], styles: [".ngx-pagination[_ngcontent-%COMP%]{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]:before{content:\" \";display:table}.ngx-pagination[_ngcontent-%COMP%]:after{clear:both}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0;display:inline-block}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover, .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#e6e6e6}.ngx-pagination[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%]{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{display:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]:hover{background:transparent}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{cursor:pointer}.ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before{margin-right:.5rem;border-width:3px 0 0 3px}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before{display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;transform:rotate(-45deg);content:\"\"}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after{margin-left:.5rem;border-width:0 3px 3px 0}.ngx-pagination[_ngcontent-%COMP%]   .show-for-sr[_ngcontent-%COMP%]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:none}@media screen and (max-width:601px){.ngx-pagination.responsive[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination.responsive[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"] });
+        }, directives: [i1__namespace$7.PaginationControlsDirective, i1__namespace.NgIf, i1__namespace.NgForOf], pipes: [i1__namespace.DecimalPipe], styles: [".ngx-pagination[_ngcontent-%COMP%]{margin-left:0;margin-bottom:1rem;padding-top:25px;text-decoration:none;text-align:left;font-size:16px}.ngx-pagination[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]:before{content:\" \";display:table}.ngx-pagination[_ngcontent-%COMP%]:after{clear:both}.ngx-pagination[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;margin-right:.0625rem;border-radius:0;display:inline-block}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{display:block;padding:.1875rem .625rem;border-radius:0;color:#005da6}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover, .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover{background:#e6e6e6}.ngx-pagination[_ngcontent-%COMP%]   .current[_ngcontent-%COMP%]{padding:.1875rem .625rem;background:#fff;color:#4c2c92;cursor:default;font-weight:900}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]{display:none}.ngx-pagination[_ngcontent-%COMP%]   .disabled[_ngcontent-%COMP%]:hover{background:transparent}.ngx-pagination[_ngcontent-%COMP%]   a[_ngcontent-%COMP%], .ngx-pagination[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{cursor:pointer}.ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before{margin-right:.5rem;border-width:3px 0 0 3px}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous.disabled[_ngcontent-%COMP%]:before, .ngx-pagination[_ngcontent-%COMP%]   .pagination-previous[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:before{display:inline-block;height:10px;width:10px;border-style:solid;color:#0a0a0a;background:transparent;transform:rotate(-45deg);content:\"\"}.ngx-pagination[_ngcontent-%COMP%]   .pagination-next.disabled[_ngcontent-%COMP%]:after, .ngx-pagination[_ngcontent-%COMP%]   .pagination-next[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:after{margin-left:.5rem;border-width:0 3px 3px 0}.ngx-pagination[_ngcontent-%COMP%]   .show-for-sr[_ngcontent-%COMP%]{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ngx-pagination[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:none}@media screen and (max-width:601px){.ngx-pagination.responsive[_ngcontent-%COMP%]   .small-screen[_ngcontent-%COMP%]{display:inline-block}.ngx-pagination.responsive[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:not(.small-screen):not(.pagination-previous):not(.pagination-next){display:none}}"] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PaginationComponent, [{
                 type: i0.Component,
@@ -20731,7 +21171,7 @@
                 i0__namespace.ɵɵadvance(2);
                 i0__namespace.ɵɵproperty("ngIf", ctx.totalResultsCount > ctx.pageSize);
             }
-        }, directives: [i1__namespace.NgIf, i1__namespace.NgForOf, i1__namespace$1.RouterLinkWithHref, i1__namespace.NgSwitch, i1__namespace.NgSwitchCase, i1__namespace.NgSwitchDefault, PaginationComponent], pipes: [i1__namespace$6.PaginatePipe, i1__namespace.CurrencyPipe], styles: [""] });
+        }, directives: [i1__namespace.NgIf, i1__namespace.NgForOf, i1__namespace$1.RouterLinkWithHref, i1__namespace.NgSwitch, i1__namespace.NgSwitchCase, i1__namespace.NgSwitchDefault, PaginationComponent], pipes: [i1__namespace$7.PaginatePipe, i1__namespace.CurrencyPipe], styles: [""] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(CaseListComponent, [{
                 type: i0.Component,
@@ -20791,12 +21231,12 @@
     PaginationModule.ɵmod = i0__namespace.ɵɵdefineNgModule({ type: PaginationModule });
     PaginationModule.ɵinj = i0__namespace.ɵɵdefineInjector({ imports: [[
                 i1.CommonModule,
-                i1$6.NgxPaginationModule
+                i1$7.NgxPaginationModule
             ]] });
     (function () {
         (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(PaginationModule, { declarations: [PaginationComponent], imports: [i1.CommonModule,
-                i1$6.NgxPaginationModule], exports: [PaginationComponent,
-                i1$6.PaginatePipe] });
+                i1$7.NgxPaginationModule], exports: [PaginationComponent,
+                i1$7.PaginatePipe] });
     })();
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(PaginationModule, [{
@@ -20804,14 +21244,14 @@
                 args: [{
                         imports: [
                             i1.CommonModule,
-                            i1$6.NgxPaginationModule
+                            i1$7.NgxPaginationModule
                         ],
                         declarations: [
                             PaginationComponent
                         ],
                         exports: [
                             PaginationComponent,
-                            i1$6.PaginatePipe
+                            i1$7.PaginatePipe
                         ],
                     }]
             }], null, null);
@@ -20830,14 +21270,14 @@
                 i1.CommonModule,
                 i1$2.FormsModule,
                 i1$1.RouterModule,
-                i1$6.NgxPaginationModule,
+                i1$7.NgxPaginationModule,
                 PaginationModule
             ]] });
     (function () {
         (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(CaseListModule, { declarations: [CaseListComponent], imports: [i1.CommonModule,
                 i1$2.FormsModule,
                 i1$1.RouterModule,
-                i1$6.NgxPaginationModule,
+                i1$7.NgxPaginationModule,
                 PaginationModule], exports: [CaseListComponent] });
     })();
     (function () {
@@ -20848,7 +21288,7 @@
                             i1.CommonModule,
                             i1$2.FormsModule,
                             i1$1.RouterModule,
-                            i1$6.NgxPaginationModule,
+                            i1$7.NgxPaginationModule,
                             PaginationModule
                         ],
                         declarations: [CaseListComponent],
@@ -22618,7 +23058,7 @@
         };
         return DeleteOrCancelDialogComponent;
     }());
-    DeleteOrCancelDialogComponent.ɵfac = function DeleteOrCancelDialogComponent_Factory(t) { return new (t || DeleteOrCancelDialogComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$5.MatDialogRef)); };
+    DeleteOrCancelDialogComponent.ɵfac = function DeleteOrCancelDialogComponent_Factory(t) { return new (t || DeleteOrCancelDialogComponent)(i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialogRef)); };
     DeleteOrCancelDialogComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: DeleteOrCancelDialogComponent, selectors: [["ccd-delete-or-cancel-dialog"]], decls: 15, vars: 0, consts: [[1, "dialog-header"], [1, "heading-h2", "x", 3, "click"], [1, "heading-h2", "dialog-title"], [1, "dialog-info"], [1, "text-info"], ["type", "button", "title", "Delete", 1, "button", "action-button", 3, "click"], ["type", "button", "title", "Cancel", 1, "button", "button-secondary", 3, "click"]], template: function DeleteOrCancelDialogComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵelementStart(0, "div");
@@ -22659,7 +23099,7 @@
                         templateUrl: './delete-or-cancel-dialog.component.html',
                         styleUrls: ['../action-dialog.component.scss']
                     }]
-            }], function () { return [{ type: i1__namespace$5.MatDialogRef }]; }, null);
+            }], function () { return [{ type: i1__namespace$6.MatDialogRef }]; }, null);
     })();
 
     function EventTriggerComponent_form_0_option_5_Template(rf, ctx) {
@@ -22875,17 +23315,27 @@
             i0__namespace.ɵɵproperty("id", tab_r16.id)("label", tab_r16.label);
         }
     }
-    function CaseFullAccessViewComponent_ng_container_11_mat_tab_4_ng_template_1_ng_container_2_tr_4_Template(rf, ctx) {
+    function CaseFullAccessViewComponent_ng_container_11_mat_tab_4_ng_template_1_ng_container_2_tr_4_th_1_Template(rf, ctx) {
         if (rf & 1) {
-            i0__namespace.ɵɵelementStart(0, "tr");
-            i0__namespace.ɵɵelementStart(1, "th");
-            i0__namespace.ɵɵelementStart(2, "div", 31);
-            i0__namespace.ɵɵtext(3);
+            i0__namespace.ɵɵelementStart(0, "th", 34);
+            i0__namespace.ɵɵelementStart(1, "div", 35);
+            i0__namespace.ɵɵtext(2);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
-            i0__namespace.ɵɵelementStart(4, "td");
-            i0__namespace.ɵɵelementStart(5, "span", 32);
-            i0__namespace.ɵɵelement(6, "ccd-field-read", 33);
+        }
+        if (rf & 2) {
+            var field_r21 = i0__namespace.ɵɵnextContext(2).$implicit;
+            i0__namespace.ɵɵadvance(2);
+            i0__namespace.ɵɵtextInterpolate(field_r21.label);
+        }
+    }
+    function CaseFullAccessViewComponent_ng_container_11_mat_tab_4_ng_template_1_ng_container_2_tr_4_Template(rf, ctx) {
+        if (rf & 1) {
+            i0__namespace.ɵɵelementStart(0, "tr");
+            i0__namespace.ɵɵtemplate(1, CaseFullAccessViewComponent_ng_container_11_mat_tab_4_ng_template_1_ng_container_2_tr_4_th_1_Template, 3, 1, "th", 31);
+            i0__namespace.ɵɵelementStart(2, "th");
+            i0__namespace.ɵɵelementStart(3, "span", 32);
+            i0__namespace.ɵɵelement(4, "ccd-field-read", 33);
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
             i0__namespace.ɵɵelementEnd();
@@ -22893,15 +23343,15 @@
         if (rf & 2) {
             var field_r21 = i0__namespace.ɵɵnextContext().$implicit;
             var ctx_r22 = i0__namespace.ɵɵnextContext(4);
-            i0__namespace.ɵɵadvance(3);
-            i0__namespace.ɵɵtextInterpolate(field_r21.label);
+            i0__namespace.ɵɵadvance(1);
+            i0__namespace.ɵɵproperty("ngIf", !ctx_r22.isFieldToHaveNoLabel(field_r21));
             i0__namespace.ɵɵadvance(3);
             i0__namespace.ɵɵproperty("topLevelFormGroup", ctx_r22.formGroup.controls["data"])("caseField", field_r21)("caseReference", ctx_r22.caseDetails.case_id)("markdownUseHrefAsRouterLink", ctx_r22.markdownUseHrefAsRouterLink);
         }
     }
     function CaseFullAccessViewComponent_ng_container_11_mat_tab_4_ng_template_1_ng_container_2_tr_5_Template(rf, ctx) {
         if (rf & 1) {
-            i0__namespace.ɵɵelementStart(0, "tr", 34);
+            i0__namespace.ɵɵelementStart(0, "tr", 36);
             i0__namespace.ɵɵelementStart(1, "th");
             i0__namespace.ɵɵelementStart(2, "span", 32);
             i0__namespace.ɵɵelement(3, "ccd-field-read", 33);
@@ -22922,7 +23372,7 @@
             i0__namespace.ɵɵelementStart(1, "div", 27);
             i0__namespace.ɵɵelementContainerStart(2, 28);
             i0__namespace.ɵɵpipe(3, "ccdIsCompound");
-            i0__namespace.ɵɵtemplate(4, CaseFullAccessViewComponent_ng_container_11_mat_tab_4_ng_template_1_ng_container_2_tr_4_Template, 7, 5, "tr", 29);
+            i0__namespace.ɵɵtemplate(4, CaseFullAccessViewComponent_ng_container_11_mat_tab_4_ng_template_1_ng_container_2_tr_4_Template, 5, 5, "tr", 29);
             i0__namespace.ɵɵtemplate(5, CaseFullAccessViewComponent_ng_container_11_mat_tab_4_ng_template_1_ng_container_2_tr_5_Template, 4, 4, "tr", 30);
             i0__namespace.ɵɵelementContainerEnd();
             i0__namespace.ɵɵelementEnd();
@@ -22976,8 +23426,8 @@
             i0__namespace.ɵɵelement(0, "mat-tab", 24);
         }
         if (rf & 2) {
-            var tab_r27 = ctx.$implicit;
-            i0__namespace.ɵɵproperty("id", tab_r27.id)("label", tab_r27.label);
+            var tab_r29 = ctx.$implicit;
+            i0__namespace.ɵɵproperty("id", tab_r29.id)("label", tab_r29.label);
         }
     }
     function CaseFullAccessViewComponent_ng_container_11_router_outlet_6_Template(rf, ctx) {
@@ -22987,10 +23437,10 @@
     }
     function CaseFullAccessViewComponent_ng_container_11_Template(rf, ctx) {
         if (rf & 1) {
-            var _r29_1 = i0__namespace.ɵɵgetCurrentView();
+            var _r31_1 = i0__namespace.ɵɵgetCurrentView();
             i0__namespace.ɵɵelementContainerStart(0);
             i0__namespace.ɵɵelementStart(1, "mat-tab-group", 21, 22);
-            i0__namespace.ɵɵlistener("selectedTabChange", function CaseFullAccessViewComponent_ng_container_11_Template_mat_tab_group_selectedTabChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r29_1); var ctx_r28 = i0__namespace.ɵɵnextContext(); return ctx_r28.tabChanged($event); });
+            i0__namespace.ɵɵlistener("selectedTabChange", function CaseFullAccessViewComponent_ng_container_11_Template_mat_tab_group_selectedTabChange_1_listener($event) { i0__namespace.ɵɵrestoreView(_r31_1); var ctx_r30 = i0__namespace.ɵɵnextContext(); return ctx_r30.tabChanged($event); });
             i0__namespace.ɵɵtemplate(3, CaseFullAccessViewComponent_ng_container_11_mat_tab_3_Template, 1, 2, "mat-tab", 23);
             i0__namespace.ɵɵtemplate(4, CaseFullAccessViewComponent_ng_container_11_mat_tab_4_Template, 2, 2, "mat-tab", 23);
             i0__namespace.ɵɵtemplate(5, CaseFullAccessViewComponent_ng_container_11_mat_tab_5_Template, 1, 2, "mat-tab", 23);
@@ -23206,6 +23656,16 @@
                 });
             }
         };
+        /**
+         * Indicates that a CaseField is to be displayed without a label, as is expected for all ComponentLauncher-type
+         * fields.
+         * @param caseField The `CaseField` instance to check
+         * @returns `true` if it should not have a label; `false` otherwise
+         */
+        CaseFullAccessViewComponent.prototype.isFieldToHaveNoLabel = function (caseField) {
+            return caseField.field_type.type === 'ComponentLauncher'
+                && caseField.display_context_parameter === '#ARGUMENT(CaseFileView)';
+        };
         CaseFullAccessViewComponent.prototype.init = function () {
             var _this = this;
             // Clone and sort tabs array
@@ -23264,7 +23724,7 @@
     CaseFullAccessViewComponent.TRIGGER_TEXT_CONTINUE = 'Ignore Warning and Go';
     CaseFullAccessViewComponent.UNICODE_SPACE = '%20';
     CaseFullAccessViewComponent.EMPTY_SPACE = ' ';
-    CaseFullAccessViewComponent.ɵfac = function CaseFullAccessViewComponent_Factory(t) { return new (t || CaseFullAccessViewComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵdirectiveInject(i1__namespace$1.ActivatedRoute), i0__namespace.ɵɵdirectiveInject(i1__namespace$1.Router), i0__namespace.ɵɵdirectiveInject(NavigationNotifierService), i0__namespace.ɵɵdirectiveInject(OrderService), i0__namespace.ɵɵdirectiveInject(ActivityPollingService), i0__namespace.ɵɵdirectiveInject(i1__namespace$5.MatDialog), i0__namespace.ɵɵdirectiveInject(AlertService), i0__namespace.ɵɵdirectiveInject(DraftService), i0__namespace.ɵɵdirectiveInject(ErrorNotifierService), i0__namespace.ɵɵdirectiveInject(ConvertHrefToRouterService), i0__namespace.ɵɵdirectiveInject(i1__namespace.Location), i0__namespace.ɵɵdirectiveInject(SessionStorageService)); };
+    CaseFullAccessViewComponent.ɵfac = function CaseFullAccessViewComponent_Factory(t) { return new (t || CaseFullAccessViewComponent)(i0__namespace.ɵɵdirectiveInject(i0__namespace.NgZone), i0__namespace.ɵɵdirectiveInject(i1__namespace$1.ActivatedRoute), i0__namespace.ɵɵdirectiveInject(i1__namespace$1.Router), i0__namespace.ɵɵdirectiveInject(NavigationNotifierService), i0__namespace.ɵɵdirectiveInject(OrderService), i0__namespace.ɵɵdirectiveInject(ActivityPollingService), i0__namespace.ɵɵdirectiveInject(i1__namespace$6.MatDialog), i0__namespace.ɵɵdirectiveInject(AlertService), i0__namespace.ɵɵdirectiveInject(DraftService), i0__namespace.ɵɵdirectiveInject(ErrorNotifierService), i0__namespace.ɵɵdirectiveInject(ConvertHrefToRouterService), i0__namespace.ɵɵdirectiveInject(i1__namespace.Location), i0__namespace.ɵɵdirectiveInject(SessionStorageService)); };
     CaseFullAccessViewComponent.ɵcmp = i0__namespace.ɵɵdefineComponent({ type: CaseFullAccessViewComponent, selectors: [["ccd-case-full-access-view"]], viewQuery: function CaseFullAccessViewComponent_Query(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵviewQuery(_c0$a, 1);
@@ -23273,7 +23733,7 @@
                 var _t = void 0;
                 i0__namespace.ɵɵqueryRefresh(_t = i0__namespace.ɵɵloadQuery()) && (ctx.tabGroup = _t.first);
             }
-        }, inputs: { hasPrint: "hasPrint", hasEventSelector: "hasEventSelector", caseDetails: "caseDetails", prependedTabs: "prependedTabs", appendedTabs: "appendedTabs" }, decls: 12, vars: 11, consts: [["class", "error-summary", "role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 4, "ngIf"], [3, "triggerTextContinue", "triggerTextIgnore", "callbackErrorsSubject", "callbackErrorsContext"], [3, "caseId", "displayMode"], [1, "grid-row"], [1, "column-one-half"], [3, "caseDetails"], ["class", "case-viewer-controls", 4, "ngIf"], ["class", "column-one-half", 4, "ngIf"], [1, "column-full"], [4, "ngIf"], ["role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 1, "error-summary"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h1", "error-summary-heading"], ["id", "edit-case-event_error-summary-body", 1, "govuk-error-summary__body"], ["href", "get-help", "target", "_blank"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h2", "error-summary-heading"], ["class", "error-summary-list", 4, "ngIf"], [1, "error-summary-list"], [4, "ngFor", "ngForOf"], [1, "case-viewer-controls"], ["id", "case-viewer-control-print", "routerLink", "print", 1, "button", "button-secondary"], [3, "isDisabled", "triggers", "triggerText", "onTriggerChange", "onTriggerSubmit"], ["animationDuration", "0ms", 3, "disableRipple", "selectedTabChange"], ["tabGroup", ""], [3, "id", "label", 4, "ngFor", "ngForOf"], [3, "id", "label"], ["matTabContent", ""], ["aria-describedby", "case viewer table"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "hidden"], [3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "compound-field", 4, "ngSwitchCase"], [1, "case-viewer-label", "text-16"], [1, "text-16"], [3, "topLevelFormGroup", "caseField", "caseReference", "markdownUseHrefAsRouterLink"], [1, "compound-field"]], template: function CaseFullAccessViewComponent_Template(rf, ctx) {
+        }, inputs: { hasPrint: "hasPrint", hasEventSelector: "hasEventSelector", caseDetails: "caseDetails", prependedTabs: "prependedTabs", appendedTabs: "appendedTabs" }, decls: 12, vars: 11, consts: [["class", "error-summary", "role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 4, "ngIf"], [3, "triggerTextContinue", "triggerTextIgnore", "callbackErrorsSubject", "callbackErrorsContext"], [3, "caseId", "displayMode"], [1, "grid-row"], [1, "column-one-half"], [3, "caseDetails"], ["class", "case-viewer-controls", 4, "ngIf"], ["class", "column-one-half", 4, "ngIf"], [1, "column-full"], [4, "ngIf"], ["role", "group", "aria-labelledby", "edit-case-event_error-summary-heading", "tabindex", "-1", 1, "error-summary"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h1", "error-summary-heading"], ["id", "edit-case-event_error-summary-body", 1, "govuk-error-summary__body"], ["href", "get-help", "target", "_blank"], ["id", "edit-case-event_error-summary-heading", 1, "heading-h2", "error-summary-heading"], ["class", "error-summary-list", 4, "ngIf"], [1, "error-summary-list"], [4, "ngFor", "ngForOf"], [1, "case-viewer-controls"], ["id", "case-viewer-control-print", "routerLink", "print", 1, "button", "button-secondary"], [3, "isDisabled", "triggers", "triggerText", "onTriggerChange", "onTriggerSubmit"], ["animationDuration", "0ms", 3, "disableRipple", "selectedTabChange"], ["tabGroup", ""], [3, "id", "label", 4, "ngFor", "ngForOf"], [3, "id", "label"], ["matTabContent", ""], ["aria-describedby", "case viewer table"], ["ccdLabelSubstitutor", "", 3, "caseField", "contextFields", "hidden"], [3, "ngSwitch"], [4, "ngSwitchCase"], ["class", "compound-field", 4, "ngSwitchCase"], ["id", "case-viewer-field-label", 4, "ngIf"], [1, "text-16"], [3, "topLevelFormGroup", "caseField", "caseReference", "markdownUseHrefAsRouterLink"], ["id", "case-viewer-field-label"], [1, "case-viewer-label", "text-16"], [1, "compound-field"]], template: function CaseFullAccessViewComponent_Template(rf, ctx) {
             if (rf & 1) {
                 i0__namespace.ɵɵtemplate(0, CaseFullAccessViewComponent_div_0_Template, 10, 0, "div", 0);
                 i0__namespace.ɵɵtemplate(1, CaseFullAccessViewComponent_div_1_Template, 6, 2, "div", 0);
@@ -23320,7 +23780,7 @@
                         templateUrl: './case-full-access-view.component.html',
                         styleUrls: ['./case-full-access-view.component.scss']
                     }]
-            }], function () { return [{ type: i0__namespace.NgZone }, { type: i1__namespace$1.ActivatedRoute }, { type: i1__namespace$1.Router }, { type: NavigationNotifierService }, { type: OrderService }, { type: ActivityPollingService }, { type: i1__namespace$5.MatDialog }, { type: AlertService }, { type: DraftService }, { type: ErrorNotifierService }, { type: ConvertHrefToRouterService }, { type: i1__namespace.Location }, { type: SessionStorageService }]; }, { hasPrint: [{
+            }], function () { return [{ type: i0__namespace.NgZone }, { type: i1__namespace$1.ActivatedRoute }, { type: i1__namespace$1.Router }, { type: NavigationNotifierService }, { type: OrderService }, { type: ActivityPollingService }, { type: i1__namespace$6.MatDialog }, { type: AlertService }, { type: DraftService }, { type: ErrorNotifierService }, { type: ConvertHrefToRouterService }, { type: i1__namespace.Location }, { type: SessionStorageService }]; }, { hasPrint: [{
                     type: i0.Input
                 }], hasEventSelector: [{
                     type: i0.Input
@@ -27514,7 +27974,7 @@
                 i0__namespace.ɵɵadvance(1);
                 i0__namespace.ɵɵproperty("ngIf", !(ctx.hasResults() || ctx.hasDrafts()));
             }
-        }, directives: [i1__namespace.NgIf, i1__namespace.NgForOf, i1__namespace$1.RouterLinkWithHref, FieldReadComponent, LabelSubstitutorDirective, ActivityComponent, PaginationComponent], pipes: [i1__namespace.DecimalPipe, i1__namespace$6.PaginatePipe, CaseReferencePipe, SortSearchResultPipe], styles: ["table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]{vertical-align:top}table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{font-size:16px;word-wrap:break-word}table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{float:left}table[_ngcontent-%COMP%]   .caseid-col[_ngcontent-%COMP%]{white-space:nowrap}.notification[_ngcontent-%COMP%]{text-align:center;padding:30px 0;margin-top:75px}a[_ngcontent-%COMP%]:hover{color:#005ea5}.search-result-reset-link[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}.search-result-column-header[_ngcontent-%COMP%]{width:unset;table-layout:normal}.search-result-column-header[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:table-cell;width:auto}@media screen and (max-width:379px){.search-result-column-header[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:block;float:right}}.search-result-column-label[_ngcontent-%COMP%]{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort[_ngcontent-%COMP%]{font-size:16px}.sort-widget[_ngcontent-%COMP%]{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium[_ngcontent-%COMP%]{margin-top:-20px}.govuk-table__checkbox[_ngcontent-%COMP%]{vertical-align:middle;padding-left:3px}#search-result-heading__text[_ngcontent-%COMP%]:focus{outline:none}"] });
+        }, directives: [i1__namespace.NgIf, i1__namespace.NgForOf, i1__namespace$1.RouterLinkWithHref, FieldReadComponent, LabelSubstitutorDirective, ActivityComponent, PaginationComponent], pipes: [i1__namespace.DecimalPipe, i1__namespace$7.PaginatePipe, CaseReferencePipe, SortSearchResultPipe], styles: ["table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]{vertical-align:top}table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]{font-size:16px;word-wrap:break-word}table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]   td[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{float:left}table[_ngcontent-%COMP%]   .caseid-col[_ngcontent-%COMP%]{white-space:nowrap}.notification[_ngcontent-%COMP%]{text-align:center;padding:30px 0;margin-top:75px}a[_ngcontent-%COMP%]:hover{color:#005ea5}.search-result-reset-link[_ngcontent-%COMP%]{padding-right:15px;padding-left:15px}.search-result-column-header[_ngcontent-%COMP%]{width:unset;table-layout:normal}.search-result-column-header[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:table-cell;width:auto}@media screen and (max-width:379px){.search-result-column-header[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]{display:block;float:right}}.search-result-column-label[_ngcontent-%COMP%]{font-size:16px;font-weight:700;word-wrap:break-word;cursor:pointer;padding-right:15px}.search-result-column-sort[_ngcontent-%COMP%]{font-size:16px}.sort-widget[_ngcontent-%COMP%]{cursor:pointer;text-decoration:none;color:#231f20}span.heading-medium[_ngcontent-%COMP%]{margin-top:-20px}.govuk-table__checkbox[_ngcontent-%COMP%]{vertical-align:middle;padding-left:3px}#search-result-heading__text[_ngcontent-%COMP%]:focus{outline:none}"] });
     (function () {
         (typeof ngDevMode === "undefined" || ngDevMode) && i0__namespace.ɵsetClassMetadata(SearchResultComponent, [{
                 type: i0.Component,
@@ -27572,7 +28032,7 @@
             BrowserService
         ], imports: [[
                 i1.CommonModule,
-                i1$6.NgxPaginationModule,
+                i1$7.NgxPaginationModule,
                 i1$1.RouterModule,
                 i1$2.FormsModule,
                 i1$2.ReactiveFormsModule,
@@ -27584,7 +28044,7 @@
             ]] });
     (function () {
         (typeof ngJitMode === "undefined" || ngJitMode) && i0__namespace.ɵɵsetNgModuleScope(SearchResultModule, { declarations: [SearchResultComponent], imports: [i1.CommonModule,
-                i1$6.NgxPaginationModule,
+                i1$7.NgxPaginationModule,
                 i1$1.RouterModule,
                 i1$2.FormsModule,
                 i1$2.ReactiveFormsModule,
@@ -27600,7 +28060,7 @@
                 args: [{
                         imports: [
                             i1.CommonModule,
-                            i1$6.NgxPaginationModule,
+                            i1$7.NgxPaginationModule,
                             i1$1.RouterModule,
                             i1$2.FormsModule,
                             i1$2.ReactiveFormsModule,
@@ -27928,6 +28388,9 @@
     exports.CaseEventTriggerComponent = CaseEventTriggerComponent;
     exports.CaseField = CaseField;
     exports.CaseFieldService = CaseFieldService;
+    exports.CaseFileViewFieldComponent = CaseFileViewFieldComponent;
+    exports.CaseFileViewFolderComponent = CaseFileViewFolderComponent;
+    exports.CaseFileViewService = CaseFileViewService;
     exports.CaseFullAccessViewComponent = CaseFullAccessViewComponent;
     exports.CaseHeaderComponent = CaseHeaderComponent;
     exports.CaseHeaderModule = CaseHeaderModule;