@hmcts/media-viewer 2.9.2 → 2.9.4-RC.7

package/fesm2015/hmcts-media-viewer.js

@@ -14,15 +14,15 @@ import 'pdfjs-dist/build/pdf.worker';
 import uuid from 'uuid/v4';
 import moment from 'moment-timezone';
 import 'hammerjs';
+import uuid$1, { v4 } from 'uuid';
 import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
 import { RouterModule } from '@angular/router';
 import { A11yModule } from '@angular/cdk/a11y';
 import { MutableDivModule } from 'mutable-div';
 import { TagInputModule } from 'ngx-chips';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
-import uuid$1, { v4 } from 'uuid';
+import { TreeComponent, TreeModule } from '@circlon/angular-tree-component';
 import { ofType, Actions, Effect, EffectsModule } from '@ngrx/effects';
-import { TreeModule } from '@circlon/angular-tree-component';
 
 pdfjsLib.GlobalWorkerOptions.workerSrc = '/assets/build/pdf.worker.min.js';
 /**
@@ -55,15 +55,26 @@ class PdfJsWrapper {
         this.pdfViewer.eventBus.on('scalechanging', (e) => this.emitDocumentInfo(e));
         this.pdfViewer.eventBus.on('rotationchanging', (e) => this.emitDocumentInfo(e));
         this.pdfViewer.eventBus.on('updatefindcontrolstate', event => {
-            if (event.state !== FindState.PENDING) {
-                this.toolbarEvents.searchResultsCountSubject.next(event.matchesCount);
-            }
+            this.sendSearchDetails(event);
         });
         this.pdfViewer.eventBus.on('updatefindmatchescount', event => {
             this.toolbarEvents.searchResultsCountSubject.next(event.matchesCount);
         });
         this.zoomValue = 1;
     }
+    sendSearchDetails(event) {
+        var _a, _b, _c, _d, _e, _f;
+        if (event.state !== FindState.PENDING) {
+            this.toolbarEvents.searchResultsCountSubject.next(event.matchesCount);
+            if (((_b = (_a = event === null || event === void 0 ? void 0 : event.source) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.pageIdx) !== -1 && event.matchesCount.total > 0) {
+                this.toolbarEvents.redactionSerachSubject.next({
+                    page: (_d = (_c = event === null || event === void 0 ? void 0 : event.source) === null || _c === void 0 ? void 0 : _c.selected) === null || _d === void 0 ? void 0 : _d.pageIdx,
+                    matchedIndex: (_f = (_e = event === null || event === void 0 ? void 0 : event.source) === null || _e === void 0 ? void 0 : _e.selected) === null || _f === void 0 ? void 0 : _f.matchIdx,
+                    matchesCount: event.matchesCount.total
+                });
+            }
+        }
+    }
     emitDocumentInfo(e) {
         const allPages = [...this.pdfViewer._pages].map(page => {
             return {
@@ -90,7 +101,9 @@ class PdfJsWrapper {
                 this.pdfViewer.setDocument(pdfDocument);
                 this.pdfViewer.linkService.setDocument(pdfDocument, null);
                 const outline = yield pdfDocument.getOutline();
-                yield this.setOutlinePageNumbers(pdfDocument, outline);
+                if (outline) {
+                    yield this.setOutlinePageNumbers(pdfDocument, outline);
+                }
                 this.documentOutline = outline;
                 this.outlineLoaded.next(this.documentOutline);
                 const pdfMetaData = yield pdfDocument.getMetadata();
@@ -281,7 +294,11 @@ class ToolbarEventService {
         this.applyRedactToDocument = new Subject();
         this.clearAllRedactMarkers = new Subject();
         this.redactWholePage = new Subject();
+        this.redactionSerachSubject = new Subject();
+        this.redactAllInProgressSubject = new BehaviorSubject(false);
+        this.openRedactionSearch = new Subject();
         this.sidebarOpen = new BehaviorSubject(false);
+        this.sidebarOutlineView = new BehaviorSubject(true);
         this.searchBarHidden = new BehaviorSubject(true);
         this.commentsPanelVisible = new BehaviorSubject(false);
         this.icp = icpEvents;
@@ -371,6 +388,9 @@ class ToolbarEventService {
     toggleSideBar(toggle) {
         this.sidebarOpen.next(toggle);
     }
+    toggleSideBarView(toggle) {
+        this.sidebarOutlineView.next(toggle);
+    }
     toggleRedactionMode() {
         if (this.redactionMode.getValue() === false) {
             this.drawModeSubject.next(false);
@@ -380,6 +400,7 @@ class ToolbarEventService {
         else {
             this.redactionMode.next(false);
         }
+        this.openRedactionSearch.next(false);
     }
     toggleRedactionPreview(viewMode) {
         this.redactionPreview.next(viewMode);
@@ -454,7 +475,9 @@ class PrintService {
     }
     printElementNatively(element, width, height) {
         const printWindow = window.open('', '', `left=0,top=0,width=${width},height=${height},toolbar=0,scrollbars=0,status=0`);
-        printWindow.document.write(element.innerHTML);
+        const documentHead = document.head;
+        printWindow.document.body.appendChild(documentHead.cloneNode(true));
+        printWindow.document.body.appendChild(element.cloneNode(true));
         printWindow.document.close();
         printWindow.focus();
         printWindow.print();
@@ -1424,7 +1447,8 @@ function bookmarksReducer(state = initialBookmarksState, action) {
                 delete bookmarkEntities[bookmarkId];
             });
             Object.entries(removeBookmarksByPage).forEach(([pageNumber, bmrkIds]) => {
-                bookmarkPageEntities[pageNumber] = bookmarkPageEntities[pageNumber].filter(bookmarkId => bmrkIds.includes(bookmarkId));
+                bookmarkPageEntities[pageNumber]
+                    = bookmarkPageEntities[pageNumber].filter(bookmark => !bmrkIds.includes(bookmark.id));
             });
             return Object.assign(Object.assign({}, state), { bookmarkEntities,
                 bookmarkPageEntities, loading: false, loaded: true });
@@ -1453,6 +1477,9 @@ const LOAD_REDACTION_FAIL = '[Redaction] Load Redaction Fail';
 const SAVE_REDACTION = '[Redaction] Save Redaction';
 const SAVE_REDACTION_SUCCESS = '[Redaction] Save Redaction Success';
 const SAVE_REDACTION_FAIL = '[Redaction] Save Redaction Fail';
+const SAVE_BULK_REDACTION = '[Redaction] Save bulk Redaction';
+const SAVE_BULK_REDACTION_SUCCESS = '[Redaction] Save bulk Redaction Success';
+const SAVE_BULK_REDACTION_FAIL = '[Redaction] Save bulk Redaction Fail';
 const DELETE_REDACTION = '[Redaction] Delete Redaction';
 const DELETE_REDACTION_SUCCESS = '[Redaction] Delete Redaction Success';
 const DELETE_REDACTION_FAIL = '[Redaction] Delete Redaction Fail';
@@ -1499,6 +1526,24 @@ class SaveRedactionFailure {
         this.type = SAVE_REDACTION_FAIL;
     }
 }
+class SaveBulkRedactionFailure {
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SAVE_BULK_REDACTION_FAIL;
+    }
+}
+class SaveBulkRedaction {
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SAVE_BULK_REDACTION;
+    }
+}
+class SaveBulkRedactionSuccess {
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SAVE_BULK_REDACTION_SUCCESS;
+    }
+}
 class DeleteRedaction {
     constructor(payload) {
         this.payload = payload;
@@ -1588,6 +1633,14 @@ function redactionReducer(state = initialRedactionState, action) {
             return Object.assign(Object.assign({}, state), { redactionEntities,
                 redactionPageEntities });
         }
+        case SAVE_BULK_REDACTION_SUCCESS: {
+            const payloadResult = Object.assign({}, ...action.payload.searchRedactions.map((x) => ({ [x.redactionId]: x })));
+            const redactionEntities = Object.assign(Object.assign({}, state.redactionEntities), payloadResult);
+            const redactionArray = Object.keys(redactionEntities).map(key => redactionEntities[key]);
+            const redactionPageEntities = StoreUtils.groupByKeyEntities(redactionArray, 'page');
+            return Object.assign(Object.assign({}, state), { redactionEntities,
+                redactionPageEntities });
+        }
         case SELECT_REDACTION:
         case SELECT_ANNOTATION: {
             return Object.assign(Object.assign({}, state), { selectedRedaction: action.payload });
@@ -2270,7 +2323,7 @@ class PdfViewerComponent {
 PdfViewerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mv-pdf-viewer',
-                template: "<mv-side-bar *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</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</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  <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]=\"(showCommentsPanel || showIcpParticipantsList) && !(toolbarEvents.redactionMode | async)\"\n    [class.grabNDrag]=\"enableGrabNDrag\">\n    <div #pdfViewer\n         class=\"pdfViewer\"\n         mvCreateTextHighlight\n         [ngClass]=\"{ hidden: loadingDocument, highlightMode: highlightMode | async, drawMode: drawMode | async }\">\n    </div>\n    <mv-redactions *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      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set [contentScrollTop]=\"viewerContainer.scrollTop\"\n                  *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                  [annotationSet]=\"annotationSet\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotation\"\n                  [height]=\"pdfViewer.offsetHeight\"\n                  [pageHeights]=\"pageHeights\">\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">Loading...{{ loadingDocumentProgress ? loadingDocumentProgress + '%' : '' }}</h3>\n  </div>\n</div>\n",
+                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)\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)\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...{{\n        loadingDocumentProgress ? loadingDocumentProgress + \"%\" : \"\"\n      }}\n    </h3>\n  </div>\n</div>\n",
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -2296,6 +2349,7 @@ PdfViewerComponent.propDecorators = {
     enableRedactions: [{ type: Input }],
     enableICP: [{ type: Input }],
     annotationSet: [{ type: Input }],
+    enableRedactSearch: [{ type: Input }],
     height: [{ type: Input }],
     caseId: [{ type: Input }],
     viewerContainer: [{ type: ViewChild, args: ['viewerContainer', { static: true },] }],
@@ -2451,7 +2505,7 @@ class ImageViewerComponent {
 ImageViewerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mv-image-viewer',
-                template: "<mv-comment-set-header [ngClass]=\"{'show-comments-panel': showCommentsPanel}\"\n                       [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n                       (showCommentSummaryDialog)=\"toggleCommentsSummary()\">\n</mv-comment-set-header>\n<div mvGrabNDrag [dragX]=\"imageContainer\" [dragEnabled]=\"enableGrabNDrag\"\n     id=\"viewer-wrapper\"\n     [ngStyle]=\"{ height: height }\"\n     [ngClass]=\"{ 'grabNDrag': enableGrabNDrag }\"\n     *ngIf=\"url && !errorMessage\">\n  <div #imageContainer id=\"image-container\"\n       [ngClass]=\"{ 'image-container': true, 'annotations': enableAnnotations, 'show-comments-panel': showCommentsPanel }\"\n       [style.height.px]=\"imageHeight\">\n    <img #img\n         [src]=\"url\"\n         [ngClass]=\"'rot' + rotation\"\n         (error)=\"onLoadError(url)\"\n         (load)=\"onLoad(img)\"/>\n    <mv-redactions *ngIf=\"(toolbarEvents.redactionMode | async);else annotationTemplate\"\n                   [zoom]=\"zoom\"\n                   [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer *ngIf=\"enableAnnotations && annotationSet\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-metadata-layer>\n    </ng-template>\n  </div>\n\n  <div class=\"comments\" [style.height.px]=\"imageHeight\">\n    <mv-comment-set *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                    [annotationSet]=\"annotationSet\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotation\"\n                    [height]=\"imageHeight\">\n    </mv-comment-set>\n  </div>\n</div>\n"
+                template: "<mv-comment-set-header [ngClass]=\"{'show-comments-panel': showCommentsPanel}\"\n                       [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n                       (showCommentSummaryDialog)=\"toggleCommentsSummary()\">\n</mv-comment-set-header>\n<div id=\"viewer-wrapper\"\n     [ngStyle]=\"{ height: height }\"\n     [ngClass]=\"{ 'grabNDrag': enableGrabNDrag }\"\n     *ngIf=\"url && !errorMessage\">\n  <div #imageContainer id=\"image-container\"\n       mvGrabNDrag [dragX]=\"imageContainer\" [dragEnabled]=\"enableGrabNDrag\"\n       (scroll)=\"$event\"\n       [ngClass]=\"{ 'image-container': true, 'annotations': enableAnnotations, 'show-comments-panel': showCommentsPanel }\">\n    <img #img\n         [src]=\"url\"\n         [ngClass]=\"'rot' + rotation\"\n         (error)=\"onLoadError(url)\"\n         (load)=\"onLoad(img)\"/>\n    <mv-redactions *ngIf=\"(toolbarEvents.redactionMode | async);else annotationTemplate\"\n                   [zoom]=\"zoom\"\n                   [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer *ngIf=\"enableAnnotations && annotationSet\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-metadata-layer>\n    </ng-template>\n  </div>\n\n    <mv-comment-set [contentScrollTop]=\"imageContainer.scrollTop\"\n                    *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                    [annotationSet]=\"annotationSet\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotation\"\n                    [height]=\"imageHeight\">\n    </mv-comment-set>\n</div>\n"
             },] }
 ];
 /** @nocollapse */
@@ -2578,6 +2632,7 @@ AnnotationApiService.ctorParameters = () => [
 class CommentService {
     constructor() {
         this.unsavedChanges = new Subject();
+        this.marginToCommentEmitter = new BehaviorSubject(false);
     }
     setCommentSet(commentSetComponent) {
         this.commentSetComponent = commentSetComponent;
@@ -2610,6 +2665,9 @@ class CommentService {
     allCommentsSaved() {
         this.onCommentChange(this.commentSetComponent.commentComponents.some(comment => comment.hasUnsavedChanges === true));
     }
+    createMarginToCommentEvent(margin) {
+        this.marginToCommentEmitter.next(margin);
+    }
 }
 CommentService.decorators = [
     { type: Injectable }
@@ -2743,6 +2801,7 @@ class MediaViewerComponent {
         this.enableRedactions = false;
         this.enableICP = false;
         this.multimediaPlayerEnabled = false;
+        this.enableRedactSearch = false;
         this.multimediaContent = false;
         this.convertibleContent = false;
         this.unsupportedContent = false;
@@ -2866,7 +2925,7 @@ class MediaViewerComponent {
 MediaViewerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mv-media-viewer',
-                template: "<div 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 *ngIf=\"showCommentSummary\"\n                       [title]=\"documentTitle || 'Comment Summary'\"\n                       [contentType]=\"contentType\">\n  </mv-comments-summary>\n\n  <mv-confirm-action *ngIf=\"toolbarEvents.icp.leavingSession | async\"></mv-confirm-action>\n\n  <div id=\"mainContainer\">\n    <mv-main-toolbar *ngIf=\"showToolbar\"\n                     [enableAnnotations]=\"enableAnnotations\"\n                     [enableICP]=\"enableICP\"\n                     [enableRedactions]=\"enableRedactions\"\n                     [contentType]=\"contentType\"\n                     >\n    </mv-main-toolbar>\n    <mv-redaction-toolbar *ngIf=\"toolbarEvents.redactionMode | async\"></mv-redaction-toolbar>\n    <mv-icp-toolbar *ngIf=\"toolbarEvents.icp.enabled | async\"></mv-icp-toolbar>\n\n    <div #viewerRef>\n      <mv-conversion-viewer *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      </mv-conversion-viewer>\n      <mv-pdf-viewer *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      </mv-pdf-viewer>\n      <mv-image-viewer *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      </mv-image-viewer>\n      <mv-multimedia-player *ngIf=\"multimediaContent\"\n                            [multimediaOn]=\"multimediaPlayerEnabled\"\n                            [url]=\"url\"\n                            [downloadFileName]=\"downloadFileName\"\n                            (loadStatus)=\"onMediaLoad($event)\">\n      </mv-multimedia-player>\n      <mv-unsupported-viewer *ngIf=\"unsupportedContent\"\n                             [url]=\"url\"\n                             [typeException]=\"typeException\"\n                             [downloadFileName]=\"downloadFileName\"\n                             (loadStatus)=\"onMediaLoad($event)\"\n                             (unsupportedViewerException)=\"onLoadException($event)\">\n      </mv-unsupported-viewer>\n    </div>\n  </div>\n</div>\n",
+                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-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",
                 encapsulation: ViewEncapsulation.None
             },] }
 ];
@@ -2898,9 +2957,256 @@ MediaViewerComponent.propDecorators = {
     enableRedactions: [{ type: Input }],
     enableICP: [{ type: Input }],
     multimediaPlayerEnabled: [{ type: Input }],
+    enableRedactSearch: [{ type: Input }],
     caseId: [{ type: Input }]
 };
 
+class HighlightCreateService {
+    constructor(toolBarEvents, store) {
+        this.toolBarEvents = toolBarEvents;
+        this.store = store;
+    }
+    saveAnnotation(rectangles, page) {
+        this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
+            const anno = Object.assign(Object.assign({ id: v4(), color: 'FFFF00', comments: [], page: page, rectangles: rectangles, type: 'highlight' }, anoSetDocId), { createdBy: '', createdByDetails: undefined, createdDate: moment.utc().tz('Europe/London').toISOString(), lastModifiedBy: '', lastModifiedByDetails: undefined, lastModifiedDate: '', tags: [] });
+            this.store.dispatch(new SaveAnnotation(anno));
+        });
+    }
+    applyRotation(pageHeight, pageWidth, offsetHeight, offsetWidth, offsetTop, offsetLeft, rotate, zoom) {
+        const { x, y, width, height } = {
+            x: +(offsetLeft / zoom).toFixed(2),
+            y: +(offsetTop / zoom).toFixed(2),
+            width: +(offsetWidth / zoom).toFixed(2),
+            height: +(offsetHeight / zoom).toFixed(2)
+        };
+        const rectangle = { x, y, width, height };
+        switch (rotate) {
+            case 90:
+                rectangle.width = height;
+                rectangle.height = width;
+                rectangle.x = y;
+                rectangle.y = +(pageWidth / zoom - x - width).toFixed(2);
+                break;
+            case 180:
+                rectangle.x = +(pageWidth / zoom - x - width).toFixed(2);
+                rectangle.y = +(pageHeight / zoom - y - height).toFixed(2);
+                break;
+            case 270:
+                rectangle.width = height;
+                rectangle.height = width;
+                rectangle.x = +(pageHeight / zoom - y - height).toFixed(2);
+                rectangle.y = x;
+                break;
+        }
+        return rectangle;
+    }
+    resetHighlight() {
+        window.getSelection().removeAllRanges();
+        this.toolBarEvents.highlightModeSubject.next(false);
+    }
+}
+HighlightCreateService.decorators = [
+    { type: Injectable }
+];
+/** @nocollapse */
+HighlightCreateService.ctorParameters = () => [
+    { type: ToolbarEventService },
+    { type: Store }
+];
+
+class RedactionSearchBarComponent {
+    constructor(store, toolbarButtons, toolbarEvents, highlightService) {
+        this.store = store;
+        this.toolbarButtons = toolbarButtons;
+        this.toolbarEvents = toolbarEvents;
+        this.highlightService = highlightService;
+        this.highlightAll = true;
+        this.matchCase = false;
+        this.wholeWord = false;
+        this.resultsText = '';
+        this.searchText = '';
+        this.resultCount = 0;
+        this.redactElements = [];
+        this.advancedSearchVisible = false;
+    }
+    ngOnInit() {
+        this.subscription = this.toolbarEvents.redactionSerachSubject.subscribe((results) => this.redactAllSearched(results));
+        this.subscription.add(this.store.pipe(select(getDocumentId)).subscribe(docId => this.documentId = docId));
+        this.subscription.add(this.store.pipe(select(getPages)).subscribe((pages) => {
+            if (pages[1]) {
+                this.allPages = pages;
+            }
+        }));
+        this.subscription.add(this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results)));
+        this.subscription.add(this.toolbarEvents.openRedactionSearch.subscribe(isOpen => this.openSearchModal = isOpen));
+        this.subscription.add(this.toolbarEvents.redactAllInProgressSubject
+            .subscribe(inProgress => this.redactAllInProgress = inProgress));
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+    onWindowKeyDown(e) {
+        if (e.code === 'F3' || (e.ctrlKey && e.code === 'KeyF')) {
+            e.preventDefault();
+            this.toolbarEvents.searchBarHidden.next(false);
+            setTimeout(() => this.findInput.nativeElement.focus(), 200);
+        }
+    }
+    search(reset = true) {
+        this.redactAll = !reset;
+        if (this.redactAll) {
+            this.toolbarEvents.redactAllInProgressSubject.next(true);
+        }
+        if (reset) {
+            this.redactElements = [];
+        }
+        this.toolbarEvents.search({
+            searchTerm: this.searchText,
+            highlightAll: this.highlightAll,
+            matchCase: this.matchCase,
+            wholeWord: this.wholeWord,
+            previous: false,
+            reset
+        });
+    }
+    saveRedaction(redactRectangle) {
+        const redaction = redactRectangle.map(ele => {
+            return { page: ele.page, rectangles: ele.rectangles, redactionId: uuid$1(), documentId: this.documentId };
+        });
+        this.store.dispatch(new SaveBulkRedaction({ searchRedactions: redaction }));
+    }
+    existInRedactElements(pageNumber, matechedIndex, rectangles) {
+        if (this.redactElements && this.redactElements.length > 0) {
+            const pagesFound = this.redactElements.find(re => re.page === pageNumber && re.matchedIndex === matechedIndex);
+            const pageRectangles = pagesFound === null || pagesFound === void 0 ? void 0 : pagesFound.rectangles;
+            if (!pageRectangles || pageRectangles.length <= 0) {
+                return false;
+            }
+            let matchesRectangles = 0;
+            for (let rectIndx = 0; rectIndx < pageRectangles.length; rectIndx++) {
+                const rectangle = pageRectangles[rectIndx];
+                const foundRectangle = rectangles.find(re => re.width === rectangle.width &&
+                    re.height === rectangle.height && re.x === rectangle.x && re.y === rectangle.y);
+                if (foundRectangle) {
+                    matchesRectangles++;
+                }
+            }
+            return pageRectangles.length === matchesRectangles;
+        }
+        return false;
+    }
+    onCloseSearchModal() {
+        this.toolbarEvents.openRedactionSearch.next(false);
+    }
+    setSearchResultsCount(results) {
+        this.resultCount = results.total;
+        this.resultsText = this.resultCount > 0
+            ? `${results.total} results founds`
+            : 'No results found';
+    }
+    redactAllSearched(results) {
+        const $this = this;
+        const intervalId = setInterval(() => {
+            const highlightElement = document.getElementsByClassName('highlight selected');
+            if (highlightElement && highlightElement.length > 0) {
+                clearInterval(intervalId);
+                $this.redactAllSearchedTick(results);
+            }
+        }, 100);
+    }
+    redactAllSearchedTick(results) {
+        const highlightElement = document.getElementsByClassName('highlight selected');
+        if (highlightElement && highlightElement.length > 0) {
+            this.resultCount = results.matchesCount;
+            const pageNumber = results.page + 1;
+            const rectangles = this.getRectangles(pageNumber);
+            if (rectangles && this.redactElements.length <= this.resultCount
+                && !this.existInRedactElements(pageNumber, results.matchedIndex, rectangles)) {
+                this.redactElements.push({ page: pageNumber, matchedIndex: results === null || results === void 0 ? void 0 : results.matchedIndex, rectangles });
+                this.CreateRedactAllText();
+            }
+            if (this.redactAll && this.resultCount && this.resultCount > 0
+                && rectangles && this.redactElements.length < this.resultCount) {
+                this.search(false);
+            }
+            if (this.redactAll && this.resultCount && this.redactElements.length === this.resultCount) {
+                this.redactAll = false;
+                this.redactAllText = null;
+                this.saveRedaction(this.redactElements);
+            }
+        }
+    }
+    CreateRedactAllText() {
+        this.redactAllText = `${this.redactElements.length} of ${this.resultCount}`;
+    }
+    onEscapeKeyPress(e) {
+        this.toolbarEvents.searchBarHidden.next(true);
+    }
+    onEnterKeyPress(e) {
+        this.search();
+    }
+    toggleSearchBar() {
+        this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
+    }
+    getRectangles(page) {
+        this.pageHeight = this.allPages[page].styles.height;
+        this.pageWidth = this.allPages[page].styles.width;
+        this.zoom = parseFloat(this.allPages[page].scaleRotation.scale);
+        this.rotate = parseInt(this.allPages[page].scaleRotation.rotation, 10);
+        const selectedHighLightedElements = document.getElementsByClassName('highlight selected');
+        if (selectedHighLightedElements && selectedHighLightedElements.length > 0) {
+            const docRange = document.createRange();
+            docRange.selectNodeContents(selectedHighLightedElements[0]);
+            const selection = window.getSelection();
+            selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+            selection === null || selection === void 0 ? void 0 : selection.addRange(docRange);
+            if (selection.rangeCount && !selection.isCollapsed) {
+                const range = selection.getRangeAt(0).cloneRange();
+                const clientRects = range.getClientRects();
+                if (clientRects) {
+                    const parentRect = selectedHighLightedElements[0].parentElement.parentElement.getBoundingClientRect();
+                    const selectionRectangles = [];
+                    for (let i = 0; i < clientRects.length; i++) {
+                        const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
+                        const findSelecttionRectangle = selectionRectangles.find((rect) => rect.width === selectionRectangle.width && rect.x === selectionRectangle.x);
+                        if (!findSelecttionRectangle) {
+                            selectionRectangles.push(selectionRectangle);
+                        }
+                    }
+                    return selectionRectangles;
+                }
+            }
+        }
+    }
+    createTextRectangle(rect, parentRect) {
+        const height = rect.bottom - rect.top;
+        const width = rect.right - rect.left;
+        const top = rect.top - parentRect.top;
+        const left = rect.left - parentRect.left;
+        let rectangle = this.highlightService.applyRotation(this.pageHeight, this.pageWidth, height, width, top, left, this.rotate, this.zoom);
+        rectangle = Object.assign({ id: uuid$1() }, rectangle);
+        return rectangle;
+    }
+}
+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=\"Find in document\"\n        #findInput\n        title=\"Find in document\"\n        placeholder=\"Redact from search...\"\n        tabindex=\"0\"\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\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\"\n        >\n          Redact all\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            Redacting in progress\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}"]
+            },] }
+];
+/** @nocollapse */
+RedactionSearchBarComponent.ctorParameters = () => [
+    { type: Store },
+    { type: ToolbarButtonVisibilityService },
+    { type: ToolbarEventService },
+    { type: HighlightCreateService }
+];
+RedactionSearchBarComponent.propDecorators = {
+    findInput: [{ type: ViewChild, args: ['findInput', { static: true },] }],
+    onWindowKeyDown: [{ type: HostListener, args: ['window:keydown', ['$event'],] }]
+};
+
 /**
  * Number Helper Service
  * */
@@ -2960,6 +3266,8 @@ class MainToolbarComponent {
             }
         }), this.toolbarEvents.redactionMode.subscribe(enabled => {
             this.redactionEnabled = enabled;
+        }), this.toolbarEvents.redactAllInProgressSubject.subscribe(disable => {
+            this.redactAllInProgress = disable;
         }));
     }
     ngOnDestroy() {
@@ -2983,8 +3291,21 @@ class MainToolbarComponent {
     onClickDrawToggle() {
         this.toolbarEvents.toggleDrawMode();
     }
-    toggleSideBar() {
-        this.toolbarEvents.sidebarOpen.next(!this.toolbarEvents.sidebarOpen.getValue());
+    toggleIndexSideBar() {
+        const sidebarOpen = this.toolbarEvents.sidebarOpen.getValue();
+        const sidebarView = this.toolbarEvents.sidebarOutlineView.getValue();
+        if (!(sidebarOpen && !sidebarView)) {
+            this.toolbarEvents.toggleSideBar(!sidebarOpen);
+        }
+        this.toolbarEvents.toggleSideBarView(true);
+    }
+    toggleBookmarksSideBar() {
+        const sidebarOpen = this.toolbarEvents.sidebarOpen.getValue();
+        const sidebarView = this.toolbarEvents.sidebarOutlineView.getValue();
+        if (!(sidebarOpen && sidebarView)) {
+            this.toolbarEvents.toggleSideBar(!sidebarOpen);
+        }
+        this.toolbarEvents.toggleSideBarView(false);
     }
     togglePresentBar() {
         this.toolbarEvents.searchBarHidden.next(true);
@@ -3051,7 +3372,7 @@ class MainToolbarComponent {
 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 id=\"mvMoreOptionsBtn\" class=\"mv-button mv-toolbar__menu-button--more-options\"\n                  [class.mv-toolbar__menu-button--more-options__hidden]=\"mvToolbar.offsetWidth >= allButtonsWidth\" aria-pressed=\"false\"\n                  (click)=\"toggleMoreOptions()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n            <span>More options</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 cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\" [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\">\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\n          <button *ngIf=\"toolbarButtons.showSidebar\" id=\"mvIndexBtn\" title=\"Index\" data-l10n-id=\"index\" #mvIndexBtn\n                  class=\"mv-button mv-toolbar__menu-button--index\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleSideBar(); isDropdownMenuOpen = false\">\n            <span>Index</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showDrawButton\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDrawBtn\"\n            #mvDrawBtn class=\"mv-button mv-toolbar__menu-button--draw\" title=\"Draw a box\" tabindex=\"-1\"\n            [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\" (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\">\n            <span data-l10n-id=\"draw_label\">Draw a box</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showHighlightButton\" [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\" #mvHighlightBtn class=\"mv-button mv-toolbar__menu-button--highlight\" title=\"Highlight\"\n            tabindex=\"-1\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\" data-l10n-id=\"toggleHighlightButton\">\n            <span data-l10n-id=\"highlight_label\">Highlight</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div id=\"mvPageBtn\" #mvPageBtn class=\"mv-toolbar__menu-button--page\" aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\"\n              [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\">\n              <span>Page</span>\n\n              <button id=\"mvUpBtn\" [disabled]=\"pageNumber === 1\" title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\" data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"><span></span></button>\n              <button id=\"mvDownBtn\" [disabled]=\"pageNumber === pageCount\" title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\" data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"><span></span></button>\n\n              <input type=\"number\" id=\"pageNumber\" class=\"hmcts-toolbar-input govuk-input--width-2\" title=\"Page Number\"\n                value=\"1\" size=\"4\" min=\"1\" [value]=\"pageNumber\" aria-label=\"page number\" tabindex=\"0\"\n                data-l10n-id=\"page\" (change)=\"onPageNumberInputChange(pageNumberInput.value)\" #pageNumberInput>\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div id=\"mvZoomBtn\" #mvZoomBtn class=\"mv-toolbar__menu-button--zoom\" aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\"\n              [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\">\n              <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 0.1\" id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\" title=\"Zoom Out\" data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"><span></span></button>\n              <select id=\"scaleSelect\" class=\"hmcts-toolbar-select\" title=\"Zoom\" tabindex=\"0\" data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\" aria-label=\"zoom\">\n                <option #zoomSelect id=\"customScaleOption\" title=\"\" [value]=\"toolbarEvents.zoomValueSubject.value\">\n                  {{(toolbarEvents.zoomValueSubject.value) * 100 | number: '1.0-0'}}%</option>\n                <option *ngFor=\"let zoomScale of zoomScales\" title=\"\" [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale*100\">{{ zoomScale *100 }}%\n                </option>\n              </select>\n\n              <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 5\" id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\" (click)=\"stepZoom(0.1)\" title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"><span></span></button>\n            </div>\n          </ng-container>\n\n          <div *ngIf=\"toolbarButtons.showRotate\" id=\"mvRotateBtn\" #mvRotateBtn class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\">\n            <button id=\"mvRotateLeftBtn\" class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\" data-l10n-id=\"page_rotate_ccw\" (click)=\"rotate(270)\"><span></span>\n            </button>\n            <button id=\"mvRotateRightBtn\" class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\" data-l10n-id=\"page_rotate_cw\" (click)=\"rotate(90)\"><span></span>\n            </button>\n            <span>Rotate</span>\n          </div>\n\n          <button *ngIf=\"toolbarButtons.showSearchBar\" [disabled]=\"icpEnabled\" id=\"mvSearchBtn\" #mvSearchBtn\n                  title=\"Search\" data-l10n-id=\"searchbar\" class=\"mv-button mv-toolbar__menu-button--search\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\">\n          </button>\n\n          <button *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n                  [disabled]=\"icpEnabled || !contentType || redactionEnabled\" id=\"mvPresentBtn\" #mvPresentBtn\n                  class=\"mv-button mv-toolbar__menu-button--present\" title=\"In-Court Presentation Mode\"\n                  data-l10n-id=\"icpMode_label\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\" aria-pressed=\"false\"\n                  (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"><span data-l10n-id=\"icpMode_label\">Present</span>\n          </button>\n\n          <button *ngIf=\"enableRedactions && toolbarButtons.showRedact\" [disabled]=\"icpEnabled\" id=\"mvRedactBtn\"\n                  #mvRedactBtn title=\"Redact\" data-l10n-id=\"redact\" class=\"mv-button mv-toolbar__menu-button--redact\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\">\n            <span>Redact</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showGrabNDragButton\" [disabled]=\"icpEnabled\" id=\"mvGrabBtn\" #mvGrabBtn\n                  class=\"mv-button mv-toolbar__menu-button--grab\" title=\"Grab and drag\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\">\n            <span>Grab and drag</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showDownload\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDownloadBtn\"\n                  #mvDownloadBtn class=\"mv-button mv-toolbar__menu-button--download\" title=\"Download\" data-l10n-id=\"download\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\" aria-pressed=\"false\"\n                  (click)=\"downloadFile(); isDropdownMenuOpen = false\">\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showPrint\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvPrintBtn\"\n                  #mvPrintBtn title=\"Print\" data-l10n-id=\"print\" class=\"mv-button mv-toolbar__menu-button--print\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\" aria-pressed=\"false\"\n                  (click)=\"printFile(); isDropdownMenuOpen = false\">\n          </button>\n\n          <button *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\" [disabled]=\"redactionEnabled\"\n                  id=\"mvCommentsBtn\" #mvCommentsBtn class=\"mv-button mv-toolbar__menu-button--comments\" title=\"Comments\"\n                  data-l10n-id=\"comments\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\">\n            <span>Comments</span>\n          </button>\n\n        </ng-template>\n      </div>\n      <mv-search-bar></mv-search-bar>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\">\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                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</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</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': mvToolbarMain.offsetWidth < widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown': mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Bookmarks</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            tabindex=\"-1\"\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-hidden=\"true\"\n            aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\"\n            (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">Draw a box</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            tabindex=\"-1\"\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.highlightModeSubject | async\"\n            aria-hidden=\"true\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">Highlight</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</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></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></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</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          ></button>\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\">Present</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</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</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          ></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          ></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</span>\n          </button>\n        </ng-template>\n      </div>\n      <mv-search-bar></mv-search-bar>\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"
             },] }
 ];
 /** @nocollapse */
@@ -3203,11 +3524,18 @@ class RedactionToolbarComponent {
         this.store = store;
         this.preview = false;
         this.hasRedactions = false;
+        this.subscriptions = [];
     }
     ngOnInit() {
-        this.$subscription = this.store.pipe(select(getRedactionArray)).subscribe(redactions => {
+        this.subscriptions.push(this.store.pipe(select(getRedactionArray)).subscribe(redactions => {
             this.hasRedactions = !!redactions.redactions.length;
-        });
+        }));
+        this.subscriptions.push(this.toolbarEventService.redactAllInProgressSubject.subscribe(inprogress => {
+            this.redactionAllInProgress = inprogress;
+        }));
+    }
+    onRedactAllSearch() {
+        this.toolbarEventService.openRedactionSearch.next(true);
     }
     toggleTextRedactionMode() {
         this.toolbarEventService.highlightModeSubject.next(true);
@@ -3233,13 +3561,15 @@ class RedactionToolbarComponent {
         this.toolbarEventService.redactPage();
     }
     ngOnDestroy() {
-        this.$subscription.unsubscribe();
+        for (const subscription of this.subscriptions) {
+            subscription.unsubscribe();
+        }
     }
 }
 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\">Redaction options</label>\n  <button id=\"toggleDrawButton\" class=\"mv-button redaction-button--draw\" title=\"Draw a box\"\n    data-l10n-id=\"toggleDrawButton\" (click)=\"toggleDrawMode()\">\n    <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n  </button>\n\n  <button id=\"redactPageButton\" class=\"mv-button redaction-button--redact-page\" title=\"Redact Page\"\n    data-l10n-id=\"redactPageButton\" (click)=\"redactPage()\">\n    <span data-l10n-id=\"redactPageButton_label\">Redact page</span>\n  </button>\n\n  <button *ngIf=\"toolbarButtons.showHighlightButton\" id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\" aria-pressed=\"false\" title=\"Redact text\"\n    data-l10n-id=\"toggleTextRedactionButton\" (click)=\"toggleTextRedactionMode()\">\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvClearBtn\" #mvClearBtn class=\"mv-button redaction-button--clear\" aria-pressed=\"false\" title=\"Clear all\"\n    data-l10n-id=\"toggleClearAllButton\" (click)=\"unmarkAll()\">\n    <span data-l10n-id=\"Clear all\">Clear all</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvPreviewBtn\" class=\"mv-button\" [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\" redaction-button--preview aria-pressed=\"false\" title=\"Preview\"\n    data-l10n-id=\"togglePreviewButton\" (click)=\"togglePreview()\">\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">Hide preview</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvRedactBtn\" class=\"mv-button redaction-button--download\" aria-pressed=\"false\" title=\"Redact\"\n    data-l10n-id=\"mvRedactBtn\" (click)=\"redact()\">\n    <span data-l10n-id=\"Save Document\">Save document</span>\n  </button>\n\n  <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button redaction-button--close\" title=\"Close Redaction\" data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\">\n    <span data-l10n-id=\"Close Redaction\">Close Redaction</span>\n  </button>\n\n</div>\n"
+                template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >Redaction options</label\n  >\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw\"\n    title=\"Draw a box\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n  </button>\n\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page\"\n    title=\"Redact Page\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">Redact page</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    title=\"From search\"\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</span\n    >\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\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</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\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">Clear all</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\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\"\n      >Hide preview</span\n    >\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=\"Redact\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">Save document</span>\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)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">Close Redaction</span>\n  </button>\n</div>\n"
             },] }
 ];
 /** @nocollapse */
@@ -3248,6 +3578,9 @@ RedactionToolbarComponent.ctorParameters = () => [
     { type: ToolbarButtonVisibilityService },
     { type: Store }
 ];
+RedactionToolbarComponent.propDecorators = {
+    showRedactSearch: [{ type: Input }]
+};
 
 class IcpToolbarComponent {
     constructor(toolbarEventService, store) {
@@ -3296,7 +3629,8 @@ ToolbarModule.decorators = [
                     SearchBarComponent,
                     MainToolbarComponent,
                     RedactionToolbarComponent,
-                    IcpToolbarComponent
+                    IcpToolbarComponent,
+                    RedactionSearchBarComponent
                 ],
                 providers: [
                     ToolbarButtonVisibilityService,
@@ -3306,7 +3640,8 @@ ToolbarModule.decorators = [
                     MainToolbarComponent,
                     SearchBarComponent,
                     RedactionToolbarComponent,
-                    IcpToolbarComponent
+                    IcpToolbarComponent,
+                    RedactionSearchBarComponent
                 ],
                 imports: [
                     CommonModule,
@@ -3439,77 +3774,24 @@ AnnotationSetComponent.propDecorators = {
     pageWidth: [{ type: Input }]
 };
 
-class HighlightCreateService {
-    constructor(toolBarEvents, store) {
-        this.toolBarEvents = toolBarEvents;
-        this.store = store;
+class RectangleComponent {
+    constructor(toolbarEvents, highlightService) {
+        this.toolbarEvents = toolbarEvents;
+        this.highlightService = highlightService;
+        this.select = new EventEmitter();
+        this.update = new EventEmitter();
+        this.subscriptions = [];
+        this.enableGrabNDrag = false;
     }
-    saveAnnotation(rectangles, page) {
-        this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
-            const anno = Object.assign(Object.assign({ id: uuid$1(), color: 'FFFF00', comments: [], page: page, rectangles: rectangles, type: 'highlight' }, anoSetDocId), { createdBy: '', createdByDetails: undefined, createdDate: moment.utc().tz('Europe/London').toISOString(), lastModifiedBy: '', lastModifiedByDetails: undefined, lastModifiedDate: '', tags: [] });
-            this.store.dispatch(new SaveAnnotation(anno));
-        });
+    set annoRect(annoRect) {
+        this._annoRect = Object.assign({}, annoRect);
+        this.height = +(annoRect.height * this.zoom).toFixed(2);
+        this.width = +(annoRect.width * this.zoom).toFixed(2);
+        this.left = +(annoRect.x * this.zoom).toFixed(2);
+        this.top = +(annoRect.y * this.zoom).toFixed(2);
     }
-    applyRotation(pageHeight, pageWidth, offsetHeight, offsetWidth, offsetTop, offsetLeft, rotate, zoom) {
-        const { x, y, width, height } = {
-            x: +(offsetLeft / zoom).toFixed(2),
-            y: +(offsetTop / zoom).toFixed(2),
-            width: +(offsetWidth / zoom).toFixed(2),
-            height: +(offsetHeight / zoom).toFixed(2)
-        };
-        const rectangle = { x, y, width, height };
-        switch (rotate) {
-            case 90:
-                rectangle.width = height;
-                rectangle.height = width;
-                rectangle.x = y;
-                rectangle.y = +(pageWidth / zoom - x - width).toFixed(2);
-                break;
-            case 180:
-                rectangle.x = +(pageWidth / zoom - x - width).toFixed(2);
-                rectangle.y = +(pageHeight / zoom - y - height).toFixed(2);
-                break;
-            case 270:
-                rectangle.width = height;
-                rectangle.height = width;
-                rectangle.x = +(pageHeight / zoom - y - height).toFixed(2);
-                rectangle.y = x;
-                break;
-        }
-        return rectangle;
-    }
-    resetHighlight() {
-        window.getSelection().removeAllRanges();
-        this.toolBarEvents.highlightModeSubject.next(false);
-    }
-}
-HighlightCreateService.decorators = [
-    { type: Injectable }
-];
-/** @nocollapse */
-HighlightCreateService.ctorParameters = () => [
-    { type: ToolbarEventService },
-    { type: Store }
-];
-
-class RectangleComponent {
-    constructor(toolbarEvents, highlightService) {
-        this.toolbarEvents = toolbarEvents;
-        this.highlightService = highlightService;
-        this.select = new EventEmitter();
-        this.update = new EventEmitter();
-        this.subscriptions = [];
-        this.enableGrabNDrag = false;
-    }
-    set annoRect(annoRect) {
-        this._annoRect = Object.assign({}, annoRect);
-        this.height = +(annoRect.height * this.zoom).toFixed(2);
-        this.width = +(annoRect.width * this.zoom).toFixed(2);
-        this.left = +(annoRect.x * this.zoom).toFixed(2);
-        this.top = +(annoRect.y * this.zoom).toFixed(2);
-    }
-    get annoRect() {
-        return this._annoRect;
+    get annoRect() {
+        return this._annoRect;
     }
     ngOnChanges(changes) {
         if (changes.rotate) {
@@ -3651,6 +3933,7 @@ class CommentComponent {
         this.subscriptions = this.store.select(getComponentSearchText)
             .pipe(distinctUntilChanged()).subscribe(searchString => this.searchString = searchString);
         this.reRenderComments();
+        this.marginToComment$ = this.commentService.marginToCommentEmitter.asObservable();
     }
     ngAfterContentInit() {
         if (this.tagItems && this.tagItems.length) {
@@ -3761,7 +4044,7 @@ class CommentComponent {
 CommentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mv-anno-comment',
-                template: "<div #form (click)=\"onCommentClick()\" class=\"aui-comment\"\n      [style.top.px]=\"commentTop\"\n      [style.zIndex]=\"selected ? 100 : 0\">\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  </mv-tags>\n  <textarea *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  </textarea>\n  <p *ngIf=\"!editable\"\n     mvTextHighlight class=\"commentText\" [textToHighlight]=\"searchString\">\n      {{ fullComment }}\n  </p>\n  <div *ngIf=\"selected || this.editable || (!fullComment.length && (tagItems && !tagItems.length))\"\n       class=\"aui-comment__footer commentBtns\">\n    <button class=\"govuk-button\"\n            type=\"button\" role=\"button\"\n            (click)=\"editOrSave()\">\n      {{ !editable ? 'Edit' : 'Save' }}\n    </button>\n    <button type=\"button\" role=\"button\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"deleteOrCancel()\">\n      {{ !editable ? 'Delete' : 'Cancel' }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">private</span>\n</div>\n"
+                template: "<div #form (click)=\"onCommentClick()\" class=\"aui-comment\"\n      [ngClass]=\"{'stylestoggle' : (marginToComment$ | async ) }\"\n      [style.top.px]=\"commentTop\"\n      [style.zIndex]=\"selected ? 100 : 0\">\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  </mv-tags>\n  <textarea *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  </textarea>\n  <p *ngIf=\"!editable\"\n     mvTextHighlight class=\"commentText\" [textToHighlight]=\"searchString\">\n      {{ fullComment }}\n  </p>\n  <div *ngIf=\"selected || this.editable || (!fullComment.length && (tagItems && !tagItems.length))\"\n       class=\"aui-comment__footer commentBtns\">\n    <button class=\"govuk-button\"\n            type=\"button\" role=\"button\"\n            (click)=\"editOrSave()\">\n      {{ !editable ? 'Edit' : 'Save' }}\n    </button>\n    <button type=\"button\" role=\"button\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"deleteOrCancel()\">\n      {{ !editable ? 'Delete' : 'Cancel' }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">private</span>\n</div>\n"
             },] }
 ];
 /** @nocollapse */
@@ -4238,7 +4521,7 @@ class BoxHighlightCreateComponent {
         if (this.height / this.zoom > 5 || this.width / this.zoom > 5) {
             let rectangle = this.highlightService
                 .applyRotation(this.pageHeight, this.pageWidth, this.height, this.width, this.top, this.left, this.rotate, this.zoom);
-            rectangle = Object.assign({ id: uuid$1() }, rectangle);
+            rectangle = Object.assign({ id: v4() }, rectangle);
             this.saveSelection.emit({ rectangles: [rectangle], page: this.page });
             this.resetHighlight();
         }
@@ -4282,8 +4565,9 @@ BoxHighlightCreateComponent.propDecorators = {
 };
 
 class CommentSetHeaderComponent {
-    constructor(store, toolbarEvents) {
+    constructor(store, commentService, toolbarEvents) {
         this.store = store;
+        this.commentService = commentService;
         this.toolbarEvents = toolbarEvents;
         this.showCommentSummaryDialog = new EventEmitter();
         this.tabs = [];
@@ -4307,6 +4591,14 @@ class CommentSetHeaderComponent {
     }
     selectTab(tab) {
         this.tabSelected = tab !== this.tabSelected ? tab : undefined;
+        if (this.tabSelected) {
+            this.marginToComment = true;
+            this.commentService.createMarginToCommentEvent(this.marginToComment);
+        }
+        else {
+            this.marginToComment = false;
+            this.commentService.createMarginToCommentEvent(this.marginToComment);
+        }
     }
     toggleCommentsPanel() {
         this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
@@ -4325,6 +4617,7 @@ CommentSetHeaderComponent.decorators = [
 /** @nocollapse */
 CommentSetHeaderComponent.ctorParameters = () => [
     { type: Store },
+    { type: CommentService },
     { type: ToolbarEventService }
 ];
 CommentSetHeaderComponent.propDecorators = {
@@ -4897,7 +5190,7 @@ const ɵ2 = (bookmarkNodes, docId, pdfPosition, pages) => {
         pageNumber: pdfPosition.pageNumber - 1,
         xCoordinate: pdfPosition.left,
         yCoordinate: pages[pdfPosition.pageNumber].styles.height - (pdfPosition.top * pages[pdfPosition.pageNumber].viewportScale),
-        previous: bookmarkNodes.length > 0 ? bookmarkNodes[bookmarkNodes.length - 1].id : undefined,
+        previous: bookmarkNodes.length > 0 ? bookmarkNodes.sort((a, b) => a.index - b.index)[bookmarkNodes.length - 1].id : undefined,
         documentId: docId
     };
 };
@@ -4958,8 +5251,9 @@ class MetadataLayerComponent {
         this.store.pipe(select(getBookmarkInfo), take(1))
             .subscribe((bookmarkInfo) => {
             const selection = window.getSelection().toString();
-            this.store.dispatch(new CreateBookmark(Object.assign(Object.assign({}, bookmarkInfo), { name: selection.length > 0 ? selection.substr(0, 30) : 'new bookmark', id: uuid$1(), pageNumber: this.highlightPage - 1, xCoordinate: rectangle.x, yCoordinate: rectangle.y })));
+            this.store.dispatch(new CreateBookmark(Object.assign(Object.assign({}, bookmarkInfo), { name: selection.length > 0 ? selection.substr(0, 30) : 'new bookmark', id: v4(), pageNumber: this.highlightPage - 1, xCoordinate: rectangle.x, yCoordinate: rectangle.y })));
             this.toolbarEvents.toggleSideBar(true);
+            this.toolbarEvents.toggleSideBarView(false);
             this.highlightService.resetHighlight();
             this.rectangles = undefined;
         });
@@ -5034,6 +5328,7 @@ AnnotationsModule.decorators = [
                     BookmarksApiService,
                     CommentSetRenderService,
                     HighlightCreateService,
+                    CommentService,
                     TagsServices
                 ],
                 exports: [
@@ -5104,16 +5399,191 @@ GrabNDragDirective.propDecorators = {
     onWindowPointerUp: [{ type: HostListener, args: ['window:pointerup',] }]
 };
 
+class BookmarksComponent {
+    constructor(store) {
+        this.store = store;
+        this.goToDestination = new EventEmitter();
+        this.pageLookup = {};
+        this.BOOKMARK_CHAR_LIMIT = 30;
+        this.options = {
+            allowDrag: true,
+            allowDrop: true
+        };
+        this._customSort = 'CUSTOM';
+        this._positionSort = 'POSITION';
+    }
+    ngOnInit() {
+        this.sortMode = this.customSort;
+        this.$subscription = this.store.pipe(select(getEditableBookmark))
+            .subscribe(editableId => this.editableBookmark = editableId);
+        this.$subscription.add(this.store.select(getPages)
+            .subscribe(pages => {
+            Object.keys(pages).map(key => {
+                this.pageLookup[key] = pages[key];
+            });
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes.bookmarkNodes && this.sortMode !== this.customSort) {
+            this.sortBookmarks();
+        }
+    }
+    ngOnDestroy() {
+        this.$subscription.unsubscribe();
+    }
+    editBookmark(id) {
+        this.editableBookmark = id;
+    }
+    onAddBookmarkClick() {
+        this.store.pipe(select(getBookmarkInfo), take(1))
+            .subscribe((bookmarkInfo) => {
+            this.store.dispatch(new CreateBookmark(Object.assign(Object.assign({}, bookmarkInfo), { name: '', id: uuid$1() })));
+        });
+    }
+    onBookmarkMove({ node, from, to }) {
+        let movedBookmarks = [Object.assign(Object.assign({}, node), { previous: to.index > 0 ? to.parent.children[to.index - 1].id : undefined, parent: to.parent.documentId ? to.parent.id : undefined })];
+        let fromNext = this.getSibling(from, from.index);
+        fromNext = fromNext && fromNext.id === node.previous ? this.getSibling(from, from.index + 1) : fromNext;
+        if (fromNext) {
+            movedBookmarks = [...movedBookmarks, Object.assign(Object.assign({}, fromNext), { previous: node.previous })];
+        }
+        const toNext = this.getSibling(to, to.index + 1);
+        if (toNext) {
+            movedBookmarks = [...movedBookmarks, Object.assign(Object.assign({}, toNext), { previous: node.id })];
+        }
+        this.store.dispatch(new MoveBookmark(movedBookmarks));
+    }
+    deleteBookmark(node) {
+        this.customSortBookmarks();
+        let next;
+        node = this.tree.treeModel.getNodeById(node.id);
+        if (!node.parent) {
+            node.parent = this.tree.treeModel.virtualRoot;
+        }
+        const siblings = node.parent.children;
+        if (siblings.length > node.index + 1) {
+            next = siblings[node.index + 1].data;
+            next.previous = node.data.previous;
+        }
+        this.store.dispatch(new DeleteBookmark({
+            deleted: [node.data.id, ...getBookmarkChildren(node.data.children)], updated: next
+        }));
+    }
+    updateBookmark(bookmark, name) {
+        const editedBookmark = Object.assign(Object.assign({}, bookmark), { name });
+        if (name) {
+            this.store.dispatch(new UpdateBookmark(editedBookmark));
+            this.editableBookmark = undefined;
+        }
+    }
+    goToBookmark(bookmark) {
+        const thisPage = this.pageLookup[bookmark.pageNumber + 1];
+        const defaultHeight = thisPage.styles.height;
+        const defaultScaleY = this.scaledY(bookmark.yCoordinate, defaultHeight, thisPage);
+        let top = 0, left = 0;
+        switch (this.rotate) {
+            case 90:
+                left = -defaultScaleY;
+                break;
+            case 180:
+                top = this.scaledY(bookmark.yCoordinate, (defaultHeight - (24 * this.zoom)), thisPage);
+                break;
+            case 270:
+                left = defaultScaleY;
+                break;
+            default:
+                top = defaultScaleY;
+        }
+        this.goToDestination.emit([
+            bookmark.pageNumber,
+            { 'name': 'XYZ' },
+            left,
+            top
+        ]);
+    }
+    get customSort() {
+        return this._customSort;
+    }
+    get positionSort() {
+        return this._positionSort;
+    }
+    sort(mode) {
+        this.sortMode = mode;
+        this.sortBookmarks();
+    }
+    sortBookmarks() {
+        switch (this.sortMode) {
+            case this.customSort: {
+                this.customSortBookmarks();
+                break;
+            }
+            case this.positionSort: {
+                this.positionSortBookmarks();
+                break;
+            }
+            default: {
+                this.customSortBookmarks();
+                break;
+            }
+        }
+    }
+    positionSortBookmarks() {
+        this.bookmarkNodes.sort((a, b) => a.pageNumber === b.pageNumber ? a.yCoordinate - b.yCoordinate : a.pageNumber - b.pageNumber);
+        this.tree.treeModel.update();
+        this.setDragNDrop(false);
+    }
+    customSortBookmarks() {
+        this.bookmarkNodes.sort((a, b) => a.index - b.index);
+        this.tree.treeModel.update();
+        this.setDragNDrop(true);
+    }
+    setDragNDrop(enabled) {
+        this.options = {
+            allowDrag: enabled,
+            allowDrop: enabled
+        };
+    }
+    getSibling(node, index) {
+        return node.parent.children.length > index ? node.parent.children[index] : undefined;
+    }
+    scaledY(yCoordinate, height, page) {
+        const viewportScale = page.viewportScale / this.zoom;
+        return ((height / this.zoom) - yCoordinate) / viewportScale;
+    }
+}
+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"
+            },] }
+];
+/** @nocollapse */
+BookmarksComponent.ctorParameters = () => [
+    { type: Store }
+];
+BookmarksComponent.propDecorators = {
+    bookmarkNodes: [{ type: Input }],
+    zoom: [{ type: Input }],
+    rotate: [{ type: Input }],
+    goToDestination: [{ type: Output }],
+    tree: [{ type: ViewChild, args: [TreeComponent,] }]
+};
+
 class SideBarComponent {
-    constructor(viewerEvents, store) {
+    constructor(viewerEvents, store, toolbarEvents) {
         this.viewerEvents = viewerEvents;
         this.store = store;
+        this.toolbarEvents = toolbarEvents;
         this.selectedView = 'outline';
+        this.subscriptions = [];
     }
     ngOnInit() {
         this.bookmarkNodes$ = this.store.pipe(select(getBookmarkNodes));
-        this.$subscription = this.store.pipe(select(getEditableBookmark))
-            .subscribe(editable => this.selectedView = editable ? 'bookmarks' : this.selectedView);
+        this.subscriptions.push(this.store.pipe(select(getEditableBookmark))
+            .subscribe(editable => this.selectedView = editable ? 'bookmarks' : this.selectedView));
+        this.subscriptions.push(this.toolbarEvents.sidebarOutlineView.subscribe(toggle => {
+            this.selectedView = toggle ? 'outline' : 'bookmarks';
+        }));
     }
     ngOnChanges(changes) {
         if (changes.url && this.url) {
@@ -5121,7 +5591,9 @@ class SideBarComponent {
         }
     }
     ngOnDestroy() {
-        this.$subscription.unsubscribe();
+        if (this.subscriptions.length > 0) {
+            this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        }
     }
     goToDestination(destination) {
         this.viewerEvents.goToDestination(destination);
@@ -5129,14 +5601,10 @@ class SideBarComponent {
     toggleSidebarView(sidebarView) {
         this.selectedView = sidebarView;
     }
-    onAddBookmarkClick() {
-        this.toggleSidebarView('bookmarks');
-        this.store.pipe(select(getBookmarkInfo), take(1))
-            .subscribe((bookmarkInfo) => {
-            this.store.dispatch(new CreateBookmark(Object.assign(Object.assign({}, bookmarkInfo), { name: '', id: uuid$1() })));
-        });
-    }
     isViewedItem(current, next) {
+        if (current.pageNumber === this.currentPageNumber) {
+            return true;
+        }
         return next === undefined ? current.pageNumber <= this.currentPageNumber :
             current.pageNumber <= this.currentPageNumber && (next.pageNumber > this.currentPageNumber);
     }
@@ -5147,13 +5615,14 @@ class SideBarComponent {
 SideBarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mv-side-bar',
-                template: "<div id=\"toolbarSidebar\">\n  <div class=\"splitToolbarButton toggled\">\n    <button id=\"viewOutline\"\n            [ngClass]=\"{ 'toolbarButton': true, 'toggled': selectedView === 'outline' }\"\n            (click)=\"toggleSidebarView('outline')\"\n            title=\"Show Document Outline\" tabindex=\"1\" data-l10n-id=\"document_outline\">\n      <span data-l10n-id=\"document_outline_label\">Document Outline</span>\n    </button>\n    <button *ngIf=\"annotationsEnabled\"\n            id=\"viewBookmark\" class=\"toolbarButton bookmark\"\n            [ngClass]=\"{ toggled: selectedView === 'bookmarks' }\"\n            (click)=\"toggleSidebarView('bookmarks')\"\n            title=\"Show Bookmarks\" tabindex=\"2\" data-l10n-id=\"bookmarks\">\n      <span data-l10n-id=\"bookmarks_label\">Bookmarks</span>\n    </button>\n  </div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div *ngIf=\"annotationsEnabled\"\n       class=\"splitToolbarButton right\">\n    <button id=\"addBookmark\"\n            class=\"toolbarButton addBookmark\"\n            (click)=\"onAddBookmarkClick()\"\n            title=\"Add bookmark\" tabindex=\"3\" data-l10n-id=\"addBookmark\">\n      <span data-l10n-id=\"addBookmark_label\">Add bookmark</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 *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)\"></mv-outline-item>\n    </div>\n    <div *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n         id=\"bookmarkContainer\">\n      <mv-bookmarks [bookmarkNodes]=\"bookmarkNodes$ | async\"\n                    [zoom]=\"zoom\" [rotate]=\"rotate\"\n                    (goToDestination)=\"goToDestination($event)\"></mv-bookmarks>\n    </div>\n  </div>\n</div>\n"
+                template: "<div id=\"toolbarSidebar\">\n  <div *ngIf=\"annotationsEnabled && selectedView == 'bookmarks'\"\n        class=\"splitToolbarButton toggled\">\n        <button id=\"sortBookmarkPosition\" class=\"splitToolbarButton left bookmark__sort__position\"\n          (click)=\"bookmarks.sort(bookmarks.positionSort)\" title=\"Order by place in document\"></button>\n        <button id=\"sortBookmarkCustom\" class=\"splitToolbarButton left bookmark__sort__custom\"\n          (click)=\"bookmarks.sort(bookmarks.customSort)\" title=\"Order manually\"></button></div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div *ngIf=\"annotationsEnabled && selectedView == 'bookmarks'\"\n       class=\"splitToolbarButton right\">\n    <button id=\"addBookmark\"\n            class=\"toolbarButton addBookmark\"\n            (click)=\"bookmarks.onAddBookmarkClick()\"\n            title=\"Add bookmark\" tabindex=\"3\" data-l10n-id=\"addBookmark\">\n      <span data-l10n-id=\"addBookmark_label\">Add bookmark</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 *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)\"></mv-outline-item>\n    </div>\n    <div *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n         id=\"bookmarkContainer\">\n      <mv-bookmarks [bookmarkNodes]=\"bookmarkNodes$ | async\"\n                    [zoom]=\"zoom\" [rotate]=\"rotate\"\n                    (goToDestination)=\"goToDestination($event)\"></mv-bookmarks>\n    </div>\n  </div>\n</div>\n"
             },] }
 ];
 /** @nocollapse */
 SideBarComponent.ctorParameters = () => [
     { type: ViewerEventService },
-    { type: Store }
+    { type: Store },
+    { type: ToolbarEventService }
 ];
 SideBarComponent.propDecorators = {
     annotationsEnabled: [{ type: Input }],
@@ -5161,7 +5630,8 @@ SideBarComponent.propDecorators = {
     url: [{ type: Input }],
     zoom: [{ type: Input }],
     rotate: [{ type: Input }],
-    currentPageNumber: [{ type: Input }]
+    currentPageNumber: [{ type: Input }],
+    bookmarks: [{ type: ViewChild, args: [BookmarksComponent,] }]
 };
 
 class OutlineItemComponent {
@@ -5180,6 +5650,9 @@ class OutlineItemComponent {
         this.showOutlineItems = !this.showOutlineItems;
     }
     isViewedItem(current, next) {
+        if (current.pageNumber === this.currentPageNumber) {
+            return true;
+        }
         return next === undefined ? current.pageNumber <= this.currentPageNumber && this.endPage > this.currentPageNumber :
             current.pageNumber <= this.currentPageNumber && (next.pageNumber > this.currentPageNumber);
     }
@@ -5242,7 +5715,7 @@ class RedactionComponent {
         this.toolbarEvents.drawModeSubject.next(false);
     }
     saveRedaction(page, rectangles) {
-        const redaction = { page, rectangles, redactionId: uuid$1(), documentId: this.documentId };
+        const redaction = { page, rectangles, redactionId: v4(), documentId: this.documentId };
         this.store.dispatch(new SaveRedaction(redaction));
     }
     onMarkerDelete(event) {
@@ -5418,6 +5891,7 @@ class RedactionApiService {
         this.httpClient = httpClient;
         this.markupsApiUrl = '/api/markups';
         this.redactApiUrl = '/api/redaction';
+        this.markupsSearchApiUrl = '/api/markups/search';
     }
     getRedactions(documentId) {
         const fixedUrl = `${this.markupsApiUrl}/${documentId}`;
@@ -5429,6 +5903,11 @@ class RedactionApiService {
             .post(this.markupsApiUrl, body, { observe: 'response', withCredentials: true })
             .pipe(map(response => response.body), catchError(() => []));
     }
+    saveBulkRedaction(body) {
+        return this.httpClient
+            .post(this.markupsSearchApiUrl, body, { observe: 'response', withCredentials: true })
+            .pipe(map(response => response.body), catchError(() => []));
+    }
     deleteRedaction(payload) {
         const url = `${this.markupsApiUrl}/${payload.documentId}/${payload.redactionId}`;
         return this.httpClient
@@ -5456,9 +5935,10 @@ RedactionApiService.ctorParameters = () => [
 ];
 
 class RedactionEffects {
-    constructor(actions$, redactionApiService) {
+    constructor(actions$, redactionApiService, toolbarEvents) {
         this.actions$ = actions$;
         this.redactionApiService = redactionApiService;
+        this.toolbarEvents = toolbarEvents;
         this.loadRedactions$ = this.actions$.pipe(ofType(LOAD_REDACTIONS), map((action) => action.payload), switchMap((documentId) => {
             return this.redactionApiService.getRedactions(documentId).pipe(map(resp => {
                 return new LoadRedactionSuccess(resp.body);
@@ -5473,6 +5953,13 @@ class RedactionEffects {
                 return of(new SaveRedactionFailure(error));
             }));
         }));
+        this.saveBulkRedaction$ = this.actions$.pipe(ofType(SAVE_BULK_REDACTION), map((action) => action.payload), exhaustMap((redaction) => {
+            return this.redactionApiService.saveBulkRedaction(redaction).pipe(tap(() => this.toolbarEvents.redactAllInProgressSubject.next(false))).pipe(map(resp => {
+                return new SaveBulkRedactionSuccess(resp);
+            }), catchError(error => {
+                return of(new SaveBulkRedactionFailure(error));
+            }));
+        }));
         this.deleteRedaction$ = this.actions$.pipe(ofType(DELETE_REDACTION), map((action) => action.payload), exhaustMap((redactionPayload) => {
             return this.redactionApiService.deleteRedaction(redactionPayload).pipe(map(() => {
                 return new DeleteRedactionSuccess(redactionPayload);
@@ -5505,7 +5992,8 @@ RedactionEffects.decorators = [
 /** @nocollapse */
 RedactionEffects.ctorParameters = () => [
     { type: Actions },
-    { type: RedactionApiService }
+    { type: RedactionApiService },
+    { type: ToolbarEventService }
 ];
 __decorate([
     Effect(),
@@ -5515,6 +6003,10 @@ __decorate([
     Effect(),
     __metadata("design:type", Object)
 ], RedactionEffects.prototype, "saveRedaction$", void 0);
+__decorate([
+    Effect(),
+    __metadata("design:type", Object)
+], RedactionEffects.prototype, "saveBulkRedaction$", void 0);
 __decorate([
     Effect(),
     __metadata("design:type", Object)
@@ -5654,114 +6146,6 @@ __decorate([
 
 const effects = [AnnotationEffects, BookmarksEffects, RedactionEffects, DocumentEffects, IcpEffects];
 
-class BookmarksComponent {
-    constructor(store) {
-        this.store = store;
-        this.goToDestination = new EventEmitter();
-        this.pageLookup = {};
-        this.BOOKMARK_CHAR_LIMIT = 30;
-        this.options = {
-            allowDrag: true,
-            allowDrop: true
-        };
-    }
-    ngOnInit() {
-        this.$subscription = this.store.pipe(select(getEditableBookmark))
-            .subscribe(editableId => this.editableBookmark = editableId);
-        this.$subscription.add(this.store.select(getPages)
-            .subscribe(pages => {
-            Object.keys(pages).map(key => {
-                this.pageLookup[key] = pages[key];
-            });
-        }));
-    }
-    ngOnDestroy() {
-        this.$subscription.unsubscribe();
-    }
-    editBookmark(id) {
-        this.editableBookmark = id;
-    }
-    onBookmarkMove({ node, from, to }) {
-        let movedBookmarks = [Object.assign(Object.assign({}, node), { previous: to.index > 0 ? to.parent.children[to.index - 1].id : undefined, parent: to.parent.documentId ? to.parent.id : undefined })];
-        let fromNext = this.getSibling(from, from.index);
-        fromNext = fromNext && fromNext.id === node.previous ? this.getSibling(from, from.index + 1) : fromNext;
-        if (fromNext) {
-            movedBookmarks = [...movedBookmarks, Object.assign(Object.assign({}, fromNext), { previous: node.previous })];
-        }
-        const toNext = this.getSibling(to, to.index + 1);
-        if (toNext) {
-            movedBookmarks = [...movedBookmarks, Object.assign(Object.assign({}, toNext), { previous: node.id })];
-        }
-        this.store.dispatch(new MoveBookmark(movedBookmarks));
-    }
-    deleteBookmark(node) {
-        let next;
-        const siblings = node.parent.children;
-        if (siblings.length > node.index + 1) {
-            next = siblings[node.index + 1].data;
-            next.previous = node.data.previous;
-        }
-        this.store.dispatch(new DeleteBookmark({
-            deleted: [node.data.id, ...getBookmarkChildren(node.data.children)], updated: next
-        }));
-    }
-    updateBookmark(bookmark, name) {
-        const editedBookmark = Object.assign(Object.assign({}, bookmark), { name });
-        if (name) {
-            this.store.dispatch(new UpdateBookmark(editedBookmark));
-            this.editableBookmark = undefined;
-        }
-    }
-    goToBookmark(bookmark) {
-        const thisPage = this.pageLookup[bookmark.pageNumber + 1];
-        const defaultHeight = thisPage.styles.height;
-        const defaultScaleY = this.scaledY(bookmark.yCoordinate, defaultHeight, thisPage);
-        let top = 0, left = 0;
-        switch (this.rotate) {
-            case 90:
-                left = -defaultScaleY;
-                break;
-            case 180:
-                top = this.scaledY(bookmark.yCoordinate, (defaultHeight - (24 * this.zoom)), thisPage);
-                break;
-            case 270:
-                left = defaultScaleY;
-                break;
-            default:
-                top = defaultScaleY;
-        }
-        this.goToDestination.emit([
-            bookmark.pageNumber,
-            { 'name': 'XYZ' },
-            left,
-            top
-        ]);
-    }
-    getSibling(node, index) {
-        return node.parent.children.length > index ? node.parent.children[index] : undefined;
-    }
-    scaledY(yCoordinate, height, page) {
-        const viewportScale = page.viewportScale / this.zoom;
-        return ((height / this.zoom) - yCoordinate) / viewportScale;
-    }
-}
-BookmarksComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mv-bookmarks',
-                template: "<tree-root [nodes]=\"bookmarkNodes\"\n           class=\"bookmarks-tree\"\n           [options]=\"options\"\n           (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    <a *ngIf=\"bookmarkNodes?.length === 0\" class=\"outlineItem\">No bookmarks created yet</a>\n  </ng-template>\n</tree-root>\n"
-            },] }
-];
-/** @nocollapse */
-BookmarksComponent.ctorParameters = () => [
-    { type: Store }
-];
-BookmarksComponent.propDecorators = {
-    bookmarkNodes: [{ type: Input }],
-    zoom: [{ type: Input }],
-    rotate: [{ type: Input }],
-    goToDestination: [{ type: Output }]
-};
-
 class ConvertibleContentViewerComponent {
     constructor(store) {
         this.store = store;
@@ -6030,7 +6414,7 @@ class HighlightCreateDirective {
         const top = rect.top - parentRect.top;
         const left = rect.left - parentRect.left;
         let rectangle = this.highlightService.applyRotation(this.pageHeight, this.pageWidth, height, width, top, left, this.rotate, this.zoom);
-        rectangle = Object.assign({ id: uuid$1() }, rectangle);
+        rectangle = Object.assign({ id: v4() }, rectangle);
         return rectangle;
     }
     removeEnhancedTextModeStyling(element) {
@@ -6184,5 +6568,5 @@ MediaViewerModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_OR_EDIT_COMMENT, APPLY_COMMENT_SUMMARY_FILTER, AddOrEditComment, AnnotationApiService, AnnotationEffects, AnnotationSetComponent, AnnotationViewComponent, AnnotationsModule, ApplyCommentSymmaryFilter, BoxHighlightCreateComponent, CLEAR_COMMENT_SUMMARY_FILTER, ClearCommentSummaryFilters, CommentFilterComponent, CommentSearchComponent, CommentSetComponent, CommentSetHeaderComponent, CommentsSummaryComponent, DELETE_ANNOTATION, DELETE_ANNOTATION_FAIL, DELETE_ANNOTATION_SUCCESS, DeleteAnnotation, DeleteAnnotationFail, DeleteAnnotationSuccess, FilterPipe, IcpToolbarComponent, LOAD_ANNOTATION_SET, LOAD_ANNOTATION_SET_FAIL, LOAD_ANNOTATION_SET_SUCCESS, LoadAnnotationSet, LoadAnnotationSetFail, LoadAnnotationSetSucess, MainToolbarComponent, MediaViewerComponent, MediaViewerModule, MetadataLayerComponent, MomentDatePipe, RedactionToolbarComponent, ResponseType, SAVE_ANNOTATION, SAVE_ANNOTATION_FAIL, SAVE_ANNOTATION_SUCCESS, SEARCH_COMMENT, SELECT_ANNOTATION, SaveAnnotation, SaveAnnotationFail, SaveAnnotationSuccess, SearchBarComponent, SearchComment, SelectedAnnotation, TagsComponent, ToolbarButtonVisibilityService, ToolbarEventService, ToolbarModule, UnsnakePipe, ViewerException, commentSearchQ, getAnnoEnt, getAnnoPageEnt, getAnnoPerPage, getAnnoSet, getAnnotationEntities, getAnnotationSet, getAnnotationsSetState, getCommentEntities, getCommentEnts, getCommentSummary, getCommentSummaryFilters, getCommentsArray, getComponentSearchQueries, getComponentSearchText, getDocumentIdSetId, getFilteredAnnotations, getPageEntities, getSelectedAnno, getSelectedAnnotation, getSet, getSummaryFilters, initialState, reducer, ɵ0$2 as ɵ0, ɵ1$2 as ɵ1, ɵ2$2 as ɵ2, ɵ3$1 as ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, NumberHelperService as ɵa, TextHighlightDirective as ɵba, CtxToolbarComponent as ɵbb, CommentSetRenderService as ɵbc, CommentsNavigateComponent as ɵbd, TextareaAutoExpandDirective as ɵbe, PrintService as ɵbf, BookmarksApiService as ɵbg, effects as ɵbh, BookmarksEffects as ɵbi, RedactionEffects as ɵbj, RedactionApiService as ɵbk, DocumentEffects as ɵbl, DocumentConversionApiService as ɵbm, RotationApiService as ɵbn, IcpEffects as ɵbo, IcpSessionApiService as ɵbp, IcpUpdateService as ɵbq, SocketService as ɵbr, PdfViewerComponent as ɵbs, PdfJsWrapperFactory as ɵbt, IcpService as ɵbu, IcpPresenterService as ɵbv, IcpFollowerService as ɵbw, SideBarComponent as ɵbx, BookmarksComponent as ɵby, OutlineItemComponent as ɵbz, reducers as ɵc, ImageViewerComponent as ɵca, ViewerUtilService as ɵcb, UnsupportedViewerComponent as ɵcc, MultimediaPlayerComponent as ɵcd, ConvertibleContentViewerComponent as ɵce, GrabNDragDirective as ɵcf, RotationPersistDirective as ɵcg, HighlightCreateDirective as ɵch, ConfirmActionDialogComponent as ɵci, RedactionComponent as ɵcj, BookmarkIconsComponent as ɵck, ParticipantsListComponent as ɵcl, getDocumentState as ɵcm, getPages as ɵcn, getTagsRootState as ɵco, getTagFiltered as ɵcp, getFilteredPageEntities as ɵcq, getMVState as ɵd, docReducer as ɵf, getDocPages as ɵg, tagsReducer as ɵh, getFilteredComments as ɵi, getFilteredPageEnt as ɵj, bookmarksReducer as ɵl, redactionReducer as ɵm, icpReducer as ɵn, SharedModule as ɵp, GovUkDateComponent as ɵq, GovUkErrorMessageComponent as ɵr, GovUkFieldsetComponent as ɵs, GovUkLabelComponent as ɵt, HighlightCreateService as ɵu, ViewerEventService as ɵv, CommentService as ɵw, RectangleComponent as ɵx, CommentComponent as ɵy, TagsServices as ɵz };
+export { ADD_OR_EDIT_COMMENT, APPLY_COMMENT_SUMMARY_FILTER, AddOrEditComment, AnnotationApiService, AnnotationEffects, AnnotationSetComponent, AnnotationViewComponent, AnnotationsModule, ApplyCommentSymmaryFilter, BoxHighlightCreateComponent, CLEAR_COMMENT_SUMMARY_FILTER, ClearCommentSummaryFilters, CommentFilterComponent, CommentSearchComponent, CommentSetComponent, CommentSetHeaderComponent, CommentsSummaryComponent, DELETE_ANNOTATION, DELETE_ANNOTATION_FAIL, DELETE_ANNOTATION_SUCCESS, DeleteAnnotation, DeleteAnnotationFail, DeleteAnnotationSuccess, FilterPipe, IcpToolbarComponent, LOAD_ANNOTATION_SET, LOAD_ANNOTATION_SET_FAIL, LOAD_ANNOTATION_SET_SUCCESS, LoadAnnotationSet, LoadAnnotationSetFail, LoadAnnotationSetSucess, MainToolbarComponent, MediaViewerComponent, MediaViewerModule, MetadataLayerComponent, MomentDatePipe, RedactionToolbarComponent, ResponseType, SAVE_ANNOTATION, SAVE_ANNOTATION_FAIL, SAVE_ANNOTATION_SUCCESS, SEARCH_COMMENT, SELECT_ANNOTATION, SaveAnnotation, SaveAnnotationFail, SaveAnnotationSuccess, SearchBarComponent, SearchComment, SelectedAnnotation, TagsComponent, ToolbarButtonVisibilityService, ToolbarEventService, ToolbarModule, UnsnakePipe, ViewerException, commentSearchQ, getAnnoEnt, getAnnoPageEnt, getAnnoPerPage, getAnnoSet, getAnnotationEntities, getAnnotationSet, getAnnotationsSetState, getCommentEntities, getCommentEnts, getCommentSummary, getCommentSummaryFilters, getCommentsArray, getComponentSearchQueries, getComponentSearchText, getDocumentIdSetId, getFilteredAnnotations, getPageEntities, getSelectedAnno, getSelectedAnnotation, getSet, getSummaryFilters, initialState, reducer, ɵ0$2 as ɵ0, ɵ1$2 as ɵ1, ɵ2$2 as ɵ2, ɵ3$1 as ɵ3, ɵ4, ɵ5, ɵ6, ɵ7, NumberHelperService as ɵa, TagsServices as ɵba, TextHighlightDirective as ɵbb, CtxToolbarComponent as ɵbc, CommentSetRenderService as ɵbd, CommentsNavigateComponent as ɵbe, TextareaAutoExpandDirective as ɵbf, PrintService as ɵbg, BookmarksApiService as ɵbh, effects as ɵbi, BookmarksEffects as ɵbj, RedactionEffects as ɵbk, RedactionApiService as ɵbl, DocumentEffects as ɵbm, DocumentConversionApiService as ɵbn, RotationApiService as ɵbo, IcpEffects as ɵbp, IcpSessionApiService as ɵbq, IcpUpdateService as ɵbr, SocketService as ɵbs, PdfViewerComponent as ɵbt, PdfJsWrapperFactory as ɵbu, IcpService as ɵbv, IcpPresenterService as ɵbw, IcpFollowerService as ɵbx, SideBarComponent as ɵby, BookmarksComponent as ɵbz, reducers as ɵc, OutlineItemComponent as ɵca, ImageViewerComponent as ɵcb, ViewerUtilService as ɵcc, UnsupportedViewerComponent as ɵcd, MultimediaPlayerComponent as ɵce, ConvertibleContentViewerComponent as ɵcf, GrabNDragDirective as ɵcg, RotationPersistDirective as ɵch, HighlightCreateDirective as ɵci, ConfirmActionDialogComponent as ɵcj, RedactionComponent as ɵck, BookmarkIconsComponent as ɵcl, ParticipantsListComponent as ɵcm, getDocumentState as ɵcn, getPages as ɵco, getTagsRootState as ɵcp, getTagFiltered as ɵcq, getFilteredPageEntities as ɵcr, getMVState as ɵd, docReducer as ɵf, getDocPages as ɵg, tagsReducer as ɵh, getFilteredComments as ɵi, getFilteredPageEnt as ɵj, bookmarksReducer as ɵl, redactionReducer as ɵm, icpReducer as ɵn, RedactionSearchBarComponent as ɵp, HighlightCreateService as ɵq, SharedModule as ɵr, GovUkDateComponent as ɵs, GovUkErrorMessageComponent as ɵt, GovUkFieldsetComponent as ɵu, GovUkLabelComponent as ɵv, ViewerEventService as ɵw, CommentService as ɵx, RectangleComponent as ɵy, CommentComponent as ɵz };
 //# sourceMappingURL=hmcts-media-viewer.js.map