@hmcts/media-viewer 4.0.0-RC.1 → 4.0.1

package/fesm2022/hmcts-media-viewer.mjs

@@ -25,9 +25,13 @@ import * as i5$1 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i6 from '@angular/cdk/overlay';
 import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
-import * as i3 from '@ali-hm/angular-tree-component';
-import { TreeComponent, TreeModule } from '@ali-hm/angular-tree-component';
-import 'hammerjs';
+import * as i4$2 from 'mutable-div';
+import { MutableDivModule } from 'mutable-div';
+import { SelectionModel, ArrayDataSource } from '@angular/cdk/collections';
+import * as i3 from '@angular/cdk/tree';
+import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
+import * as i4$3 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import * as i5$2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i8 from '@swimlane/ngx-datatable';
@@ -1589,7 +1593,8 @@ class PdfJsWrapper {
             url: documentUrl,
             cMapUrl: 'assets/minified/cmaps',
             cMapPacked: true,
-            withCredentials: true
+            withCredentials: true,
+            isEvalSupported: false
         });
     }
     async setOutlinePageNumbers(pdfDocument, outlineArray) {
@@ -1900,10 +1905,10 @@ class ToolbarEventService {
         }
         this.icp.participantsListVisible.next(isVisible);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarEventService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ToolbarEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ToolbarEventService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ToolbarEventService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1934,13 +1939,13 @@ class PdfJsWrapperFactory {
     pdfWrapper() {
         return this.pdfJsWrapper;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfJsWrapperFactory, deps: [{ token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfJsWrapperFactory, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PdfJsWrapperFactory, deps: [{ token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PdfJsWrapperFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfJsWrapperFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PdfJsWrapperFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }]; } });
+        }], ctorParameters: () => [{ type: ToolbarEventService }] });
 
 class PrintService {
     printDocumentNatively(url) {
@@ -1960,10 +1965,10 @@ class PrintService {
         printWindow.print();
         printWindow.close();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrintService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PrintService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrintService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PrintService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1989,13 +1994,13 @@ class ViewerEventService {
     goToDestination(destination) {
         this.navigationEvent.next(destination);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerEventService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ViewerEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ViewerEventService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ViewerEventService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 const getIcpState = createSelector(getMVState, (state) => state.icp);
 const getIcpSession = createSelector(getIcpState, getIcpSession$1);
@@ -2129,12 +2134,12 @@ class SocketService {
         this.socket = new WebSocket(url, 'json.webpubsub.azure.v1');
         return of(this.socket);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SocketService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SocketService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SocketService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SocketService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class IcpUpdateService {
     constructor(socket) {
@@ -2182,12 +2187,12 @@ class IcpUpdateService {
     screenUpdated() {
         return this.socket.listen(IcpEvents.SCREEN_UPDATED);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpUpdateService, deps: [{ token: SocketService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpUpdateService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpUpdateService, deps: [{ token: SocketService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpUpdateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpUpdateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpUpdateService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: SocketService }]; } });
+        }], ctorParameters: () => [{ type: SocketService }] });
 
 class IcpPresenterService {
     constructor(toolbarEvents, socketService, store) {
@@ -2229,12 +2234,12 @@ class IcpPresenterService {
         this.onPositionUpdate(this.pdfPosition);
         this.socketService.updatePresenter(this.presenter);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpPresenterService, deps: [{ token: ToolbarEventService }, { token: IcpUpdateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpPresenterService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpPresenterService, deps: [{ token: ToolbarEventService }, { token: IcpUpdateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpPresenterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpPresenterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpPresenterService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: IcpUpdateService }, { type: i1.Store }]; } });
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: IcpUpdateService }, { type: i1.Store }] });
 
 class IcpFollowerService {
     constructor(toolbarEvents, viewerEvents, socketService, store) {
@@ -2280,12 +2285,12 @@ class IcpFollowerService {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpFollowerService, deps: [{ token: ToolbarEventService }, { token: ViewerEventService }, { token: IcpUpdateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpFollowerService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpFollowerService, deps: [{ token: ToolbarEventService }, { token: ViewerEventService }, { token: IcpUpdateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpFollowerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpFollowerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpFollowerService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ViewerEventService }, { type: IcpUpdateService }, { type: i1.Store }]; } });
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: ViewerEventService }, { type: IcpUpdateService }, { type: i1.Store }] });
 
 class IcpService {
     constructor(toolbarEvents, viewerEvents, socketService, presenterSubscriptions, followerSubscriptions, store) {
@@ -2361,12 +2366,12 @@ class IcpService {
     removeParticipant(participantId) {
         this.socketService.removeParticipant(participantId);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpService, deps: [{ token: ToolbarEventService }, { token: ViewerEventService }, { token: IcpUpdateService }, { token: IcpPresenterService }, { token: IcpFollowerService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpService, deps: [{ token: ToolbarEventService }, { token: ViewerEventService }, { token: IcpUpdateService }, { token: IcpPresenterService }, { token: IcpFollowerService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ViewerEventService }, { type: IcpUpdateService }, { type: IcpPresenterService }, { type: IcpFollowerService }, { type: i1.Store }]; } });
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: ViewerEventService }, { type: IcpUpdateService }, { type: IcpPresenterService }, { type: IcpFollowerService }, { type: i1.Store }] });
 
 class ToolbarButtonVisibilityService {
     constructor() {
@@ -2411,10 +2416,10 @@ class ToolbarButtonVisibilityService {
             this[key] = options[key];
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarButtonVisibilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarButtonVisibilityService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ToolbarButtonVisibilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ToolbarButtonVisibilityService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarButtonVisibilityService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ToolbarButtonVisibilityService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2629,12 +2634,12 @@ class HighlightCreateService {
         window.getSelection().removeAllRanges();
         this.toolBarEvents.highlightModeSubject.next(false);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightCreateService, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightCreateService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: HighlightCreateService, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: HighlightCreateService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightCreateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: HighlightCreateService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: i1.Store }]; } });
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: i1.Store }] });
 
 class RedactionSearchBarComponent {
     constructor(store, toolbarButtons, toolbarEvents, highlightService) {
@@ -2843,13 +2848,13 @@ class RedactionSearchBarComponent {
         rectangle = { id: uuid$1(), ...rectangle };
         return rectangle;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionSearchBarComponent, deps: [{ token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }], ngImport: i0, template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Redact from search\"\n        #findInput\n        title=\"Redact from search\"\n        placeholder=\"{{ titleText + ' from search...' | rpxTranslate }}\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          {{ \"Search\" | rpxTranslate }}\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress || resultCount <= 0\"\n        >\n          {{ titleText + \" all\" | rpxTranslate }}\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            {{ inProgressText + \" in progress\" | rpxTranslate }}\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionSearchBarComponent, deps: [{ token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }], ngImport: i0, template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Redact from search\"\n        #findInput\n        title=\"Redact from search\"\n        placeholder=\"{{ titleText + ' from search...' | rpxTranslate }}\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          {{ \"Search\" | rpxTranslate }}\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress || resultCount <= 0\"\n        >\n          {{ titleText + \" all\" | rpxTranslate }}\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            {{ inProgressText + \" in progress\" | rpxTranslate }}\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionSearchBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionSearchBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-redaction-search-bar', template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Redact from search\"\n        #findInput\n        title=\"Redact from search\"\n        placeholder=\"{{ titleText + ' from search...' | rpxTranslate }}\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          {{ \"Search\" | rpxTranslate }}\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress || resultCount <= 0\"\n        >\n          {{ titleText + \" all\" | rpxTranslate }}\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            {{ inProgressText + \" in progress\" | rpxTranslate }}\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }, { type: HighlightCreateService }]; }, propDecorators: { findInput: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }, { type: HighlightCreateService }], propDecorators: { findInput: [{
                 type: ViewChild,
                 args: ['findInput', { static: true }]
             }], onWindowKeyDown: [{
@@ -2897,10 +2902,10 @@ class CommentService {
     createMarginToCommentEvent(margin) {
         this.marginToCommentEmitter.next(margin);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentService, decorators: [{
             type: Injectable
         }] });
 
@@ -2949,10 +2954,10 @@ class CommentSetRenderService {
         return element.form.nativeElement.getBoundingClientRect().height;
     }
     difference(a, b) { return Math.abs(a - b); }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentSetRenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentSetRenderService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentSetRenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentSetRenderService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentSetRenderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentSetRenderService, decorators: [{
             type: Injectable
         }] });
 
@@ -2987,12 +2992,12 @@ class TagsServices {
             [annoId]: snakeCased
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsServices, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsServices }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TagsServices, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TagsServices }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsServices, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TagsServices, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
 class TextHighlightDirective {
     constructor(element) {
@@ -3027,15 +3032,15 @@ class TextHighlightDirective {
     highlightPattern(dynamicText) {
         return '<span class="mvTextHighlight">' + dynamicText + '</span>';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextHighlightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: { textToHighlight: "textToHighlight" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TextHighlightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.8", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: { textToHighlight: "textToHighlight" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextHighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TextHighlightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mvTextHighlight]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { textToHighlight: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { textToHighlight: [{
                 type: Input
             }] } });
 
@@ -3055,15 +3060,15 @@ class TextareaAutoExpandDirective {
         nativeElement.style.height = 'auto';
         nativeElement.style.height = nativeElement.scrollHeight - 5 + 'px';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextareaAutoExpandDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]", host: { listeners: { "input": "onMouseDown()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TextareaAutoExpandDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.8", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]", host: { listeners: { "input": "onMouseDown()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextareaAutoExpandDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TextareaAutoExpandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mvTextAreaAutoExpand]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onMouseDown: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onMouseDown: [{
                 type: HostListener,
                 args: ['input']
             }] } });
@@ -3099,13 +3104,13 @@ class TagsComponent {
         }
         return null;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsComponent, deps: [{ token: TagsServices }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TagsComponent, selector: "mv-tags", inputs: { tagItems: "tagItems", userId: "userId", editable: "editable", annoId: "annoId" }, ngImport: i0, template: "<div class=\"tags\">\n  <tag-input\n    *ngIf=\"editable\" class=\"tags__edit\"\n    [maxItems]=\"10\"\n    [(ngModel)]=\"tagItems\"\n    (ngModelChange)=\"onUpdateTags($event)\"\n    [ngModelOptions]=\"{standalone:true}\"\n    [placeholder]=\"'Add tag'\"\n    [displayBy]=\"'label'\"\n    [identifyBy]=\"'name'\"\n    [onTextChangeDebounce]=\"250\"\n    [secondaryPlaceholder]=\"'Search or add tags'\"\n    [validators]=\"validators\"\n    [errorMessages]=\"errorMessages\"\n    [onlyFromAutocomplete]=\"false\">\n    <tag-input-dropdown\n      [autocompleteObservable]=\"requestAutocompleteItems\"\n      [displayBy]=\"'label'\"\n      [identifyBy]=\"'name'\"\n      [zIndex]=\"10000\"\n      [minimumTextLength]=\"2\">\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.label }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n\n  <div class=\"tags__renderer\" *ngIf=\"!editable && (tagItems && tagItems.length)\">\n    <span *ngFor=\"let tag of tagItems\" class=\"tags__item hmcts-badge\">\n      {{tag.label}}\n    </span>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "inputText", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { kind: "component", type: i4$1.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "autocompleteObservable", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TagsComponent, deps: [{ token: TagsServices }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: TagsComponent, selector: "mv-tags", inputs: { tagItems: "tagItems", userId: "userId", editable: "editable", annoId: "annoId" }, ngImport: i0, template: "<div class=\"tags\">\n  <tag-input\n    *ngIf=\"editable\" class=\"tags__edit\"\n    [maxItems]=\"10\"\n    [(ngModel)]=\"tagItems\"\n    (ngModelChange)=\"onUpdateTags($event)\"\n    [ngModelOptions]=\"{standalone:true}\"\n    [placeholder]=\"'Add tag'\"\n    [displayBy]=\"'label'\"\n    [identifyBy]=\"'name'\"\n    [onTextChangeDebounce]=\"250\"\n    [secondaryPlaceholder]=\"'Search or add tags'\"\n    [validators]=\"validators\"\n    [errorMessages]=\"errorMessages\"\n    [onlyFromAutocomplete]=\"false\">\n    <tag-input-dropdown\n      [autocompleteObservable]=\"requestAutocompleteItems\"\n      [displayBy]=\"'label'\"\n      [identifyBy]=\"'name'\"\n      [zIndex]=\"10000\"\n      [minimumTextLength]=\"2\">\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.label }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n\n  <div class=\"tags__renderer\" *ngIf=\"!editable && (tagItems && tagItems.length)\">\n    <span *ngFor=\"let tag of tagItems\" class=\"tags__item hmcts-badge\">\n      {{tag.label}}\n    </span>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "inputText", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { kind: "component", type: i4$1.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "autocompleteObservable", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-tags', encapsulation: ViewEncapsulation.None, template: "<div class=\"tags\">\n  <tag-input\n    *ngIf=\"editable\" class=\"tags__edit\"\n    [maxItems]=\"10\"\n    [(ngModel)]=\"tagItems\"\n    (ngModelChange)=\"onUpdateTags($event)\"\n    [ngModelOptions]=\"{standalone:true}\"\n    [placeholder]=\"'Add tag'\"\n    [displayBy]=\"'label'\"\n    [identifyBy]=\"'name'\"\n    [onTextChangeDebounce]=\"250\"\n    [secondaryPlaceholder]=\"'Search or add tags'\"\n    [validators]=\"validators\"\n    [errorMessages]=\"errorMessages\"\n    [onlyFromAutocomplete]=\"false\">\n    <tag-input-dropdown\n      [autocompleteObservable]=\"requestAutocompleteItems\"\n      [displayBy]=\"'label'\"\n      [identifyBy]=\"'name'\"\n      [zIndex]=\"10000\"\n      [minimumTextLength]=\"2\">\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.label }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n\n  <div class=\"tags__renderer\" *ngIf=\"!editable && (tagItems && tagItems.length)\">\n    <span *ngFor=\"let tag of tagItems\" class=\"tags__item hmcts-badge\">\n      {{tag.label}}\n    </span>\n  </div>\n</div>\n\n" }]
-        }], ctorParameters: function () { return [{ type: TagsServices }]; }, propDecorators: { tagItems: [{
+        }], ctorParameters: () => [{ type: TagsServices }], propDecorators: { tagItems: [{
                 type: Input
             }], userId: [{
                 type: Input
@@ -3127,10 +3132,10 @@ class MomentDatePipe extends DatePipe {
         const timezoneOffset = moment(value).tz(timezone).format('Z');
         return super.transform(value, format, timezoneOffset);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MomentDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MomentDatePipe, name: "momentDate" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MomentDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: MomentDatePipe, name: "momentDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MomentDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MomentDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'momentDate'
@@ -3264,13 +3269,13 @@ class CommentComponent {
     get height() {
         return this.form.nativeElement.getBoundingClientRect().height / this.zoom;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: TagsServices }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommentComponent, selector: "mv-anno-comment", inputs: { rotate: "rotate", zoom: "zoom", index: "index", page: "page", comment: "comment", annotation: "annotation" }, outputs: { commentClick: "commentClick", renderComments: "renderComments", delete: "delete", updated: "updated", changes: "changes" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "editableComment", first: true, predicate: ["editableComment"], descendants: true }], ngImport: i0, template: "<div\n  #form\n  (click)=\"onCommentClick()\"\n  class=\"aui-comment\"\n  [ngClass]=\"{ stylestoggle: (marginToComment$ | async) }\"\n  [style.top.px]=\"commentTop\"\n  [style.zIndex]=\"selected ? 100 : 0\"\n>\n  <div id=\"detailsWrapper {{ index }}\" class=\"aui-comment__header\">\n    <span *ngIf=\"author && !editor\" class=\"aui-comment__author\">\n      {{ author.forename }} {{ author.surname }}\n    </span>\n    <span *ngIf=\"editor\" class=\"aui-comment__author\">\n      {{ editor.forename }} {{ editor.surname }}\n    </span>\n    <time [hidden]=\"!selected && !this.editable\" class=\"aui-comment__meta\">\n      {{ lastUpdate | momentDate : \"d MMMM y h:mm a\" }}\n    </time>\n  </div>\n  <mv-tags\n    [tagItems]=\"tagItems\"\n    [userId]=\"createdBy\"\n    [editable]=\"editable\"\n    [annoId]=\"_comment.annotationId\"\n  >\n  </mv-tags>\n  <textarea\n    *ngIf=\"selected && editable\"\n    #editableComment\n    mvTextAreaAutoExpand\n    type=\"text\"\n    required\n    name=\"content\"\n    [maxlength]=\"CHAR_LIMIT\"\n    class=\"aui-comment__content form-control mimic-focus edit-mode expanded\"\n    [(ngModel)]=\"fullComment\"\n    (ngModelChange)=\"reRenderComments(); onCommentChange($event)\"\n    aria-label=\"comment\"\n  >\n  </textarea>\n  <p\n    *ngIf=\"!editable\"\n    mvTextHighlight\n    class=\"commentText\"\n    [textToHighlight]=\"searchString\"\n  >\n    {{ fullComment }}\n  </p>\n  <div\n    *ngIf=\"\n      selected ||\n      this.editable ||\n      (!fullComment.length && tagItems && !tagItems.length)\n    \"\n    class=\"aui-comment__footer commentBtns\"\n  >\n    <button\n      class=\"govuk-button\"\n      type=\"button\"\n      role=\"button\"\n      (click)=\"editOrSave()\"\n    >\n      {{ !editable ? (\"Edit\" | rpxTranslate) : (\"Save\" | rpxTranslate) }}\n    </button>\n    <button\n      type=\"button\"\n      role=\"button\"\n      class=\"govuk-button govuk-button--secondary\"\n      (click)=\"deleteOrCancel()\"\n    >\n      {{ !editable ? (\"Delete\" | rpxTranslate) : (\"Cancel\" | rpxTranslate) }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">{{ \"private\" | rpxTranslate }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: ["textToHighlight"] }, { kind: "directive", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]" }, { kind: "component", type: TagsComponent, selector: "mv-tags", inputs: ["tagItems", "userId", "editable", "annoId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: MomentDatePipe, name: "momentDate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: TagsServices }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: CommentComponent, selector: "mv-anno-comment", inputs: { rotate: "rotate", zoom: "zoom", index: "index", page: "page", comment: "comment", annotation: "annotation" }, outputs: { commentClick: "commentClick", renderComments: "renderComments", delete: "delete", updated: "updated", changes: "changes" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "editableComment", first: true, predicate: ["editableComment"], descendants: true }], ngImport: i0, template: "<div\n  #form\n  (click)=\"onCommentClick()\"\n  class=\"aui-comment\"\n  [ngClass]=\"{ stylestoggle: (marginToComment$ | async) }\"\n  [style.top.px]=\"commentTop\"\n  [style.zIndex]=\"selected ? 100 : 0\"\n>\n  <div id=\"detailsWrapper {{ index }}\" class=\"aui-comment__header\">\n    <span *ngIf=\"author && !editor\" class=\"aui-comment__author\">\n      {{ author.forename }} {{ author.surname }}\n    </span>\n    <span *ngIf=\"editor\" class=\"aui-comment__author\">\n      {{ editor.forename }} {{ editor.surname }}\n    </span>\n    <time [hidden]=\"!selected && !this.editable\" class=\"aui-comment__meta\">\n      {{ lastUpdate | momentDate : \"d MMMM y h:mm a\" }}\n    </time>\n  </div>\n  <mv-tags\n    [tagItems]=\"tagItems\"\n    [userId]=\"createdBy\"\n    [editable]=\"editable\"\n    [annoId]=\"_comment.annotationId\"\n  >\n  </mv-tags>\n  <textarea\n    *ngIf=\"selected && editable\"\n    #editableComment\n    mvTextAreaAutoExpand\n    type=\"text\"\n    required\n    name=\"content\"\n    [maxlength]=\"CHAR_LIMIT\"\n    class=\"aui-comment__content form-control mimic-focus edit-mode expanded\"\n    [(ngModel)]=\"fullComment\"\n    (ngModelChange)=\"reRenderComments(); onCommentChange($event)\"\n    aria-label=\"comment\"\n  >\n  </textarea>\n  <p\n    *ngIf=\"!editable\"\n    mvTextHighlight\n    class=\"commentText\"\n    [textToHighlight]=\"searchString\"\n  >\n    {{ fullComment }}\n  </p>\n  <div\n    *ngIf=\"\n      selected ||\n      this.editable ||\n      (!fullComment.length && tagItems && !tagItems.length)\n    \"\n    class=\"aui-comment__footer commentBtns\"\n  >\n    <button\n      class=\"govuk-button\"\n      type=\"button\"\n      role=\"button\"\n      (click)=\"editOrSave()\"\n    >\n      {{ !editable ? (\"Edit\" | rpxTranslate) : (\"Save\" | rpxTranslate) }}\n    </button>\n    <button\n      type=\"button\"\n      role=\"button\"\n      class=\"govuk-button govuk-button--secondary\"\n      (click)=\"deleteOrCancel()\"\n    >\n      {{ !editable ? (\"Delete\" | rpxTranslate) : (\"Cancel\" | rpxTranslate) }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">{{ \"private\" | rpxTranslate }}</span>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: ["textToHighlight"] }, { kind: "directive", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]" }, { kind: "component", type: TagsComponent, selector: "mv-tags", inputs: ["tagItems", "userId", "editable", "annoId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: MomentDatePipe, name: "momentDate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-anno-comment', template: "<div\n  #form\n  (click)=\"onCommentClick()\"\n  class=\"aui-comment\"\n  [ngClass]=\"{ stylestoggle: (marginToComment$ | async) }\"\n  [style.top.px]=\"commentTop\"\n  [style.zIndex]=\"selected ? 100 : 0\"\n>\n  <div id=\"detailsWrapper {{ index }}\" class=\"aui-comment__header\">\n    <span *ngIf=\"author && !editor\" class=\"aui-comment__author\">\n      {{ author.forename }} {{ author.surname }}\n    </span>\n    <span *ngIf=\"editor\" class=\"aui-comment__author\">\n      {{ editor.forename }} {{ editor.surname }}\n    </span>\n    <time [hidden]=\"!selected && !this.editable\" class=\"aui-comment__meta\">\n      {{ lastUpdate | momentDate : \"d MMMM y h:mm a\" }}\n    </time>\n  </div>\n  <mv-tags\n    [tagItems]=\"tagItems\"\n    [userId]=\"createdBy\"\n    [editable]=\"editable\"\n    [annoId]=\"_comment.annotationId\"\n  >\n  </mv-tags>\n  <textarea\n    *ngIf=\"selected && editable\"\n    #editableComment\n    mvTextAreaAutoExpand\n    type=\"text\"\n    required\n    name=\"content\"\n    [maxlength]=\"CHAR_LIMIT\"\n    class=\"aui-comment__content form-control mimic-focus edit-mode expanded\"\n    [(ngModel)]=\"fullComment\"\n    (ngModelChange)=\"reRenderComments(); onCommentChange($event)\"\n    aria-label=\"comment\"\n  >\n  </textarea>\n  <p\n    *ngIf=\"!editable\"\n    mvTextHighlight\n    class=\"commentText\"\n    [textToHighlight]=\"searchString\"\n  >\n    {{ fullComment }}\n  </p>\n  <div\n    *ngIf=\"\n      selected ||\n      this.editable ||\n      (!fullComment.length && tagItems && !tagItems.length)\n    \"\n    class=\"aui-comment__footer commentBtns\"\n  >\n    <button\n      class=\"govuk-button\"\n      type=\"button\"\n      role=\"button\"\n      (click)=\"editOrSave()\"\n    >\n      {{ !editable ? (\"Edit\" | rpxTranslate) : (\"Save\" | rpxTranslate) }}\n    </button>\n    <button\n      type=\"button\"\n      role=\"button\"\n      class=\"govuk-button govuk-button--secondary\"\n      (click)=\"deleteOrCancel()\"\n    >\n      {{ !editable ? (\"Delete\" | rpxTranslate) : (\"Cancel\" | rpxTranslate) }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">{{ \"private\" | rpxTranslate }}</span>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CommentService }, { type: TagsServices }]; }, propDecorators: { commentClick: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: CommentService }, { type: TagsServices }], propDecorators: { commentClick: [{
                 type: Output
             }], renderComments: [{
                 type: Output
@@ -3383,13 +3388,13 @@ class CommentSetComponent {
     allCommentsSaved() {
         this.commentService.allCommentsSaved();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentSetComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: CommentSetRenderService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommentSetComponent, selector: "mv-comment-set", inputs: { annotationSet: "annotationSet", zoom: "zoom", rotate: "rotate", height: "height", pageHeights: "pageHeights", contentScrollTop: "contentScrollTop" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "commentComponents", predicate: ["commentComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container [ngClass]=\"{'comments': showCommentsPanel}\">\n  <div #panel [ngClass]=\"{ 'comments-panel comment-container': true, 'expanded': showCommentsPanel }\"\n     [style.height.px]=\"height\"\n     (click)=\"onContainerClick($event)\">\n    <ng-container *ngFor=\"let comment of (comments$ | async); let i = index;\">\n      <mv-anno-comment\n        [ngStyle]=\"showCommentsPanel ? {} : {'display':'none'}\"\n        #commentComponent\n        (commentClick)=\"onSelect($event)\"\n        (delete)=\"onCommentDelete($event)\"\n        (updated)=\"onCommentUpdate($event)\"\n        (changes)=\"allCommentsSaved()\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        [index]=\"i\"\n        [page]=\"comment.page\"\n        [comment]=\"comment\"\n        [annotation]=\"(annoEntities$ | async)[comment.annotationId]\"\n        (renderComments)=\"redrawComments()\">\n      </mv-anno-comment>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CommentComponent, selector: "mv-anno-comment", inputs: ["rotate", "zoom", "index", "page", "comment", "annotation"], outputs: ["commentClick", "renderComments", "delete", "updated", "changes"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentSetComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: CommentSetRenderService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: CommentSetComponent, selector: "mv-comment-set", inputs: { annotationSet: "annotationSet", zoom: "zoom", rotate: "rotate", height: "height", pageHeights: "pageHeights", contentScrollTop: "contentScrollTop" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "commentComponents", predicate: ["commentComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #container [ngClass]=\"{'comments': showCommentsPanel}\">\n  <div #panel [ngClass]=\"{ 'comments-panel comment-container': true, 'expanded': showCommentsPanel }\"\n     [style.height.px]=\"height\"\n     (click)=\"onContainerClick($event)\">\n    <ng-container *ngFor=\"let comment of (comments$ | async); let i = index;\">\n      <mv-anno-comment\n        [ngStyle]=\"showCommentsPanel ? {} : {'display':'none'}\"\n        #commentComponent\n        (commentClick)=\"onSelect($event)\"\n        (delete)=\"onCommentDelete($event)\"\n        (updated)=\"onCommentUpdate($event)\"\n        (changes)=\"allCommentsSaved()\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        [index]=\"i\"\n        [page]=\"comment.page\"\n        [comment]=\"comment\"\n        [annotation]=\"(annoEntities$ | async)[comment.annotationId]\"\n        (renderComments)=\"redrawComments()\">\n      </mv-anno-comment>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CommentComponent, selector: "mv-anno-comment", inputs: ["rotate", "zoom", "index", "page", "comment", "annotation"], outputs: ["commentClick", "renderComments", "delete", "updated", "changes"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentSetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-comment-set', template: "<div #container [ngClass]=\"{'comments': showCommentsPanel}\">\n  <div #panel [ngClass]=\"{ 'comments-panel comment-container': true, 'expanded': showCommentsPanel }\"\n     [style.height.px]=\"height\"\n     (click)=\"onContainerClick($event)\">\n    <ng-container *ngFor=\"let comment of (comments$ | async); let i = index;\">\n      <mv-anno-comment\n        [ngStyle]=\"showCommentsPanel ? {} : {'display':'none'}\"\n        #commentComponent\n        (commentClick)=\"onSelect($event)\"\n        (delete)=\"onCommentDelete($event)\"\n        (updated)=\"onCommentUpdate($event)\"\n        (changes)=\"allCommentsSaved()\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        [index]=\"i\"\n        [page]=\"comment.page\"\n        [comment]=\"comment\"\n        [annotation]=\"(annoEntities$ | async)[comment.annotationId]\"\n        (renderComments)=\"redrawComments()\">\n      </mv-anno-comment>\n    </ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CommentService }, { type: CommentSetRenderService }, { type: ToolbarEventService }]; }, propDecorators: { annotationSet: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: CommentService }, { type: CommentSetRenderService }, { type: ToolbarEventService }], propDecorators: { annotationSet: [{
                 type: Input
             }], zoom: [{
                 type: Input
@@ -3485,13 +3490,13 @@ class CommentsNavigateComponent {
         [...rectangles].sort((rect1, rect2) => rect1.y - rect2.y);
         return { x: rectangles[0].x, y: rectangles[0].y };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentsNavigateComponent, deps: [{ token: i1.Store }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: { annotationList: "annotationList", autoSelect: "autoSelect" }, usesOnChanges: true, ngImport: i0, template: "<p class=\"comment-search\">\n  <span class=\"comment-search__item\">\n    Showing {{ index + 1 }} of {{ navigationList.length }}\n  </span>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Previous comment\"\n     (click)=\"prevItem()\">Prev</a>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Next comment'\"\n     (click)=\"nextItem()\">Next</a>\n</p>\n", dependencies: [{ kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentsNavigateComponent, deps: [{ token: i1.Store }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: { annotationList: "annotationList", autoSelect: "autoSelect" }, usesOnChanges: true, ngImport: i0, template: "<p class=\"comment-search\">\n  <span class=\"comment-search__item\">\n    Showing {{ index + 1 }} of {{ navigationList.length }}\n  </span>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Previous comment\"\n     (click)=\"prevItem()\">Prev</a>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Next comment'\"\n     (click)=\"nextItem()\">Next</a>\n</p>\n", dependencies: [{ kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentsNavigateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentsNavigateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-comments-navigate', encapsulation: ViewEncapsulation.None, template: "<p class=\"comment-search\">\n  <span class=\"comment-search__item\">\n    Showing {{ index + 1 }} of {{ navigationList.length }}\n  </span>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Previous comment\"\n     (click)=\"prevItem()\">Prev</a>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Next comment'\"\n     (click)=\"nextItem()\">Next</a>\n</p>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: ToolbarEventService }]; }, propDecorators: { annotationList: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: ToolbarEventService }], propDecorators: { annotationList: [{
                 type: Input
             }], autoSelect: [{
                 type: Input
@@ -3530,13 +3535,13 @@ class CommentSearchComponent {
         this.searchIndex = 0;
         this.store.dispatch(new SearchComment(''));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentSearchComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommentSearchComponent, selector: "mv-comment-search", inputs: { annotations: "annotations" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<input\n  #searchInput\n  type=\"text\"\n  class=\"govuk-input comment-search__item\"\n  id=\"search-comments-input\"\n  name=\"searchString\"\n  aria-label=\"search comments input\"\n  [ngModel]=\"searchString\"\n/>\n<button\n  type=\"button\"\n  [class.govuk-button--disabled]=\"searchInput?.value.length <= 2\"\n  class=\"govuk-button comment-search__item\"\n  (click)=\"searchComments(searchInput.value.trim())\"\n>\n  {{ \"Search\" | rpxTranslate }}\n</button>\n<ng-container *ngIf=\"searchResults.length > 0\">\n  <mv-comments-navigate [annotationList]=\"searchResults\"></mv-comments-navigate>\n</ng-container>\n<ng-container *ngIf=\"searchString && searchResults?.length === 0\">\n  <p class=\"comment-search__item\">\n    {{ \"No matches have been found\" | rpxTranslate }}\n  </p>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: ["annotationList", "autoSelect"] }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentSearchComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: CommentSearchComponent, selector: "mv-comment-search", inputs: { annotations: "annotations" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<input\n  #searchInput\n  type=\"text\"\n  class=\"govuk-input comment-search__item\"\n  id=\"search-comments-input\"\n  name=\"searchString\"\n  aria-label=\"search comments input\"\n  [ngModel]=\"searchString\"\n/>\n<button\n  type=\"button\"\n  [class.govuk-button--disabled]=\"searchInput?.value.length <= 2\"\n  class=\"govuk-button comment-search__item\"\n  (click)=\"searchComments(searchInput.value.trim())\"\n>\n  {{ \"Search\" | rpxTranslate }}\n</button>\n<ng-container *ngIf=\"searchResults.length > 0\">\n  <mv-comments-navigate [annotationList]=\"searchResults\"></mv-comments-navigate>\n</ng-container>\n<ng-container *ngIf=\"searchString && searchResults?.length === 0\">\n  <p class=\"comment-search__item\">\n    {{ \"No matches have been found\" | rpxTranslate }}\n  </p>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: ["annotationList", "autoSelect"] }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-comment-search', encapsulation: ViewEncapsulation.None, template: "<input\n  #searchInput\n  type=\"text\"\n  class=\"govuk-input comment-search__item\"\n  id=\"search-comments-input\"\n  name=\"searchString\"\n  aria-label=\"search comments input\"\n  [ngModel]=\"searchString\"\n/>\n<button\n  type=\"button\"\n  [class.govuk-button--disabled]=\"searchInput?.value.length <= 2\"\n  class=\"govuk-button comment-search__item\"\n  (click)=\"searchComments(searchInput.value.trim())\"\n>\n  {{ \"Search\" | rpxTranslate }}\n</button>\n<ng-container *ngIf=\"searchResults.length > 0\">\n  <mv-comments-navigate [annotationList]=\"searchResults\"></mv-comments-navigate>\n</ng-container>\n<ng-container *ngIf=\"searchString && searchResults?.length === 0\">\n  <p class=\"comment-search__item\">\n    {{ \"No matches have been found\" | rpxTranslate }}\n  </p>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { annotations: [{
+        }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { annotations: [{
                 type: Input
             }], searchInput: [{
                 type: ViewChild,
@@ -3563,10 +3568,10 @@ class FilterPipe {
             return false;
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: FilterPipe, name: "filter" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: FilterPipe, name: "filter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: FilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filter'
@@ -3577,10 +3582,10 @@ class UnsnakePipe {
     transform(items) {
         return items.split('_').join(' ');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UnsnakePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: UnsnakePipe, name: "unsnake" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UnsnakePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    /** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: UnsnakePipe, name: "unsnake" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UnsnakePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UnsnakePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'unsnake'
@@ -3627,13 +3632,13 @@ class CommentFilterComponent {
     onToggleFilterView() {
         this.isPreview = !this.isPreview;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentFilterComponent, deps: [{ token: i1.Store }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommentFilterComponent, selector: "mv-comment-filter", ngImport: i0, template: "<div class=\"comment-filter\">\n  <div class=\"hmcts-filter__content\">\n    <div class=\"hmcts-filter__toggle-filters\">\n      <p\n        class=\"hmcts-filter__toggle-filters-link\"\n        [ngClass]=\"{ 'govuk-accordion__section--expanded': isPreview }\"\n        (click)=\"onToggleFilterView()\"\n      >\n        <strong>{{ \"Filter options\" | rpxTranslate }}</strong\n        ><span class=\"govuk-accordion__icon\"></span>\n      </p>\n    </div>\n\n    <ng-container *ngIf=\"filter$ | async as filters\">\n      <div class=\"hmcts-filter__selected-heading\" *ngIf=\"filters.length\">\n        <div class=\"hmcts-filter__heading-action\">\n          <p>\n            <a\n              (click)=\"onClearFilters()\"\n              class=\"govuk-link govuk-link--no-visited-state\"\n              [routerLink]=\"[]\"\n              >{{ \"Clear filters\" | rpxTranslate }}</a\n            >\n          </p>\n        </div>\n      </div>\n\n      <h4\n        class=\"govuk-heading-s govuk-!-margin-bottom-0\"\n        *ngIf=\"filters.length\"\n      >\n        {{ \"Tag filters\" | rpxTranslate }}\n      </h4>\n\n      <ul class=\"hmcts-filter-tags\" *ngIf=\"filters.length\">\n        <li *ngFor=\"let tagName of filters\">\n          <a\n            class=\"hmcts-filter__tag\"\n            [routerLink]=\"[]\"\n            (click)=\"onRemoveFilter(tagName)\"\n          >\n            <span class=\"govuk-visually-hidden\">{{\n              \"Remove this filter\" | rpxTranslate\n            }}</span\n            >{{ tagName | unsnake }}</a\n          >\n        </li>\n      </ul>\n    </ng-container>\n\n    <div class=\"hmcts-filter__options\" [ngClass]=\"{ isVisible: isPreview }\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-label--s\" for=\"keywords\">\n          {{ \"Search Tags\" | rpxTranslate }}\n        </label>\n        <input\n          class=\"govuk-input\"\n          id=\"keywords\"\n          name=\"keywords\"\n          type=\"text\"\n          [(ngModel)]=\"searchValue\"\n        />\n      </div>\n\n      <div class=\"govuk-form-group\">\n        <div [formGroup]=\"tagGroup\">\n          <fieldset class=\"govuk-fieldset\" formGroupName=\"tagFilters\">\n            <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n              Tags\n            </legend>\n            <div class=\"govuk-checkboxes--scroll\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                <div\n                  class=\"govuk-checkboxes__item\"\n                  *ngFor=\"\n                    let item of allTags$ | async | filter : searchValue : 'key'\n                  \"\n                >\n                  <input\n                    [formControlName]=\"item.key\"\n                    [id]=\"item.key\"\n                    class=\"govuk-checkboxes__input\"\n                    [value]=\"false\"\n                    [attr.aria-describedby]=\"item.key\"\n                    type=\"checkbox\"\n                  />\n                  <label\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [for]=\"item.key\"\n                  >\n                    {{ item.key | unsnake }} ({{ item.length }})\n                  </label>\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: UnsnakePipe, name: "unsnake" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentFilterComponent, deps: [{ token: i1.Store }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: CommentFilterComponent, selector: "mv-comment-filter", ngImport: i0, template: "<div class=\"comment-filter\">\n  <div class=\"hmcts-filter__content\">\n    <div class=\"hmcts-filter__toggle-filters\">\n      <p\n        class=\"hmcts-filter__toggle-filters-link\"\n        [ngClass]=\"{ 'govuk-accordion__section--expanded': isPreview }\"\n        (click)=\"onToggleFilterView()\"\n      >\n        <strong>{{ \"Filter options\" | rpxTranslate }}</strong\n        ><span class=\"govuk-accordion__icon\"></span>\n      </p>\n    </div>\n\n    <ng-container *ngIf=\"filter$ | async as filters\">\n      <div class=\"hmcts-filter__selected-heading\" *ngIf=\"filters.length\">\n        <div class=\"hmcts-filter__heading-action\">\n          <p>\n            <a\n              (click)=\"onClearFilters()\"\n              class=\"govuk-link govuk-link--no-visited-state\"\n              [routerLink]=\"[]\"\n              >{{ \"Clear filters\" | rpxTranslate }}</a\n            >\n          </p>\n        </div>\n      </div>\n\n      <h4\n        class=\"govuk-heading-s govuk-!-margin-bottom-0\"\n        *ngIf=\"filters.length\"\n      >\n        {{ \"Tag filters\" | rpxTranslate }}\n      </h4>\n\n      <ul class=\"hmcts-filter-tags\" *ngIf=\"filters.length\">\n        <li *ngFor=\"let tagName of filters\">\n          <a\n            class=\"hmcts-filter__tag\"\n            [routerLink]=\"[]\"\n            (click)=\"onRemoveFilter(tagName)\"\n          >\n            <span class=\"govuk-visually-hidden\">{{\n              \"Remove this filter\" | rpxTranslate\n            }}</span\n            >{{ tagName | unsnake }}</a\n          >\n        </li>\n      </ul>\n    </ng-container>\n\n    <div class=\"hmcts-filter__options\" [ngClass]=\"{ isVisible: isPreview }\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-label--s\" for=\"keywords\">\n          {{ \"Search Tags\" | rpxTranslate }}\n        </label>\n        <input\n          class=\"govuk-input\"\n          id=\"keywords\"\n          name=\"keywords\"\n          type=\"text\"\n          [(ngModel)]=\"searchValue\"\n        />\n      </div>\n\n      <div class=\"govuk-form-group\">\n        <div [formGroup]=\"tagGroup\">\n          <fieldset class=\"govuk-fieldset\" formGroupName=\"tagFilters\">\n            <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n              Tags\n            </legend>\n            <div class=\"govuk-checkboxes--scroll\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                <div\n                  class=\"govuk-checkboxes__item\"\n                  *ngFor=\"\n                    let item of allTags$ | async | filter : searchValue : 'key'\n                  \"\n                >\n                  <input\n                    [formControlName]=\"item.key\"\n                    [id]=\"item.key\"\n                    class=\"govuk-checkboxes__input\"\n                    [value]=\"false\"\n                    [attr.aria-describedby]=\"item.key\"\n                    type=\"checkbox\"\n                  />\n                  <label\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [for]=\"item.key\"\n                  >\n                    {{ item.key | unsnake }} ({{ item.length }})\n                  </label>\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: UnsnakePipe, name: "unsnake" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-comment-filter', encapsulation: ViewEncapsulation.None, template: "<div class=\"comment-filter\">\n  <div class=\"hmcts-filter__content\">\n    <div class=\"hmcts-filter__toggle-filters\">\n      <p\n        class=\"hmcts-filter__toggle-filters-link\"\n        [ngClass]=\"{ 'govuk-accordion__section--expanded': isPreview }\"\n        (click)=\"onToggleFilterView()\"\n      >\n        <strong>{{ \"Filter options\" | rpxTranslate }}</strong\n        ><span class=\"govuk-accordion__icon\"></span>\n      </p>\n    </div>\n\n    <ng-container *ngIf=\"filter$ | async as filters\">\n      <div class=\"hmcts-filter__selected-heading\" *ngIf=\"filters.length\">\n        <div class=\"hmcts-filter__heading-action\">\n          <p>\n            <a\n              (click)=\"onClearFilters()\"\n              class=\"govuk-link govuk-link--no-visited-state\"\n              [routerLink]=\"[]\"\n              >{{ \"Clear filters\" | rpxTranslate }}</a\n            >\n          </p>\n        </div>\n      </div>\n\n      <h4\n        class=\"govuk-heading-s govuk-!-margin-bottom-0\"\n        *ngIf=\"filters.length\"\n      >\n        {{ \"Tag filters\" | rpxTranslate }}\n      </h4>\n\n      <ul class=\"hmcts-filter-tags\" *ngIf=\"filters.length\">\n        <li *ngFor=\"let tagName of filters\">\n          <a\n            class=\"hmcts-filter__tag\"\n            [routerLink]=\"[]\"\n            (click)=\"onRemoveFilter(tagName)\"\n          >\n            <span class=\"govuk-visually-hidden\">{{\n              \"Remove this filter\" | rpxTranslate\n            }}</span\n            >{{ tagName | unsnake }}</a\n          >\n        </li>\n      </ul>\n    </ng-container>\n\n    <div class=\"hmcts-filter__options\" [ngClass]=\"{ isVisible: isPreview }\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-label--s\" for=\"keywords\">\n          {{ \"Search Tags\" | rpxTranslate }}\n        </label>\n        <input\n          class=\"govuk-input\"\n          id=\"keywords\"\n          name=\"keywords\"\n          type=\"text\"\n          [(ngModel)]=\"searchValue\"\n        />\n      </div>\n\n      <div class=\"govuk-form-group\">\n        <div [formGroup]=\"tagGroup\">\n          <fieldset class=\"govuk-fieldset\" formGroupName=\"tagFilters\">\n            <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n              Tags\n            </legend>\n            <div class=\"govuk-checkboxes--scroll\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                <div\n                  class=\"govuk-checkboxes__item\"\n                  *ngFor=\"\n                    let item of allTags$ | async | filter : searchValue : 'key'\n                  \"\n                >\n                  <input\n                    [formControlName]=\"item.key\"\n                    [id]=\"item.key\"\n                    class=\"govuk-checkboxes__input\"\n                    [value]=\"false\"\n                    [attr.aria-describedby]=\"item.key\"\n                    type=\"checkbox\"\n                  />\n                  <label\n                    class=\"govuk-label govuk-checkboxes__label\"\n                    [for]=\"item.key\"\n                  >\n                    {{ item.key | unsnake }} ({{ item.length }})\n                  </label>\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.UntypedFormBuilder }]; } });
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i2.UntypedFormBuilder }] });
 
 class CommentSetHeaderComponent {
     constructor(store, commentService, toolbarEvents) {
@@ -3677,13 +3682,13 @@ class CommentSetHeaderComponent {
     ngOnDestroy() {
         this.$subscriptions.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentSetHeaderComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: { showCommentSummary: "showCommentSummary" }, outputs: { showCommentSummaryDialog: "showCommentSummaryDialog" }, ngImport: i0, template: "<div class=\"govuk-tabs commentSummaryHeader\" [ngClass]=\"{'icp-mode': toolbarEvents.icp.enabled | async}\" data-module=\"govuk-tabs\">\n  <ul class=\"govuk-tabs__list\">\n    <li *ngFor=\"let tab of tabs; let i = index\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a id=\"commentSubPane{{ i }}\" (click)=\"selectTab(tab.label)\" [routerLink]=\"[]\" [ngClass]=\"{'govuk-tabs__list-item--filtered': tab.isFiltered}\"\n         class=\"govuk-tabs__tab\">\n        {{ tab.label | titlecase }}\n      </a>\n    </li>\n    <li>\n      <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button commentSummaryHeader-button--close\"\n        title=\"Close Comments\" (click)=\"toggleCommentsPanel()\">\n      </button>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" [hidden]=\"!tabSelected\">\n    <ng-container *ngIf=\"tabSelected === 'comments'\">\n      <div style=\"width: 100%\">\n        <div class=\"hmcts-banner\" *ngIf=\"navigationList?.length === 0\">\n          <svg alt=\"\" class=\"hmcts-banner__icon\" fill=\"currentColor\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\nC13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\" /></svg>\n          <div class=\"hmcts-banner__message\">\n            <span class=\"hmcts-banner__assistive\">information</span>\n            Select text to add a comment or highlight.\n          </div>\n        </div>\n        <button type=\"button\" class=\"govuk-button\"\n                id=\"commentSummary\" tabindex=\"0\"\n                data-l10n-id=\"commentSummary\"\n                title=\"Open collate summary\"\n                (click)=\"toggleCommentsSummary()\">Collate comments</button>\n      </div>\n      <ng-container *ngIf=\"navigationList?.length > 0\">\n        <mv-comments-navigate\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </ng-container>\n      <p class=\"aui-comment__private-text\">\n        <span class=\"aui-comment__private\">private</span>\n        All comments can only be seen by you\n      </p>\n    </ng-container>\n    <div [hidden]=\"tabSelected !== 'filter'\">\n      <div class=\"govuk-tabs__panel--container\">\n        <mv-comment-filter></mv-comment-filter>\n        <mv-comments-navigate\n          *ngIf=\"navigationList?.length > 0\"\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </div>\n    </div>\n\n    <div [hidden]=\"tabSelected !== 'search'\">\n      <mv-comment-search [annotations]=\"navigationList\"></mv-comment-search>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CommentSearchComponent, selector: "mv-comment-search", inputs: ["annotations"] }, { kind: "component", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: ["annotationList", "autoSelect"] }, { kind: "component", type: CommentFilterComponent, selector: "mv-comment-filter" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentSetHeaderComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: { showCommentSummary: "showCommentSummary" }, outputs: { showCommentSummaryDialog: "showCommentSummaryDialog" }, ngImport: i0, template: "<div class=\"govuk-tabs commentSummaryHeader\" [ngClass]=\"{'icp-mode': toolbarEvents.icp.enabled | async}\" data-module=\"govuk-tabs\">\n  <ul class=\"govuk-tabs__list\">\n    <li *ngFor=\"let tab of tabs; let i = index\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a id=\"commentSubPane{{ i }}\" (click)=\"selectTab(tab.label)\" [routerLink]=\"[]\" [ngClass]=\"{'govuk-tabs__list-item--filtered': tab.isFiltered}\"\n         class=\"govuk-tabs__tab\">\n        {{ tab.label | titlecase }}\n      </a>\n    </li>\n    <li>\n      <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button commentSummaryHeader-button--close\"\n        title=\"Close Comments\" (click)=\"toggleCommentsPanel()\">\n      </button>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" [hidden]=\"!tabSelected\">\n    <ng-container *ngIf=\"tabSelected === 'comments'\">\n      <div style=\"width: 100%\">\n        <div class=\"hmcts-banner\" *ngIf=\"navigationList?.length === 0\">\n          <svg alt=\"\" class=\"hmcts-banner__icon\" fill=\"currentColor\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\nC13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\" /></svg>\n          <div class=\"hmcts-banner__message\">\n            <span class=\"hmcts-banner__assistive\">information</span>\n            Select text to add a comment or highlight.\n          </div>\n        </div>\n        <button type=\"button\" class=\"govuk-button\"\n                id=\"commentSummary\" tabindex=\"0\"\n                data-l10n-id=\"commentSummary\"\n                title=\"Open collate summary\"\n                (click)=\"toggleCommentsSummary()\">Collate comments</button>\n      </div>\n      <ng-container *ngIf=\"navigationList?.length > 0\">\n        <mv-comments-navigate\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </ng-container>\n      <p class=\"aui-comment__private-text\">\n        <span class=\"aui-comment__private\">private</span>\n        All comments can only be seen by you\n      </p>\n    </ng-container>\n    <div [hidden]=\"tabSelected !== 'filter'\">\n      <div class=\"govuk-tabs__panel--container\">\n        <mv-comment-filter></mv-comment-filter>\n        <mv-comments-navigate\n          *ngIf=\"navigationList?.length > 0\"\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </div>\n    </div>\n\n    <div [hidden]=\"tabSelected !== 'search'\">\n      <mv-comment-search [annotations]=\"navigationList\"></mv-comment-search>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CommentSearchComponent, selector: "mv-comment-search", inputs: ["annotations"] }, { kind: "component", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: ["annotationList", "autoSelect"] }, { kind: "component", type: CommentFilterComponent, selector: "mv-comment-filter" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentSetHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentSetHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-comment-set-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"govuk-tabs commentSummaryHeader\" [ngClass]=\"{'icp-mode': toolbarEvents.icp.enabled | async}\" data-module=\"govuk-tabs\">\n  <ul class=\"govuk-tabs__list\">\n    <li *ngFor=\"let tab of tabs; let i = index\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a id=\"commentSubPane{{ i }}\" (click)=\"selectTab(tab.label)\" [routerLink]=\"[]\" [ngClass]=\"{'govuk-tabs__list-item--filtered': tab.isFiltered}\"\n         class=\"govuk-tabs__tab\">\n        {{ tab.label | titlecase }}\n      </a>\n    </li>\n    <li>\n      <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button commentSummaryHeader-button--close\"\n        title=\"Close Comments\" (click)=\"toggleCommentsPanel()\">\n      </button>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" [hidden]=\"!tabSelected\">\n    <ng-container *ngIf=\"tabSelected === 'comments'\">\n      <div style=\"width: 100%\">\n        <div class=\"hmcts-banner\" *ngIf=\"navigationList?.length === 0\">\n          <svg alt=\"\" class=\"hmcts-banner__icon\" fill=\"currentColor\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\nC13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\" /></svg>\n          <div class=\"hmcts-banner__message\">\n            <span class=\"hmcts-banner__assistive\">information</span>\n            Select text to add a comment or highlight.\n          </div>\n        </div>\n        <button type=\"button\" class=\"govuk-button\"\n                id=\"commentSummary\" tabindex=\"0\"\n                data-l10n-id=\"commentSummary\"\n                title=\"Open collate summary\"\n                (click)=\"toggleCommentsSummary()\">Collate comments</button>\n      </div>\n      <ng-container *ngIf=\"navigationList?.length > 0\">\n        <mv-comments-navigate\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </ng-container>\n      <p class=\"aui-comment__private-text\">\n        <span class=\"aui-comment__private\">private</span>\n        All comments can only be seen by you\n      </p>\n    </ng-container>\n    <div [hidden]=\"tabSelected !== 'filter'\">\n      <div class=\"govuk-tabs__panel--container\">\n        <mv-comment-filter></mv-comment-filter>\n        <mv-comments-navigate\n          *ngIf=\"navigationList?.length > 0\"\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </div>\n    </div>\n\n    <div [hidden]=\"tabSelected !== 'search'\">\n      <mv-comment-search [annotations]=\"navigationList\"></mv-comment-search>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CommentService }, { type: ToolbarEventService }]; }, propDecorators: { showCommentSummary: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: CommentService }, { type: ToolbarEventService }], propDecorators: { showCommentSummary: [{
                 type: Input
             }], showCommentSummaryDialog: [{
                 type: Output
@@ -3731,15 +3736,15 @@ class NumberHelperService {
             && value !== ''
             && !isNaN(Number(value.toString())));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberHelperService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: NumberHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: NumberHelperService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: NumberHelperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 class SearchBarComponent {
     constructor(toolbarButtons, toolbarEvents) {
@@ -3825,13 +3830,13 @@ class SearchBarComponent {
     toggleSearchBar() {
         this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, deps: [{ token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SearchBarComponent, selector: "mv-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }, { propertyName: "findNext", first: true, predicate: ["findNext"], descendants: true }], ngImport: i0, template: "<div\n  class=\"searchbar govuk-!-padding-3\"\n  [hidden]=\"toolbarEvents.searchBarHidden | async\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <input\n        class=\"govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-5 govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Find in document\"\n        #findInput\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n        title=\"Find in document\"\n        placeholder=\"Find in document\u2026\"\n        tabindex=\"0\"\n        data-l10n-id=\"find_input\"\n      />\n      <button\n        class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\"\n        data-module=\"govuk-button\"\n        (click)=\"search()\"\n        style=\"position: absolute; top: 40px; right: 10px\"\n      >\n        Search\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span\n        id=\"findResultsCount\"\n        class=\"govuk-!-display-inline-block govuk-!-margin-right-4\"\n        role=\"status\"\n        >{{ resultsText }}</span\n      >\n      <a\n        *ngIf=\"resultCount > 0\"\n        id=\"findPrevious\"\n        [routerLink]=\"[]\"\n        role=\"button\"\n        class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\"\n        title=\"Find the previous occurrence of the phrase\"\n        data-l10n-id=\"find_previous\"\n        >{{ \"Prev\" | rpxTranslate }}</a\n      >\n      <a\n        *ngIf=\"resultCount > 0\"\n        id=\"findNext\"\n        #findNext\n        [routerLink]=\"[]\"\n        role=\"button\"\n        class=\"govuk-link govuk-link--no-visited-state\"\n        (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\"\n        data-l10n-id=\"find_next\"\n        >{{ \"Next\" | rpxTranslate }}</a\n      >\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a\n        [routerLink]=\"[]\"\n        class=\"govuk-link govuk-link--no-visited-state\"\n        role=\"button\"\n        (click)=\"toggleAdvancedSearch()\"\n        title=\"Advanced\"\n        [attr.aria-expanded]=\"advancedSearchVisible\"\n        aria-controls=\"advancedSearchVisible\"\n        data-l10n-id=\"find_advanced\"\n        style=\"position: absolute; top: 95px; right: 15px\"\n        >{{ \"Advanced\" | rpxTranslate }}</a\n      >\n    </div>\n  </div>\n\n  <div\n    id=\"advancedSearchVisible\"\n    class=\"govuk-grid-row\"\n    *ngIf=\"advancedSearchVisible\"\n  >\n    <div class=\"govuk-grid-column-full\">\n      <div\n        class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\"\n      >\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findHighlightAll\"\n                name=\"findHighlightAll\"\n                type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\"\n                [checked]=\"highlightAll\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findHighlightAll\"\n                data-l10n-id=\"find_highlight\"\n              >\n                {{ \"Highlight all\" | rpxTranslate }}\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findMatchCase\"\n                name=\"findMatchCase\"\n                type=\"checkbox\"\n                (change)=\"matchCase = !matchCase; search()\"\n                [checked]=\"matchCase\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findMatchCase\"\n                data-l10n-id=\"find_match_case_label\"\n              >\n                {{ \"Match text (exact case)\" | rpxTranslate }}\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findEntireWord\"\n                name=\"findMatchCase\"\n                type=\"checkbox\"\n                (change)=\"wholeWord = !wholeWord; search()\"\n                [checked]=\"wholeWord\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findEntireWord\"\n                data-l10n-id=\"find_entire_word_label\"\n              >\n                {{ \"Match whole words or sentences\" | rpxTranslate }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <div>\n    <button\n      id=\"mvCloseBtn\"\n      #mvCloseBtn\n      class=\"mv-button searchbar-button--close\"\n      title=\"Close Search\"\n      data-l10n-id=\"mvRedactBtn\"\n      (click)=\"toggleSearchBar()\"\n    ></button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SearchBarComponent, deps: [{ token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SearchBarComponent, selector: "mv-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }, { propertyName: "findNext", first: true, predicate: ["findNext"], descendants: true }], ngImport: i0, template: "<div\n  class=\"searchbar govuk-!-padding-3\"\n  [hidden]=\"toolbarEvents.searchBarHidden | async\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <input\n        class=\"govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-5 govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Find in document\"\n        #findInput\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n        title=\"Find in document\"\n        placeholder=\"Find in document\u2026\"\n        tabindex=\"0\"\n        data-l10n-id=\"find_input\"\n      />\n      <button\n        class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\"\n        data-module=\"govuk-button\"\n        (click)=\"search()\"\n        style=\"position: absolute; top: 40px; right: 10px\"\n      >\n        Search\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span\n        id=\"findResultsCount\"\n        class=\"govuk-!-display-inline-block govuk-!-margin-right-4\"\n        role=\"status\"\n        >{{ resultsText }}</span\n      >\n      <a\n        *ngIf=\"resultCount > 0\"\n        id=\"findPrevious\"\n        [routerLink]=\"[]\"\n        role=\"button\"\n        class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\"\n        title=\"Find the previous occurrence of the phrase\"\n        data-l10n-id=\"find_previous\"\n        >{{ \"Prev\" | rpxTranslate }}</a\n      >\n      <a\n        *ngIf=\"resultCount > 0\"\n        id=\"findNext\"\n        #findNext\n        [routerLink]=\"[]\"\n        role=\"button\"\n        class=\"govuk-link govuk-link--no-visited-state\"\n        (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\"\n        data-l10n-id=\"find_next\"\n        >{{ \"Next\" | rpxTranslate }}</a\n      >\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a\n        [routerLink]=\"[]\"\n        class=\"govuk-link govuk-link--no-visited-state\"\n        role=\"button\"\n        (click)=\"toggleAdvancedSearch()\"\n        title=\"Advanced\"\n        [attr.aria-expanded]=\"advancedSearchVisible\"\n        aria-controls=\"advancedSearchVisible\"\n        data-l10n-id=\"find_advanced\"\n        style=\"position: absolute; top: 95px; right: 15px\"\n        >{{ \"Advanced\" | rpxTranslate }}</a\n      >\n    </div>\n  </div>\n\n  <div\n    id=\"advancedSearchVisible\"\n    class=\"govuk-grid-row\"\n    *ngIf=\"advancedSearchVisible\"\n  >\n    <div class=\"govuk-grid-column-full\">\n      <div\n        class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\"\n      >\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findHighlightAll\"\n                name=\"findHighlightAll\"\n                type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\"\n                [checked]=\"highlightAll\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findHighlightAll\"\n                data-l10n-id=\"find_highlight\"\n              >\n                {{ \"Highlight all\" | rpxTranslate }}\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findMatchCase\"\n                name=\"findMatchCase\"\n                type=\"checkbox\"\n                (change)=\"matchCase = !matchCase; search()\"\n                [checked]=\"matchCase\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findMatchCase\"\n                data-l10n-id=\"find_match_case_label\"\n              >\n                {{ \"Match text (exact case)\" | rpxTranslate }}\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findEntireWord\"\n                name=\"findMatchCase\"\n                type=\"checkbox\"\n                (change)=\"wholeWord = !wholeWord; search()\"\n                [checked]=\"wholeWord\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findEntireWord\"\n                data-l10n-id=\"find_entire_word_label\"\n              >\n                {{ \"Match whole words or sentences\" | rpxTranslate }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <div>\n    <button\n      id=\"mvCloseBtn\"\n      #mvCloseBtn\n      class=\"mv-button searchbar-button--close\"\n      title=\"Close Search\"\n      data-l10n-id=\"mvRedactBtn\"\n      (click)=\"toggleSearchBar()\"\n    ></button>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SearchBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-search-bar', template: "<div\n  class=\"searchbar govuk-!-padding-3\"\n  [hidden]=\"toolbarEvents.searchBarHidden | async\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <input\n        class=\"govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-5 govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Find in document\"\n        #findInput\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n        title=\"Find in document\"\n        placeholder=\"Find in document\u2026\"\n        tabindex=\"0\"\n        data-l10n-id=\"find_input\"\n      />\n      <button\n        class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\"\n        data-module=\"govuk-button\"\n        (click)=\"search()\"\n        style=\"position: absolute; top: 40px; right: 10px\"\n      >\n        Search\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span\n        id=\"findResultsCount\"\n        class=\"govuk-!-display-inline-block govuk-!-margin-right-4\"\n        role=\"status\"\n        >{{ resultsText }}</span\n      >\n      <a\n        *ngIf=\"resultCount > 0\"\n        id=\"findPrevious\"\n        [routerLink]=\"[]\"\n        role=\"button\"\n        class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\"\n        title=\"Find the previous occurrence of the phrase\"\n        data-l10n-id=\"find_previous\"\n        >{{ \"Prev\" | rpxTranslate }}</a\n      >\n      <a\n        *ngIf=\"resultCount > 0\"\n        id=\"findNext\"\n        #findNext\n        [routerLink]=\"[]\"\n        role=\"button\"\n        class=\"govuk-link govuk-link--no-visited-state\"\n        (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\"\n        data-l10n-id=\"find_next\"\n        >{{ \"Next\" | rpxTranslate }}</a\n      >\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a\n        [routerLink]=\"[]\"\n        class=\"govuk-link govuk-link--no-visited-state\"\n        role=\"button\"\n        (click)=\"toggleAdvancedSearch()\"\n        title=\"Advanced\"\n        [attr.aria-expanded]=\"advancedSearchVisible\"\n        aria-controls=\"advancedSearchVisible\"\n        data-l10n-id=\"find_advanced\"\n        style=\"position: absolute; top: 95px; right: 15px\"\n        >{{ \"Advanced\" | rpxTranslate }}</a\n      >\n    </div>\n  </div>\n\n  <div\n    id=\"advancedSearchVisible\"\n    class=\"govuk-grid-row\"\n    *ngIf=\"advancedSearchVisible\"\n  >\n    <div class=\"govuk-grid-column-full\">\n      <div\n        class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\"\n      >\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findHighlightAll\"\n                name=\"findHighlightAll\"\n                type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\"\n                [checked]=\"highlightAll\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findHighlightAll\"\n                data-l10n-id=\"find_highlight\"\n              >\n                {{ \"Highlight all\" | rpxTranslate }}\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findMatchCase\"\n                name=\"findMatchCase\"\n                type=\"checkbox\"\n                (change)=\"matchCase = !matchCase; search()\"\n                [checked]=\"matchCase\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findMatchCase\"\n                data-l10n-id=\"find_match_case_label\"\n              >\n                {{ \"Match text (exact case)\" | rpxTranslate }}\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input\n                class=\"govuk-checkboxes__input\"\n                id=\"findEntireWord\"\n                name=\"findMatchCase\"\n                type=\"checkbox\"\n                (change)=\"wholeWord = !wholeWord; search()\"\n                [checked]=\"wholeWord\"\n              />\n              <label\n                class=\"govuk-label govuk-checkboxes__label\"\n                for=\"findEntireWord\"\n                data-l10n-id=\"find_entire_word_label\"\n              >\n                {{ \"Match whole words or sentences\" | rpxTranslate }}\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n  <div>\n    <button\n      id=\"mvCloseBtn\"\n      #mvCloseBtn\n      class=\"mv-button searchbar-button--close\"\n      title=\"Close Search\"\n      data-l10n-id=\"mvRedactBtn\"\n      (click)=\"toggleSearchBar()\"\n    ></button>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }]; }, propDecorators: { findInput: [{
+        }], ctorParameters: () => [{ type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }], propDecorators: { findInput: [{
                 type: ViewChild,
                 args: ['findInput', { static: true }]
             }], findNext: [{
@@ -3986,13 +3991,13 @@ class MainToolbarComponent {
             }
         }, 100);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MainToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i0.ChangeDetectorRef }, { token: NumberHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MainToolbarComponent, selector: "mv-main-toolbar", inputs: { enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", contentType: "contentType" }, host: { listeners: { "window:resize": "onResize()", "document:keydown.control.p": "onControlPrint($event)", "document:keydown.meta.p": "onControlPrint($event)" } }, viewQueries: [{ propertyName: "zoomSelect", first: true, predicate: ["zoomSelect"], descendants: true }, { propertyName: "mvToolbarMain", first: true, predicate: ["mvToolbarMain"], descendants: true }, { propertyName: "mvMenuItems", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "<div class=\"toolbar\">\n  <div id=\"toolbarContainer\">\n    <div class=\"mv-toolbar__container\">\n      <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n        <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n        <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n          <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n        </div>\n        <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n        <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n          <button\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\n            <span>{{ \"More options\" | rpxTranslate }}</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Index\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Bookmarks\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n          *ngIf=\"toolbarButtons.showDrawButton\"\n          [disabled]=\"icpEnabled || redactionEnabled\"\n          id=\"mvDrawBtn\"\n          #mvDrawBtn\n          class=\"mv-button mv-toolbar__menu-button--draw\"\n          title=\"Draw a box\"\n          [class.button-hidden-on-toolbar]=\"\n            mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n          \"\n          [class.button-hidden-on-dropdown]=\"\n            mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n          \"\n          [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n          aria-pressed=\"false\"\n          data-l10n-id=\"toggleDrawButton\"\n          (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">{{\n              \"Draw a box\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            aria-label=\"Highlight\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightToolbarSubject | async\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">{{\n              \"Highlight\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>{{ \"Page\" | rpxTranslate }}</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom Out\" | rpxTranslate\n                }}</span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom In\" | rpxTranslate\n                }}</span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>{{ \"Rotate\" | rpxTranslate }}</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Search\" | rpxTranslate }}</span>\n          </button>\n          <mv-search-bar\n            *ngIf=\"!toolbarEvents.searchBarHidden.getValue()\"\n          ></mv-search-bar>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">{{\n              \"Present\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Redact\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Grab and drag\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Download\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Print\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Comments\" | rpxTranslate }}</span>\n          </button>\n        </ng-template>\n      </div>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SearchBarComponent, selector: "mv-search-bar" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MainToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i0.ChangeDetectorRef }, { token: NumberHelperService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: MainToolbarComponent, selector: "mv-main-toolbar", inputs: { enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", contentType: "contentType" }, host: { listeners: { "window:resize": "onResize()", "document:keydown.control.p": "onControlPrint($event)", "document:keydown.meta.p": "onControlPrint($event)" } }, viewQueries: [{ propertyName: "zoomSelect", first: true, predicate: ["zoomSelect"], descendants: true }, { propertyName: "mvToolbarMain", first: true, predicate: ["mvToolbarMain"], descendants: true }, { propertyName: "mvMenuItems", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "<div class=\"toolbar\">\n  <div id=\"toolbarContainer\">\n    <div class=\"mv-toolbar__container\">\n      <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n        <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n        <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n          <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n        </div>\n        <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n        <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n          <button\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\n            <span>{{ \"More options\" | rpxTranslate }}</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Index\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Bookmarks\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n          *ngIf=\"toolbarButtons.showDrawButton\"\n          [disabled]=\"icpEnabled || redactionEnabled\"\n          id=\"mvDrawBtn\"\n          #mvDrawBtn\n          class=\"mv-button mv-toolbar__menu-button--draw\"\n          title=\"Draw a box\"\n          [class.button-hidden-on-toolbar]=\"\n            mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n          \"\n          [class.button-hidden-on-dropdown]=\"\n            mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n          \"\n          [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n          aria-pressed=\"false\"\n          data-l10n-id=\"toggleDrawButton\"\n          (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">{{\n              \"Draw a box\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            aria-label=\"Highlight\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightToolbarSubject | async\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">{{\n              \"Highlight\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>{{ \"Page\" | rpxTranslate }}</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom Out\" | rpxTranslate\n                }}</span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom In\" | rpxTranslate\n                }}</span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>{{ \"Rotate\" | rpxTranslate }}</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Search\" | rpxTranslate }}</span>\n          </button>\n          <mv-search-bar\n            *ngIf=\"!toolbarEvents.searchBarHidden.getValue()\"\n          ></mv-search-bar>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">{{\n              \"Present\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Redact\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Grab and drag\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Download\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Print\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Comments\" | rpxTranslate }}</span>\n          </button>\n        </ng-template>\n      </div>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SearchBarComponent, selector: "mv-search-bar" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MainToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MainToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-main-toolbar', template: "<div class=\"toolbar\">\n  <div id=\"toolbarContainer\">\n    <div class=\"mv-toolbar__container\">\n      <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n        <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n        <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n          <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n        </div>\n        <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n        <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n          <button\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\n            <span>{{ \"More options\" | rpxTranslate }}</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Index\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Bookmarks\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n          *ngIf=\"toolbarButtons.showDrawButton\"\n          [disabled]=\"icpEnabled || redactionEnabled\"\n          id=\"mvDrawBtn\"\n          #mvDrawBtn\n          class=\"mv-button mv-toolbar__menu-button--draw\"\n          title=\"Draw a box\"\n          [class.button-hidden-on-toolbar]=\"\n            mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n          \"\n          [class.button-hidden-on-dropdown]=\"\n            mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n          \"\n          [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n          aria-pressed=\"false\"\n          data-l10n-id=\"toggleDrawButton\"\n          (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">{{\n              \"Draw a box\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            aria-label=\"Highlight\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightToolbarSubject | async\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">{{\n              \"Highlight\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>{{ \"Page\" | rpxTranslate }}</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom Out\" | rpxTranslate\n                }}</span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom In\" | rpxTranslate\n                }}</span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>{{ \"Rotate\" | rpxTranslate }}</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Search\" | rpxTranslate }}</span>\n          </button>\n          <mv-search-bar\n            *ngIf=\"!toolbarEvents.searchBarHidden.getValue()\"\n          ></mv-search-bar>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">{{\n              \"Present\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Redact\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Grab and drag\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Download\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Print\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Comments\" | rpxTranslate }}</span>\n          </button>\n        </ng-template>\n      </div>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i0.ChangeDetectorRef }, { type: NumberHelperService }]; }, propDecorators: { enableAnnotations: [{
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i0.ChangeDetectorRef }, { type: NumberHelperService }], propDecorators: { enableAnnotations: [{
                 type: Input
             }], enableRedactions: [{
                 type: Input
@@ -4090,13 +4095,13 @@ class RedactionToolbarComponent {
             subscription.unsubscribe();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RedactionToolbarComponent, selector: "mv-redaction-toolbar", inputs: { showRedactSearch: "showRedactSearch" }, ngImport: i0, template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">{{\n    \"Redaction options\" | rpxTranslate\n  }}</label>\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw\"\n    title=\"{{ 'Draw a box' | rpxTranslate }}}\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">{{\n      \"Draw a box\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page\"\n    title=\"{{ 'Redact page' | rpxTranslate }}\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">{{\n      \"Redact page\" | rpxTranslate\n    }}</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    title=\"{{ 'From search' | rpxTranslate }}\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\">{{\n      \"From search\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Redact text' | rpxTranslate }}\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">{{\n      \"Redact text\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Clear all' | rpxTranslate }}\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">{{ \"Clear all\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    title=\"{{ 'Preview' | rpxTranslate }}\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">{{\n      \"Preview\" | rpxTranslate\n    }}</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">{{\n      \"Hide preview\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Save document' | rpxTranslate }}\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">{{\n      \"Save document\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"{{ 'Close Redaction' | rpxTranslate }}\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">{{\n      \"Close Redaction\" | rpxTranslate\n    }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: RedactionToolbarComponent, selector: "mv-redaction-toolbar", inputs: { showRedactSearch: "showRedactSearch" }, ngImport: i0, template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">{{\n    \"Redaction options\" | rpxTranslate\n  }}</label>\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw\"\n    title=\"{{ 'Draw a box' | rpxTranslate }}}\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">{{\n      \"Draw a box\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page\"\n    title=\"{{ 'Redact page' | rpxTranslate }}\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">{{\n      \"Redact page\" | rpxTranslate\n    }}</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    title=\"{{ 'From search' | rpxTranslate }}\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\">{{\n      \"From search\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Redact text' | rpxTranslate }}\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">{{\n      \"Redact text\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Clear all' | rpxTranslate }}\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">{{ \"Clear all\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    title=\"{{ 'Preview' | rpxTranslate }}\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">{{\n      \"Preview\" | rpxTranslate\n    }}</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">{{\n      \"Hide preview\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Save document' | rpxTranslate }}\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">{{\n      \"Save document\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"{{ 'Close Redaction' | rpxTranslate }}\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">{{\n      \"Close Redaction\" | rpxTranslate\n    }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-redaction-toolbar', template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">{{\n    \"Redaction options\" | rpxTranslate\n  }}</label>\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw\"\n    title=\"{{ 'Draw a box' | rpxTranslate }}}\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">{{\n      \"Draw a box\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page\"\n    title=\"{{ 'Redact page' | rpxTranslate }}\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">{{\n      \"Redact page\" | rpxTranslate\n    }}</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    title=\"{{ 'From search' | rpxTranslate }}\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\">{{\n      \"From search\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Redact text' | rpxTranslate }}\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">{{\n      \"Redact text\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Clear all' | rpxTranslate }}\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">{{ \"Clear all\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    title=\"{{ 'Preview' | rpxTranslate }}\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">{{\n      \"Preview\" | rpxTranslate\n    }}</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">{{\n      \"Hide preview\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Save document' | rpxTranslate }}\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">{{\n      \"Save document\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"{{ 'Close Redaction' | rpxTranslate }}\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">{{\n      \"Close Redaction\" | rpxTranslate\n    }}</span>\n  </button>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i1.Store }]; }, propDecorators: { showRedactSearch: [{
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i1.Store }], propDecorators: { showRedactSearch: [{
                 type: Input
             }] } });
 
@@ -4126,13 +4131,13 @@ class IcpToolbarComponent {
     showParticipantsList() {
         this.toolbarEventService.toggleParticipantsList(!this.toolbarEventService.icp.participantsListVisible.getValue());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpToolbarComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IcpToolbarComponent, selector: "mv-icp-toolbar", ngImport: i0, template: "<div id=\"icp-toolbar\" class=\"icpMode\">\n  <div id=\"toolbar-title\">\n    <label class=\"govuk-label\" data-l10n-id=\"digitalEvidence_label\">Digital evidence presentation</label>\n  </div>\n\n  <div id=\"presentation-mode\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" data-l10n-id=\"icpInfo_label\">You are in presentation mode</label>\n    </div>\n    <div class=\"item-button\">\n      <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" tabindex=\"0\"\n        title=\"Leave presentation\" (click)=\"leaveIcpSession()\">\n        <span data-l10n-id=\"icp-leave-presentation_label\">Leave presentation</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"presenter-info\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" *ngIf=\"!presenterName\" data-l10n-id=\"noPresenter_label\">Waiting for presenter</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && isPresenter\" data-l10n-id=\"isPresenter_label\">You are\n        presenting</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && !isPresenter\"\n        data-l10n-id=\"otherPresenter_label\">{{ presenterName | titlecase }}\n        is presenting</label>\n    </div>\n    <div class=\"item-button\">\n      <button *ngIf=\"!presenterName\" class=\"govuk-button\" id=\"icp-present\" tabindex=\"0\" title=\"Present\"\n        (click)=\"present()\">\n        <span data-l10n-id=\"icp-present_label\">Start presenting</span>\n      </button>\n      <button *ngIf=\"isPresenter\" class=\"govuk-button  govuk-button--warning\" id=\"icp-stop-presenting\" tabindex=\"0\"\n        title=\"Stop presenting\" (click)=\"stopPresenting()\">\n        <span data-l10n-id=\"icp-stop-presenting_label\">Stop Presenting</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"participant-list\">\n    <button class=\"govuk-button govuk-button--secondary\" id=\"icp-participants-list\" tabindex=\"0\"\n      title=\"Participants list\" (click)=\"showParticipantsList()\">\n      <span\n        data-l10n-id=\"icp-stop-presenting_label\">{{(toolbarEventService.icp.participantsListVisible | async) ? 'Hide': 'Show'}}\n        participants</span>\n    </button>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpToolbarComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: IcpToolbarComponent, selector: "mv-icp-toolbar", ngImport: i0, template: "<div id=\"icp-toolbar\" class=\"icpMode\">\n  <div id=\"toolbar-title\">\n    <label class=\"govuk-label\" data-l10n-id=\"digitalEvidence_label\">Digital evidence presentation</label>\n  </div>\n\n  <div id=\"presentation-mode\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" data-l10n-id=\"icpInfo_label\">You are in presentation mode</label>\n    </div>\n    <div class=\"item-button\">\n      <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" tabindex=\"0\"\n        title=\"Leave presentation\" (click)=\"leaveIcpSession()\">\n        <span data-l10n-id=\"icp-leave-presentation_label\">Leave presentation</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"presenter-info\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" *ngIf=\"!presenterName\" data-l10n-id=\"noPresenter_label\">Waiting for presenter</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && isPresenter\" data-l10n-id=\"isPresenter_label\">You are\n        presenting</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && !isPresenter\"\n        data-l10n-id=\"otherPresenter_label\">{{ presenterName | titlecase }}\n        is presenting</label>\n    </div>\n    <div class=\"item-button\">\n      <button *ngIf=\"!presenterName\" class=\"govuk-button\" id=\"icp-present\" tabindex=\"0\" title=\"Present\"\n        (click)=\"present()\">\n        <span data-l10n-id=\"icp-present_label\">Start presenting</span>\n      </button>\n      <button *ngIf=\"isPresenter\" class=\"govuk-button  govuk-button--warning\" id=\"icp-stop-presenting\" tabindex=\"0\"\n        title=\"Stop presenting\" (click)=\"stopPresenting()\">\n        <span data-l10n-id=\"icp-stop-presenting_label\">Stop Presenting</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"participant-list\">\n    <button class=\"govuk-button govuk-button--secondary\" id=\"icp-participants-list\" tabindex=\"0\"\n      title=\"Participants list\" (click)=\"showParticipantsList()\">\n      <span\n        data-l10n-id=\"icp-stop-presenting_label\">{{(toolbarEventService.icp.participantsListVisible | async) ? 'Hide': 'Show'}}\n        participants</span>\n    </button>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-icp-toolbar', template: "<div id=\"icp-toolbar\" class=\"icpMode\">\n  <div id=\"toolbar-title\">\n    <label class=\"govuk-label\" data-l10n-id=\"digitalEvidence_label\">Digital evidence presentation</label>\n  </div>\n\n  <div id=\"presentation-mode\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" data-l10n-id=\"icpInfo_label\">You are in presentation mode</label>\n    </div>\n    <div class=\"item-button\">\n      <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" tabindex=\"0\"\n        title=\"Leave presentation\" (click)=\"leaveIcpSession()\">\n        <span data-l10n-id=\"icp-leave-presentation_label\">Leave presentation</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"presenter-info\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" *ngIf=\"!presenterName\" data-l10n-id=\"noPresenter_label\">Waiting for presenter</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && isPresenter\" data-l10n-id=\"isPresenter_label\">You are\n        presenting</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && !isPresenter\"\n        data-l10n-id=\"otherPresenter_label\">{{ presenterName | titlecase }}\n        is presenting</label>\n    </div>\n    <div class=\"item-button\">\n      <button *ngIf=\"!presenterName\" class=\"govuk-button\" id=\"icp-present\" tabindex=\"0\" title=\"Present\"\n        (click)=\"present()\">\n        <span data-l10n-id=\"icp-present_label\">Start presenting</span>\n      </button>\n      <button *ngIf=\"isPresenter\" class=\"govuk-button  govuk-button--warning\" id=\"icp-stop-presenting\" tabindex=\"0\"\n        title=\"Stop presenting\" (click)=\"stopPresenting()\">\n        <span data-l10n-id=\"icp-stop-presenting_label\">Stop Presenting</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"participant-list\">\n    <button class=\"govuk-button govuk-button--secondary\" id=\"icp-participants-list\" tabindex=\"0\"\n      title=\"Participants list\" (click)=\"showParticipantsList()\">\n      <span\n        data-l10n-id=\"icp-stop-presenting_label\">{{(toolbarEventService.icp.participantsListVisible | async) ? 'Hide': 'Show'}}\n        participants</span>\n    </button>\n  </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: i1.Store }]; } });
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: i1.Store }] });
 
 class HighlightToolbarComponent {
     constructor(toolbarEventService, toolbarButtons) {
@@ -4164,17 +4169,17 @@ class HighlightToolbarComponent {
             subscription.unsubscribe();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HighlightToolbarComponent, selector: "mv-highlight-toolbar", ngImport: i0, template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >Highlight options</label\n  >\n\n  <button\n    id=\"mvDrawBtn\"\n    #mvDrawBtn\n    class=\"mv-button mv-toolbar__menu-button--draw\"\n    title=\"Draw a box\"\n    [class.toggled]=\"toolbarEventService.drawModeSubject | async\"\n    aria-pressed=\"false\"\n    data-l10n-id=\"mvDrawBtn\"\n    (click)=\"onClickDrawToggle()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"draw_label\">Draw a box</span>\n  </button>\n\n  <button\n    id=\"highlightTextBtn\"\n    class=\"mv-button mv-toolbar__menu-button--highlight\"\n    title=\"Highlight text\"\n    data-l10n-id=\"highlightTextBtn\"\n    (click)=\"onHighlight()\"\n    [class.toggled]=\"toolbarEventService.highlightModeSubject | async\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"highlightTextBtn_label\">Highlight text</span>\n  </button>\n\n  <button\n    id=\"mvHighlightFromSearchBtn\"\n    title=\"From search\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >From search</span\n    >\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"Close Redaction\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"onClose()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">Close Highlight</span>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: HighlightToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: HighlightToolbarComponent, selector: "mv-highlight-toolbar", ngImport: i0, template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >Highlight options</label\n  >\n\n  <button\n    id=\"mvDrawBtn\"\n    #mvDrawBtn\n    class=\"mv-button mv-toolbar__menu-button--draw\"\n    title=\"Draw a box\"\n    [class.toggled]=\"toolbarEventService.drawModeSubject | async\"\n    aria-pressed=\"false\"\n    data-l10n-id=\"mvDrawBtn\"\n    (click)=\"onClickDrawToggle()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"draw_label\">Draw a box</span>\n  </button>\n\n  <button\n    id=\"highlightTextBtn\"\n    class=\"mv-button mv-toolbar__menu-button--highlight\"\n    title=\"Highlight text\"\n    data-l10n-id=\"highlightTextBtn\"\n    (click)=\"onHighlight()\"\n    [class.toggled]=\"toolbarEventService.highlightModeSubject | async\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"highlightTextBtn_label\">Highlight text</span>\n  </button>\n\n  <button\n    id=\"mvHighlightFromSearchBtn\"\n    title=\"From search\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >From search</span\n    >\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"Close Redaction\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"onClose()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">Close Highlight</span>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: HighlightToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-highlight-toolbar', template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >Highlight options</label\n  >\n\n  <button\n    id=\"mvDrawBtn\"\n    #mvDrawBtn\n    class=\"mv-button mv-toolbar__menu-button--draw\"\n    title=\"Draw a box\"\n    [class.toggled]=\"toolbarEventService.drawModeSubject | async\"\n    aria-pressed=\"false\"\n    data-l10n-id=\"mvDrawBtn\"\n    (click)=\"onClickDrawToggle()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"draw_label\">Draw a box</span>\n  </button>\n\n  <button\n    id=\"highlightTextBtn\"\n    class=\"mv-button mv-toolbar__menu-button--highlight\"\n    title=\"Highlight text\"\n    data-l10n-id=\"highlightTextBtn\"\n    (click)=\"onHighlight()\"\n    [class.toggled]=\"toolbarEventService.highlightModeSubject | async\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"highlightTextBtn_label\">Highlight text</span>\n  </button>\n\n  <button\n    id=\"mvHighlightFromSearchBtn\"\n    title=\"From search\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >From search</span\n    >\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"Close Redaction\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"onClose()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">Close Highlight</span>\n  </button>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }]; } });
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }] });
 
 class ToolbarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ToolbarModule, declarations: [SearchBarComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: ToolbarModule, declarations: [SearchBarComponent,
             MainToolbarComponent,
             RedactionToolbarComponent,
             IcpToolbarComponent,
@@ -4188,7 +4193,7 @@ class ToolbarModule {
             IcpToolbarComponent,
             RedactionSearchBarComponent,
             HighlightToolbarComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ToolbarModule, providers: [
             ToolbarButtonVisibilityService,
             ToolbarEventService
         ], imports: [CommonModule,
@@ -4197,7 +4202,7 @@ class ToolbarModule {
             RouterModule,
             RpxTranslationModule.forChild()] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ToolbarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4316,13 +4321,13 @@ class BoxHighlightCreateComponent {
         this.left = 0;
         this.createHighlight();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BoxHighlightCreateComponent, deps: [{ token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BoxHighlightCreateComponent, selector: "mv-box-highlight-create", inputs: { page: "page", pageHeight: "pageHeight", pageWidth: "pageWidth", rotate: "rotate", zoom: "zoom", container: "container" }, outputs: { saveSelection: "saveSelection" }, viewQueries: [{ propertyName: "highlight", first: true, predicate: ["boxHighlight"], descendants: true }], ngImport: i0, template: "<div [style.height]=\"defaultHeight\"\n     [style.width]=\"defaultWidth\"\n     (mousedown)=\"initHighlight($event)\"\n     (mousemove)=\"updateHighlight($event)\"\n     (mouseup)=\"createHighlight()\">\n  <div #boxHighlight\n     class=\"box-highlight\"\n     [style.display]=\"display\"\n     [style.position]=\"position\"\n     [style.background-color]=\"backgroundColor\"\n     [style.height]=\"height ? height + 'px' : '100%'\"\n     [style.width]=\"width ? width + 'px' : '100%'\"\n     [style.top]=\"top + 'px'\"\n     [style.left]=\"left + 'px'\">\n  </div>\n</div>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BoxHighlightCreateComponent, deps: [{ token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: BoxHighlightCreateComponent, selector: "mv-box-highlight-create", inputs: { page: "page", pageHeight: "pageHeight", pageWidth: "pageWidth", rotate: "rotate", zoom: "zoom", container: "container" }, outputs: { saveSelection: "saveSelection" }, viewQueries: [{ propertyName: "highlight", first: true, predicate: ["boxHighlight"], descendants: true }], ngImport: i0, template: "<div [style.height]=\"defaultHeight\"\n     [style.width]=\"defaultWidth\"\n     (mousedown)=\"initHighlight($event)\"\n     (mousemove)=\"updateHighlight($event)\"\n     (mouseup)=\"createHighlight()\">\n  <div #boxHighlight\n     class=\"box-highlight\"\n     [style.display]=\"display\"\n     [style.position]=\"position\"\n     [style.background-color]=\"backgroundColor\"\n     [style.height]=\"height ? height + 'px' : '100%'\"\n     [style.width]=\"width ? width + 'px' : '100%'\"\n     [style.top]=\"top + 'px'\"\n     [style.left]=\"left + 'px'\">\n  </div>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BoxHighlightCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BoxHighlightCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-box-highlight-create', template: "<div [style.height]=\"defaultHeight\"\n     [style.width]=\"defaultWidth\"\n     (mousedown)=\"initHighlight($event)\"\n     (mousemove)=\"updateHighlight($event)\"\n     (mouseup)=\"createHighlight()\">\n  <div #boxHighlight\n     class=\"box-highlight\"\n     [style.display]=\"display\"\n     [style.position]=\"position\"\n     [style.background-color]=\"backgroundColor\"\n     [style.height]=\"height ? height + 'px' : '100%'\"\n     [style.width]=\"width ? width + 'px' : '100%'\"\n     [style.top]=\"top + 'px'\"\n     [style.left]=\"left + 'px'\">\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: HighlightCreateService }]; }, propDecorators: { page: [{
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: HighlightCreateService }], propDecorators: { page: [{
                 type: Input
             }], pageHeight: [{
                 type: Input
@@ -4341,332 +4346,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['boxHighlight', { static: false }]
             }] } });
 
-class DraggableElementDirective {
-    constructor(el) {
-        this.el = el;
-        this.pointerDown = false;
-        this.rotate = 0;
-        this.coordinates = new EventEmitter();
-        this.stopped = new EventEmitter();
-        el.nativeElement.style.position = 'absolute';
-    }
-    onPointerDown(event) {
-        event.preventDefault();
-        this.pointerDown = true;
-        this.setOriginalPosition(event);
-    }
-    onPointerUp() {
-        this.stopped.emit();
-    }
-    onPointerMove(event) {
-        if (this.pointerDown) {
-            const element = this.el.nativeElement;
-            const newPosition = this.setNewPosition(event);
-            this.setOriginalPosition(event);
-            element.style.left = (element.offsetLeft + newPosition.x) + 'px';
-            element.style.top = (element.offsetTop + newPosition.y) + 'px';
-            this.coordinates.emit({ x: newPosition.x, y: newPosition.y });
-        }
-    }
-    onWindowPointerUp() {
-        this.pointerDown = false;
-    }
-    onPanStart(event) {
-        this.onPointerDown(event.srcEvent);
-    }
-    onPanEnd() {
-        this.onPointerUp();
-    }
-    onPanMove(event) {
-        this.onPointerMove(event.srcEvent);
-    }
-    onWindowPanEnd() {
-        this.onWindowPointerUp();
-    }
-    setOriginalPosition(event) {
-        switch (this.rotate) {
-            case 90:
-                this.originalPosition = {
-                    x: event.clientY,
-                    y: screen.width - event.clientX
-                };
-                break;
-            case 180:
-                this.originalPosition = {
-                    x: screen.width - event.clientX,
-                    y: screen.height - event.clientY
-                };
-                break;
-            case 270:
-                this.originalPosition = {
-                    x: screen.height - event.clientY,
-                    y: event.clientX
-                };
-                break;
-            default:
-                this.originalPosition = {
-                    x: event.clientX,
-                    y: event.clientY
-                };
-        }
-    }
-    setNewPosition(event) {
-        let newPosition = {
-            x: 0,
-            y: 0
-        };
-        switch (this.rotate) {
-            case 90:
-                newPosition = {
-                    x: event.clientY - this.originalPosition.x,
-                    y: (screen.width - event.clientX) - this.originalPosition.y
-                };
-                break;
-            case 180:
-                newPosition = {
-                    x: (screen.width - event.clientX) - this.originalPosition.x,
-                    y: (screen.height - event.clientY) - this.originalPosition.y
-                };
-                break;
-            case 270:
-                newPosition = {
-                    x: (screen.height - event.clientY) - this.originalPosition.x,
-                    y: event.clientX - this.originalPosition.y
-                };
-                break;
-            default:
-                newPosition = {
-                    x: event.clientX - this.originalPosition.x,
-                    y: event.clientY - this.originalPosition.y
-                };
-        }
-        return newPosition;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableElementDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableElementDirective, selector: "[mvDraggable]", inputs: { rotate: "rotate" }, outputs: { coordinates: "coordinates", stopped: "stopped" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "pointerup": "onPointerUp()", "window:pointermove": "onPointerMove($event)", "window:pointerup": "onWindowPointerUp()", "panstart": "onPanStart($event)", "panend": "onPanEnd()", "window:panmove": "onPanMove($event)", "window:panend": "onWindowPanEnd()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableElementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mvDraggable]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { rotate: [{
-                type: Input
-            }], coordinates: [{
-                type: Output
-            }], stopped: [{
-                type: Output
-            }], onPointerDown: [{
-                type: HostListener,
-                args: ['pointerdown', ['$event']]
-            }], onPointerUp: [{
-                type: HostListener,
-                args: ['pointerup']
-            }], onPointerMove: [{
-                type: HostListener,
-                args: ['window:pointermove', ['$event']]
-            }], onWindowPointerUp: [{
-                type: HostListener,
-                args: ['window:pointerup']
-            }], onPanStart: [{
-                type: HostListener,
-                args: ['panstart', ['$event']]
-            }], onPanEnd: [{
-                type: HostListener,
-                args: ['panend']
-            }], onPanMove: [{
-                type: HostListener,
-                args: ['window:panmove', ['$event']]
-            }], onWindowPanEnd: [{
-                type: HostListener,
-                args: ['window:panend']
-            }] } });
-
-class ResizeHandlersComponent {
-    constructor() {
-        this.selected = false;
-        this.minimumSize = 20;
-    }
-    ngAfterViewInit() {
-        this.setHandlePositions();
-    }
-    ngOnChanges() {
-        if (this.selected) {
-            this.setHandlePositions();
-        }
-    }
-    setHandlePositions() {
-        this.handles.forEach((element, index) => {
-            switch (index) {
-                case 0:
-                    this.setHandleStyles(element, { left: '-7px', right: '', top: '-7px', bottom: '' });
-                    break;
-                case 1:
-                    this.setHandleStyles(element, { left: '', right: '-7px', top: '-7px', bottom: '' });
-                    break;
-                case 2:
-                    this.setHandleStyles(element, { left: '-7px', right: '', top: '', bottom: '-7px' });
-                    break;
-                default:
-                    this.setHandleStyles(element, { left: '', right: '-7px', top: '', bottom: '-7px' });
-            }
-        });
-    }
-    setHandleStyles(element, styles) {
-        element.nativeElement.style.left = styles.left;
-        element.nativeElement.style.right = styles.right;
-        element.nativeElement.style.top = styles.top;
-        element.nativeElement.style.bottom = styles.bottom;
-    }
-    onPointerDown(event) {
-        event.stopPropagation();
-    }
-    resize(className, coordinates) {
-        const parentElement = this.parentElement.nativeElement;
-        const size = this.calculatingPosition(parentElement, className, coordinates);
-        if (size.width > this.minimumSize && size.height > this.minimumSize) {
-            if (className.includes('TOP-LEFT')) {
-                parentElement.style.left = size.position.x + 'px';
-                parentElement.style.width = size.width + 'px';
-                parentElement.style.top = size.position.y + 'px';
-                parentElement.style.height = size.height + 'px';
-            }
-            else if (className.includes('TOP-RIGHT')) {
-                parentElement.style.width = size.width + 'px';
-                parentElement.style.top = size.position.y + 'px';
-                parentElement.style.height = size.height + 'px';
-            }
-            else if (className.includes('BOTTOM-LEFT')) {
-                parentElement.style.left = size.position.x + 'px';
-                parentElement.style.width = size.width + 'px';
-                parentElement.style.height = size.height + 'px';
-            }
-            else {
-                parentElement.style.width = size.width + 'px';
-                parentElement.style.height = size.height + 'px';
-            }
-        }
-        this.setHandlePositions();
-    }
-    calculatingPosition(parentElement, className, coordinates) {
-        switch (this.rotate) {
-            case 90:
-                return {
-                    width: className.includes('LEFT') ? parentElement.offsetWidth - coordinates.y : parentElement.offsetWidth + coordinates.y,
-                    height: className.includes('TOP') ? parentElement.offsetHeight + coordinates.x : parentElement.offsetHeight - coordinates.x,
-                    position: {
-                        x: parentElement.offsetLeft + coordinates.y,
-                        y: parentElement.offsetTop - coordinates.x
-                    }
-                };
-            case 180:
-                return {
-                    width: className.includes('LEFT') ? parentElement.offsetWidth + coordinates.x : parentElement.offsetWidth - coordinates.x,
-                    height: className.includes('TOP') ? parentElement.offsetHeight + coordinates.y : parentElement.offsetHeight - coordinates.y,
-                    position: {
-                        x: parentElement.offsetLeft - coordinates.x,
-                        y: parentElement.offsetTop - coordinates.y
-                    }
-                };
-            case 270:
-                return {
-                    width: className.includes('LEFT') ? parentElement.offsetWidth + coordinates.y : parentElement.offsetWidth - coordinates.y,
-                    height: className.includes('TOP') ? parentElement.offsetHeight - coordinates.x : parentElement.offsetHeight + coordinates.x,
-                    position: {
-                        x: parentElement.offsetLeft - coordinates.y,
-                        y: parentElement.offsetTop + coordinates.x
-                    }
-                };
-            default:
-                return {
-                    width: className.includes('LEFT') ? parentElement.offsetWidth - coordinates.x : parentElement.offsetWidth + coordinates.x,
-                    height: className.includes('TOP') ? parentElement.offsetHeight - coordinates.y : parentElement.offsetHeight + coordinates.y,
-                    position: {
-                        x: parentElement.offsetLeft + coordinates.x,
-                        y: parentElement.offsetTop + coordinates.y
-                    }
-                };
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizeHandlersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ResizeHandlersComponent, selector: "mv-lib-resize-handlers", inputs: { parentElement: "parentElement", rotate: "rotate", selected: "selected" }, viewQueries: [{ propertyName: "handles", predicate: ["handle"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"selected\" class=\"resize-handlers\">\n  <div #handle #topLeft\n       class=\"TOP-LEFT handle\"\n       mvDraggable\n       (pointerdown)=\"onPointerDown($event)\"\n       (coordinates)=\"resize(topLeft.className, $event)\"></div>\n  <div #handle #topRight\n       class=\"TOP-RIGHT handle\"\n       mvDraggable\n       (pointerdown)=\"onPointerDown($event)\"\n       (coordinates)=\"resize(topRight.className, $event)\"></div>\n  <div #handle #bottomLeft\n       class=\"BOTTOM-LEFT handle\"\n       mvDraggable\n       (pointerdown)=\"onPointerDown($event)\"\n       (coordinates)=\"resize(bottomLeft.className, $event)\"></div>\n  <div #handle #bottomRight\n       class=\"BOTTOM-RIGHT handle\"\n       mvDraggable\n       (pointerdown)=\"onPointerDown($event)\"\n       (coordinates)=\"resize(bottomRight.className, $event)\"></div>\n</div>\n", styles: [".resize-handlers{width:100%;height:100%;position:absolute;top:0;left:0;border:2px solid #424242;box-sizing:border-box}.handle{position:absolute;width:20px;height:20px;background:#fff;opacity:50%}.TOP-LEFT{left:-7px;top:-7px;border-top:3px solid #424242;border-left:3px solid #424242}.TOP-LEFT:hover,.TOP-LEFT:active{border-radius:unset;background:transparent;border-bottom:black;border-right:black}.TOP-RIGHT{right:-7px;top:-7px;border-top:3px solid #424242;border-right:3px solid #424242}.TOP-RIGHT:hover,.TOP-RIGHT:active{border-radius:unset;background:transparent;border-bottom:black;border-left:black}.BOTTOM-LEFT{left:-7px;bottom:-7px;border-bottom:3px solid #424242;border-left:3px solid #424242}.BOTTOM-LEFT:hover,.BOTTOM-LEFT:active{border-radius:unset;background:transparent;border-top:black;border-right:black}.BOTTOM-RIGHT{right:-7px;bottom:-7px;border-bottom:3px solid #424242;border-right:3px solid #424242}.BOTTOM-RIGHT:hover,.BOTTOM-RIGHT:active{border-radius:unset;background:transparent;border-top:black;border-left:black}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DraggableElementDirective, selector: "[mvDraggable]", inputs: ["rotate"], outputs: ["coordinates", "stopped"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizeHandlersComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mv-lib-resize-handlers', template: "<div *ngIf=\"selected\" class=\"resize-handlers\">\n  <div #handle #topLeft\n       class=\"TOP-LEFT handle\"\n       mvDraggable\n       (pointerdown)=\"onPointerDown($event)\"\n       (coordinates)=\"resize(topLeft.className, $event)\"></div>\n  <div #handle #topRight\n       class=\"TOP-RIGHT handle\"\n       mvDraggable\n       (pointerdown)=\"onPointerDown($event)\"\n       (coordinates)=\"resize(topRight.className, $event)\"></div>\n  <div #handle #bottomLeft\n       class=\"BOTTOM-LEFT handle\"\n       mvDraggable\n       (pointerdown)=\"onPointerDown($event)\"\n       (coordinates)=\"resize(bottomLeft.className, $event)\"></div>\n  <div #handle #bottomRight\n       class=\"BOTTOM-RIGHT handle\"\n       mvDraggable\n       (pointerdown)=\"onPointerDown($event)\"\n       (coordinates)=\"resize(bottomRight.className, $event)\"></div>\n</div>\n", styles: [".resize-handlers{width:100%;height:100%;position:absolute;top:0;left:0;border:2px solid #424242;box-sizing:border-box}.handle{position:absolute;width:20px;height:20px;background:#fff;opacity:50%}.TOP-LEFT{left:-7px;top:-7px;border-top:3px solid #424242;border-left:3px solid #424242}.TOP-LEFT:hover,.TOP-LEFT:active{border-radius:unset;background:transparent;border-bottom:black;border-right:black}.TOP-RIGHT{right:-7px;top:-7px;border-top:3px solid #424242;border-right:3px solid #424242}.TOP-RIGHT:hover,.TOP-RIGHT:active{border-radius:unset;background:transparent;border-bottom:black;border-left:black}.BOTTOM-LEFT{left:-7px;bottom:-7px;border-bottom:3px solid #424242;border-left:3px solid #424242}.BOTTOM-LEFT:hover,.BOTTOM-LEFT:active{border-radius:unset;background:transparent;border-top:black;border-right:black}.BOTTOM-RIGHT{right:-7px;bottom:-7px;border-bottom:3px solid #424242;border-right:3px solid #424242}.BOTTOM-RIGHT:hover,.BOTTOM-RIGHT:active{border-radius:unset;background:transparent;border-top:black;border-left:black}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { parentElement: [{
-                type: Input
-            }], rotate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], handles: [{
-                type: ViewChildren,
-                args: ['handle']
-            }] } });
-
-class ResizableElementDirective {
-    constructor(el, container, componentFactoryResolver) {
-        this.el = el;
-        this.container = container;
-        this.componentFactoryResolver = componentFactoryResolver;
-        this.rotate = 0;
-        this.selected = false;
-        this.stopped = new EventEmitter();
-    }
-    ngOnInit() {
-        this.addHandlersToElement();
-    }
-    ngOnChanges() {
-        if (this.resizeHandlersComponent) {
-            this.resizeHandlersComponent.instance.selected = this.selected;
-            this.resizeHandlersComponent.instance.rotate = this.rotate;
-        }
-    }
-    addHandlersToElement() {
-        const component = this.componentFactoryResolver.resolveComponentFactory(ResizeHandlersComponent);
-        this.resizeHandlersComponent = this.container.createComponent(component);
-        this.resizeHandlersComponent.instance.parentElement = this.el;
-        this.resizeHandlersComponent.instance.rotate = this.rotate;
-        this.resizeHandlersComponent.instance.selected = this.selected;
-        this.el.nativeElement.appendChild(this.resizeHandlersComponent.location.nativeElement);
-    }
-    onPointerDown() {
-        this.resizeHandlersComponent.instance.selected = true;
-    }
-    onPointerUp() {
-        this.stopped.emit();
-    }
-    onWindowPointerUp(targetEvent) {
-        if (!this.el.nativeElement.contains(targetEvent)) {
-            this.resizeHandlersComponent.instance.selected = false;
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableElementDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ResizableElementDirective, selector: "[mvResizable]", inputs: { rotate: "rotate", selected: "selected" }, outputs: { stopped: "stopped" }, host: { listeners: { "pointerdown": "onPointerDown()", "pointerup": "onPointerUp()", "window:pointerup": "onWindowPointerUp($event.target)" } }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ResizableElementDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mvResizable]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { rotate: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], stopped: [{
-                type: Output
-            }], onPointerDown: [{
-                type: HostListener,
-                args: ['pointerdown']
-            }], onPointerUp: [{
-                type: HostListener,
-                args: ['pointerup']
-            }], onWindowPointerUp: [{
-                type: HostListener,
-                args: ['window:pointerup', ['$event.target']]
-            }] } });
-
 class RectangleComponent {
     set annoRect(annoRect) {
         this._annoRect = { ...annoRect };
@@ -4746,13 +4425,13 @@ class RectangleComponent {
             this.width !== viewRect.offsetWidth ||
             this.height !== viewRect.offsetHeight;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RectangleComponent, deps: [{ token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RectangleComponent, selector: "mv-anno-rectangle", inputs: { color: "color", zoom: "zoom", rotate: "rotate", editable: "editable", pageHeight: "pageHeight", pageWidth: "pageWidth", annoRect: "annoRect", selected: "selected" }, outputs: { selectEvent: "selectEvent", updateEvent: "updateEvent" }, viewQueries: [{ propertyName: "viewRect", first: true, predicate: ["rectElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"editable; else nonEditable\">\n  <div #rectElement\n       class=\"rectangle\"\n       mvDraggable\n       mvResizable\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected, 'grabNDrag': enableGrabNDrag }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height + 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       [rotate]=\"0\"\n       [selected]=\"selected\"\n       (click)=\"onClick()\"\n       (stopped)=\"onUpdate(rectElement)\">\n  </div>\n</div>\n<ng-template #nonEditable>\n  <div #rectElement\n       class=\"rectangle\"\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height+ 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       (click)=\"onClick()\">\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DraggableElementDirective, selector: "[mvDraggable]", inputs: ["rotate"], outputs: ["coordinates", "stopped"] }, { kind: "directive", type: ResizableElementDirective, selector: "[mvResizable]", inputs: ["rotate", "selected"], outputs: ["stopped"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RectangleComponent, deps: [{ token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: RectangleComponent, selector: "mv-anno-rectangle", inputs: { color: "color", zoom: "zoom", rotate: "rotate", editable: "editable", pageHeight: "pageHeight", pageWidth: "pageWidth", annoRect: "annoRect", selected: "selected" }, outputs: { selectEvent: "selectEvent", updateEvent: "updateEvent" }, viewQueries: [{ propertyName: "viewRect", first: true, predicate: ["rectElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"editable; else nonEditable\">\n  <div #rectElement\n       class=\"rectangle\"\n       draggable\n       resizable\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected, 'grabNDrag': enableGrabNDrag }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height + 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       [rotate]=\"0\"\n       [selected]=\"selected\"\n       (click)=\"onClick()\"\n       (stopped)=\"onUpdate(rectElement)\">\n  </div>\n</div>\n<ng-template #nonEditable>\n  <div #rectElement\n       class=\"rectangle\"\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height+ 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       (click)=\"onClick()\">\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.DraggableElementDirective, selector: "[draggable]", inputs: ["rotate"], outputs: ["coordinates", "stopped"] }, { kind: "directive", type: i4$2.ResizableElementDirective, selector: "[resizable]", inputs: ["rotate", "selected"], outputs: ["stopped"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RectangleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RectangleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-anno-rectangle', template: "<div *ngIf=\"editable; else nonEditable\">\n  <div #rectElement\n       class=\"rectangle\"\n       mvDraggable\n       mvResizable\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected, 'grabNDrag': enableGrabNDrag }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height + 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       [rotate]=\"0\"\n       [selected]=\"selected\"\n       (click)=\"onClick()\"\n       (stopped)=\"onUpdate(rectElement)\">\n  </div>\n</div>\n<ng-template #nonEditable>\n  <div #rectElement\n       class=\"rectangle\"\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height+ 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       (click)=\"onClick()\">\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: HighlightCreateService }]; }, propDecorators: { color: [{
+            args: [{ selector: 'mv-anno-rectangle', template: "<div *ngIf=\"editable; else nonEditable\">\n  <div #rectElement\n       class=\"rectangle\"\n       draggable\n       resizable\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected, 'grabNDrag': enableGrabNDrag }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height + 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       [rotate]=\"0\"\n       [selected]=\"selected\"\n       (click)=\"onClick()\"\n       (stopped)=\"onUpdate(rectElement)\">\n  </div>\n</div>\n<ng-template #nonEditable>\n  <div #rectElement\n       class=\"rectangle\"\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height+ 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       (click)=\"onClick()\">\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: HighlightCreateService }], propDecorators: { color: [{
                 type: Input
             }], zoom: [{
                 type: Input
@@ -4858,13 +4537,13 @@ class CtxToolbarComponent {
             return popupLeft;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CtxToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: { zoom: "zoom", rotate: "rotate", pageHeight: "pageHeight", pageWidth: "pageWidth", canHighlight: "canHighlight", canBookmark: "canBookmark", canComment: "canComment", canDelete: "canDelete", rectangles: "rectangles" }, outputs: { createHighlightEvent: "createHighlightEvent", deleteHighlightEvent: "deleteHighlightEvent", addOrEditCommentEvent: "addOrEditCommentEvent", createBookmarkEvent: "createBookmarkEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbar\" *ngIf=\"rectangle\"\n     [style.top.px]=\"top\"\n     [style.left.px]=\"left\">\n  <button *ngIf=\"canHighlight\"\n          type=\"button\" title=\"Highlight\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight\"\n          (mousedown)=\"createHighlight()\">\n    <span>Highlight</span>\n  </button>\n  <button *ngIf=\"canDelete\"\n          type=\"button\" title=\"Delete\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton\"\n          (mousedown)=\"deleteHighlight()\">\n    <span>Remove</span>\n  </button>\n  <button *ngIf=\"canComment\"\n          type=\"button\" title=\"Comment\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment\"\n          (mousedown)=\"addOrEditComment()\">\n    <span>Comment</span></button>\n  <button *ngIf=\"canBookmark\"\n          type=\"button\" title=\"Bookmark\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark\"\n          id=\"bookmarkButton\"\n          (mousedown)=\"createBookmark()\">\n    <span>Bookmark</span></button>\n  <div class=\"arrow-down\">\n    <div class=\"inner-triangle\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CtxToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: { zoom: "zoom", rotate: "rotate", pageHeight: "pageHeight", pageWidth: "pageWidth", canHighlight: "canHighlight", canBookmark: "canBookmark", canComment: "canComment", canDelete: "canDelete", rectangles: "rectangles" }, outputs: { createHighlightEvent: "createHighlightEvent", deleteHighlightEvent: "deleteHighlightEvent", addOrEditCommentEvent: "addOrEditCommentEvent", createBookmarkEvent: "createBookmarkEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbar\" *ngIf=\"rectangle\"\n     [style.top.px]=\"top\"\n     [style.left.px]=\"left\">\n  <button *ngIf=\"canHighlight\"\n          type=\"button\" title=\"Highlight\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight\"\n          (mousedown)=\"createHighlight()\">\n    <span>Highlight</span>\n  </button>\n  <button *ngIf=\"canDelete\"\n          type=\"button\" title=\"Delete\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton\"\n          (mousedown)=\"deleteHighlight()\">\n    <span>Remove</span>\n  </button>\n  <button *ngIf=\"canComment\"\n          type=\"button\" title=\"Comment\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment\"\n          (mousedown)=\"addOrEditComment()\">\n    <span>Comment</span></button>\n  <button *ngIf=\"canBookmark\"\n          type=\"button\" title=\"Bookmark\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark\"\n          id=\"bookmarkButton\"\n          (mousedown)=\"createBookmark()\">\n    <span>Bookmark</span></button>\n  <div class=\"arrow-down\">\n    <div class=\"inner-triangle\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CtxToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CtxToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-ctx-toolbar', template: "<div class=\"toolbar\" *ngIf=\"rectangle\"\n     [style.top.px]=\"top\"\n     [style.left.px]=\"left\">\n  <button *ngIf=\"canHighlight\"\n          type=\"button\" title=\"Highlight\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight\"\n          (mousedown)=\"createHighlight()\">\n    <span>Highlight</span>\n  </button>\n  <button *ngIf=\"canDelete\"\n          type=\"button\" title=\"Delete\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton\"\n          (mousedown)=\"deleteHighlight()\">\n    <span>Remove</span>\n  </button>\n  <button *ngIf=\"canComment\"\n          type=\"button\" title=\"Comment\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment\"\n          (mousedown)=\"addOrEditComment()\">\n    <span>Comment</span></button>\n  <button *ngIf=\"canBookmark\"\n          type=\"button\" title=\"Bookmark\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark\"\n          id=\"bookmarkButton\"\n          (mousedown)=\"createBookmark()\">\n    <span>Bookmark</span></button>\n  <div class=\"arrow-down\">\n    <div class=\"inner-triangle\"></div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { zoom: [{
+        }], ctorParameters: () => [], propDecorators: { zoom: [{
                 type: Input
             }], rotate: [{
                 type: Input
@@ -4947,13 +4626,13 @@ class AnnotationViewComponent {
         this.annotationClick.emit({ annotationId: this.anno.id, editable: true, selected: true });
         this.toolbarEvents.toggleCommentsPanel(true);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationViewComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AnnotationViewComponent, selector: "mv-annotation", inputs: { annotation: "annotation", zoom: "zoom", rotate: "rotate", selectedAnnoId: "selectedAnnoId", pageHeight: "pageHeight", pageWidth: "pageWidth" }, outputs: { update: "update", delete: "delete", annotationClick: "annotationClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container [tabindex]=\"anno.id\">\n  <mv-ctx-toolbar *ngIf=\"selected\"\n                  [canDelete]=\"true\" [canComment]=\"true\"\n                  [rectangles]=\"anno.rectangles\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotate\"\n                  [pageHeight]=\"pageHeight\"\n                  [pageWidth]=\"pageWidth\"\n                  (deleteHighlightEvent)=\"deleteHighlight()\"\n                  (addOrEditCommentEvent)=\"addOrEditComment()\">\n  </mv-ctx-toolbar>\n  <ng-container *ngFor=\"let rectangle of anno.rectangles\">\n    <mv-anno-rectangle\n      (selectEvent)=\"onSelect()\"\n      (updateEvent)=\"onRectangleUpdate($event)\"\n      [selected]=\"selected\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotate\"\n      [pageHeight]=\"pageHeight\"\n      [pageWidth]=\"pageWidth\"\n      [editable]=\"anno.rectangles.length <= 1\"\n      [annoRect]=\"rectangle\"\n      [color]=\"anno.color\">\n    </mv-anno-rectangle>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RectangleComponent, selector: "mv-anno-rectangle", inputs: ["color", "zoom", "rotate", "editable", "pageHeight", "pageWidth", "annoRect", "selected"], outputs: ["selectEvent", "updateEvent"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationViewComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AnnotationViewComponent, selector: "mv-annotation", inputs: { annotation: "annotation", zoom: "zoom", rotate: "rotate", selectedAnnoId: "selectedAnnoId", pageHeight: "pageHeight", pageWidth: "pageWidth" }, outputs: { update: "update", delete: "delete", annotationClick: "annotationClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container [tabindex]=\"anno.id\">\n  <mv-ctx-toolbar *ngIf=\"selected\"\n                  [canDelete]=\"true\" [canComment]=\"true\"\n                  [rectangles]=\"anno.rectangles\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotate\"\n                  [pageHeight]=\"pageHeight\"\n                  [pageWidth]=\"pageWidth\"\n                  (deleteHighlightEvent)=\"deleteHighlight()\"\n                  (addOrEditCommentEvent)=\"addOrEditComment()\">\n  </mv-ctx-toolbar>\n  <ng-container *ngFor=\"let rectangle of anno.rectangles\">\n    <mv-anno-rectangle\n      (selectEvent)=\"onSelect()\"\n      (updateEvent)=\"onRectangleUpdate($event)\"\n      [selected]=\"selected\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotate\"\n      [pageHeight]=\"pageHeight\"\n      [pageWidth]=\"pageWidth\"\n      [editable]=\"anno.rectangles.length <= 1\"\n      [annoRect]=\"rectangle\"\n      [color]=\"anno.color\">\n    </mv-anno-rectangle>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RectangleComponent, selector: "mv-anno-rectangle", inputs: ["color", "zoom", "rotate", "editable", "pageHeight", "pageWidth", "annoRect", "selected"], outputs: ["selectEvent", "updateEvent"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-annotation', template: "<div #container [tabindex]=\"anno.id\">\n  <mv-ctx-toolbar *ngIf=\"selected\"\n                  [canDelete]=\"true\" [canComment]=\"true\"\n                  [rectangles]=\"anno.rectangles\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotate\"\n                  [pageHeight]=\"pageHeight\"\n                  [pageWidth]=\"pageWidth\"\n                  (deleteHighlightEvent)=\"deleteHighlight()\"\n                  (addOrEditCommentEvent)=\"addOrEditComment()\">\n  </mv-ctx-toolbar>\n  <ng-container *ngFor=\"let rectangle of anno.rectangles\">\n    <mv-anno-rectangle\n      (selectEvent)=\"onSelect()\"\n      (updateEvent)=\"onRectangleUpdate($event)\"\n      [selected]=\"selected\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotate\"\n      [pageHeight]=\"pageHeight\"\n      [pageWidth]=\"pageWidth\"\n      [editable]=\"anno.rectangles.length <= 1\"\n      [annoRect]=\"rectangle\"\n      [color]=\"anno.color\">\n    </mv-anno-rectangle>\n  </ng-container>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: i1.Store }]; }, propDecorators: { annotation: [{
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: i1.Store }], propDecorators: { annotation: [{
                 type: Input
             }], zoom: [{
                 type: Input
@@ -4997,13 +4676,13 @@ class AnnotationSetComponent {
     selectAnnotation(selectedAnnotation) {
         this.store.dispatch(new SelectedAnnotation(selectedAnnotation));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationSetComponent, deps: [{ token: i1.Store }, { token: CommentService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AnnotationSetComponent, selector: "mv-annotation-set", inputs: { page: "page", annotations: "annotations", zoom: "zoom", rotate: "rotate", pageHeight: "pageHeight", pageWidth: "pageWidth" }, ngImport: i0, template: "<ng-container *ngFor=\"let annotation of annotations\">\n  <mv-annotation [annotation]=\"annotation\"\n                 [zoom]=\"zoom\"\n                 [rotate]=\"rotate\"\n                 [selectedAnnoId]=\"selectedAnnotation$ | async\"\n                 [pageHeight]=\"pageHeight\"\n                 [pageWidth]=\"pageWidth\"\n                 (update)=\"onAnnotationUpdate($event)\"\n                 (delete)=\"onAnnotationDelete($event)\"\n                 (annotationClick)=\"selectAnnotation($event)\">\n  </mv-annotation>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AnnotationViewComponent, selector: "mv-annotation", inputs: ["annotation", "zoom", "rotate", "selectedAnnoId", "pageHeight", "pageWidth"], outputs: ["update", "delete", "annotationClick"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationSetComponent, deps: [{ token: i1.Store }, { token: CommentService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: AnnotationSetComponent, selector: "mv-annotation-set", inputs: { page: "page", annotations: "annotations", zoom: "zoom", rotate: "rotate", pageHeight: "pageHeight", pageWidth: "pageWidth" }, ngImport: i0, template: "<ng-container *ngFor=\"let annotation of annotations\">\n  <mv-annotation [annotation]=\"annotation\"\n                 [zoom]=\"zoom\"\n                 [rotate]=\"rotate\"\n                 [selectedAnnoId]=\"selectedAnnotation$ | async\"\n                 [pageHeight]=\"pageHeight\"\n                 [pageWidth]=\"pageWidth\"\n                 (update)=\"onAnnotationUpdate($event)\"\n                 (delete)=\"onAnnotationDelete($event)\"\n                 (annotationClick)=\"selectAnnotation($event)\">\n  </mv-annotation>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AnnotationViewComponent, selector: "mv-annotation", inputs: ["annotation", "zoom", "rotate", "selectedAnnoId", "pageHeight", "pageWidth"], outputs: ["update", "delete", "annotationClick"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationSetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-annotation-set', template: "<ng-container *ngFor=\"let annotation of annotations\">\n  <mv-annotation [annotation]=\"annotation\"\n                 [zoom]=\"zoom\"\n                 [rotate]=\"rotate\"\n                 [selectedAnnoId]=\"selectedAnnotation$ | async\"\n                 [pageHeight]=\"pageHeight\"\n                 [pageWidth]=\"pageWidth\"\n                 (update)=\"onAnnotationUpdate($event)\"\n                 (delete)=\"onAnnotationDelete($event)\"\n                 (annotationClick)=\"selectAnnotation($event)\">\n  </mv-annotation>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CommentService }]; }, propDecorators: { page: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: CommentService }], propDecorators: { page: [{
                 type: Input
             }], annotations: [{
                 type: Input
@@ -5074,30 +4753,51 @@ class MetadataLayerComponent {
         this.highlightService.saveAnnotation(rectangles, page);
         this.toolbarEvents.drawModeSubject.next(false);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataLayerComponent, deps: [{ token: i1.Store }, { token: HighlightCreateService }, { token: ToolbarEventService }, { token: ViewerEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: { zoom: "zoom", rotate: "rotate" }, ngImport: i0, template: "<div class=\"pageContainer\">\n  <div  *ngFor=\"let page of pages;  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': page.styles.width,\n       'height.px': page.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"page.styles.height\"\n      [pageWidth]=\"page.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"saveAnnotation($event)\">\n    </mv-box-highlight-create>\n    <mv-ctx-toolbar *ngIf=\"rectangles && highlightPage === (i + 1)\"\n                    [rectangles]=\"rectangles\"\n                    [canBookmark]=\"true\" [canHighlight]=\"true\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotate\"\n                    [pageHeight]=\"page.styles.height\"\n                    [pageWidth]=\"page.styles.width\"\n                    (createBookmarkEvent)=\"createBookmark($event)\"\n                    (createHighlightEvent)=\"createHighlight()\">\n    </mv-ctx-toolbar>\n    <div class=\"pageContainer__page-item\">\n      <mv-annotation-set *ngIf=\"(annoPages$ | async) as annoPages\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotate\"\n                         [pageHeight]=\"page.styles.height\"\n                         [pageWidth]=\"page.styles.width\"\n                         [page]=\"i\" [annotations]=\"annoPages[i + 1]\"></mv-annotation-set>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: BoxHighlightCreateComponent, selector: "mv-box-highlight-create", inputs: ["page", "pageHeight", "pageWidth", "rotate", "zoom", "container"], outputs: ["saveSelection"] }, { kind: "component", type: AnnotationSetComponent, selector: "mv-annotation-set", inputs: ["page", "annotations", "zoom", "rotate", "pageHeight", "pageWidth"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MetadataLayerComponent, deps: [{ token: i1.Store }, { token: HighlightCreateService }, { token: ToolbarEventService }, { token: ViewerEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: { zoom: "zoom", rotate: "rotate" }, ngImport: i0, template: "<div class=\"pageContainer\">\n  <div  *ngFor=\"let page of pages;  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': page.styles.width,\n       'height.px': page.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"page.styles.height\"\n      [pageWidth]=\"page.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"saveAnnotation($event)\">\n    </mv-box-highlight-create>\n    <mv-ctx-toolbar *ngIf=\"rectangles && highlightPage === (i + 1)\"\n                    [rectangles]=\"rectangles\"\n                    [canBookmark]=\"true\" [canHighlight]=\"true\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotate\"\n                    [pageHeight]=\"page.styles.height\"\n                    [pageWidth]=\"page.styles.width\"\n                    (createBookmarkEvent)=\"createBookmark($event)\"\n                    (createHighlightEvent)=\"createHighlight()\">\n    </mv-ctx-toolbar>\n    <div class=\"pageContainer__page-item\">\n      <mv-annotation-set *ngIf=\"(annoPages$ | async) as annoPages\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotate\"\n                         [pageHeight]=\"page.styles.height\"\n                         [pageWidth]=\"page.styles.width\"\n                         [page]=\"i\" [annotations]=\"annoPages[i + 1]\"></mv-annotation-set>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: BoxHighlightCreateComponent, selector: "mv-box-highlight-create", inputs: ["page", "pageHeight", "pageWidth", "rotate", "zoom", "container"], outputs: ["saveSelection"] }, { kind: "component", type: AnnotationSetComponent, selector: "mv-annotation-set", inputs: ["page", "annotations", "zoom", "rotate", "pageHeight", "pageWidth"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MetadataLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MetadataLayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-metadata-layer', template: "<div class=\"pageContainer\">\n  <div  *ngFor=\"let page of pages;  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': page.styles.width,\n       'height.px': page.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"page.styles.height\"\n      [pageWidth]=\"page.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"saveAnnotation($event)\">\n    </mv-box-highlight-create>\n    <mv-ctx-toolbar *ngIf=\"rectangles && highlightPage === (i + 1)\"\n                    [rectangles]=\"rectangles\"\n                    [canBookmark]=\"true\" [canHighlight]=\"true\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotate\"\n                    [pageHeight]=\"page.styles.height\"\n                    [pageWidth]=\"page.styles.width\"\n                    (createBookmarkEvent)=\"createBookmark($event)\"\n                    (createHighlightEvent)=\"createHighlight()\">\n    </mv-ctx-toolbar>\n    <div class=\"pageContainer__page-item\">\n      <mv-annotation-set *ngIf=\"(annoPages$ | async) as annoPages\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotate\"\n                         [pageHeight]=\"page.styles.height\"\n                         [pageWidth]=\"page.styles.width\"\n                         [page]=\"i\" [annotations]=\"annoPages[i + 1]\"></mv-annotation-set>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: HighlightCreateService }, { type: ToolbarEventService }, { type: ViewerEventService }]; }, propDecorators: { zoom: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: HighlightCreateService }, { type: ToolbarEventService }, { type: ViewerEventService }], propDecorators: { zoom: [{
                 type: Input
             }], rotate: [{
                 type: Input
             }] } });
 
 class BookmarksComponent {
+    set bookmarkNodes(value) {
+        this.rebuildTreeForData(value);
+        if (this._bookmarkNodes && this.sortMode !== this.customSort) {
+            this.sortBookmarks();
+        }
+    }
+    ;
+    get bookmarkNodes() {
+        return this._bookmarkNodes;
+    }
+    ;
     constructor(store) {
         this.store = store;
         this.goToDestination = new EventEmitter();
+        this._bookmarkNodes = [];
+        // expansion model tracks expansion state
+        this.expansionModel = new SelectionModel(true);
+        this.isDraggingOn = false;
+        this.isUserdragging = false;
+        this.expandDelay = 1000;
         this.pageLookup = {};
         this.BOOKMARK_CHAR_LIMIT = 30;
+        this.dragNodeExpandOverWaitTimeMs = 300;
         this.options = {
             allowDrag: true,
             allowDrop: true
         };
         this._customSort = 'CUSTOM';
         this._positionSort = 'POSITION';
+        this.hasChild = (_, node) => {
+            return node.children && node.children.length > 0;
+        };
     }
     ngOnInit() {
         this.sortMode = this.customSort;
@@ -5110,11 +4810,6 @@ class BookmarksComponent {
             });
         }));
     }
-    ngOnChanges(changes) {
-        if (changes.bookmarkNodes && this.sortMode !== this.customSort) {
-            this.sortBookmarks();
-        }
-    }
     ngOnDestroy() {
         this.$subscription.unsubscribe();
     }
@@ -5129,37 +4824,18 @@ class BookmarksComponent {
             }));
         });
     }
-    onBookmarkMove({ node, from, to }) {
-        let movedBookmarks = [{
-                ...node,
-                previous: to.index > 0 ? to.parent.children[to.index - 1].id : undefined,
-                parent: to.parent.documentId ? to.parent.id : undefined
-            }];
-        let fromNext = this.getSibling(from, from.index);
-        fromNext = fromNext && fromNext.id === node.previous ? this.getSibling(from, from.index + 1) : fromNext;
-        if (fromNext) {
-            movedBookmarks = [...movedBookmarks, { ...fromNext, previous: node.previous }];
-        }
-        const toNext = this.getSibling(to, to.index + 1);
-        if (toNext) {
-            movedBookmarks = [...movedBookmarks, { ...toNext, previous: node.id }];
-        }
-        this.store.dispatch(new MoveBookmark(movedBookmarks));
-    }
-    deleteBookmark(node) {
+    deleteBookmark2(node) {
         this.customSortBookmarks();
         let next;
-        node = this.tree.treeModel.getNodeById(node.id);
-        if (!node.parent) {
-            node.parent = this.tree.treeModel.virtualRoot;
-        }
-        const siblings = node.parent.children;
-        if (siblings.length > node.index + 1) {
-            next = siblings[node.index + 1].data;
-            next.previous = node.data.previous;
+        const changedData = JSON.parse(JSON.stringify(this.bookmarkNodes));
+        const siblings = this.findNodeSiblings(changedData, node.id);
+        if (siblings && siblings.length > node.index + 1) {
+            next = siblings[node.index + 1];
+            next.previous = node.previous;
         }
+        const toDelete = [node.id, ...getBookmarkChildren(node.children)];
         this.store.dispatch(new DeleteBookmark({
-            deleted: [node.data.id, ...getBookmarkChildren(node.data.children)], updated: next
+            deleted: toDelete, updated: next
         }));
     }
     updateBookmark(bookmark, name) {
@@ -5225,34 +4901,198 @@ class BookmarksComponent {
     }
     positionSortBookmarks() {
         this.bookmarkNodes.sort((a, b) => a.pageNumber === b.pageNumber ? a.yCoordinate - b.yCoordinate : a.pageNumber - b.pageNumber);
-        this.tree.treeModel.update();
-        this.setDragNDrop(false);
+        this.isDraggingOn = false;
+        this.rebuildTreeForData(this.bookmarkNodes);
     }
     customSortBookmarks() {
-        this.bookmarkNodes.sort((a, b) => a.index - b.index);
-        this.tree.treeModel.update();
-        this.setDragNDrop(true);
-    }
-    setDragNDrop(enabled) {
-        this.options = {
-            allowDrag: enabled,
-            allowDrop: enabled
-        };
-    }
-    getSibling(node, index) {
-        return node.parent.children.length > index ? node.parent.children[index] : undefined;
+        if (this.bookmarkNodes.length > 1) {
+            this.bookmarkNodes.sort((a, b) => a.index - b.index);
+        }
+        this.isDraggingOn = true;
+        this.rebuildTreeForData(this.bookmarkNodes);
     }
     scaledY(yCoordinate, height, page) {
         const viewportScale = page.viewportScale / this.zoom;
         return ((height / this.zoom) - yCoordinate) / viewportScale;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarksComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BookmarksComponent, selector: "mv-bookmarks", inputs: { bookmarkNodes: "bookmarkNodes", zoom: "zoom", rotate: "rotate" }, outputs: { goToDestination: "goToDestination" }, viewQueries: [{ propertyName: "tree", first: true, predicate: TreeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<a *ngIf=\"bookmarkNodes?.length === 0\" class=\"highlightedOutlineItem\">No bookmarks created yet</a>\n<tree-root [nodes]=\"bookmarkNodes\" class=\"bookmarks-tree\" [options]=\"options\" (moveNode)=\"onBookmarkMove($event)\">\n  <ng-template #treeNodeTemplate let-node let-index=\"index\">\n    <div class=\"outlineItem\" *ngIf=\"node.data.id !== editableBookmark; else inputBookmark\">\n      <a (click)=\"goToBookmark(node.data)\">\n        {{ node.data.name }}\n      </a>\n      <button class=\"bookmark__rename\" (click)=\"editBookmark(node.data.id)\"></button>\n      <button class=\"bookmark__delete\" (click)=\"deleteBookmark(node)\"></button>\n    </div>\n    <ng-template #inputBookmark>\n      <input #bookmarkName class=\"bookmark__input\" [value]=\"node.data.name\" [maxLength]=\"BOOKMARK_CHAR_LIMIT\">\n      <button class=\"bookmark__save\" (click)=\"updateBookmark(node.data, bookmarkName.value)\"></button>\n    </ng-template>\n  </ng-template>\n</tree-root>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TreeComponent, selector: "Tree, tree-root", inputs: ["nodes", "options", "focused", "state"], outputs: ["toggleExpanded", "activate", "deactivate", "nodeActivate", "nodeDeactivate", "select", "deselect", "focus", "blur", "updateData", "initialized", "moveNode", "copyNode", "loadNodeChildren", "changeFilter", "event", "stateChange"] }] }); }
+    getNode(bookmarks, parentId) {
+        if (typeof bookmarks !== 'undefined') {
+            for (let i = 0; i < bookmarks.length; i++) {
+                if (bookmarks[i].id === parentId) {
+                    return [bookmarks[i]];
+                }
+                const a = this.getNode(bookmarks[i].children, parentId);
+                if (a !== null) {
+                    return a;
+                }
+            }
+        }
+        return null;
+    }
+    drop(event) {
+        if (!event.isPointerOverContainer || (event.previousIndex === event.currentIndex))
+            return;
+        const hasMovedUpTheTree = event.previousIndex > event.currentIndex;
+        const bookmarkNodesString = JSON.stringify(this._bookmarkNodes);
+        const changedData = JSON.parse(bookmarkNodesString);
+        const visibleNodes = this.visibleNodes(this._bookmarkNodes);
+        const toNode = visibleNodes[event.currentIndex];
+        const toNodeSiblings = this.findNodeSiblings(changedData, toNode.id);
+        const toNodeParent = toNodeSiblings[0].parent;
+        const toIndex = toNodeSiblings.findIndex(s => s.id === toNode.id);
+        const fromNode = event.item.data;
+        const fromNodeSiblings = this.findNodeSiblings(changedData, fromNode.id);
+        const fromIndex = fromNodeSiblings.findIndex(n => n.id === fromNode.id);
+        if (this.isToNodeChildOfFromNode(fromNode?.children, toNode))
+            return;
+        if (this.dragNodeInsertToParent) {
+            const indexOfParent = toNodeSiblings.findIndex(element => element.id === toNode.id);
+            const parentNode = toNodeSiblings[indexOfParent];
+            const firstChild = parentNode?.children && parentNode?.children.length > 0 ? parentNode.children[0] : null;
+            let movedBookmarksWithParent = [{ ...fromNode, parent: parentNode.id, previous: null }];
+            if (firstChild) {
+                movedBookmarksWithParent = [...movedBookmarksWithParent, { ...firstChild, previous: fromNode.id }];
+            }
+            let fromNodeSibling = this.getSiblingFromAllSibliings(fromNodeSiblings, fromIndex + 1);
+            const nextFromindexforParent = fromIndex + 1;
+            fromNodeSibling = fromNodeSibling && fromNodeSibling.id === fromNode.previous ? this.getSiblingFromAllSibliings(fromNodeSiblings, nextFromindexforParent + 1) : fromNodeSibling;
+            if (fromNodeSibling && fromNodeSibling.id !== parentNode.id) {
+                movedBookmarksWithParent = [...movedBookmarksWithParent, { ...fromNodeSibling, previous: fromNode.previous }];
+            }
+            let previousSiblingForParentIndex = toIndex - 1;
+            let parentNodeSibling = this.getSiblingFromAllSibliings(toNodeSiblings, previousSiblingForParentIndex);
+            if (parentNodeSibling && parentNodeSibling.id == fromNode.id) {
+                previousSiblingForParentIndex = previousSiblingForParentIndex - 1;
+                if (previousSiblingForParentIndex >= 0) {
+                    parentNodeSibling = this.getSiblingFromAllSibliings(toNodeSiblings, previousSiblingForParentIndex);
+                }
+                else {
+                    parentNodeSibling = null;
+                }
+            }
+            movedBookmarksWithParent = [...movedBookmarksWithParent, { ...parentNode, previous: parentNodeSibling?.id }];
+            const hasParentDups = movedBookmarksWithParent.map(x => x.id).some(function (value, index, array) {
+                return array.indexOf(value) !== array.lastIndexOf(value); // comparing first and last indexes of the same value
+            });
+            if (hasParentDups || movedBookmarksWithParent && movedBookmarksWithParent.length <= 1)
+                return;
+            this.store.dispatch(new MoveBookmark(movedBookmarksWithParent));
+            return;
+        }
+        if (!toNodeSiblings)
+            return;
+        const fromNodePrevious = hasMovedUpTheTree ? toNode.previous : toNode.id;
+        let movedBookmarks = [{
+                ...fromNode,
+                previous: toNode.index > 0 ? fromNodePrevious : undefined,
+                parent: toNodeParent
+            }];
+        let fromNodeSibling = this.getSiblingFromAllSibliings(fromNodeSiblings, fromIndex + 1);
+        const nextFromindex = fromIndex + 1;
+        fromNodeSibling = fromNodeSibling && fromNodeSibling.id === fromNode.previous ? this.getSiblingFromAllSibliings(fromNodeSiblings, nextFromindex + 1) : fromNodeSibling;
+        if (fromNodeSibling) {
+            movedBookmarks = [...movedBookmarks, { ...fromNodeSibling, previous: fromNode.previous }];
+        }
+        let toNodeSiblingIndex = hasMovedUpTheTree ? toIndex : toIndex + 1;
+        let toNodeSibling = this.getSiblingFromAllSibliings(toNodeSiblings, toNodeSiblingIndex);
+        if (toNodeSibling) {
+            movedBookmarks = [...movedBookmarks, { ...toNodeSibling, previous: fromNode.id }];
+        }
+        const hasDups = movedBookmarks.map(x => x.id).some(function (value, index, array) {
+            return array.indexOf(value) !== array.lastIndexOf(value); // comparing first and last indexes of the same value
+        });
+        if (hasDups || movedBookmarks && movedBookmarks.length <= 1)
+            return;
+        this.store.dispatch(new MoveBookmark(movedBookmarks));
+    }
+    getSiblingFromAllSibliings(sibling, index) {
+        return sibling.length > index ? sibling[index] : undefined;
+    }
+    dragStart() {
+        this.dragNodeInsertToParent = false;
+        this.hoveredNode = null;
+        this.isUserdragging = true;
+    }
+    dragEnd() {
+        this.isUserdragging = false;
+    }
+    dragHover(event, node) {
+        if (this.isUserdragging) {
+            const newEvent = event;
+            const percentageX = newEvent.offsetX / newEvent.target.clientWidth;
+            if (percentageX > .55) {
+                this.hoveredNode = node;
+                this.dragNodeInsertToParent = true;
+            }
+            else {
+                this.hoveredNode = null;
+                this.dragNodeInsertToParent = false;
+            }
+        }
+    }
+    dragHoverEnd(event, node) {
+        if (this.isUserdragging) {
+            if (!node || this.hoveredNode?.id !== node.id) {
+                this.dragNodeInsertToParent = false;
+                this.hoveredNode = null;
+            }
+        }
+    }
+    onNodeExpand(node) {
+        const isExpanded = this.treeControl.isExpanded(node);
+        return isExpanded ? "toggle-children-wrapper-expanded" : "toggle-children-wrapper-collapsed";
+    }
+    visibleNodes(bookmarks) {
+        const result = [];
+        function addExpandedChildren(node, expanded) {
+            result.push(node);
+            if (expanded.some(bookmark => bookmark && bookmark.id === node.id) && node.children) {
+                node.children.map((child) => addExpandedChildren(child, expanded));
+            }
+        }
+        bookmarks.forEach((node) => {
+            addExpandedChildren(node, this.treeControl.expansionModel.selected);
+        });
+        return result;
+    }
+    findNodeSiblings(arr, id) {
+        let result, subResult;
+        arr.forEach((item, i) => {
+            if (item.id === id) {
+                result = arr;
+            }
+            else if (item?.children) {
+                subResult = this.findNodeSiblings(item.children, id);
+                if (subResult)
+                    result = subResult;
+            }
+        });
+        return result;
+    }
+    rebuildTreeForData(data) {
+        this._bookmarkNodes = data ?? [];
+        this.datasource = new ArrayDataSource(this._bookmarkNodes);
+        this.treeControl = new NestedTreeControl(node => node.children);
+        this.treeControl.dataNodes = this._bookmarkNodes;
+        this.expansionModel.selected.forEach((bookmark) => {
+            const node = this.treeControl.dataNodes.find((n) => n.id === bookmark.id);
+            this.treeControl.expand(node);
+        });
+    }
+    isToNodeChildOfFromNode(fromNodeChildren, toNode) {
+        if (!fromNodeChildren) {
+            return false;
+        }
+        const result = this.getNode(fromNodeChildren, toNode.id);
+        return result ? true : false;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BookmarksComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: BookmarksComponent, selector: "mv-bookmarks", inputs: { bookmarkNodes: "bookmarkNodes", zoom: "zoom", rotate: "rotate" }, outputs: { goToDestination: "goToDestination" }, ngImport: i0, template: "<a *ngIf=\"bookmarkNodes?.length === 0\" class=\"highlightedOutlineItem\"\n  >No bookmarks created yet</a\n>\n<cdk-tree\n  cdkDropList\n  [cdkDropListDisabled]=\"!isDraggingOn\"\n  class=\"bookmarks-tree\"\n  *ngIf=\"datasource\"\n  [dataSource]=\"datasource\"\n  [treeControl]=\"treeControl\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <!-- This is the tree node template for leaf nodes -->\n  <cdk-nested-tree-node class=\"node-wrapper\" *cdkTreeNodeDef=\"let node\">\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n  </cdk-nested-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <cdk-nested-tree-node\n    class=\"node-wrapper\"\n    *cdkTreeNodeDef=\"let node; when: hasChild\"\n  >\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark2\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <span\n            cdkTreeNodeToggle\n            class=\"toggle-children-wrapper\"\n            [ngClass]=\"onNodeExpand(node)\"\n            ><span class=\"toggle-children\"></span\n          ></span>\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark2>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n    <div class=\"nested-tree-node-children\" *ngIf=\"treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i3.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i3.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i3.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i3.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "directive", type: i4$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BookmarksComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-bookmarks', template: "<a *ngIf=\"bookmarkNodes?.length === 0\" class=\"highlightedOutlineItem\">No bookmarks created yet</a>\n<tree-root [nodes]=\"bookmarkNodes\" class=\"bookmarks-tree\" [options]=\"options\" (moveNode)=\"onBookmarkMove($event)\">\n  <ng-template #treeNodeTemplate let-node let-index=\"index\">\n    <div class=\"outlineItem\" *ngIf=\"node.data.id !== editableBookmark; else inputBookmark\">\n      <a (click)=\"goToBookmark(node.data)\">\n        {{ node.data.name }}\n      </a>\n      <button class=\"bookmark__rename\" (click)=\"editBookmark(node.data.id)\"></button>\n      <button class=\"bookmark__delete\" (click)=\"deleteBookmark(node)\"></button>\n    </div>\n    <ng-template #inputBookmark>\n      <input #bookmarkName class=\"bookmark__input\" [value]=\"node.data.name\" [maxLength]=\"BOOKMARK_CHAR_LIMIT\">\n      <button class=\"bookmark__save\" (click)=\"updateBookmark(node.data, bookmarkName.value)\"></button>\n    </ng-template>\n  </ng-template>\n</tree-root>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { bookmarkNodes: [{
+            args: [{ selector: 'mv-bookmarks', template: "<a *ngIf=\"bookmarkNodes?.length === 0\" class=\"highlightedOutlineItem\"\n  >No bookmarks created yet</a\n>\n<cdk-tree\n  cdkDropList\n  [cdkDropListDisabled]=\"!isDraggingOn\"\n  class=\"bookmarks-tree\"\n  *ngIf=\"datasource\"\n  [dataSource]=\"datasource\"\n  [treeControl]=\"treeControl\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <!-- This is the tree node template for leaf nodes -->\n  <cdk-nested-tree-node class=\"node-wrapper\" *cdkTreeNodeDef=\"let node\">\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n  </cdk-nested-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <cdk-nested-tree-node\n    class=\"node-wrapper\"\n    *cdkTreeNodeDef=\"let node; when: hasChild\"\n  >\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark2\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <span\n            cdkTreeNodeToggle\n            class=\"toggle-children-wrapper\"\n            [ngClass]=\"onNodeExpand(node)\"\n            ><span class=\"toggle-children\"></span\n          ></span>\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark2>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n    <div class=\"nested-tree-node-children\" *ngIf=\"treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n" }]
+        }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { bookmarkNodes: [{
                 type: Input
             }], zoom: [{
                 type: Input
@@ -5260,9 +5100,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], goToDestination: [{
                 type: Output
-            }], tree: [{
-                type: ViewChild,
-                args: [TreeComponent]
             }] } });
 
 class OutlineItemComponent {
@@ -5293,10 +5130,10 @@ class OutlineItemComponent {
     showHighlightOutlineCss() {
         return this.isCurrentSection ? 'highlightedOutlineItem' : 'outlineItem';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OutlineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OutlineItemComponent, selector: "mv-outline-item", inputs: { outline: "outline", currentPageNumber: "currentPageNumber", isCurrentSection: "isCurrentSection", endPage: "endPage" }, outputs: { navigationEvent: "navigationEvent" }, ngImport: i0, template: "<div class=\"outlineItem\">\n  <div *ngIf=\"outline.items.length > 0\"\n       [ngClass]=\"{ 'outlineItemToggler': true, 'outlineItemsHidden': !showOutlineItems }\"\n       (click)=\"toggleOutline()\"\n       (keyup.enter)=\"toggleOutline()\" tabindex=\"0\"></div>\n  <a (click)=\"goToDestination(outline?.dest)\"\n     (keyup.enter)=\"goToDestination(outline?.dest)\"\n     [style.font-weight]=\"outline.bold ? 'bold' : ''\"\n     [style.font-style]=\"outline.italic ? 'italic' : ''\"\n     [ngClass]=\"showHighlightOutlineCss()\"\n     tabindex=\"0\">\n    <div style=\"text-align:left;\" [ngClass]=\"showHighlightOutlineCss()\">\n      {{ outline.title }}\n      <span style=\"float:right;\">\n        {{ outline.pageNumber }}\n      </span>\n    </div>\n  </a>\n  \n  <div *ngIf=\"outline.items.length > 0\" class=\"outlineItems\">\n    <div *ngFor=\"let outlineItem of outline.items; index as i\">\n      <mv-outline-item\n        [outline]=\"outlineItem\" \n        [currentPageNumber]= \"currentPageNumber\" \n        [isCurrentSection]= \"isViewedItem(outlineItem, outline.items[i+1])\"\n        [endPage]=\"findEndPage(outline.items[i+1])\"\n        (navigationEvent)=\"goToDestination($event)\">\n      </mv-outline-item>\n    </div>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OutlineItemComponent, selector: "mv-outline-item", inputs: ["outline", "currentPageNumber", "isCurrentSection", "endPage"], outputs: ["navigationEvent"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: OutlineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: OutlineItemComponent, selector: "mv-outline-item", inputs: { outline: "outline", currentPageNumber: "currentPageNumber", isCurrentSection: "isCurrentSection", endPage: "endPage" }, outputs: { navigationEvent: "navigationEvent" }, ngImport: i0, template: "<div class=\"outlineItem\">\n  <div *ngIf=\"outline.items.length > 0\"\n       [ngClass]=\"{ 'outlineItemToggler': true, 'outlineItemsHidden': !showOutlineItems }\"\n       (click)=\"toggleOutline()\"\n       (keyup.enter)=\"toggleOutline()\" tabindex=\"0\"></div>\n  <a (click)=\"goToDestination(outline?.dest)\"\n     (keyup.enter)=\"goToDestination(outline?.dest)\"\n     [style.font-weight]=\"outline.bold ? 'bold' : ''\"\n     [style.font-style]=\"outline.italic ? 'italic' : ''\"\n     [ngClass]=\"showHighlightOutlineCss()\"\n     tabindex=\"0\">\n    <div style=\"text-align:left;\" [ngClass]=\"showHighlightOutlineCss()\">\n      {{ outline.title }}\n      <span style=\"float:right;\">\n        {{ outline.pageNumber }}\n      </span>\n    </div>\n  </a>\n  \n  <div *ngIf=\"outline.items.length > 0\" class=\"outlineItems\">\n    <div *ngFor=\"let outlineItem of outline.items; index as i\">\n      <mv-outline-item\n        [outline]=\"outlineItem\" \n        [currentPageNumber]= \"currentPageNumber\" \n        [isCurrentSection]= \"isViewedItem(outlineItem, outline.items[i+1])\"\n        [endPage]=\"findEndPage(outline.items[i+1])\"\n        (navigationEvent)=\"goToDestination($event)\">\n      </mv-outline-item>\n    </div>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OutlineItemComponent, selector: "mv-outline-item", inputs: ["outline", "currentPageNumber", "isCurrentSection", "endPage"], outputs: ["navigationEvent"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OutlineItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: OutlineItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-outline-item', template: "<div class=\"outlineItem\">\n  <div *ngIf=\"outline.items.length > 0\"\n       [ngClass]=\"{ 'outlineItemToggler': true, 'outlineItemsHidden': !showOutlineItems }\"\n       (click)=\"toggleOutline()\"\n       (keyup.enter)=\"toggleOutline()\" tabindex=\"0\"></div>\n  <a (click)=\"goToDestination(outline?.dest)\"\n     (keyup.enter)=\"goToDestination(outline?.dest)\"\n     [style.font-weight]=\"outline.bold ? 'bold' : ''\"\n     [style.font-style]=\"outline.italic ? 'italic' : ''\"\n     [ngClass]=\"showHighlightOutlineCss()\"\n     tabindex=\"0\">\n    <div style=\"text-align:left;\" [ngClass]=\"showHighlightOutlineCss()\">\n      {{ outline.title }}\n      <span style=\"float:right;\">\n        {{ outline.pageNumber }}\n      </span>\n    </div>\n  </a>\n  \n  <div *ngIf=\"outline.items.length > 0\" class=\"outlineItems\">\n    <div *ngFor=\"let outlineItem of outline.items; index as i\">\n      <mv-outline-item\n        [outline]=\"outlineItem\" \n        [currentPageNumber]= \"currentPageNumber\" \n        [isCurrentSection]= \"isViewedItem(outlineItem, outline.items[i+1])\"\n        [endPage]=\"findEndPage(outline.items[i+1])\"\n        (navigationEvent)=\"goToDestination($event)\">\n      </mv-outline-item>\n    </div>\n  </div>\n</div>\n\n" }]
         }], propDecorators: { outline: [{
@@ -5353,13 +5190,13 @@ class SideBarComponent {
     findEndPage(next) {
         return next === undefined ? Number.MAX_SAFE_INTEGER : next.pageNumber;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SideBarComponent, deps: [{ token: ViewerEventService }, { token: i1.Store }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SideBarComponent, selector: "mv-side-bar", inputs: { annotationsEnabled: "annotationsEnabled", outline: "outline", url: "url", zoom: "zoom", rotate: "rotate", currentPageNumber: "currentPageNumber" }, viewQueries: [{ propertyName: "bookmarks", first: true, predicate: BookmarksComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"toolbarSidebar\">\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton toggled\"\n  >\n    <button\n      id=\"sortBookmarkPosition\"\n      class=\"splitToolbarButton left bookmark__sort__position\"\n      (click)=\"bookmarks.sort(bookmarks.positionSort)\"\n      title=\"Order by place in document\"\n    ></button>\n    <button\n      id=\"sortBookmarkCustom\"\n      class=\"splitToolbarButton left bookmark__sort__custom\"\n      (click)=\"bookmarks.sort(bookmarks.customSort)\"\n      title=\"Order manually\"\n    ></button>\n  </div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton right\"\n  >\n    <button\n      id=\"addBookmark\"\n      class=\"toolbarButton addBookmark\"\n      (click)=\"bookmarks.onAddBookmarkClick()\"\n      title=\"Add bookmark\"\n      tabindex=\"3\"\n      data-l10n-id=\"addBookmark\"\n    >\n      <span data-l10n-id=\"addBookmark_label\">{{\n        \"Add bookmark\" | rpxTranslate\n      }}</span>\n    </button>\n  </div>\n</div>\n<div id=\"sidebarContent\">\n  <div id=\"outlineView\" class=\"outlineWithDeepNesting\">\n    <div class=\"outlineItem\" *ngIf=\"selectedView === 'outline'\">\n      <mv-outline-item\n        *ngFor=\"let outlineItem of outline; index as i\"\n        [outline]=\"outlineItem\"\n        [currentPageNumber]=\"currentPageNumber\"\n        [isCurrentSection]=\"isViewedItem(outlineItem, outline[i + 1])\"\n        [endPage]=\"findEndPage(outline[i + 1])\"\n        (navigationEvent)=\"goToDestination($event)\"\n      ></mv-outline-item>\n    </div>\n    <div\n      *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n      id=\"bookmarkContainer\"\n    >\n      <mv-bookmarks\n        [bookmarkNodes]=\"bookmarkNodes$ | async\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        (goToDestination)=\"goToDestination($event)\"\n      ></mv-bookmarks>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BookmarksComponent, selector: "mv-bookmarks", inputs: ["bookmarkNodes", "zoom", "rotate"], outputs: ["goToDestination"] }, { kind: "component", type: OutlineItemComponent, selector: "mv-outline-item", inputs: ["outline", "currentPageNumber", "isCurrentSection", "endPage"], outputs: ["navigationEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SideBarComponent, deps: [{ token: ViewerEventService }, { token: i1.Store }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: SideBarComponent, selector: "mv-side-bar", inputs: { annotationsEnabled: "annotationsEnabled", outline: "outline", url: "url", zoom: "zoom", rotate: "rotate", currentPageNumber: "currentPageNumber" }, viewQueries: [{ propertyName: "bookmarks", first: true, predicate: BookmarksComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"toolbarSidebar\">\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton toggled\"\n  >\n    <button\n      id=\"sortBookmarkPosition\"\n      class=\"splitToolbarButton left bookmark__sort__position\"\n      (click)=\"bookmarks.sort(bookmarks.positionSort)\"\n      title=\"Order by place in document\"\n    ></button>\n    <button\n      id=\"sortBookmarkCustom\"\n      class=\"splitToolbarButton left bookmark__sort__custom\"\n      (click)=\"bookmarks.sort(bookmarks.customSort)\"\n      title=\"Order manually\"\n    ></button>\n  </div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton right\"\n  >\n    <button\n      id=\"addBookmark\"\n      class=\"toolbarButton addBookmark\"\n      (click)=\"bookmarks.onAddBookmarkClick()\"\n      title=\"Add bookmark\"\n      tabindex=\"3\"\n      data-l10n-id=\"addBookmark\"\n    >\n      <span data-l10n-id=\"addBookmark_label\">{{\n        \"Add bookmark\" | rpxTranslate\n      }}</span>\n    </button>\n  </div>\n</div>\n<div id=\"sidebarContent\">\n  <div id=\"outlineView\" class=\"outlineWithDeepNesting\">\n    <div class=\"outlineItem\" *ngIf=\"selectedView === 'outline'\">\n      <mv-outline-item\n        *ngFor=\"let outlineItem of outline; index as i\"\n        [outline]=\"outlineItem\"\n        [currentPageNumber]=\"currentPageNumber\"\n        [isCurrentSection]=\"isViewedItem(outlineItem, outline[i + 1])\"\n        [endPage]=\"findEndPage(outline[i + 1])\"\n        (navigationEvent)=\"goToDestination($event)\"\n      ></mv-outline-item>\n    </div>\n    <div\n      *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n      id=\"bookmarkContainer\"\n    >\n      <mv-bookmarks\n        [bookmarkNodes]=\"bookmarkNodes$ | async\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        (goToDestination)=\"goToDestination($event)\"\n      ></mv-bookmarks>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BookmarksComponent, selector: "mv-bookmarks", inputs: ["bookmarkNodes", "zoom", "rotate"], outputs: ["goToDestination"] }, { kind: "component", type: OutlineItemComponent, selector: "mv-outline-item", inputs: ["outline", "currentPageNumber", "isCurrentSection", "endPage"], outputs: ["navigationEvent"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SideBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SideBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-side-bar', template: "<div id=\"toolbarSidebar\">\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton toggled\"\n  >\n    <button\n      id=\"sortBookmarkPosition\"\n      class=\"splitToolbarButton left bookmark__sort__position\"\n      (click)=\"bookmarks.sort(bookmarks.positionSort)\"\n      title=\"Order by place in document\"\n    ></button>\n    <button\n      id=\"sortBookmarkCustom\"\n      class=\"splitToolbarButton left bookmark__sort__custom\"\n      (click)=\"bookmarks.sort(bookmarks.customSort)\"\n      title=\"Order manually\"\n    ></button>\n  </div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton right\"\n  >\n    <button\n      id=\"addBookmark\"\n      class=\"toolbarButton addBookmark\"\n      (click)=\"bookmarks.onAddBookmarkClick()\"\n      title=\"Add bookmark\"\n      tabindex=\"3\"\n      data-l10n-id=\"addBookmark\"\n    >\n      <span data-l10n-id=\"addBookmark_label\">{{\n        \"Add bookmark\" | rpxTranslate\n      }}</span>\n    </button>\n  </div>\n</div>\n<div id=\"sidebarContent\">\n  <div id=\"outlineView\" class=\"outlineWithDeepNesting\">\n    <div class=\"outlineItem\" *ngIf=\"selectedView === 'outline'\">\n      <mv-outline-item\n        *ngFor=\"let outlineItem of outline; index as i\"\n        [outline]=\"outlineItem\"\n        [currentPageNumber]=\"currentPageNumber\"\n        [isCurrentSection]=\"isViewedItem(outlineItem, outline[i + 1])\"\n        [endPage]=\"findEndPage(outline[i + 1])\"\n        (navigationEvent)=\"goToDestination($event)\"\n      ></mv-outline-item>\n    </div>\n    <div\n      *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n      id=\"bookmarkContainer\"\n    >\n      <mv-bookmarks\n        [bookmarkNodes]=\"bookmarkNodes$ | async\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        (goToDestination)=\"goToDestination($event)\"\n      ></mv-bookmarks>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ViewerEventService }, { type: i1.Store }, { type: ToolbarEventService }]; }, propDecorators: { annotationsEnabled: [{
+        }], ctorParameters: () => [{ type: ViewerEventService }, { type: i1.Store }, { type: ToolbarEventService }], propDecorators: { annotationsEnabled: [{
                 type: Input
             }], outline: [{
                 type: Input
@@ -5408,15 +5245,15 @@ class GrabNDragDirective {
     onWindowPointerUp() {
         this.pointerDown = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GrabNDragDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GrabNDragDirective, selector: "[mvGrabNDrag]", inputs: { dragEnabled: "dragEnabled", dragX: "dragX" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "window:pointermove": "onPointerMove($event)", "window:pointerup": "onWindowPointerUp()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: GrabNDragDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.8", type: GrabNDragDirective, selector: "[mvGrabNDrag]", inputs: { dragEnabled: "dragEnabled", dragX: "dragX" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "window:pointermove": "onPointerMove($event)", "window:pointerup": "onWindowPointerUp()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GrabNDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: GrabNDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mvGrabNDrag]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { dragEnabled: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { dragEnabled: [{
                 type: Input
             }], dragX: [{
                 type: Input
@@ -5515,15 +5352,15 @@ class HighlightCreateDirective {
             }
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightCreateDirective, deps: [{ token: i0.ElementRef }, { token: ToolbarEventService }, { token: ViewerEventService }, { token: HighlightCreateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HighlightCreateDirective, selector: "[mvCreateTextHighlight]", host: { listeners: { "mouseup": "onMouseUp($event)", "mousedown": "onPdfViewerClick($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: HighlightCreateDirective, deps: [{ token: i0.ElementRef }, { token: ToolbarEventService }, { token: ViewerEventService }, { token: HighlightCreateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.8", type: HighlightCreateDirective, selector: "[mvCreateTextHighlight]", host: { listeners: { "mouseup": "onMouseUp($event)", "mousedown": "onPdfViewerClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightCreateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: HighlightCreateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mvCreateTextHighlight]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ToolbarEventService }, { type: ViewerEventService }, { type: HighlightCreateService }, { type: i1.Store }]; }, propDecorators: { onMouseUp: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ToolbarEventService }, { type: ViewerEventService }, { type: HighlightCreateService }, { type: i1.Store }], propDecorators: { onMouseUp: [{
                 type: HostListener,
                 args: ['mouseup', ['$event']]
             }], onPdfViewerClick: [{
@@ -5593,13 +5430,13 @@ class RedactionComponent {
         URL.revokeObjectURL(url);
         this.store.dispatch(new ResetRedactedDocument());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionComponent, deps: [{ token: i1.Store }, { token: ViewerEventService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RedactionComponent, selector: "mv-redactions", inputs: { zoom: "zoom", rotate: "rotate" }, ngImport: i0, template: "<div class=\"pageContainer\">\n  <div *ngFor=\"let redaction of (redactionsPerPage$ | async);  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': redaction.styles.width,\n       'height.px': redaction.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"redaction.styles.height\"\n      [pageWidth]=\"redaction.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"markBoxRedaction($event)\">\n    </mv-box-highlight-create>\n    <div class=\"pageContainer__page-item\">\n      <ng-container *ngFor=\"let anno of redaction.anno\">\n        <!--  TODO rename this to selection -->\n        <mv-annotation [annotation]=\"anno\"\n                       [zoom]=\"zoom\"\n                       [rotate]=\"rotate\"\n                       [selectedAnnoId]=\"selectedRedaction$ | async\"\n                       [pageHeight]=\"redaction.styles.height\"\n                       [pageWidth]=\"redaction.styles.width\"\n                       (update)=\"onMarkerUpdate($event)\"\n                       (delete)=\"onMarkerDelete($event)\"\n                       (annotationClick)=\"selectRedaction($event)\">\n        </mv-annotation>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AnnotationViewComponent, selector: "mv-annotation", inputs: ["annotation", "zoom", "rotate", "selectedAnnoId", "pageHeight", "pageWidth"], outputs: ["update", "delete", "annotationClick"] }, { kind: "component", type: BoxHighlightCreateComponent, selector: "mv-box-highlight-create", inputs: ["page", "pageHeight", "pageWidth", "rotate", "zoom", "container"], outputs: ["saveSelection"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionComponent, deps: [{ token: i1.Store }, { token: ViewerEventService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: RedactionComponent, selector: "mv-redactions", inputs: { zoom: "zoom", rotate: "rotate" }, ngImport: i0, template: "<div class=\"pageContainer\">\n  <div *ngFor=\"let redaction of (redactionsPerPage$ | async);  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': redaction.styles.width,\n       'height.px': redaction.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"redaction.styles.height\"\n      [pageWidth]=\"redaction.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"markBoxRedaction($event)\">\n    </mv-box-highlight-create>\n    <div class=\"pageContainer__page-item\">\n      <ng-container *ngFor=\"let anno of redaction.anno\">\n        <!--  TODO rename this to selection -->\n        <mv-annotation [annotation]=\"anno\"\n                       [zoom]=\"zoom\"\n                       [rotate]=\"rotate\"\n                       [selectedAnnoId]=\"selectedRedaction$ | async\"\n                       [pageHeight]=\"redaction.styles.height\"\n                       [pageWidth]=\"redaction.styles.width\"\n                       (update)=\"onMarkerUpdate($event)\"\n                       (delete)=\"onMarkerDelete($event)\"\n                       (annotationClick)=\"selectRedaction($event)\">\n        </mv-annotation>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: AnnotationViewComponent, selector: "mv-annotation", inputs: ["annotation", "zoom", "rotate", "selectedAnnoId", "pageHeight", "pageWidth"], outputs: ["update", "delete", "annotationClick"] }, { kind: "component", type: BoxHighlightCreateComponent, selector: "mv-box-highlight-create", inputs: ["page", "pageHeight", "pageWidth", "rotate", "zoom", "container"], outputs: ["saveSelection"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-redactions', template: "<div class=\"pageContainer\">\n  <div *ngFor=\"let redaction of (redactionsPerPage$ | async);  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': redaction.styles.width,\n       'height.px': redaction.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"redaction.styles.height\"\n      [pageWidth]=\"redaction.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"markBoxRedaction($event)\">\n    </mv-box-highlight-create>\n    <div class=\"pageContainer__page-item\">\n      <ng-container *ngFor=\"let anno of redaction.anno\">\n        <!--  TODO rename this to selection -->\n        <mv-annotation [annotation]=\"anno\"\n                       [zoom]=\"zoom\"\n                       [rotate]=\"rotate\"\n                       [selectedAnnoId]=\"selectedRedaction$ | async\"\n                       [pageHeight]=\"redaction.styles.height\"\n                       [pageWidth]=\"redaction.styles.width\"\n                       (update)=\"onMarkerUpdate($event)\"\n                       (delete)=\"onMarkerDelete($event)\"\n                       (annotationClick)=\"selectRedaction($event)\">\n        </mv-annotation>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: ViewerEventService }, { type: ToolbarEventService }]; }, propDecorators: { zoom: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: ViewerEventService }, { type: ToolbarEventService }], propDecorators: { zoom: [{
                 type: Input
             }], rotate: [{
                 type: Input
@@ -5612,13 +5449,13 @@ class BookmarkIconsComponent {
     ngOnInit() {
         this.bookmarksPerPage$ = this.store.pipe(select(getBookmarksPerPage));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarkIconsComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BookmarkIconsComponent, selector: "mv-bookmark-icons", inputs: { zoom: "zoom", rotate: "rotate" }, ngImport: i0, template: "<div class=\"pageContainer\">\n  <div *ngFor=\"let bookmarks of (bookmarksPerPage$ | async);  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n         'width.px': bookmarks.styles.width,\n         'height.px': bookmarks.styles.height\n       }\">\n    <div class=\"pageContainer__page-item\">\n      <ng-container *ngFor=\"let bMrk of bookmarks.bookmark\">\n        <div class=\"bookmark__here\"\n           [style.width]=\"16 * zoom + 'px'\"\n           [style.height]=\"24 * zoom + 'px'\"\n           [style.top]=\"bMrk.yCoordinate * zoom + 'px'\"\n           [title]=\"bMrk.name\">\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BookmarkIconsComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: BookmarkIconsComponent, selector: "mv-bookmark-icons", inputs: { zoom: "zoom", rotate: "rotate" }, ngImport: i0, template: "<div class=\"pageContainer\">\n  <div *ngFor=\"let bookmarks of (bookmarksPerPage$ | async);  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n         'width.px': bookmarks.styles.width,\n         'height.px': bookmarks.styles.height\n       }\">\n    <div class=\"pageContainer__page-item\">\n      <ng-container *ngFor=\"let bMrk of bookmarks.bookmark\">\n        <div class=\"bookmark__here\"\n           [style.width]=\"16 * zoom + 'px'\"\n           [style.height]=\"24 * zoom + 'px'\"\n           [style.top]=\"bMrk.yCoordinate * zoom + 'px'\"\n           [title]=\"bMrk.name\">\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarkIconsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BookmarkIconsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-bookmark-icons', template: "<div class=\"pageContainer\">\n  <div *ngFor=\"let bookmarks of (bookmarksPerPage$ | async);  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n         'width.px': bookmarks.styles.width,\n         'height.px': bookmarks.styles.height\n       }\">\n    <div class=\"pageContainer__page-item\">\n      <ng-container *ngFor=\"let bMrk of bookmarks.bookmark\">\n        <div class=\"bookmark__here\"\n           [style.width]=\"16 * zoom + 'px'\"\n           [style.height]=\"24 * zoom + 'px'\"\n           [style.top]=\"bMrk.yCoordinate * zoom + 'px'\"\n           [title]=\"bMrk.name\">\n        </div>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { zoom: [{
+        }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { zoom: [{
                 type: Input
             }], rotate: [{
                 type: Input
@@ -5639,13 +5476,13 @@ class ParticipantsListComponent {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ParticipantsListComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ParticipantsListComponent, selector: "mv-participants-list", ngImport: i0, template: "<div class=\"comments-panel comment-container icp-mode\" [ngClass]=\"{'expanded': showParticipantsList }\">\n\n  <div class=\"participant__card no-shadow\">\n    <p class=\"participant__name\">All Participants</p>\n  </div>\n\n  <div *ngIf=\"(presenter$ | async)?.username !== ''\" class=\"participant__card\">\n    <div class=\"participant__header\"> Presenting </div>\n    <p class=\"participant__name\">{{(presenter$ | async)?.username}}</p>\n  </div>\n\n  <div *ngIf=\"(participants$ | async).length > 1\" class=\"participant__card\">\n    <div class=\"participant__header\">Following</div>\n    <ng-container *ngFor=\"let participant of (participants$ | async)\">\n        <p *ngIf=\"participant.id !== (presenter$ | async)?.id\" class=\"participant__name\">{{participant.username}}</p>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ParticipantsListComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ParticipantsListComponent, selector: "mv-participants-list", ngImport: i0, template: "<div class=\"comments-panel comment-container icp-mode\" [ngClass]=\"{'expanded': showParticipantsList }\">\n\n  <div class=\"participant__card no-shadow\">\n    <p class=\"participant__name\">All Participants</p>\n  </div>\n\n  <div *ngIf=\"(presenter$ | async)?.username !== ''\" class=\"participant__card\">\n    <div class=\"participant__header\"> Presenting </div>\n    <p class=\"participant__name\">{{(presenter$ | async)?.username}}</p>\n  </div>\n\n  <div *ngIf=\"(participants$ | async).length > 1\" class=\"participant__card\">\n    <div class=\"participant__header\">Following</div>\n    <ng-container *ngFor=\"let participant of (participants$ | async)\">\n        <p *ngIf=\"participant.id !== (presenter$ | async)?.id\" class=\"participant__name\">{{participant.username}}</p>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ParticipantsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ParticipantsListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-participants-list', template: "<div class=\"comments-panel comment-container icp-mode\" [ngClass]=\"{'expanded': showParticipantsList }\">\n\n  <div class=\"participant__card no-shadow\">\n    <p class=\"participant__name\">All Participants</p>\n  </div>\n\n  <div *ngIf=\"(presenter$ | async)?.username !== ''\" class=\"participant__card\">\n    <div class=\"participant__header\"> Presenting </div>\n    <p class=\"participant__name\">{{(presenter$ | async)?.username}}</p>\n  </div>\n\n  <div *ngIf=\"(participants$ | async).length > 1\" class=\"participant__card\">\n    <div class=\"participant__header\">Following</div>\n    <ng-container *ngFor=\"let participant of (participants$ | async)\">\n        <p *ngIf=\"participant.id !== (presenter$ | async)?.id\" class=\"participant__name\">{{participant.username}}</p>\n    </ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: i1.Store }]; } });
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: i1.Store }] });
 
 class PdfViewerComponent {
     constructor(store, icpStore, pdfJsWrapperFactory, printService, toolbarEvents, viewerEvents, icpService, toolbarButtons) {
@@ -5811,13 +5648,13 @@ class PdfViewerComponent {
     getCurrentPageNumber() {
         return this.pdfWrapper.getPageNumber();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1.Store }, { token: i1.Store }, { token: PdfJsWrapperFactory }, { token: PrintService }, { token: ToolbarEventService }, { token: ViewerEventService }, { token: IcpService }, { token: ToolbarButtonVisibilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: { downloadUrl: "downloadUrl", url: "url", downloadFileName: "downloadFileName", enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", annotationSet: "annotationSet", enableRedactSearch: "enableRedactSearch", height: "height", caseId: "caseId", searchBarHidden: "searchBarHidden" }, outputs: { mediaLoadStatus: "mediaLoadStatus", pdfViewerException: "pdfViewerException", documentTitle: "documentTitle" }, viewQueries: [{ propertyName: "viewerContainer", first: true, predicate: ["viewerContainer"], descendants: true, static: true }, { propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mv-side-bar\n  *ngIf=\"toolbarEvents.sidebarOpen\"\n  id=\"sidebarContainer\"\n  [url]=\"url\"\n  [zoom]=\"zoom\"\n  [rotate]=\"rotation\"\n  [outline]=\"documentOutline\"\n  [annotationsEnabled]=\"enableAnnotations\"\n  [currentPageNumber]=\"getCurrentPageNumber()\"\n>\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n  class=\"pdfContainer\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ pdfContainer: true, hidden: errorMessage }\"\n>\n  <mv-redaction-search-bar></mv-redaction-search-bar>\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"\n      (showCommentsPanel || showIcpParticipantsList) &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [class.grabNDrag]=\"enableGrabNDrag\"\n  >\n    <div\n      #pdfViewer\n      class=\"pdfViewer\"\n      mvCreateTextHighlight\n      [ngClass]=\"{\n        hidden: loadingDocument,\n        highlightMode: highlightMode | async,\n        drawMode: drawMode | async\n      }\"\n    ></div>\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\" [rotate]=\"rotation\"> </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set\n    [contentScrollTop]=\"viewerContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"pdfViewer.offsetHeight\"\n    [pageHeights]=\"pageHeights\"\n  >\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">\n      {{ \"Loading...\" | rpxTranslate}}{{\n        loadingDocumentProgress ? loadingDocumentProgress + \"%\" : \"\"\n      }}\n    </h3>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar" }, { kind: "component", type: CommentSetComponent, selector: "mv-comment-set", inputs: ["annotationSet", "zoom", "rotate", "height", "pageHeights", "contentScrollTop"] }, { kind: "component", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: ["showCommentSummary"], outputs: ["showCommentSummaryDialog"] }, { kind: "component", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: ["zoom", "rotate"] }, { kind: "component", type: SideBarComponent, selector: "mv-side-bar", inputs: ["annotationsEnabled", "outline", "url", "zoom", "rotate", "currentPageNumber"] }, { kind: "directive", type: GrabNDragDirective, selector: "[mvGrabNDrag]", inputs: ["dragEnabled", "dragX"] }, { kind: "directive", type: HighlightCreateDirective, selector: "[mvCreateTextHighlight]" }, { kind: "component", type: RedactionComponent, selector: "mv-redactions", inputs: ["zoom", "rotate"] }, { kind: "component", type: BookmarkIconsComponent, selector: "mv-bookmark-icons", inputs: ["zoom", "rotate"] }, { kind: "component", type: ParticipantsListComponent, selector: "mv-participants-list" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1.Store }, { token: i1.Store }, { token: PdfJsWrapperFactory }, { token: PrintService }, { token: ToolbarEventService }, { token: ViewerEventService }, { token: IcpService }, { token: ToolbarButtonVisibilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: { downloadUrl: "downloadUrl", url: "url", downloadFileName: "downloadFileName", enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", annotationSet: "annotationSet", enableRedactSearch: "enableRedactSearch", height: "height", caseId: "caseId", searchBarHidden: "searchBarHidden" }, outputs: { mediaLoadStatus: "mediaLoadStatus", pdfViewerException: "pdfViewerException", documentTitle: "documentTitle" }, viewQueries: [{ propertyName: "viewerContainer", first: true, predicate: ["viewerContainer"], descendants: true, static: true }, { propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mv-side-bar\n  *ngIf=\"toolbarEvents.sidebarOpen\"\n  id=\"sidebarContainer\"\n  [url]=\"url\"\n  [zoom]=\"zoom\"\n  [rotate]=\"rotation\"\n  [outline]=\"documentOutline\"\n  [annotationsEnabled]=\"enableAnnotations\"\n  [currentPageNumber]=\"getCurrentPageNumber()\"\n>\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n  class=\"pdfContainer\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ pdfContainer: true, hidden: errorMessage }\"\n>\n  <mv-redaction-search-bar></mv-redaction-search-bar>\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"\n      (showCommentsPanel || showIcpParticipantsList) &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [class.grabNDrag]=\"enableGrabNDrag\"\n  >\n    <div\n      #pdfViewer\n      class=\"pdfViewer\"\n      mvCreateTextHighlight\n      [ngClass]=\"{\n        hidden: loadingDocument,\n        highlightMode: highlightMode | async,\n        drawMode: drawMode | async\n      }\"\n    ></div>\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\" [rotate]=\"rotation\"> </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set\n    [contentScrollTop]=\"viewerContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"pdfViewer.offsetHeight\"\n    [pageHeights]=\"pageHeights\"\n  >\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">\n      {{ \"Loading...\" | rpxTranslate}}{{\n        loadingDocumentProgress ? loadingDocumentProgress + \"%\" : \"\"\n      }}\n    </h3>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar" }, { kind: "component", type: CommentSetComponent, selector: "mv-comment-set", inputs: ["annotationSet", "zoom", "rotate", "height", "pageHeights", "contentScrollTop"] }, { kind: "component", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: ["showCommentSummary"], outputs: ["showCommentSummaryDialog"] }, { kind: "component", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: ["zoom", "rotate"] }, { kind: "component", type: SideBarComponent, selector: "mv-side-bar", inputs: ["annotationsEnabled", "outline", "url", "zoom", "rotate", "currentPageNumber"] }, { kind: "directive", type: GrabNDragDirective, selector: "[mvGrabNDrag]", inputs: ["dragEnabled", "dragX"] }, { kind: "directive", type: HighlightCreateDirective, selector: "[mvCreateTextHighlight]" }, { kind: "component", type: RedactionComponent, selector: "mv-redactions", inputs: ["zoom", "rotate"] }, { kind: "component", type: BookmarkIconsComponent, selector: "mv-bookmark-icons", inputs: ["zoom", "rotate"] }, { kind: "component", type: ParticipantsListComponent, selector: "mv-participants-list" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: PdfViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-pdf-viewer', encapsulation: ViewEncapsulation.None, template: "<mv-side-bar\n  *ngIf=\"toolbarEvents.sidebarOpen\"\n  id=\"sidebarContainer\"\n  [url]=\"url\"\n  [zoom]=\"zoom\"\n  [rotate]=\"rotation\"\n  [outline]=\"documentOutline\"\n  [annotationsEnabled]=\"enableAnnotations\"\n  [currentPageNumber]=\"getCurrentPageNumber()\"\n>\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n  class=\"pdfContainer\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ pdfContainer: true, hidden: errorMessage }\"\n>\n  <mv-redaction-search-bar></mv-redaction-search-bar>\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"\n      (showCommentsPanel || showIcpParticipantsList) &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [class.grabNDrag]=\"enableGrabNDrag\"\n  >\n    <div\n      #pdfViewer\n      class=\"pdfViewer\"\n      mvCreateTextHighlight\n      [ngClass]=\"{\n        hidden: loadingDocument,\n        highlightMode: highlightMode | async,\n        drawMode: drawMode | async\n      }\"\n    ></div>\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\" [rotate]=\"rotation\"> </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set\n    [contentScrollTop]=\"viewerContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"pdfViewer.offsetHeight\"\n    [pageHeights]=\"pageHeights\"\n  >\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">\n      {{ \"Loading...\" | rpxTranslate}}{{\n        loadingDocumentProgress ? loadingDocumentProgress + \"%\" : \"\"\n      }}\n    </h3>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i1.Store }, { type: PdfJsWrapperFactory }, { type: PrintService }, { type: ToolbarEventService }, { type: ViewerEventService }, { type: IcpService }, { type: ToolbarButtonVisibilityService }]; }, propDecorators: { mediaLoadStatus: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: i1.Store }, { type: PdfJsWrapperFactory }, { type: PrintService }, { type: ToolbarEventService }, { type: ViewerEventService }, { type: IcpService }, { type: ToolbarButtonVisibilityService }], propDecorators: { mediaLoadStatus: [{
                 type: Output
             }], pdfViewerException: [{
                 type: Output
@@ -5860,15 +5697,15 @@ class ViewerUtilService {
     validateFile(url) {
         return this.http.head(url);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerUtilService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerUtilService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ViewerUtilService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ViewerUtilService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerUtilService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ViewerUtilService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
 class ImageViewerComponent {
     constructor(store, printService, viewerUtilService, toolbarEvents, toolbarButtons, viewerEvents) {
@@ -5991,13 +5828,13 @@ class ImageViewerComponent {
     toggleCommentsSummary() {
         this.toolbarEvents.toggleCommentsSummary(!this.toolbarEvents.showCommentSummary.getValue());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageViewerComponent, deps: [{ token: i1.Store }, { token: PrintService }, { token: ViewerUtilService }, { token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: ViewerEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageViewerComponent, selector: "mv-image-viewer", inputs: { url: "url", downloadFileName: "downloadFileName", enableAnnotations: "enableAnnotations", annotationSet: "annotationSet", height: "height" }, outputs: { mediaLoadStatus: "mediaLoadStatus", imageViewerException: "imageViewerException" }, host: { listeners: { "mousedown": "onImageViewerClick($event)" } }, viewQueries: [{ propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mv-comment-set-header\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<div\n  id=\"viewer-wrapper\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ grabNDrag: enableGrabNDrag }\"\n  *ngIf=\"url && !errorMessage\"\n>\n  <div\n    #imageContainer\n    id=\"image-container\"\n    mvGrabNDrag\n    [dragX]=\"imageContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    (scroll)=\"($event)\"\n    [ngClass]=\"{\n      'image-container': true,\n      annotations: enableAnnotations,\n      'show-comments-panel': showCommentsPanel\n    }\"\n  >\n    <img\n      #img\n      alt=\"\"\n      [src]=\"url\"\n      [ngClass]=\"'rot' + rotation\"\n      (error)=\"onLoadError(url)\"\n      (load)=\"onLoad(img)\"\n    />\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n    </ng-template>\n  </div>\n\n  <mv-comment-set\n    [contentScrollTop]=\"imageContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"imageHeight\"\n  >\n  </mv-comment-set>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CommentSetComponent, selector: "mv-comment-set", inputs: ["annotationSet", "zoom", "rotate", "height", "pageHeights", "contentScrollTop"] }, { kind: "component", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: ["showCommentSummary"], outputs: ["showCommentSummaryDialog"] }, { kind: "component", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: ["zoom", "rotate"] }, { kind: "directive", type: GrabNDragDirective, selector: "[mvGrabNDrag]", inputs: ["dragEnabled", "dragX"] }, { kind: "component", type: RedactionComponent, selector: "mv-redactions", inputs: ["zoom", "rotate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ImageViewerComponent, deps: [{ token: i1.Store }, { token: PrintService }, { token: ViewerUtilService }, { token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: ViewerEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ImageViewerComponent, selector: "mv-image-viewer", inputs: { url: "url", downloadFileName: "downloadFileName", enableAnnotations: "enableAnnotations", annotationSet: "annotationSet", height: "height" }, outputs: { mediaLoadStatus: "mediaLoadStatus", imageViewerException: "imageViewerException" }, host: { listeners: { "mousedown": "onImageViewerClick($event)" } }, viewQueries: [{ propertyName: "img", first: true, predicate: ["img"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mv-comment-set-header\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<div\n  id=\"viewer-wrapper\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ grabNDrag: enableGrabNDrag }\"\n  *ngIf=\"url && !errorMessage\"\n>\n  <div\n    #imageContainer\n    id=\"image-container\"\n    mvGrabNDrag\n    [dragX]=\"imageContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    (scroll)=\"($event)\"\n    [ngClass]=\"{\n      'image-container': true,\n      annotations: enableAnnotations,\n      'show-comments-panel': showCommentsPanel\n    }\"\n  >\n    <img\n      #img\n      alt=\"\"\n      [src]=\"url\"\n      [ngClass]=\"'rot' + rotation\"\n      (error)=\"onLoadError(url)\"\n      (load)=\"onLoad(img)\"\n    />\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n    </ng-template>\n  </div>\n\n  <mv-comment-set\n    [contentScrollTop]=\"imageContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"imageHeight\"\n  >\n  </mv-comment-set>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CommentSetComponent, selector: "mv-comment-set", inputs: ["annotationSet", "zoom", "rotate", "height", "pageHeights", "contentScrollTop"] }, { kind: "component", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: ["showCommentSummary"], outputs: ["showCommentSummaryDialog"] }, { kind: "component", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: ["zoom", "rotate"] }, { kind: "directive", type: GrabNDragDirective, selector: "[mvGrabNDrag]", inputs: ["dragEnabled", "dragX"] }, { kind: "component", type: RedactionComponent, selector: "mv-redactions", inputs: ["zoom", "rotate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ImageViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-image-viewer', template: "<mv-comment-set-header\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<div\n  id=\"viewer-wrapper\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ grabNDrag: enableGrabNDrag }\"\n  *ngIf=\"url && !errorMessage\"\n>\n  <div\n    #imageContainer\n    id=\"image-container\"\n    mvGrabNDrag\n    [dragX]=\"imageContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    (scroll)=\"($event)\"\n    [ngClass]=\"{\n      'image-container': true,\n      annotations: enableAnnotations,\n      'show-comments-panel': showCommentsPanel\n    }\"\n  >\n    <img\n      #img\n      alt=\"\"\n      [src]=\"url\"\n      [ngClass]=\"'rot' + rotation\"\n      (error)=\"onLoadError(url)\"\n      (load)=\"onLoad(img)\"\n    />\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n    </ng-template>\n  </div>\n\n  <mv-comment-set\n    [contentScrollTop]=\"imageContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"imageHeight\"\n  >\n  </mv-comment-set>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: PrintService }, { type: ViewerUtilService }, { type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: ViewerEventService }]; }, propDecorators: { url: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: PrintService }, { type: ViewerUtilService }, { type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: ViewerEventService }], propDecorators: { url: [{
                 type: Input
             }], downloadFileName: [{
                 type: Input
@@ -6041,13 +5878,13 @@ class UnsupportedViewerComponent {
             subscription.unsubscribe();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UnsupportedViewerComponent, deps: [{ token: ToolbarEventService }, { token: ViewerUtilService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UnsupportedViewerComponent, selector: "mv-unsupported-viewer", inputs: { url: "url", downloadFileName: "downloadFileName", typeException: "typeException" }, outputs: { loadStatus: "loadStatus", unsupportedViewerException: "unsupportedViewerException" }, viewQueries: [{ propertyName: "downloadLink", first: true, predicate: ["downloadLink"], descendants: true }], ngImport: i0, template: "<div class=\"govuk-width-container\">\n  <div class=\"govuk-notification-banner__content\">\n    <p>\n      <span *ngIf=\"typeException, else unsupported\">The document could not be displayed, or the file type is unsupported.</span>\n      Please <a #downloadLink [href]=\"url\" [download]=\"downloadFileName\">click here to download</a>.\n    </p>\n    <ng-template #unsupported>\n      <span>This file type is not supported by this viewer.</span>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UnsupportedViewerComponent, deps: [{ token: ToolbarEventService }, { token: ViewerUtilService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: UnsupportedViewerComponent, selector: "mv-unsupported-viewer", inputs: { url: "url", downloadFileName: "downloadFileName", typeException: "typeException" }, outputs: { loadStatus: "loadStatus", unsupportedViewerException: "unsupportedViewerException" }, viewQueries: [{ propertyName: "downloadLink", first: true, predicate: ["downloadLink"], descendants: true }], ngImport: i0, template: "<div class=\"govuk-width-container\">\n  <div class=\"govuk-notification-banner__content\">\n    <p>\n      <span *ngIf=\"typeException, else unsupported\">The document could not be displayed, or the file type is unsupported.</span>\n      Please <a #downloadLink [href]=\"url\" [download]=\"downloadFileName\">click here to download</a>.\n    </p>\n    <ng-template #unsupported>\n      <span>This file type is not supported by this viewer.</span>\n    </ng-template>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UnsupportedViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: UnsupportedViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-unsupported-viewer', template: "<div class=\"govuk-width-container\">\n  <div class=\"govuk-notification-banner__content\">\n    <p>\n      <span *ngIf=\"typeException, else unsupported\">The document could not be displayed, or the file type is unsupported.</span>\n      Please <a #downloadLink [href]=\"url\" [download]=\"downloadFileName\">click here to download</a>.\n    </p>\n    <ng-template #unsupported>\n      <span>This file type is not supported by this viewer.</span>\n    </ng-template>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ViewerUtilService }]; }, propDecorators: { url: [{
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: ViewerUtilService }], propDecorators: { url: [{
                 type: Input
             }], downloadFileName: [{
                 type: Input
@@ -6109,12 +5946,12 @@ class AnnotationApiService {
     get annotationFullsUrl() {
         return this.annotationApiUrl + this.annotationBaseUrl;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationApiService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationApiService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationApiService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
 /*
 * Gov UK Error Message
@@ -6124,14 +5961,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 * */
 class GovUkErrorMessageComponent {
     constructor() { }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GovUkErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GovUkErrorMessageComponent, selector: " mv-gov-uk-error-message", inputs: { config: "config", errorMessage: "errorMessage" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: GovUkErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: GovUkErrorMessageComponent, selector: " mv-gov-uk-error-message", inputs: { config: "config", errorMessage: "errorMessage" }, ngImport: i0, template: `
     <span class="govuk-error-message" [id]="config.id + '-error'" *ngFor="let message of errorMessage?.messages">
       <span class="govuk-visually-hidden">Error:</span>{{message}}
     </span>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GovUkErrorMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: GovUkErrorMessageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: ' mv-gov-uk-error-message',
@@ -6141,7 +5978,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
     </span>
   `
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+        }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], errorMessage: [{
                 type: Input
@@ -6177,8 +6014,8 @@ class GovUkFieldsetComponent {
     setDescribedBy() {
         return HtmlTemplatesHelper.setDescribedBy(this.errorMessage, this.config);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GovUkFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: { config: "config", isHeading: "isHeading", errorMessage: "errorMessage" }, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: GovUkFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: { config: "config", isHeading: "isHeading", errorMessage: "errorMessage" }, ngImport: i0, template: `
       <fieldset class="govuk-fieldset" [attr.aria-describedby]="setDescribedBy()">
         <legend [class]="config.classes + ' govuk-fieldset__legend'" *ngIf="!isHeading">
           {{config.legend}}
@@ -6195,7 +6032,7 @@ class GovUkFieldsetComponent {
       </fieldset>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GovUkFieldsetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: GovUkFieldsetComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mv-gov-uk-fieldset',
@@ -6232,8 +6069,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 * */
 class GovUkLabelComponent {
     constructor() { }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GovUkLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GovUkLabelComponent, selector: "mv-gov-label", inputs: { config: "config" }, ngImport: i0, template: `<h1 *ngIf="config.isPageHeading else noHeading">
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: GovUkLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: GovUkLabelComponent, selector: "mv-gov-label", inputs: { config: "config" }, ngImport: i0, template: `<h1 *ngIf="config.isPageHeading else noHeading">
           <label *ngIf="config.label" [class]="config.classes + ' govuk-label'"
                  [for]="config.id" [innerHTML]="config.label">
           </label>
@@ -6245,7 +6082,7 @@ class GovUkLabelComponent {
         </ng-template>
   `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GovUkLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: GovUkLabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'mv-gov-label',
@@ -6261,7 +6098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </ng-template>
   `
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { config: [{
+        }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }] } });
 
@@ -6272,10 +6109,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 * displaying errorMessage messages
 * */
 class GovUkDateComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GovUkDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GovUkDateComponent, selector: "mv-gov-uk-date", inputs: { config: "config", errorMessage: "errorMessage", formGroup: "formGroup" }, ngImport: i0, template: "<div\n  class=\"govuk-form-group\"\n  [ngClass]=\"{ 'govuk-form-group--error': errorMessage?.isInvalid }\"\n  [formGroup]=\"formGroup\"\n>\n  <mv-gov-uk-fieldset\n    [config]=\"{\n      legend: config.legend,\n      classes: 'govuk-label--m',\n      id: config.id,\n      hint: ' For example, 12 11 2007'\n    }\"\n    [isHeading]=\"false\"\n    [errorMessage]=\"errorMessage\"\n  >\n    <mv-gov-uk-error-message\n      [config]=\"{ id: 'passport' }\"\n      *ngIf=\"errorMessage.isInvalid\"\n      [errorMessage]=\"errorMessage\"\n    >\n    </mv-gov-uk-error-message>\n\n    <div class=\"govuk-date-input\" [id]=\"config.id + '-date'\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Day',\n              name: config.id,\n              id: config.id + '-day',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-day'\"\n            [name]=\"config.id + '-day'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'day'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Month',\n              name: config.id + '-month',\n              id: config.id + '-month',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-month'\"\n            [name]=\"config.id + '-month'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'month'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Year',\n              name: config.id + '-year',\n              id: config.id + '-year',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-year'\"\n            [name]=\"config.id + '-year'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'year'\"\n          />\n        </div>\n      </div>\n    </div>\n  </mv-gov-uk-fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: GovUkErrorMessageComponent, selector: " mv-gov-uk-error-message", inputs: ["config", "errorMessage"] }, { kind: "component", type: GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: ["config", "isHeading", "errorMessage"] }, { kind: "component", type: GovUkLabelComponent, selector: "mv-gov-label", inputs: ["config"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: GovUkDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: GovUkDateComponent, selector: "mv-gov-uk-date", inputs: { config: "config", errorMessage: "errorMessage", formGroup: "formGroup" }, ngImport: i0, template: "<div\n  class=\"govuk-form-group\"\n  [ngClass]=\"{ 'govuk-form-group--error': errorMessage?.isInvalid }\"\n  [formGroup]=\"formGroup\"\n>\n  <mv-gov-uk-fieldset\n    [config]=\"{\n      legend: config.legend,\n      classes: 'govuk-label--m',\n      id: config.id,\n      hint: ' For example, 12 11 2007'\n    }\"\n    [isHeading]=\"false\"\n    [errorMessage]=\"errorMessage\"\n  >\n    <mv-gov-uk-error-message\n      [config]=\"{ id: 'passport' }\"\n      *ngIf=\"errorMessage.isInvalid\"\n      [errorMessage]=\"errorMessage\"\n    >\n    </mv-gov-uk-error-message>\n\n    <div class=\"govuk-date-input\" [id]=\"config.id + '-date'\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Day',\n              name: config.id,\n              id: config.id + '-day',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-day'\"\n            [name]=\"config.id + '-day'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'day'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Month',\n              name: config.id + '-month',\n              id: config.id + '-month',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-month'\"\n            [name]=\"config.id + '-month'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'month'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Year',\n              name: config.id + '-year',\n              id: config.id + '-year',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-year'\"\n            [name]=\"config.id + '-year'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'year'\"\n          />\n        </div>\n      </div>\n    </div>\n  </mv-gov-uk-fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: GovUkErrorMessageComponent, selector: " mv-gov-uk-error-message", inputs: ["config", "errorMessage"] }, { kind: "component", type: GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: ["config", "isHeading", "errorMessage"] }, { kind: "component", type: GovUkLabelComponent, selector: "mv-gov-label", inputs: ["config"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GovUkDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: GovUkDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-gov-uk-date', template: "<div\n  class=\"govuk-form-group\"\n  [ngClass]=\"{ 'govuk-form-group--error': errorMessage?.isInvalid }\"\n  [formGroup]=\"formGroup\"\n>\n  <mv-gov-uk-fieldset\n    [config]=\"{\n      legend: config.legend,\n      classes: 'govuk-label--m',\n      id: config.id,\n      hint: ' For example, 12 11 2007'\n    }\"\n    [isHeading]=\"false\"\n    [errorMessage]=\"errorMessage\"\n  >\n    <mv-gov-uk-error-message\n      [config]=\"{ id: 'passport' }\"\n      *ngIf=\"errorMessage.isInvalid\"\n      [errorMessage]=\"errorMessage\"\n    >\n    </mv-gov-uk-error-message>\n\n    <div class=\"govuk-date-input\" [id]=\"config.id + '-date'\">\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Day',\n              name: config.id,\n              id: config.id + '-day',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-day'\"\n            [name]=\"config.id + '-day'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'day'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Month',\n              name: config.id + '-month',\n              id: config.id + '-month',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-2\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-month'\"\n            [name]=\"config.id + '-month'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'month'\"\n          />\n        </div>\n      </div>\n      <div class=\"govuk-date-input__item\">\n        <div class=\"govuk-form-group\">\n          <mv-gov-label\n            [config]=\"{\n              label: 'Year',\n              name: config.id + '-year',\n              id: config.id + '-year',\n              classes: 'govuk-date-input__label'\n            }\"\n          >\n          </mv-gov-label>\n          <input\n            class=\"govuk-input govuk-date-input__input govuk-input--width-4\"\n            [ngClass]=\"{ 'govuk-input--error': errorMessage?.isInvalid }\"\n            [id]=\"config.id + '-year'\"\n            [name]=\"config.id + '-year'\"\n            type=\"number\"\n            value=\"\"\n            pattern=\"[0-9]*\"\n            [formControlName]=\"'year'\"\n          />\n        </div>\n      </div>\n    </div>\n  </mv-gov-uk-fieldset>\n</div>\n" }]
         }], propDecorators: { config: [{
@@ -6368,13 +6205,13 @@ class CommentsSummaryComponent {
     ngOnDestroy() {
         this.$subscriptions.unsubscribe();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentsSummaryComponent, deps: [{ token: i1.Store }, { token: PrintService }, { token: ToolbarEventService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CommentsSummaryComponent, selector: "mv-comments-summary", inputs: { title: "title", contentType: "contentType" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["outerContainer"], descendants: true, static: true }, { propertyName: "commentsTable", first: true, predicate: ["commentContainer"], descendants: true }], ngImport: i0, template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onClose()\">\n  <div\n    #outerContainer\n    id=\"modal\"\n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    cdkTrapFocus\n    tabindex=\"0\"\n  >\n    <div id=\"comment-container\" class=\"comment-container\" #commentContainer>\n      <h2 class=\"govuk-heading-m\">{{ title }}</h2>\n      <ng-container *ngIf=\"comments$ | async as comments\">\n        <ng-container *ngIf=\"comments.length\">\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-!-margin-right-1\"\n            (click)=\"onFiltersToggle()\"\n          >\n            {{\n              !showFilters\n                ? (\"Show Filters\" | rpxTranslate)\n                : (\"Hide Filters\" | rpxTranslate)\n            }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"onClearFilters()\"\n            *ngIf=\"hasFilter\"\n          >\n            {{ \"Clear Filters\" | rpxTranslate }}\n          </button>\n          <ng-container *ngIf=\"showFilters\">\n            <form [formGroup]=\"filtersFg\" (ngSubmit)=\"onFilter()\">\n              <div class=\"dates\">\n                <div class=\"dates__from\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeFrom', legend: 'From' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeFrom']\"\n                    [errorMessage]=\"{\n                      isInvalid: !fromFilterValid,\n                      messages: ['From date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__to\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeTo', legend: 'To' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeTo']\"\n                    [errorMessage]=\"{\n                      isInvalid: !toFilterValid,\n                      messages: ['To date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__tags\">\n                  <mv-gov-uk-fieldset\n                    [config]=\"{\n                      legend: 'Tags',\n                      classes: 'govuk-label--m',\n                      id: 'filters'\n                    }\"\n                    [isHeading]=\"false\"\n                  >\n                    <div\n                      class=\"govuk-checkboxes--scroll\"\n                      [formGroup]=\"filtersFg.controls['tagFilters']\"\n                    >\n                      <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                        <div\n                          class=\"govuk-checkboxes__item\"\n                          *ngFor=\"let item of allTags$ | async\"\n                        >\n                          <input\n                            [formControlName]=\"item.key\"\n                            class=\"govuk-checkboxes__input\"\n                            [value]=\"false\"\n                            type=\"checkbox\"\n                          />\n                          <label class=\"govuk-label govuk-checkboxes__label\">\n                            {{ item.key | unsnake }} ({{ item.length }})\n                          </label>\n                        </div>\n                      </div>\n                    </div>\n                  </mv-gov-uk-fieldset>\n                </div>\n                <div class=\"dates__cta\">\n                  <button type=\"submit\" class=\"govuk-button\">\n                    {{ \"Filter comments\" | rpxTranslate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n          </ng-container>\n          <ng-container *ngIf=\"comments[0]\">\n            <ngx-datatable\n              [rows]=\"comments\"\n              rowHeight=\"auto\"\n              headerHeight=\"auto\"\n              [columnMode]=\"'flex'\"\n              [sorts]=\"[{ prop: 'date', dir: 'desc' }]\"\n            >\n              <ngx-datatable-column\n                name=\"{{ 'User' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Page' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <a\n                    [routerLink]=\"[]\"\n                    class=\"comment-summary_pages\"\n                    (click)=\"navigateToPage(value)\"\n                    >{{ value }}</a\n                  >\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Date' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Comment' | rpxTranslate }}\"\n                [flexGrow]=\"3\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Tags' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <span class=\"hmcts-badge\" *ngFor=\"let tag of value\">{{\n                    tag.label\n                  }}</span>\n                </ng-template>\n              </ngx-datatable-column>\n            </ngx-datatable>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!comments[0]\">\n          <h3 class=\"govuk-heading-s\">\n            {{\n              \"No comments available. Select text to add a highlight or comment.\"\n                | rpxTranslate\n            }}\n          </h3>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"button-container\">\n      <button (click)=\"onPrint()\" class=\"govuk-button govuk-button--secondary\">\n        {{ \"Print\" | rpxTranslate }}\n      </button>\n      <button id=\"modal-close-button\" (click)=\"onClose()\" class=\"govuk-button\">\n        {{ \"Close\" | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i8.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i8.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GovUkDateComponent, selector: "mv-gov-uk-date", inputs: ["config", "errorMessage", "formGroup"] }, { kind: "component", type: GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: ["config", "isHeading", "errorMessage"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: UnsnakePipe, name: "unsnake" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentsSummaryComponent, deps: [{ token: i1.Store }, { token: PrintService }, { token: ToolbarEventService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: CommentsSummaryComponent, selector: "mv-comments-summary", inputs: { title: "title", contentType: "contentType" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["outerContainer"], descendants: true, static: true }, { propertyName: "commentsTable", first: true, predicate: ["commentContainer"], descendants: true }], ngImport: i0, template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onClose()\">\n  <div\n    #outerContainer\n    id=\"modal\"\n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    cdkTrapFocus\n    tabindex=\"0\"\n  >\n    <div id=\"comment-container\" class=\"comment-container\" #commentContainer>\n      <h2 class=\"govuk-heading-m\">{{ title }}</h2>\n      <ng-container *ngIf=\"comments$ | async as comments\">\n        <ng-container *ngIf=\"comments.length\">\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-!-margin-right-1\"\n            (click)=\"onFiltersToggle()\"\n          >\n            {{\n              !showFilters\n                ? (\"Show Filters\" | rpxTranslate)\n                : (\"Hide Filters\" | rpxTranslate)\n            }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"onClearFilters()\"\n            *ngIf=\"hasFilter\"\n          >\n            {{ \"Clear Filters\" | rpxTranslate }}\n          </button>\n          <ng-container *ngIf=\"showFilters\">\n            <form [formGroup]=\"filtersFg\" (ngSubmit)=\"onFilter()\">\n              <div class=\"dates\">\n                <div class=\"dates__from\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeFrom', legend: 'From' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeFrom']\"\n                    [errorMessage]=\"{\n                      isInvalid: !fromFilterValid,\n                      messages: ['From date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__to\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeTo', legend: 'To' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeTo']\"\n                    [errorMessage]=\"{\n                      isInvalid: !toFilterValid,\n                      messages: ['To date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__tags\">\n                  <mv-gov-uk-fieldset\n                    [config]=\"{\n                      legend: 'Tags',\n                      classes: 'govuk-label--m',\n                      id: 'filters'\n                    }\"\n                    [isHeading]=\"false\"\n                  >\n                    <div\n                      class=\"govuk-checkboxes--scroll\"\n                      [formGroup]=\"filtersFg.controls['tagFilters']\"\n                    >\n                      <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                        <div\n                          class=\"govuk-checkboxes__item\"\n                          *ngFor=\"let item of allTags$ | async\"\n                        >\n                          <input\n                            [formControlName]=\"item.key\"\n                            class=\"govuk-checkboxes__input\"\n                            [value]=\"false\"\n                            type=\"checkbox\"\n                          />\n                          <label class=\"govuk-label govuk-checkboxes__label\">\n                            {{ item.key | unsnake }} ({{ item.length }})\n                          </label>\n                        </div>\n                      </div>\n                    </div>\n                  </mv-gov-uk-fieldset>\n                </div>\n                <div class=\"dates__cta\">\n                  <button type=\"submit\" class=\"govuk-button\">\n                    {{ \"Filter comments\" | rpxTranslate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n          </ng-container>\n          <ng-container *ngIf=\"comments[0]\">\n            <ngx-datatable\n              [rows]=\"comments\"\n              rowHeight=\"auto\"\n              headerHeight=\"auto\"\n              [columnMode]=\"'flex'\"\n              [sorts]=\"[{ prop: 'date', dir: 'desc' }]\"\n            >\n              <ngx-datatable-column\n                name=\"{{ 'User' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Page' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <a\n                    [routerLink]=\"[]\"\n                    class=\"comment-summary_pages\"\n                    (click)=\"navigateToPage(value)\"\n                    >{{ value }}</a\n                  >\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Date' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Comment' | rpxTranslate }}\"\n                [flexGrow]=\"3\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Tags' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <span class=\"hmcts-badge\" *ngFor=\"let tag of value\">{{\n                    tag.label\n                  }}</span>\n                </ng-template>\n              </ngx-datatable-column>\n            </ngx-datatable>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!comments[0]\">\n          <h3 class=\"govuk-heading-s\">\n            {{\n              \"No comments available. Select text to add a highlight or comment.\"\n                | rpxTranslate\n            }}\n          </h3>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"button-container\">\n      <button (click)=\"onPrint()\" class=\"govuk-button govuk-button--secondary\">\n        {{ \"Print\" | rpxTranslate }}\n      </button>\n      <button id=\"modal-close-button\" (click)=\"onClose()\" class=\"govuk-button\">\n        {{ \"Close\" | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5$2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i8.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i8.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GovUkDateComponent, selector: "mv-gov-uk-date", inputs: ["config", "errorMessage", "formGroup"] }, { kind: "component", type: GovUkFieldsetComponent, selector: "mv-gov-uk-fieldset", inputs: ["config", "isHeading", "errorMessage"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }, { kind: "pipe", type: UnsnakePipe, name: "unsnake" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentsSummaryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: CommentsSummaryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-comments-summary', template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onClose()\">\n  <div\n    #outerContainer\n    id=\"modal\"\n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    cdkTrapFocus\n    tabindex=\"0\"\n  >\n    <div id=\"comment-container\" class=\"comment-container\" #commentContainer>\n      <h2 class=\"govuk-heading-m\">{{ title }}</h2>\n      <ng-container *ngIf=\"comments$ | async as comments\">\n        <ng-container *ngIf=\"comments.length\">\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-!-margin-right-1\"\n            (click)=\"onFiltersToggle()\"\n          >\n            {{\n              !showFilters\n                ? (\"Show Filters\" | rpxTranslate)\n                : (\"Hide Filters\" | rpxTranslate)\n            }}\n          </button>\n          <button\n            type=\"submit\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"onClearFilters()\"\n            *ngIf=\"hasFilter\"\n          >\n            {{ \"Clear Filters\" | rpxTranslate }}\n          </button>\n          <ng-container *ngIf=\"showFilters\">\n            <form [formGroup]=\"filtersFg\" (ngSubmit)=\"onFilter()\">\n              <div class=\"dates\">\n                <div class=\"dates__from\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeFrom', legend: 'From' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeFrom']\"\n                    [errorMessage]=\"{\n                      isInvalid: !fromFilterValid,\n                      messages: ['From date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__to\">\n                  <mv-gov-uk-date\n                    [config]=\"{ id: 'dateRangeTo', legend: 'To' }\"\n                    [formGroup]=\"filtersFg.controls['dateRangeTo']\"\n                    [errorMessage]=\"{\n                      isInvalid: !toFilterValid,\n                      messages: ['To date is required']\n                    }\"\n                  ></mv-gov-uk-date>\n                </div>\n                <div class=\"dates__tags\">\n                  <mv-gov-uk-fieldset\n                    [config]=\"{\n                      legend: 'Tags',\n                      classes: 'govuk-label--m',\n                      id: 'filters'\n                    }\"\n                    [isHeading]=\"false\"\n                  >\n                    <div\n                      class=\"govuk-checkboxes--scroll\"\n                      [formGroup]=\"filtersFg.controls['tagFilters']\"\n                    >\n                      <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                        <div\n                          class=\"govuk-checkboxes__item\"\n                          *ngFor=\"let item of allTags$ | async\"\n                        >\n                          <input\n                            [formControlName]=\"item.key\"\n                            class=\"govuk-checkboxes__input\"\n                            [value]=\"false\"\n                            type=\"checkbox\"\n                          />\n                          <label class=\"govuk-label govuk-checkboxes__label\">\n                            {{ item.key | unsnake }} ({{ item.length }})\n                          </label>\n                        </div>\n                      </div>\n                    </div>\n                  </mv-gov-uk-fieldset>\n                </div>\n                <div class=\"dates__cta\">\n                  <button type=\"submit\" class=\"govuk-button\">\n                    {{ \"Filter comments\" | rpxTranslate }}\n                  </button>\n                </div>\n              </div>\n            </form>\n          </ng-container>\n          <ng-container *ngIf=\"comments[0]\">\n            <ngx-datatable\n              [rows]=\"comments\"\n              rowHeight=\"auto\"\n              headerHeight=\"auto\"\n              [columnMode]=\"'flex'\"\n              [sorts]=\"[{ prop: 'date', dir: 'desc' }]\"\n            >\n              <ngx-datatable-column\n                name=\"{{ 'User' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Page' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <a\n                    [routerLink]=\"[]\"\n                    class=\"comment-summary_pages\"\n                    (click)=\"navigateToPage(value)\"\n                    >{{ value }}</a\n                  >\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Date' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Comment' | rpxTranslate }}\"\n                [flexGrow]=\"3\"\n                [sortable]=\"false\"\n              ></ngx-datatable-column>\n              <ngx-datatable-column\n                name=\"{{ 'Tags' | rpxTranslate }}\"\n                [flexGrow]=\"1\"\n                [sortable]=\"false\"\n              >\n                <ng-template ngx-datatable-cell-template let-value=\"value\">\n                  <span class=\"hmcts-badge\" *ngFor=\"let tag of value\">{{\n                    tag.label\n                  }}</span>\n                </ng-template>\n              </ngx-datatable-column>\n            </ngx-datatable>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!comments[0]\">\n          <h3 class=\"govuk-heading-s\">\n            {{\n              \"No comments available. Select text to add a highlight or comment.\"\n                | rpxTranslate\n            }}\n          </h3>\n        </ng-container>\n      </ng-container>\n    </div>\n\n    <div class=\"button-container\">\n      <button (click)=\"onPrint()\" class=\"govuk-button govuk-button--secondary\">\n        {{ \"Print\" | rpxTranslate }}\n      </button>\n      <button id=\"modal-close-button\" (click)=\"onClose()\" class=\"govuk-button\">\n        {{ \"Close\" | rpxTranslate }}\n      </button>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: PrintService }, { type: ToolbarEventService }, { type: i2.FormBuilder }]; }, propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: PrintService }, { type: ToolbarEventService }, { type: i2.FormBuilder }], propDecorators: { title: [{
                 type: Input
             }], contentType: [{
                 type: Input
@@ -6417,13 +6254,13 @@ class MultimediaPlayerComponent {
     onError() {
         this.playbackMsg = 'error';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultimediaPlayerComponent, deps: [{ token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MultimediaPlayerComponent, selector: "mv-multimedia-player", inputs: { url: "url", downloadFileName: "downloadFileName", multimediaOn: "multimediaOn" }, outputs: { loadStatus: "loadStatus" }, viewQueries: [{ propertyName: "downloadLink", first: true, predicate: ["downloadLink"], descendants: true }, { propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"govuk-width-container\">\n  <div class=\"govuk-notification-banner__content\">\n    <p>\n      <span *ngIf=\"multimediaOn && playbackMsg === 'loading'\">{{\n        \"Loading multimedia content ...\" | rpxTranslate\n      }}</span>\n      <span *ngIf=\"!multimediaOn\"\n        >{{ \"Multimedia playback is not enabled, \" | rpxTranslate }}\n      </span>\n      <span *ngIf=\"multimediaOn && playbackMsg === 'success'\"\n        >{{ \"Use the player to play to the file or\" | rpxTranslate }}\n      </span>\n      <span *ngIf=\"multimediaOn && playbackMsg === 'error'\"\n        >{{ \"Mime type not supported.\" | rpxTranslate }}\n      </span>\n      <a\n        *ngIf=\"!multimediaOn || playbackMsg !== 'loading'\"\n        #downloadLink\n        [href]=\"url\"\n        [download]=\"downloadFileName\"\n        >{{ \"Click here to download\" | rpxTranslate }}</a\n      >\n    </p>\n    <video\n      #videoPlayer\n      *ngIf=\"multimediaOn\"\n      width=\"100%\"\n      height=\"100%\"\n      preload=\"auto\"\n      (canplay)=\"onSuccess()\"\n      controls\n    >\n      <source (error)=\"onError()\" [src]=\"url\" type=\"video/mp4\" />\n      <source\n        (error)=\"onError()\"\n        [src]=\"url\"\n        type=\"video/mp4; codecs='avc1, av01, hvc1, hev1, mp4v, mp4a.40.2, opus'\"\n      />\n      <source (error)=\"onError()\" [src]=\"url\" type=\"video/ogg\" />\n      <source\n        (error)=\"onError()\"\n        [src]=\"url\"\n        type=\"video/ogg; codecs='theora, vp8, vp9, flac, opus, vorbis'\"\n      />\n      <source (error)=\"onError()\" [src]=\"url\" type=\"video/webm\" />\n      <source\n        (error)=\"onError()\"\n        [src]=\"url\"\n        type=\"video/webm; codecs='vp8, vp9, vorbis, opus'\"\n      />\n    </video>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MultimediaPlayerComponent, deps: [{ token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: MultimediaPlayerComponent, selector: "mv-multimedia-player", inputs: { url: "url", downloadFileName: "downloadFileName", multimediaOn: "multimediaOn" }, outputs: { loadStatus: "loadStatus" }, viewQueries: [{ propertyName: "downloadLink", first: true, predicate: ["downloadLink"], descendants: true }, { propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"govuk-width-container\">\n  <div class=\"govuk-notification-banner__content\">\n    <p>\n      <span *ngIf=\"multimediaOn && playbackMsg === 'loading'\">{{\n        \"Loading multimedia content ...\" | rpxTranslate\n      }}</span>\n      <span *ngIf=\"!multimediaOn\"\n        >{{ \"Multimedia playback is not enabled, \" | rpxTranslate }}\n      </span>\n      <span *ngIf=\"multimediaOn && playbackMsg === 'success'\"\n        >{{ \"Use the player to play to the file or\" | rpxTranslate }}\n      </span>\n      <span *ngIf=\"multimediaOn && playbackMsg === 'error'\"\n        >{{ \"Mime type not supported.\" | rpxTranslate }}\n      </span>\n      <a\n        *ngIf=\"!multimediaOn || playbackMsg !== 'loading'\"\n        #downloadLink\n        [href]=\"url\"\n        [download]=\"downloadFileName\"\n        >{{ \"Click here to download\" | rpxTranslate }}</a\n      >\n    </p>\n    <video\n      #videoPlayer\n      *ngIf=\"multimediaOn\"\n      width=\"100%\"\n      height=\"100%\"\n      preload=\"auto\"\n      (canplay)=\"onSuccess()\"\n      controls\n    >\n      <source (error)=\"onError()\" [src]=\"url\" type=\"video/mp4\" />\n      <source\n        (error)=\"onError()\"\n        [src]=\"url\"\n        type=\"video/mp4; codecs='avc1, av01, hvc1, hev1, mp4v, mp4a.40.2, opus'\"\n      />\n      <source (error)=\"onError()\" [src]=\"url\" type=\"video/ogg\" />\n      <source\n        (error)=\"onError()\"\n        [src]=\"url\"\n        type=\"video/ogg; codecs='theora, vp8, vp9, flac, opus, vorbis'\"\n      />\n      <source (error)=\"onError()\" [src]=\"url\" type=\"video/webm\" />\n      <source\n        (error)=\"onError()\"\n        [src]=\"url\"\n        type=\"video/webm; codecs='vp8, vp9, vorbis, opus'\"\n      />\n    </video>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MultimediaPlayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MultimediaPlayerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-multimedia-player', template: "<div class=\"govuk-width-container\">\n  <div class=\"govuk-notification-banner__content\">\n    <p>\n      <span *ngIf=\"multimediaOn && playbackMsg === 'loading'\">{{\n        \"Loading multimedia content ...\" | rpxTranslate\n      }}</span>\n      <span *ngIf=\"!multimediaOn\"\n        >{{ \"Multimedia playback is not enabled, \" | rpxTranslate }}\n      </span>\n      <span *ngIf=\"multimediaOn && playbackMsg === 'success'\"\n        >{{ \"Use the player to play to the file or\" | rpxTranslate }}\n      </span>\n      <span *ngIf=\"multimediaOn && playbackMsg === 'error'\"\n        >{{ \"Mime type not supported.\" | rpxTranslate }}\n      </span>\n      <a\n        *ngIf=\"!multimediaOn || playbackMsg !== 'loading'\"\n        #downloadLink\n        [href]=\"url\"\n        [download]=\"downloadFileName\"\n        >{{ \"Click here to download\" | rpxTranslate }}</a\n      >\n    </p>\n    <video\n      #videoPlayer\n      *ngIf=\"multimediaOn\"\n      width=\"100%\"\n      height=\"100%\"\n      preload=\"auto\"\n      (canplay)=\"onSuccess()\"\n      controls\n    >\n      <source (error)=\"onError()\" [src]=\"url\" type=\"video/mp4\" />\n      <source\n        (error)=\"onError()\"\n        [src]=\"url\"\n        type=\"video/mp4; codecs='avc1, av01, hvc1, hev1, mp4v, mp4a.40.2, opus'\"\n      />\n      <source (error)=\"onError()\" [src]=\"url\" type=\"video/ogg\" />\n      <source\n        (error)=\"onError()\"\n        [src]=\"url\"\n        type=\"video/ogg; codecs='theora, vp8, vp9, flac, opus, vorbis'\"\n      />\n      <source (error)=\"onError()\" [src]=\"url\" type=\"video/webm\" />\n      <source\n        (error)=\"onError()\"\n        [src]=\"url\"\n        type=\"video/webm; codecs='vp8, vp9, vorbis, opus'\"\n      />\n    </video>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }]; }, propDecorators: { url: [{
+        }], ctorParameters: () => [{ type: ToolbarEventService }], propDecorators: { url: [{
                 type: Input
             }], downloadFileName: [{
                 type: Input
@@ -6485,13 +6322,13 @@ class ConvertibleContentViewerComponent {
         }
         return url.replace('/binary', '');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConvertibleContentViewerComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConvertibleContentViewerComponent, selector: "mv-conversion-viewer", inputs: { originalUrl: "originalUrl", downloadFileName: "downloadFileName", height: "height", enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", annotationSet: "annotationSet" }, outputs: { mediaLoadStatus: "mediaLoadStatus", viewerException: "viewerException", documentTitle: "documentTitle" }, usesOnChanges: true, ngImport: i0, template: "<mv-pdf-viewer *ngIf=\"convertedUrl\"\n               (mediaLoadStatus)=\"onMediaLoad($event)\"\n               (pdfViewerException)=\"onLoadException($event)\"\n               (documentTitle)=\"onDocumentTitleChange($event)\"\n               [url]=\"convertedUrl\"\n               [downloadUrl]=\"originalUrl\"\n               [enableAnnotations]=\"enableAnnotations\"\n               [enableRedactions]=\"enableRedactions\"\n               [annotationSet]=\"enableAnnotations ? annotationSet : null\"\n               [downloadFileName]=\"downloadFileName\"\n               [height]=\"height\">\n</mv-pdf-viewer>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: ["downloadUrl", "url", "downloadFileName", "enableAnnotations", "enableRedactions", "enableICP", "annotationSet", "enableRedactSearch", "height", "caseId", "searchBarHidden"], outputs: ["mediaLoadStatus", "pdfViewerException", "documentTitle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ConvertibleContentViewerComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ConvertibleContentViewerComponent, selector: "mv-conversion-viewer", inputs: { originalUrl: "originalUrl", downloadFileName: "downloadFileName", height: "height", enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", annotationSet: "annotationSet" }, outputs: { mediaLoadStatus: "mediaLoadStatus", viewerException: "viewerException", documentTitle: "documentTitle" }, usesOnChanges: true, ngImport: i0, template: "<mv-pdf-viewer *ngIf=\"convertedUrl\"\n               (mediaLoadStatus)=\"onMediaLoad($event)\"\n               (pdfViewerException)=\"onLoadException($event)\"\n               (documentTitle)=\"onDocumentTitleChange($event)\"\n               [url]=\"convertedUrl\"\n               [downloadUrl]=\"originalUrl\"\n               [enableAnnotations]=\"enableAnnotations\"\n               [enableRedactions]=\"enableRedactions\"\n               [annotationSet]=\"enableAnnotations ? annotationSet : null\"\n               [downloadFileName]=\"downloadFileName\"\n               [height]=\"height\">\n</mv-pdf-viewer>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: ["downloadUrl", "url", "downloadFileName", "enableAnnotations", "enableRedactions", "enableICP", "annotationSet", "enableRedactSearch", "height", "caseId", "searchBarHidden"], outputs: ["mediaLoadStatus", "pdfViewerException", "documentTitle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConvertibleContentViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ConvertibleContentViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-conversion-viewer', encapsulation: ViewEncapsulation.None, template: "<mv-pdf-viewer *ngIf=\"convertedUrl\"\n               (mediaLoadStatus)=\"onMediaLoad($event)\"\n               (pdfViewerException)=\"onLoadException($event)\"\n               (documentTitle)=\"onDocumentTitleChange($event)\"\n               [url]=\"convertedUrl\"\n               [downloadUrl]=\"originalUrl\"\n               [enableAnnotations]=\"enableAnnotations\"\n               [enableRedactions]=\"enableRedactions\"\n               [annotationSet]=\"enableAnnotations ? annotationSet : null\"\n               [downloadFileName]=\"downloadFileName\"\n               [height]=\"height\">\n</mv-pdf-viewer>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { originalUrl: [{
+        }], ctorParameters: () => [{ type: i1.Store }], propDecorators: { originalUrl: [{
                 type: Input
             }], downloadFileName: [{
                 type: Input
@@ -6550,15 +6387,15 @@ class RotationPersistDirective {
         };
         this.store.dispatch(new SaveRotation(payload));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RotationPersistDirective, deps: [{ token: i0.ElementRef }, { token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: RotationPersistDirective, selector: "[mvRotationPersist]", host: { listeners: { "mediaLoadStatus": "onMediaLoad($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RotationPersistDirective, deps: [{ token: i0.ElementRef }, { token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.8", type: RotationPersistDirective, selector: "[mvRotationPersist]", host: { listeners: { "mediaLoadStatus": "onMediaLoad($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RotationPersistDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RotationPersistDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mvRotationPersist]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Store }, { type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }]; }, propDecorators: { onMediaLoad: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.Store }, { type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }], propDecorators: { onMediaLoad: [{
                 type: HostListener,
                 args: ['mediaLoadStatus', ['$event']]
             }] } });
@@ -6574,13 +6411,13 @@ class ConfirmActionDialogComponent {
         this.toolbarEvents.icp.confirmExit();
         this.toolbarEvents.icp.leavingSession.next(false);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmActionDialogComponent, deps: [{ token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ConfirmActionDialogComponent, selector: "mv-confirm-action", ngImport: i0, template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onCancel()\">\n  <div id=\"modal\" class=\"modal-content govuk-width-container clearfix\" (click)=\"$event.stopPropagation()\">\n    <h2 class=\"govuk-heading-s\">Are you sure you want to leave the presentation?</h2>\n    <div class=\"button-container\">\n      <button id=\"modal-close-button\" (click)=\"onConfirm()\" class=\"govuk-button\">Confirm</button>\n      <button (click)=\"onCancel()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n    </div>\n  </div>\n</div>\n" }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ConfirmActionDialogComponent, deps: [{ token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: ConfirmActionDialogComponent, selector: "mv-confirm-action", ngImport: i0, template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onCancel()\">\n  <div id=\"modal\" class=\"modal-content govuk-width-container clearfix\" (click)=\"$event.stopPropagation()\">\n    <h2 class=\"govuk-heading-s\">Are you sure you want to leave the presentation?</h2>\n    <div class=\"button-container\">\n      <button id=\"modal-close-button\" (click)=\"onConfirm()\" class=\"govuk-button\">Confirm</button>\n      <button (click)=\"onCancel()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n    </div>\n  </div>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConfirmActionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: ConfirmActionDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-confirm-action', template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onCancel()\">\n  <div id=\"modal\" class=\"modal-content govuk-width-container clearfix\" (click)=\"$event.stopPropagation()\">\n    <h2 class=\"govuk-heading-s\">Are you sure you want to leave the presentation?</h2>\n    <div class=\"button-container\">\n      <button id=\"modal-close-button\" (click)=\"onConfirm()\" class=\"govuk-button\">Confirm</button>\n      <button (click)=\"onCancel()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }]; } });
+        }], ctorParameters: () => [{ type: ToolbarEventService }] });
 
 var CoreContentTypes;
 (function (CoreContentTypes) {
@@ -6752,13 +6589,13 @@ class MediaViewerComponent {
     detectOs() {
         this.hasScrollBar = window.navigator.userAgent.indexOf('Win') !== -1;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MediaViewerComponent, deps: [{ token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }, { token: AnnotationApiService }, { token: CommentService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MediaViewerComponent, selector: "mv-media-viewer", inputs: { url: "url", downloadFileName: "downloadFileName", contentType: "contentType", showToolbar: "showToolbar", toolbarButtonOverrides: "toolbarButtonOverrides", height: "height", width: "width", enableAnnotations: "enableAnnotations", annotationApiUrl: "annotationApiUrl", enableRedactions: "enableRedactions", enableICP: "enableICP", multimediaPlayerEnabled: "multimediaPlayerEnabled", enableRedactSearch: "enableRedactSearch", caseId: "caseId" }, outputs: { mediaLoadStatus: "mediaLoadStatus", viewerException: "viewerException", toolbarEventsOutput: "toolbarEventsOutput", unsavedChanges: "unsavedChanges" }, viewQueries: [{ propertyName: "viewerRef", first: true, predicate: ["viewerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  id=\"outerContainer\"\n  [ngClass]=\"{\n    'has-redact-bar': toolbarEvents.redactionMode | async,\n    'icp-mode': toolbarEvents.icp.enabled | async,\n    'is-redaction-preview': toolbarEvents.redactionPreview | async,\n    sidebarOpen: toolbarEvents.sidebarOpen | async,\n    'has-scroll-bar': hasScrollBar,\n    'has-different-page-size': hasDifferentPageSize$ | async\n  }\"\n  [ngStyle]=\"{ width: width }\"\n>\n  <mv-comments-summary\n    *ngIf=\"showCommentSummary\"\n    [title]=\"documentTitle || 'Comment Summary'\"\n    [contentType]=\"contentType\"\n  >\n  </mv-comments-summary>\n\n  <mv-confirm-action\n    *ngIf=\"toolbarEvents.icp.leavingSession | async\"\n  ></mv-confirm-action>\n\n  <div id=\"mainContainer\">\n    <mv-main-toolbar\n      *ngIf=\"showToolbar\"\n      [enableAnnotations]=\"enableAnnotations\"\n      [enableICP]=\"enableICP\"\n      [enableRedactions]=\"enableRedactions\"\n      [contentType]=\"contentType\"\n    >\n    </mv-main-toolbar>\n    <mv-redaction-toolbar\n      [showRedactSearch]=\"enableRedactSearch\"\n      *ngIf=\"toolbarEvents.redactionMode | async\"\n    ></mv-redaction-toolbar>\n    <mv-highlight-toolbar\n      *ngIf=\"toolbarEvents.highlightToolbarSubject | async\"\n    ></mv-highlight-toolbar>\n    <mv-icp-toolbar *ngIf=\"toolbarEvents.icp.enabled | async\"></mv-icp-toolbar>\n\n    <div #viewerRef>\n      <mv-conversion-viewer\n        *ngIf=\"convertibleContent\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (viewerException)=\"onLoadException($event)\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [originalUrl]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-conversion-viewer>\n      <mv-pdf-viewer\n        *ngIf=\"contentType === 'pdf'\"\n        #pdfViewer\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (pdfViewerException)=\"onLoadException($event)\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [enableICP]=\"enableICP\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        [caseId]=\"caseId\"\n        mvRotationPersist\n      >\n      </mv-pdf-viewer>\n      <mv-image-viewer\n        *ngIf=\"contentType === 'image'\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (imageViewerException)=\"onLoadException($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-image-viewer>\n      <mv-multimedia-player\n        *ngIf=\"multimediaContent\"\n        [multimediaOn]=\"multimediaPlayerEnabled\"\n        [url]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n      >\n      </mv-multimedia-player>\n      <mv-unsupported-viewer\n        *ngIf=\"unsupportedContent\"\n        [url]=\"url\"\n        [typeException]=\"typeException\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n        (unsupportedViewerException)=\"onLoadException($event)\"\n      >\n      </mv-unsupported-viewer>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MainToolbarComponent, selector: "mv-main-toolbar", inputs: ["enableAnnotations", "enableRedactions", "enableICP", "contentType"] }, { kind: "component", type: RedactionToolbarComponent, selector: "mv-redaction-toolbar", inputs: ["showRedactSearch"] }, { kind: "component", type: IcpToolbarComponent, selector: "mv-icp-toolbar" }, { kind: "component", type: HighlightToolbarComponent, selector: "mv-highlight-toolbar" }, { kind: "component", type: CommentsSummaryComponent, selector: "mv-comments-summary", inputs: ["title", "contentType"] }, { kind: "component", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: ["downloadUrl", "url", "downloadFileName", "enableAnnotations", "enableRedactions", "enableICP", "annotationSet", "enableRedactSearch", "height", "caseId", "searchBarHidden"], outputs: ["mediaLoadStatus", "pdfViewerException", "documentTitle"] }, { kind: "component", type: ImageViewerComponent, selector: "mv-image-viewer", inputs: ["url", "downloadFileName", "enableAnnotations", "annotationSet", "height"], outputs: ["mediaLoadStatus", "imageViewerException"] }, { kind: "component", type: UnsupportedViewerComponent, selector: "mv-unsupported-viewer", inputs: ["url", "downloadFileName", "typeException"], outputs: ["loadStatus", "unsupportedViewerException"] }, { kind: "component", type: MultimediaPlayerComponent, selector: "mv-multimedia-player", inputs: ["url", "downloadFileName", "multimediaOn"], outputs: ["loadStatus"] }, { kind: "component", type: ConvertibleContentViewerComponent, selector: "mv-conversion-viewer", inputs: ["originalUrl", "downloadFileName", "height", "enableAnnotations", "enableRedactions", "annotationSet"], outputs: ["mediaLoadStatus", "viewerException", "documentTitle"] }, { kind: "directive", type: RotationPersistDirective, selector: "[mvRotationPersist]" }, { kind: "component", type: ConfirmActionDialogComponent, selector: "mv-confirm-action" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MediaViewerComponent, deps: [{ token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }, { token: AnnotationApiService }, { token: CommentService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.8", type: MediaViewerComponent, selector: "mv-media-viewer", inputs: { url: "url", downloadFileName: "downloadFileName", contentType: "contentType", showToolbar: "showToolbar", toolbarButtonOverrides: "toolbarButtonOverrides", height: "height", width: "width", enableAnnotations: "enableAnnotations", annotationApiUrl: "annotationApiUrl", enableRedactions: "enableRedactions", enableICP: "enableICP", multimediaPlayerEnabled: "multimediaPlayerEnabled", enableRedactSearch: "enableRedactSearch", caseId: "caseId" }, outputs: { mediaLoadStatus: "mediaLoadStatus", viewerException: "viewerException", toolbarEventsOutput: "toolbarEventsOutput", unsavedChanges: "unsavedChanges" }, viewQueries: [{ propertyName: "viewerRef", first: true, predicate: ["viewerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  id=\"outerContainer\"\n  [ngClass]=\"{\n    'has-redact-bar': toolbarEvents.redactionMode | async,\n    'icp-mode': toolbarEvents.icp.enabled | async,\n    'is-redaction-preview': toolbarEvents.redactionPreview | async,\n    sidebarOpen: toolbarEvents.sidebarOpen | async,\n    'has-scroll-bar': hasScrollBar,\n    'has-different-page-size': hasDifferentPageSize$ | async\n  }\"\n  [ngStyle]=\"{ width: width }\"\n>\n  <mv-comments-summary\n    *ngIf=\"showCommentSummary\"\n    [title]=\"documentTitle || 'Comment Summary'\"\n    [contentType]=\"contentType\"\n  >\n  </mv-comments-summary>\n\n  <mv-confirm-action\n    *ngIf=\"toolbarEvents.icp.leavingSession | async\"\n  ></mv-confirm-action>\n\n  <div id=\"mainContainer\">\n    <mv-main-toolbar\n      *ngIf=\"showToolbar\"\n      [enableAnnotations]=\"enableAnnotations\"\n      [enableICP]=\"enableICP\"\n      [enableRedactions]=\"enableRedactions\"\n      [contentType]=\"contentType\"\n    >\n    </mv-main-toolbar>\n    <mv-redaction-toolbar\n      [showRedactSearch]=\"enableRedactSearch\"\n      *ngIf=\"toolbarEvents.redactionMode | async\"\n    ></mv-redaction-toolbar>\n    <mv-highlight-toolbar\n      *ngIf=\"toolbarEvents.highlightToolbarSubject | async\"\n    ></mv-highlight-toolbar>\n    <mv-icp-toolbar *ngIf=\"toolbarEvents.icp.enabled | async\"></mv-icp-toolbar>\n\n    <div #viewerRef>\n      <mv-conversion-viewer\n        *ngIf=\"convertibleContent\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (viewerException)=\"onLoadException($event)\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [originalUrl]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-conversion-viewer>\n      <mv-pdf-viewer\n        *ngIf=\"contentType === 'pdf'\"\n        #pdfViewer\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (pdfViewerException)=\"onLoadException($event)\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [enableICP]=\"enableICP\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        [caseId]=\"caseId\"\n        mvRotationPersist\n      >\n      </mv-pdf-viewer>\n      <mv-image-viewer\n        *ngIf=\"contentType === 'image'\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (imageViewerException)=\"onLoadException($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-image-viewer>\n      <mv-multimedia-player\n        *ngIf=\"multimediaContent\"\n        [multimediaOn]=\"multimediaPlayerEnabled\"\n        [url]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n      >\n      </mv-multimedia-player>\n      <mv-unsupported-viewer\n        *ngIf=\"unsupportedContent\"\n        [url]=\"url\"\n        [typeException]=\"typeException\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n        (unsupportedViewerException)=\"onLoadException($event)\"\n      >\n      </mv-unsupported-viewer>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MainToolbarComponent, selector: "mv-main-toolbar", inputs: ["enableAnnotations", "enableRedactions", "enableICP", "contentType"] }, { kind: "component", type: RedactionToolbarComponent, selector: "mv-redaction-toolbar", inputs: ["showRedactSearch"] }, { kind: "component", type: IcpToolbarComponent, selector: "mv-icp-toolbar" }, { kind: "component", type: HighlightToolbarComponent, selector: "mv-highlight-toolbar" }, { kind: "component", type: CommentsSummaryComponent, selector: "mv-comments-summary", inputs: ["title", "contentType"] }, { kind: "component", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: ["downloadUrl", "url", "downloadFileName", "enableAnnotations", "enableRedactions", "enableICP", "annotationSet", "enableRedactSearch", "height", "caseId", "searchBarHidden"], outputs: ["mediaLoadStatus", "pdfViewerException", "documentTitle"] }, { kind: "component", type: ImageViewerComponent, selector: "mv-image-viewer", inputs: ["url", "downloadFileName", "enableAnnotations", "annotationSet", "height"], outputs: ["mediaLoadStatus", "imageViewerException"] }, { kind: "component", type: UnsupportedViewerComponent, selector: "mv-unsupported-viewer", inputs: ["url", "downloadFileName", "typeException"], outputs: ["loadStatus", "unsupportedViewerException"] }, { kind: "component", type: MultimediaPlayerComponent, selector: "mv-multimedia-player", inputs: ["url", "downloadFileName", "multimediaOn"], outputs: ["loadStatus"] }, { kind: "component", type: ConvertibleContentViewerComponent, selector: "mv-conversion-viewer", inputs: ["originalUrl", "downloadFileName", "height", "enableAnnotations", "enableRedactions", "annotationSet"], outputs: ["mediaLoadStatus", "viewerException", "documentTitle"] }, { kind: "directive", type: RotationPersistDirective, selector: "[mvRotationPersist]" }, { kind: "component", type: ConfirmActionDialogComponent, selector: "mv-confirm-action" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MediaViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MediaViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mv-media-viewer', encapsulation: ViewEncapsulation.None, template: "<div\n  id=\"outerContainer\"\n  [ngClass]=\"{\n    'has-redact-bar': toolbarEvents.redactionMode | async,\n    'icp-mode': toolbarEvents.icp.enabled | async,\n    'is-redaction-preview': toolbarEvents.redactionPreview | async,\n    sidebarOpen: toolbarEvents.sidebarOpen | async,\n    'has-scroll-bar': hasScrollBar,\n    'has-different-page-size': hasDifferentPageSize$ | async\n  }\"\n  [ngStyle]=\"{ width: width }\"\n>\n  <mv-comments-summary\n    *ngIf=\"showCommentSummary\"\n    [title]=\"documentTitle || 'Comment Summary'\"\n    [contentType]=\"contentType\"\n  >\n  </mv-comments-summary>\n\n  <mv-confirm-action\n    *ngIf=\"toolbarEvents.icp.leavingSession | async\"\n  ></mv-confirm-action>\n\n  <div id=\"mainContainer\">\n    <mv-main-toolbar\n      *ngIf=\"showToolbar\"\n      [enableAnnotations]=\"enableAnnotations\"\n      [enableICP]=\"enableICP\"\n      [enableRedactions]=\"enableRedactions\"\n      [contentType]=\"contentType\"\n    >\n    </mv-main-toolbar>\n    <mv-redaction-toolbar\n      [showRedactSearch]=\"enableRedactSearch\"\n      *ngIf=\"toolbarEvents.redactionMode | async\"\n    ></mv-redaction-toolbar>\n    <mv-highlight-toolbar\n      *ngIf=\"toolbarEvents.highlightToolbarSubject | async\"\n    ></mv-highlight-toolbar>\n    <mv-icp-toolbar *ngIf=\"toolbarEvents.icp.enabled | async\"></mv-icp-toolbar>\n\n    <div #viewerRef>\n      <mv-conversion-viewer\n        *ngIf=\"convertibleContent\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (viewerException)=\"onLoadException($event)\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [originalUrl]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-conversion-viewer>\n      <mv-pdf-viewer\n        *ngIf=\"contentType === 'pdf'\"\n        #pdfViewer\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (pdfViewerException)=\"onLoadException($event)\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [enableICP]=\"enableICP\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        [caseId]=\"caseId\"\n        mvRotationPersist\n      >\n      </mv-pdf-viewer>\n      <mv-image-viewer\n        *ngIf=\"contentType === 'image'\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (imageViewerException)=\"onLoadException($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-image-viewer>\n      <mv-multimedia-player\n        *ngIf=\"multimediaContent\"\n        [multimediaOn]=\"multimediaPlayerEnabled\"\n        [url]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n      >\n      </mv-multimedia-player>\n      <mv-unsupported-viewer\n        *ngIf=\"unsupportedContent\"\n        [url]=\"url\"\n        [typeException]=\"typeException\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n        (unsupportedViewerException)=\"onLoadException($event)\"\n      >\n      </mv-unsupported-viewer>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }, { type: AnnotationApiService }, { type: CommentService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { viewerRef: [{
+        }], ctorParameters: () => [{ type: i1.Store }, { type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }, { type: AnnotationApiService }, { type: CommentService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { viewerRef: [{
                 type: ViewChild,
                 args: ['viewerRef', { static: false }]
             }], url: [{
@@ -6799,32 +6636,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class MutableDivModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MutableDivModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MutableDivModule, declarations: [DraggableElementDirective,
-            ResizableElementDirective,
-            ResizeHandlersComponent], imports: [CommonModule], exports: [DraggableElementDirective,
-            ResizableElementDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MutableDivModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MutableDivModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        DraggableElementDirective,
-                        ResizableElementDirective,
-                        ResizeHandlersComponent
-                    ],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        DraggableElementDirective,
-                        ResizableElementDirective,
-                    ]
-                }]
-        }] });
-
 class BookmarksApiService {
     constructor(httpClient) {
         this.httpClient = httpClient;
@@ -6859,16 +6670,16 @@ class BookmarksApiService {
             .request('DELETE', `${this.ANNOTATIONS_API}/bookmarks_multiple`, { body: payload, observe: 'response', withCredentials: true })
             .pipe(map(response => response.body));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarksApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarksApiService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BookmarksApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BookmarksApiService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarksApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BookmarksApiService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
 class SharedModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, declarations: [GovUkDateComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: SharedModule, declarations: [GovUkDateComponent,
             GovUkErrorMessageComponent,
             GovUkFieldsetComponent,
             GovUkLabelComponent], imports: [CommonModule,
@@ -6879,13 +6690,13 @@ class SharedModule {
             GovUkErrorMessageComponent,
             GovUkFieldsetComponent,
             GovUkLabelComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SharedModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             CommonModule,
             RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SharedModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -6911,8 +6722,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }] });
 
 class AnnotationsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AnnotationsModule, declarations: [MetadataLayerComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: AnnotationsModule, declarations: [MetadataLayerComponent,
             AnnotationViewComponent,
             BoxHighlightCreateComponent,
             AnnotationSetComponent,
@@ -6952,7 +6763,7 @@ class AnnotationsModule {
             FilterPipe,
             UnsnakePipe,
             MetadataLayerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationsModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationsModule, providers: [
             AnnotationApiService,
             BookmarksApiService,
             CommentSetRenderService,
@@ -6971,7 +6782,7 @@ class AnnotationsModule {
             SharedModule,
             RpxTranslationModule.forChild()] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7044,12 +6855,12 @@ class IcpSessionApiService {
             .get(`${this.ICP_SESSION_API}/${caseId}`, { observe: 'response', withCredentials: true })
             .pipe(map(response => response.body));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpSessionApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpSessionApiService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpSessionApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpSessionApiService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpSessionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpSessionApiService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
 class AnnotationEffects {
     constructor(actions$, annotationApiService) {
@@ -7087,12 +6898,12 @@ class AnnotationEffects {
             }));
         })));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationEffects, deps: [{ token: i1$2.Actions }, { token: AnnotationApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationEffects }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationEffects, deps: [{ token: i1$2.Actions }, { token: AnnotationApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: AnnotationEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: AnnotationApiService }]; } });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: AnnotationApiService }] });
 
 class BookmarksEffects {
     constructor(actions$, store, bookmarksApiService) {
@@ -7120,12 +6931,12 @@ class BookmarksEffects {
         this.updateBookmark$ = createEffect(() => this.actions$.pipe(ofType(UPDATE_BOOKMARK), map((action) => action.payload), switchMap((bookmark) => this.bookmarksApiService.updateBookmark(bookmark)
             .pipe(map(bmrk => new UpdateBookmarkSuccess(bmrk)), catchError(error => of(new UpdateBookmarkFailure(error)))))));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarksEffects, deps: [{ token: i1$2.Actions }, { token: i1.Store }, { token: BookmarksApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarksEffects }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BookmarksEffects, deps: [{ token: i1$2.Actions }, { token: i1.Store }, { token: BookmarksApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BookmarksEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarksEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: BookmarksEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: i1.Store }, { type: BookmarksApiService }]; } });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: i1.Store }, { type: BookmarksApiService }] });
 
 class RedactionApiService {
     constructor(httpClient) {
@@ -7166,12 +6977,12 @@ class RedactionApiService {
             .post(this.redactApiUrl, payload, { observe: 'response', withCredentials: true, responseType: 'blob' })
             .pipe(map(response => response), catchError(() => []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionApiService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionApiService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionApiService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
 class RedactionEffects {
     constructor(actions$, redactionApiService, toolbarEvents) {
@@ -7224,12 +7035,12 @@ class RedactionEffects {
             }));
         })));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionEffects, deps: [{ token: i1$2.Actions }, { token: RedactionApiService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionEffects }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionEffects, deps: [{ token: i1$2.Actions }, { token: RedactionApiService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RedactionEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: RedactionApiService }, { type: ToolbarEventService }]; } });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: RedactionApiService }, { type: ToolbarEventService }] });
 
 class DocumentConversionApiService {
     constructor(httpClient) {
@@ -7241,12 +7052,12 @@ class DocumentConversionApiService {
             .post(`${this.documentConversionUrl}/${documentId}`, {}, { observe: 'response', withCredentials: true, responseType: 'blob' })
             .pipe(map(response => response), catchError(error => of(error)));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentConversionApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentConversionApiService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DocumentConversionApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DocumentConversionApiService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentConversionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DocumentConversionApiService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
 class RotationApiService {
     constructor(httpClient) {
@@ -7264,12 +7075,12 @@ class RotationApiService {
             .post(fixedUrl, payload, { observe: 'response', withCredentials: true })
             .pipe(map(response => response), catchError(() => []));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RotationApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RotationApiService }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RotationApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RotationApiService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RotationApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: RotationApiService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
 
 class DocumentEffects {
     constructor(actions$, documentConversionService, rotationApiService) {
@@ -7299,12 +7110,12 @@ class DocumentEffects {
             }));
         })));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentEffects, deps: [{ token: i1$2.Actions }, { token: DocumentConversionApiService }, { token: RotationApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentEffects }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DocumentEffects, deps: [{ token: i1$2.Actions }, { token: DocumentConversionApiService }, { token: RotationApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DocumentEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: DocumentEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: DocumentConversionApiService }, { type: RotationApiService }]; } });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: DocumentConversionApiService }, { type: RotationApiService }] });
 
 class IcpEffects {
     constructor(actions$, icpApiService, icpUpdateService) {
@@ -7316,18 +7127,18 @@ class IcpEffects {
         this.joinIcpSocketSession$ = createEffect(() => this.actions$.pipe(ofType(JOIN_ICP_SOCKET_SESSION), map((action) => action.payload), switchMap((res) => this.icpUpdateService.joinSession(res.username, res.session)
             .pipe(map(participants => new IcpSocketSessionJoined({ session: res.session, participantInfo: participants }))))));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpEffects, deps: [{ token: i1$2.Actions }, { token: IcpSessionApiService }, { token: IcpUpdateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpEffects }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpEffects, deps: [{ token: i1$2.Actions }, { token: IcpSessionApiService }, { token: IcpUpdateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: IcpEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: IcpSessionApiService }, { type: IcpUpdateService }]; } });
+        }], ctorParameters: () => [{ type: i1$2.Actions }, { type: IcpSessionApiService }, { type: IcpUpdateService }] });
 
 const effects = [AnnotationEffects, BookmarksEffects, RedactionEffects, DocumentEffects, IcpEffects];
 
 class MediaViewerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MediaViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MediaViewerModule, declarations: [PdfViewerComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MediaViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.8", ngImport: i0, type: MediaViewerModule, declarations: [PdfViewerComponent,
             SideBarComponent,
             BookmarksComponent,
             OutlineItemComponent,
@@ -7349,9 +7160,10 @@ class MediaViewerModule {
             TagInputModule,
             FormsModule,
             ReactiveFormsModule,
-            RouterModule, i1.StoreFeatureModule, i1$2.EffectsFeatureModule, TreeModule,
-            MutableDivModule, i5.RpxTranslationModule], exports: [MediaViewerComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MediaViewerModule, providers: [
+            RouterModule, i1.StoreFeatureModule, i1$2.EffectsFeatureModule, MutableDivModule,
+            CdkTreeModule,
+            DragDropModule, i5.RpxTranslationModule], exports: [MediaViewerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MediaViewerModule, providers: [
             PdfJsWrapperFactory,
             CommentService,
             RedactionApiService,
@@ -7374,11 +7186,12 @@ class MediaViewerModule {
             RouterModule,
             StoreModule.forFeature('media-viewer', reducers),
             EffectsModule.forFeature(effects),
-            TreeModule,
             MutableDivModule,
+            CdkTreeModule,
+            DragDropModule,
             RpxTranslationModule.forChild()] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MediaViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.8", ngImport: i0, type: MediaViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -7392,8 +7205,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         RouterModule,
                         StoreModule.forFeature('media-viewer', reducers),
                         EffectsModule.forFeature(effects),
-                        TreeModule,
                         MutableDivModule,
+                        CdkTreeModule,
+                        DragDropModule,
                         RpxTranslationModule.forChild()
                     ],
                     declarations: [