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

package/{fesm2020 → fesm2022}/hmcts-media-viewer.mjs

@@ -25,10 +25,8 @@ 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 i4$2 from 'mutable-div';
-import { MutableDivModule } from 'mutable-div';
-import * as i3 from '@circlon/angular-tree-component';
-import { TreeComponent, TreeModule } from '@circlon/angular-tree-component';
+import * as i3 from '@ali-hm/angular-tree-component';
+import { TreeComponent, TreeModule } from '@ali-hm/angular-tree-component';
 import 'hammerjs';
 import * as i5$2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -1560,7 +1558,7 @@ class PdfJsWrapper {
             this.pdfViewer.setDocument(pdfDocument);
             this.pdfViewer.linkService.setDocument(pdfDocument, null);
             const outlineNode = await pdfDocument.getOutline();
-            const outline = outlineNode.map(x => {
+            const outline = outlineNode ? outlineNode.map(x => {
                 return {
                     bold: x.bold,
                     color: x.color,
@@ -1573,7 +1571,7 @@ class PdfJsWrapper {
                     unsafeUrl: x.unsafeUrl,
                     url: x.url
                 };
-            });
+            }) : null;
             if (outline) {
                 await this.setOutlinePageNumbers(pdfDocument, outline);
             }
@@ -1902,10 +1900,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 */ ToolbarEventService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ ToolbarEventService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarEventService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarEventService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -1936,10 +1934,10 @@ 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 */ PdfJsWrapperFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdfJsWrapperFactory, deps: [{ token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ PdfJsWrapperFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdfJsWrapperFactory, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PdfJsWrapperFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PdfJsWrapperFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: ToolbarEventService }]; } });
@@ -1950,10 +1948,6 @@ class PrintService {
         printWindow.focus();
         setTimeout((printer) => {
             printer.print();
-            printer.onafterprint = () => {
-                printer.close();
-                window.close();
-            };
         }, 3000, printWindow);
     }
     printElementNatively(element, width, height) {
@@ -1966,10 +1960,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 */ PrintService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ PrintService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrintService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PrintService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PrintService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1995,10 +1989,10 @@ 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 */ ViewerEventService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewerEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ ViewerEventService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewerEventService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewerEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerEventService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
@@ -2135,10 +2129,10 @@ 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 */ SocketService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ SocketService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SocketService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SocketService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SocketService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return []; } });
 
@@ -2188,10 +2182,10 @@ 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 */ IcpUpdateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpUpdateService, deps: [{ token: SocketService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ IcpUpdateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpUpdateService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpUpdateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpUpdateService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: SocketService }]; } });
 
@@ -2235,10 +2229,10 @@ 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 */ IcpPresenterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpPresenterService, deps: [{ token: ToolbarEventService }, { token: IcpUpdateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ IcpPresenterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpPresenterService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpPresenterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpPresenterService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: IcpUpdateService }, { type: i1.Store }]; } });
 
@@ -2286,10 +2280,10 @@ 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 */ IcpFollowerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpFollowerService, deps: [{ token: ToolbarEventService }, { token: ViewerEventService }, { token: IcpUpdateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ IcpFollowerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpFollowerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpFollowerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpFollowerService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ViewerEventService }, { type: IcpUpdateService }, { type: i1.Store }]; } });
 
@@ -2367,10 +2361,10 @@ 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 */ IcpService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpService, deps: [{ token: ToolbarEventService }, { token: ViewerEventService }, { token: IcpUpdateService }, { token: IcpPresenterService }, { token: IcpFollowerService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ IcpService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ViewerEventService }, { type: IcpUpdateService }, { type: IcpPresenterService }, { type: IcpFollowerService }, { type: i1.Store }]; } });
 
@@ -2417,10 +2411,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 */ ToolbarButtonVisibilityService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarButtonVisibilityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ ToolbarButtonVisibilityService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarButtonVisibilityService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarButtonVisibilityService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarButtonVisibilityService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2635,10 +2629,10 @@ 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 */ HighlightCreateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightCreateService, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ HighlightCreateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightCreateService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightCreateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightCreateService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: i1.Store }]; } });
 
@@ -2849,10 +2843,10 @@ 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 */ RedactionSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionSearchBarComponent, deps: [{ token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ RedactionSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: RedactionSearchBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -2903,10 +2897,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 */ CommentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ CommentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentService, decorators: [{
             type: Injectable
         }] });
 
@@ -2955,10 +2949,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 */ CommentSetRenderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentSetRenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ CommentSetRenderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentSetRenderService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentSetRenderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CommentSetRenderService, decorators: [{
             type: Injectable
         }] });
 
@@ -2993,10 +2987,10 @@ 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 */ TagsServices.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagsServices, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ TagsServices.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagsServices });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagsServices, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TagsServices, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
@@ -3033,10 +3027,10 @@ 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 */ TextHighlightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextHighlightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ TextHighlightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: { textToHighlight: "textToHighlight" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextHighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextHighlightDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mvTextHighlight]'
@@ -3061,10 +3055,10 @@ 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 */ TextareaAutoExpandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextareaAutoExpandDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ TextareaAutoExpandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]", host: { listeners: { "input": "onMouseDown()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextareaAutoExpandDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TextareaAutoExpandDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mvTextAreaAutoExpand]'
@@ -3105,10 +3099,10 @@ 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 */ TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagsComponent, deps: [{ token: TagsServices }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration", "inputText"], 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", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems", "autocompleteObservable"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TagsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -3133,10 +3127,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 */ MomentDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MomentDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ MomentDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MomentDatePipe, name: "momentDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MomentDatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MomentDatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'momentDate'
@@ -3270,10 +3264,10 @@ 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 */ CommentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: TagsServices }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CommentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -3389,10 +3383,10 @@ 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 */ CommentSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentSetComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: CommentSetRenderService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CommentSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -3491,10 +3485,10 @@ 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 */ CommentsNavigateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentsNavigateComponent, deps: [{ token: i1.Store }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentsNavigateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentsNavigateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -3536,10 +3530,10 @@ 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 */ CommentSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentSearchComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CommentSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -3569,10 +3563,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 */ FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: FilterPipe, name: "filter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FilterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'filter'
@@ -3583,10 +3577,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 */ UnsnakePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UnsnakePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ UnsnakePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: UnsnakePipe, name: "unsnake" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UnsnakePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UnsnakePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'unsnake'
@@ -3633,10 +3627,10 @@ 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 */ CommentFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentFilterComponent, deps: [{ token: i1.Store }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 }]; } });
@@ -3683,10 +3677,10 @@ 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 */ CommentSetHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentSetHeaderComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentSetHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentSetHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -3737,10 +3731,10 @@ 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 */ NumberHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NumberHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ NumberHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NumberHelperService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NumberHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NumberHelperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3831,10 +3825,10 @@ 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 */ SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchBarComponent, deps: [{ token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -3992,10 +3986,10 @@ 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 */ MainToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i0.ChangeDetectorRef }, { token: NumberHelperService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MainToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -4096,10 +4090,10 @@ 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 */ RedactionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ RedactionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: RedactionToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -4132,10 +4126,10 @@ 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 */ IcpToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpToolbarComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IcpToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: IcpToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 }]; } });
@@ -4170,40 +4164,40 @@ 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 */ HighlightToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ HighlightToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: HighlightToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 }]; } });
 
 class ToolbarModule {
-}
-/** @nocollapse */ ToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ ToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ToolbarModule, declarations: [SearchBarComponent,
-        MainToolbarComponent,
-        RedactionToolbarComponent,
-        IcpToolbarComponent,
-        RedactionSearchBarComponent,
-        HighlightToolbarComponent], imports: [CommonModule,
-        FormsModule,
-        OverlayModule,
-        RouterModule, i5.RpxTranslationModule], exports: [MainToolbarComponent,
-        SearchBarComponent,
-        RedactionToolbarComponent,
-        IcpToolbarComponent,
-        RedactionSearchBarComponent,
-        HighlightToolbarComponent] });
-/** @nocollapse */ ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarModule, providers: [
-        ToolbarButtonVisibilityService,
-        ToolbarEventService
-    ], imports: [CommonModule,
-        FormsModule,
-        OverlayModule,
-        RouterModule,
-        RpxTranslationModule.forChild()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarModule, decorators: [{
+    /** @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,
+            MainToolbarComponent,
+            RedactionToolbarComponent,
+            IcpToolbarComponent,
+            RedactionSearchBarComponent,
+            HighlightToolbarComponent], imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            RouterModule, i5.RpxTranslationModule], exports: [MainToolbarComponent,
+            SearchBarComponent,
+            RedactionToolbarComponent,
+            IcpToolbarComponent,
+            RedactionSearchBarComponent,
+            HighlightToolbarComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarModule, providers: [
+            ToolbarButtonVisibilityService,
+            ToolbarEventService
+        ], imports: [CommonModule,
+            FormsModule,
+            OverlayModule,
+            RouterModule,
+            RpxTranslationModule.forChild()] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolbarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4322,10 +4316,10 @@ 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 */ BoxHighlightCreateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BoxHighlightCreateComponent, deps: [{ token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ BoxHighlightCreateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: BoxHighlightCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -4347,6 +4341,332 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 };
@@ -4426,12 +4746,12 @@ 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 */ RectangleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RectangleComponent, deps: [{ token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ RectangleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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.ɵa, selector: "[draggable]", inputs: ["rotate"], outputs: ["coordinates", "stopped"] }, { kind: "directive", type: i4$2.ɵb, selector: "[resizable]", inputs: ["rotate", "selected"], outputs: ["stopped"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RectangleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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       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" }]
+            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: [{
                 type: Input
             }], zoom: [{
@@ -4538,10 +4858,10 @@ 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 */ CtxToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CtxToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CtxToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: CtxToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -4627,10 +4947,10 @@ 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 */ AnnotationViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationViewComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ AnnotationViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: AnnotationViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -4677,10 +4997,10 @@ 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 */ AnnotationSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationSetComponent, deps: [{ token: i1.Store }, { token: CommentService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ AnnotationSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: AnnotationSetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -4754,10 +5074,10 @@ 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 */ MetadataLayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetadataLayerComponent, deps: [{ token: i1.Store }, { token: HighlightCreateService }, { token: ToolbarEventService }, { token: ViewerEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MetadataLayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: MetadataLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -4926,10 +5246,10 @@ class BookmarksComponent {
         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"] }] }); }
 }
-/** @nocollapse */ BookmarksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ BookmarksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -4973,10 +5293,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 */ OutlineItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OutlineItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ OutlineItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: OutlineItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -5033,10 +5353,10 @@ 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 */ SideBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SideBarComponent, deps: [{ token: ViewerEventService }, { token: i1.Store }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ SideBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: SideBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -5088,10 +5408,10 @@ 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 */ GrabNDragDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GrabNDragDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ GrabNDragDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: GrabNDragDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GrabNDragDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mvGrabNDrag]'
@@ -5195,10 +5515,10 @@ 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 */ HighlightCreateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightCreateDirective, deps: [{ token: i0.ElementRef }, { token: ToolbarEventService }, { token: ViewerEventService }, { token: HighlightCreateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ HighlightCreateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: HighlightCreateDirective, selector: "[mvCreateTextHighlight]", host: { listeners: { "mouseup": "onMouseUp($event)", "mousedown": "onPdfViewerClick($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightCreateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HighlightCreateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mvCreateTextHighlight]'
@@ -5273,10 +5593,10 @@ 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 */ RedactionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionComponent, deps: [{ token: i1.Store }, { token: ViewerEventService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ RedactionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: RedactionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -5292,10 +5612,10 @@ 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 */ BookmarkIconsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarkIconsComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ BookmarkIconsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: BookmarkIconsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -5319,10 +5639,10 @@ 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 */ ParticipantsListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ParticipantsListComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ParticipantsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: ParticipantsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 }]; } });
@@ -5491,10 +5811,10 @@ 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 */ PdfViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 */ PdfViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: PdfViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -5540,10 +5860,10 @@ 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 */ ViewerUtilService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewerUtilService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ ViewerUtilService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewerUtilService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewerUtilService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerUtilService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5671,10 +5991,10 @@ 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 */ ImageViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ImageViewerComponent, deps: [{ token: i1.Store }, { token: PrintService }, { token: ViewerUtilService }, { token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: ViewerEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ImageViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: ImageViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -5721,10 +6041,10 @@ 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 */ UnsupportedViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: UnsupportedViewerComponent, deps: [{ token: ToolbarEventService }, { token: ViewerUtilService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ UnsupportedViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: UnsupportedViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -5789,10 +6109,10 @@ 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 */ AnnotationApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ AnnotationApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationApiService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationApiService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
@@ -5804,14 +6124,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 * */
 class GovUkErrorMessageComponent {
     constructor() { }
-}
-/** @nocollapse */ GovUkErrorMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GovUkErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ GovUkErrorMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "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: `
     <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: "15.2.10", ngImport: i0, type: GovUkErrorMessageComponent, decorators: [{
+  `, 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: [{
             type: Component,
             args: [{
                     selector: ' mv-gov-uk-error-message',
@@ -5857,9 +6177,8 @@ class GovUkFieldsetComponent {
     setDescribedBy() {
         return HtmlTemplatesHelper.setDescribedBy(this.errorMessage, this.config);
     }
-}
-/** @nocollapse */ GovUkFieldsetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GovUkFieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ GovUkFieldsetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "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: `
       <fieldset class="govuk-fieldset" [attr.aria-describedby]="setDescribedBy()">
         <legend [class]="config.classes + ' govuk-fieldset__legend'" *ngIf="!isHeading">
           {{config.legend}}
@@ -5874,8 +6193,9 @@ class GovUkFieldsetComponent {
         </span>
         <ng-content></ng-content>
       </fieldset>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GovUkFieldsetComponent, decorators: [{
+  `, 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: [{
             type: Component,
             args: [{
                     selector: 'mv-gov-uk-fieldset',
@@ -5912,9 +6232,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 * */
 class GovUkLabelComponent {
     constructor() { }
-}
-/** @nocollapse */ GovUkLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GovUkLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ GovUkLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "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">
           <label *ngIf="config.label" [class]="config.classes + ' govuk-label'"
                  [for]="config.id" [innerHTML]="config.label">
           </label>
@@ -5924,8 +6243,9 @@ class GovUkLabelComponent {
                  [for]="config.id" [innerHTML]="config.label">
           </label>
         </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GovUkLabelComponent, decorators: [{
+  `, 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: [{
             type: Component,
             args: [{
                     selector: 'mv-gov-label',
@@ -5952,10 +6272,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 */ GovUkDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: GovUkDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ GovUkDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: GovUkDateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -6048,10 +6368,10 @@ 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 */ CommentsSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentsSummaryComponent, deps: [{ token: i1.Store }, { token: PrintService }, { token: ToolbarEventService }, { token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentsSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommentsSummaryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -6097,10 +6417,10 @@ 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 */ MultimediaPlayerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MultimediaPlayerComponent, deps: [{ token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MultimediaPlayerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: MultimediaPlayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -6165,10 +6485,10 @@ 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 */ ConvertibleContentViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConvertibleContentViewerComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ConvertibleContentViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: ConvertibleContentViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -6230,10 +6550,10 @@ 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 */ RotationPersistDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RotationPersistDirective, deps: [{ token: i0.ElementRef }, { token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ RotationPersistDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: RotationPersistDirective, selector: "[mvRotationPersist]", host: { listeners: { "mediaLoadStatus": "onMediaLoad($event)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RotationPersistDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RotationPersistDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mvRotationPersist]'
@@ -6254,10 +6574,10 @@ 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 */ ConfirmActionDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConfirmActionDialogComponent, deps: [{ token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ConfirmActionDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: ConfirmActionDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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 }]; } });
@@ -6432,10 +6752,10 @@ 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 */ MediaViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 */ MediaViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: MediaViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: [{
@@ -6479,6 +6799,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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;
@@ -6513,33 +6859,33 @@ 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 */ BookmarksApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ BookmarksApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksApiService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarksApiService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
 class SharedModule {
-}
-/** @nocollapse */ SharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, declarations: [GovUkDateComponent,
-        GovUkErrorMessageComponent,
-        GovUkFieldsetComponent,
-        GovUkLabelComponent], imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        CommonModule,
-        RouterModule], exports: [GovUkDateComponent,
-        GovUkErrorMessageComponent,
-        GovUkFieldsetComponent,
-        GovUkLabelComponent] });
-/** @nocollapse */ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, imports: [CommonModule,
-        FormsModule,
-        ReactiveFormsModule,
-        CommonModule,
-        RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SharedModule, decorators: [{
+    /** @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,
+            GovUkErrorMessageComponent,
+            GovUkFieldsetComponent,
+            GovUkLabelComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            CommonModule,
+            RouterModule], exports: [GovUkDateComponent,
+            GovUkErrorMessageComponent,
+            GovUkFieldsetComponent,
+            GovUkLabelComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", 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: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -6565,67 +6911,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 
 class AnnotationsModule {
-}
-/** @nocollapse */ AnnotationsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ AnnotationsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AnnotationsModule, declarations: [MetadataLayerComponent,
-        AnnotationViewComponent,
-        BoxHighlightCreateComponent,
-        AnnotationSetComponent,
-        RectangleComponent,
-        CommentComponent,
-        CommentSetHeaderComponent,
-        CommentSearchComponent,
-        TextHighlightDirective,
-        CtxToolbarComponent,
-        CommentSetComponent,
-        CommentsNavigateComponent,
-        TextareaAutoExpandDirective,
-        CommentsSummaryComponent,
-        TagsComponent,
-        MomentDatePipe,
-        CommentFilterComponent,
-        FilterPipe,
-        UnsnakePipe], imports: [A11yModule,
-        CommonModule,
-        FormsModule,
-        HttpClientModule,
-        MutableDivModule,
-        TagInputModule,
-        RouterModule,
-        ReactiveFormsModule,
-        NgxDatatableModule,
-        SharedModule, i5.RpxTranslationModule], exports: [AnnotationViewComponent,
-        BoxHighlightCreateComponent,
-        AnnotationSetComponent,
-        CommentSetComponent,
-        CommentSetHeaderComponent,
-        CommentSearchComponent,
-        CommentsSummaryComponent,
-        TagsComponent,
-        CommentFilterComponent,
-        MomentDatePipe,
-        FilterPipe,
-        UnsnakePipe,
-        MetadataLayerComponent] });
-/** @nocollapse */ AnnotationsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationsModule, providers: [
-        AnnotationApiService,
-        BookmarksApiService,
-        CommentSetRenderService,
-        HighlightCreateService,
-        CommentService,
-        TagsServices
-    ], imports: [A11yModule,
-        CommonModule,
-        FormsModule,
-        HttpClientModule,
-        MutableDivModule,
-        TagInputModule,
-        RouterModule,
-        ReactiveFormsModule,
-        NgxDatatableModule,
-        SharedModule,
-        RpxTranslationModule.forChild()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationsModule, decorators: [{
+    /** @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,
+            AnnotationViewComponent,
+            BoxHighlightCreateComponent,
+            AnnotationSetComponent,
+            RectangleComponent,
+            CommentComponent,
+            CommentSetHeaderComponent,
+            CommentSearchComponent,
+            TextHighlightDirective,
+            CtxToolbarComponent,
+            CommentSetComponent,
+            CommentsNavigateComponent,
+            TextareaAutoExpandDirective,
+            CommentsSummaryComponent,
+            TagsComponent,
+            MomentDatePipe,
+            CommentFilterComponent,
+            FilterPipe,
+            UnsnakePipe], imports: [A11yModule,
+            CommonModule,
+            FormsModule,
+            HttpClientModule,
+            MutableDivModule,
+            TagInputModule,
+            RouterModule,
+            ReactiveFormsModule,
+            NgxDatatableModule,
+            SharedModule, i5.RpxTranslationModule], exports: [AnnotationViewComponent,
+            BoxHighlightCreateComponent,
+            AnnotationSetComponent,
+            CommentSetComponent,
+            CommentSetHeaderComponent,
+            CommentSearchComponent,
+            CommentsSummaryComponent,
+            TagsComponent,
+            CommentFilterComponent,
+            MomentDatePipe,
+            FilterPipe,
+            UnsnakePipe,
+            MetadataLayerComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationsModule, providers: [
+            AnnotationApiService,
+            BookmarksApiService,
+            CommentSetRenderService,
+            HighlightCreateService,
+            CommentService,
+            TagsServices
+        ], imports: [A11yModule,
+            CommonModule,
+            FormsModule,
+            HttpClientModule,
+            MutableDivModule,
+            TagInputModule,
+            RouterModule,
+            ReactiveFormsModule,
+            NgxDatatableModule,
+            SharedModule,
+            RpxTranslationModule.forChild()] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -6698,10 +7044,10 @@ 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 */ IcpSessionApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpSessionApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ IcpSessionApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpSessionApiService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpSessionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpSessionApiService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
@@ -6741,10 +7087,10 @@ 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 */ AnnotationEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationEffects, deps: [{ token: i1$2.Actions }, { token: AnnotationApiService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ AnnotationEffects.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationEffects });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnnotationEffects, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: AnnotationApiService }]; } });
 
@@ -6774,10 +7120,10 @@ 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 */ BookmarksEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksEffects, deps: [{ token: i1$2.Actions }, { token: i1.Store }, { token: BookmarksApiService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ BookmarksEffects.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksEffects });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarksEffects, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: i1.Store }, { type: BookmarksApiService }]; } });
 
@@ -6820,10 +7166,10 @@ 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 */ RedactionApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ RedactionApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionApiService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionApiService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
@@ -6878,10 +7224,10 @@ 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 */ RedactionEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionEffects, deps: [{ token: i1$2.Actions }, { token: RedactionApiService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ RedactionEffects.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionEffects });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RedactionEffects, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: RedactionApiService }, { type: ToolbarEventService }]; } });
 
@@ -6895,10 +7241,10 @@ 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 */ DocumentConversionApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DocumentConversionApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ DocumentConversionApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DocumentConversionApiService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DocumentConversionApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentConversionApiService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
@@ -6918,10 +7264,10 @@ 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 */ RotationApiService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RotationApiService, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ RotationApiService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RotationApiService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RotationApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RotationApiService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
 
@@ -6953,10 +7299,10 @@ 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 */ DocumentEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DocumentEffects, deps: [{ token: i1$2.Actions }, { token: DocumentConversionApiService }, { token: RotationApiService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ DocumentEffects.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DocumentEffects });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DocumentEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DocumentEffects, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: DocumentConversionApiService }, { type: RotationApiService }]; } });
 
@@ -6970,69 +7316,69 @@ 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 */ IcpEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpEffects, deps: [{ token: i1$2.Actions }, { token: IcpSessionApiService }, { token: IcpUpdateService }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ IcpEffects.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpEffects });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IcpEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IcpEffects, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1$2.Actions }, { type: IcpSessionApiService }, { type: IcpUpdateService }]; } });
 
 const effects = [AnnotationEffects, BookmarksEffects, RedactionEffects, DocumentEffects, IcpEffects];
 
 class MediaViewerModule {
-}
-/** @nocollapse */ MediaViewerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MediaViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ MediaViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: MediaViewerModule, declarations: [PdfViewerComponent,
-        SideBarComponent,
-        BookmarksComponent,
-        OutlineItemComponent,
-        ImageViewerComponent,
-        UnsupportedViewerComponent,
-        MultimediaPlayerComponent,
-        MediaViewerComponent,
-        ConvertibleContentViewerComponent,
-        GrabNDragDirective,
-        RotationPersistDirective,
-        HighlightCreateDirective,
-        ConfirmActionDialogComponent,
-        RedactionComponent,
-        BookmarkIconsComponent,
-        ParticipantsListComponent], imports: [CommonModule,
-        HttpClientModule,
-        ToolbarModule,
-        AnnotationsModule,
-        TagInputModule,
-        FormsModule,
-        ReactiveFormsModule,
-        RouterModule, i1.StoreFeatureModule, i1$2.EffectsFeatureModule, TreeModule,
-        MutableDivModule, i5.RpxTranslationModule], exports: [MediaViewerComponent] });
-/** @nocollapse */ MediaViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MediaViewerModule, providers: [
-        PdfJsWrapperFactory,
-        CommentService,
-        RedactionApiService,
-        IcpSessionApiService,
-        IcpUpdateService,
-        SocketService,
-        IcpService,
-        IcpPresenterService,
-        IcpFollowerService,
-        RedactionApiService,
-        DocumentConversionApiService,
-        RotationApiService,
-    ], imports: [CommonModule,
-        HttpClientModule,
-        ToolbarModule,
-        AnnotationsModule,
-        TagInputModule,
-        FormsModule,
-        ReactiveFormsModule,
-        RouterModule,
-        StoreModule.forFeature('media-viewer', reducers),
-        EffectsModule.forFeature(effects),
-        TreeModule,
-        MutableDivModule,
-        RpxTranslationModule.forChild()] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MediaViewerModule, decorators: [{
+    /** @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,
+            SideBarComponent,
+            BookmarksComponent,
+            OutlineItemComponent,
+            ImageViewerComponent,
+            UnsupportedViewerComponent,
+            MultimediaPlayerComponent,
+            MediaViewerComponent,
+            ConvertibleContentViewerComponent,
+            GrabNDragDirective,
+            RotationPersistDirective,
+            HighlightCreateDirective,
+            ConfirmActionDialogComponent,
+            RedactionComponent,
+            BookmarkIconsComponent,
+            ParticipantsListComponent], imports: [CommonModule,
+            HttpClientModule,
+            ToolbarModule,
+            AnnotationsModule,
+            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: [
+            PdfJsWrapperFactory,
+            CommentService,
+            RedactionApiService,
+            IcpSessionApiService,
+            IcpUpdateService,
+            SocketService,
+            IcpService,
+            IcpPresenterService,
+            IcpFollowerService,
+            RedactionApiService,
+            DocumentConversionApiService,
+            RotationApiService,
+        ], imports: [CommonModule,
+            HttpClientModule,
+            ToolbarModule,
+            AnnotationsModule,
+            TagInputModule,
+            FormsModule,
+            ReactiveFormsModule,
+            RouterModule,
+            StoreModule.forFeature('media-viewer', reducers),
+            EffectsModule.forFeature(effects),
+            TreeModule,
+            MutableDivModule,
+            RpxTranslationModule.forChild()] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MediaViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [