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

package/bundles/hmcts-media-viewer.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@ngrx/store'), require('pdfjs-dist/web/pdf_viewer'), require('pdfjs-dist'), require('pdfjs-dist/build/pdf.worker'), require('uuid/v4'), require('moment-timezone'), require('hammerjs'), require('@angular/cdk/overlay'), require('@angular/router'), require('@angular/cdk/a11y'), require('mutable-div'), require('ngx-chips'), require('@swimlane/ngx-datatable'), require('uuid'), require('@ngrx/effects'), require('@circlon/angular-tree-component')) :
-    typeof define === 'function' && define.amd ? define('@hmcts/media-viewer', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/common/http', 'rxjs', 'rxjs/operators', '@ngrx/store', 'pdfjs-dist/web/pdf_viewer', 'pdfjs-dist', 'pdfjs-dist/build/pdf.worker', 'uuid/v4', 'moment-timezone', 'hammerjs', '@angular/cdk/overlay', '@angular/router', '@angular/cdk/a11y', 'mutable-div', 'ngx-chips', '@swimlane/ngx-datatable', 'uuid', '@ngrx/effects', '@circlon/angular-tree-component'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.hmcts = global.hmcts || {}, global.hmcts["media-viewer"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.common.http, global.rxjs, global.rxjs.operators, global.store, global.pdfjsViewer, global.pdfjsLib, null, global.uuid, global.moment, null, global.ng.cdk.overlay, global.ng.router, global.ng.cdk.a11y, global.mutableDiv, global.ngxChips, global.ngxDatatable, global.uuid$1, global.effects$1, global.angularTreeComponent));
-})(this, (function (exports, i0, common, forms, i1, rxjs, operators, store, pdfjsViewer, pdfjsLib, pdf_worker, uuid, moment, hammerjs, overlay, router, a11y, mutableDiv, ngxChips, ngxDatatable, uuid$1, effects$1, angularTreeComponent) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/common/http'), require('rxjs'), require('rxjs/operators'), require('@ngrx/store'), require('pdfjs-dist/web/pdf_viewer'), require('pdfjs-dist'), require('pdfjs-dist/build/pdf.worker'), require('uuid/v4'), require('moment-timezone'), require('hammerjs'), require('uuid'), require('@angular/cdk/overlay'), require('@angular/router'), require('@angular/cdk/a11y'), require('mutable-div'), require('ngx-chips'), require('@swimlane/ngx-datatable'), require('@circlon/angular-tree-component'), require('@ngrx/effects')) :
+    typeof define === 'function' && define.amd ? define('@hmcts/media-viewer', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/common/http', 'rxjs', 'rxjs/operators', '@ngrx/store', 'pdfjs-dist/web/pdf_viewer', 'pdfjs-dist', 'pdfjs-dist/build/pdf.worker', 'uuid/v4', 'moment-timezone', 'hammerjs', 'uuid', '@angular/cdk/overlay', '@angular/router', '@angular/cdk/a11y', 'mutable-div', 'ngx-chips', '@swimlane/ngx-datatable', '@circlon/angular-tree-component', '@ngrx/effects'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.hmcts = global.hmcts || {}, global.hmcts["media-viewer"] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ng.common.http, global.rxjs, global.rxjs.operators, global.store, global.pdfjsViewer, global.pdfjsLib, null, global.uuid, global.moment, null, global.uuid$1, global.ng.cdk.overlay, global.ng.router, global.ng.cdk.a11y, global.mutableDiv, global.ngxChips, global.ngxDatatable, global.angularTreeComponent, global.effects$1));
+})(this, (function (exports, i0, common, forms, i1, rxjs, operators, store, pdfjsViewer, pdfjsLib, pdf_worker, uuid, moment, hammerjs, uuid$1, overlay, router, a11y, mutableDiv, ngxChips, ngxDatatable, angularTreeComponent, effects$1) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -391,15 +391,26 @@
             this.pdfViewer.eventBus.on('scalechanging', function (e) { return _this.emitDocumentInfo(e); });
             this.pdfViewer.eventBus.on('rotationchanging', function (e) { return _this.emitDocumentInfo(e); });
             this.pdfViewer.eventBus.on('updatefindcontrolstate', function (event) {
-                if (event.state !== FindState.PENDING) {
-                    _this.toolbarEvents.searchResultsCountSubject.next(event.matchesCount);
-                }
+                _this.sendSearchDetails(event);
             });
             this.pdfViewer.eventBus.on('updatefindmatchescount', function (event) {
                 _this.toolbarEvents.searchResultsCountSubject.next(event.matchesCount);
             });
             this.zoomValue = 1;
         }
+        PdfJsWrapper.prototype.sendSearchDetails = function (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
+                    });
+                }
+            }
+        };
         PdfJsWrapper.prototype.emitDocumentInfo = function (e) {
             var allPages = __spread(this.pdfViewer._pages).map(function (page) {
                 return {
@@ -416,43 +427,43 @@
             return __awaiter(this, void 0, void 0, function () {
                 var loadingTask, pdfDocument, outline, pdfMetaData, e_1;
                 var _this = this;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
                             loadingTask = this.createLoadingTask(documentUrl);
-                            loadingTask.onProgress = function (_a) {
-                                var loaded = _a.loaded, total = _a.total;
+                            loadingTask.onProgress = function (_g) {
+                                var loaded = _g.loaded, total = _g.total;
                                 _this.documentLoadProgress.next({ loaded: loaded, total: total });
                             };
                             this.documentLoadInit.next(documentUrl);
-                            _a.label = 1;
+                            _g.label = 1;
                         case 1:
-                            _a.trys.push([1, 7, , 8]);
+                            _g.trys.push([1, 7, , 8]);
                             return [4 /*yield*/, loadingTask.promise];
                         case 2:
-                            pdfDocument = _a.sent();
+                            pdfDocument = _g.sent();
                             this.documentLoaded.next(pdfDocument);
                             this.toolbarEvents.pageCountSubject.next(pdfDocument.numPages);
                             this.pdfViewer.setDocument(pdfDocument);
                             this.pdfViewer.linkService.setDocument(pdfDocument, null);
                             return [4 /*yield*/, pdfDocument.getOutline()];
                         case 3:
-                            outline = _a.sent();
+                            outline = _g.sent();
                             if (!outline) return [3 /*break*/, 5];
                             return [4 /*yield*/, this.setOutlinePageNumbers(pdfDocument, outline)];
                         case 4:
-                            _a.sent();
-                            _a.label = 5;
+                            _g.sent();
+                            _g.label = 5;
                         case 5:
                             this.documentOutline = outline;
                             this.outlineLoaded.next(this.documentOutline);
                             return [4 /*yield*/, pdfDocument.getMetadata()];
                         case 6:
-                            pdfMetaData = _a.sent();
+                            pdfMetaData = _g.sent();
                             this.setCurrentPDFTitle(pdfMetaData.info.Title);
                             return [3 /*break*/, 8];
                         case 7:
-                            e_1 = _a.sent();
+                            e_1 = _g.sent();
                             this.documentLoadFailed.next(e_1);
                             return [3 /*break*/, 8];
                         case 8: return [2 /*return*/];
@@ -471,13 +482,13 @@
         PdfJsWrapper.prototype.setOutlinePageNumbers = function (pdfDocument, outlineArray) {
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
-                return __generator(this, function (_a) {
+                return __generator(this, function (_g) {
                     outlineArray.forEach(function (outline) { return __awaiter(_this, void 0, void 0, function () {
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
+                        return __generator(this, function (_g) {
+                            switch (_g.label) {
                                 case 0: return [4 /*yield*/, this.setNestedOutlinePageNumbers(pdfDocument, outline)];
                                 case 1:
-                                    _a.sent();
+                                    _g.sent();
                                     return [2 /*return*/];
                             }
                         });
@@ -488,24 +499,24 @@
         };
         PdfJsWrapper.prototype.setNestedOutlinePageNumbers = function (pdfDocument, outline) {
             return __awaiter(this, void 0, void 0, function () {
-                var _a;
+                var _g;
                 var _this = this;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
-                            _a = outline;
+                            _g = outline;
                             return [4 /*yield*/, this.getOutlinePageNumber(pdfDocument, outline)];
                         case 1:
-                            _a.pageNumber = _b.sent();
+                            _g.pageNumber = _h.sent();
                             outline.items.forEach(function (outlineItem) { return __awaiter(_this, void 0, void 0, function () {
-                                var _a;
-                                return __generator(this, function (_b) {
-                                    switch (_b.label) {
+                                var _g;
+                                return __generator(this, function (_h) {
+                                    switch (_h.label) {
                                         case 0:
-                                            _a = outlineItem;
+                                            _g = outlineItem;
                                             return [4 /*yield*/, this.getOutlinePageNumber(pdfDocument, outlineItem)];
                                         case 1:
-                                            _a.pageNumber = _b.sent();
+                                            _g.pageNumber = _h.sent();
                                             this.setNestedOutlinePageNumbers(pdfDocument, outlineItem);
                                             return [2 /*return*/];
                                     }
@@ -519,13 +530,13 @@
         PdfJsWrapper.prototype.getOutlinePageNumber = function (pdfDocument, outline) {
             return __awaiter(this, void 0, void 0, function () {
                 var dest, pageIndex;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_g) {
+                    switch (_g.label) {
                         case 0:
                             dest = outline.dest;
                             return [4 /*yield*/, pdfDocument.getPageIndex(dest[0])];
                         case 1:
-                            pageIndex = _a.sent();
+                            pageIndex = _g.sent();
                             return [2 /*return*/, Number(pageIndex) + 1];
                     }
                 });
@@ -681,7 +692,11 @@
             this.applyRedactToDocument = new rxjs.Subject();
             this.clearAllRedactMarkers = new rxjs.Subject();
             this.redactWholePage = new rxjs.Subject();
+            this.redactionSerachSubject = new rxjs.Subject();
+            this.redactAllInProgressSubject = new rxjs.BehaviorSubject(false);
+            this.openRedactionSearch = new rxjs.Subject();
             this.sidebarOpen = new rxjs.BehaviorSubject(false);
+            this.sidebarOutlineView = new rxjs.BehaviorSubject(true);
             this.searchBarHidden = new rxjs.BehaviorSubject(true);
             this.commentsPanelVisible = new rxjs.BehaviorSubject(false);
             this.icp = icpEvents;
@@ -771,6 +786,9 @@
         ToolbarEventService.prototype.toggleSideBar = function (toggle) {
             this.sidebarOpen.next(toggle);
         };
+        ToolbarEventService.prototype.toggleSideBarView = function (toggle) {
+            this.sidebarOutlineView.next(toggle);
+        };
         ToolbarEventService.prototype.toggleRedactionMode = function () {
             if (this.redactionMode.getValue() === false) {
                 this.drawModeSubject.next(false);
@@ -780,6 +798,7 @@
             else {
                 this.redactionMode.next(false);
             }
+            this.openRedactionSearch.next(false);
         };
         ToolbarEventService.prototype.toggleRedactionPreview = function (viewMode) {
             this.redactionPreview.next(viewMode);
@@ -858,7 +877,9 @@
         };
         PrintService.prototype.printElementNatively = function (element, width, height) {
             var printWindow = window.open('', '', "left=0,top=0,width=" + width + ",height=" + height + ",toolbar=0,scrollbars=0,status=0");
-            printWindow.document.write(element.innerHTML);
+            var documentHead = document.head;
+            printWindow.document.body.appendChild(documentHead.cloneNode(true));
+            printWindow.document.body.appendChild(element.cloneNode(true));
             printWindow.document.close();
             printWindow.focus();
             printWindow.print();
@@ -1910,7 +1931,8 @@
                 });
                 Object.entries(removeBookmarksByPage_1).forEach(function (_a) {
                     var _b = __read(_a, 2), pageNumber = _b[0], bmrkIds = _b[1];
-                    bookmarkPageEntities_1[pageNumber] = bookmarkPageEntities_1[pageNumber].filter(function (bookmarkId) { return bmrkIds.includes(bookmarkId); });
+                    bookmarkPageEntities_1[pageNumber]
+                        = bookmarkPageEntities_1[pageNumber].filter(function (bookmark) { return !bmrkIds.includes(bookmark.id); });
                 });
                 return Object.assign(Object.assign({}, state), { bookmarkEntities: bookmarkEntities_2,
                     bookmarkPageEntities: bookmarkPageEntities_1, loading: false, loaded: true });
@@ -1939,6 +1961,9 @@
     var SAVE_REDACTION = '[Redaction] Save Redaction';
     var SAVE_REDACTION_SUCCESS = '[Redaction] Save Redaction Success';
     var SAVE_REDACTION_FAIL = '[Redaction] Save Redaction Fail';
+    var SAVE_BULK_REDACTION = '[Redaction] Save bulk Redaction';
+    var SAVE_BULK_REDACTION_SUCCESS = '[Redaction] Save bulk Redaction Success';
+    var SAVE_BULK_REDACTION_FAIL = '[Redaction] Save bulk Redaction Fail';
     var DELETE_REDACTION = '[Redaction] Delete Redaction';
     var DELETE_REDACTION_SUCCESS = '[Redaction] Delete Redaction Success';
     var DELETE_REDACTION_FAIL = '[Redaction] Delete Redaction Fail';
@@ -1991,6 +2016,27 @@
         }
         return SaveRedactionFailure;
     }());
+    var SaveBulkRedactionFailure = /** @class */ (function () {
+        function SaveBulkRedactionFailure(payload) {
+            this.payload = payload;
+            this.type = SAVE_BULK_REDACTION_FAIL;
+        }
+        return SaveBulkRedactionFailure;
+    }());
+    var SaveBulkRedaction = /** @class */ (function () {
+        function SaveBulkRedaction(payload) {
+            this.payload = payload;
+            this.type = SAVE_BULK_REDACTION;
+        }
+        return SaveBulkRedaction;
+    }());
+    var SaveBulkRedactionSuccess = /** @class */ (function () {
+        function SaveBulkRedactionSuccess(payload) {
+            this.payload = payload;
+            this.type = SAVE_BULK_REDACTION_SUCCESS;
+        }
+        return SaveBulkRedactionSuccess;
+    }());
     var DeleteRedaction = /** @class */ (function () {
         function DeleteRedaction(payload) {
             this.payload = payload;
@@ -2092,6 +2138,17 @@
                 return Object.assign(Object.assign({}, state), { redactionEntities: redactionEntities_1,
                     redactionPageEntities: redactionPageEntities });
             }
+            case SAVE_BULK_REDACTION_SUCCESS: {
+                var payloadResult = Object.assign.apply(Object, __spread([{}], action.payload.searchRedactions.map(function (x) {
+                    var _a;
+                    return (_a = {}, _a[x.redactionId] = x, _a);
+                })));
+                var redactionEntities_2 = Object.assign(Object.assign({}, state.redactionEntities), payloadResult);
+                var redactionArray = Object.keys(redactionEntities_2).map(function (key) { return redactionEntities_2[key]; });
+                var redactionPageEntities = StoreUtils.groupByKeyEntities(redactionArray, 'page');
+                return Object.assign(Object.assign({}, state), { redactionEntities: redactionEntities_2,
+                    redactionPageEntities: redactionPageEntities });
+            }
             case SELECT_REDACTION:
             case SELECT_ANNOTATION: {
                 return Object.assign(Object.assign({}, state), { selectedRedaction: action.payload });
@@ -2818,7 +2875,7 @@
     PdfViewerComponent.decorators = [
         { type: i0.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: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -2844,6 +2901,7 @@
         enableRedactions: [{ type: i0.Input }],
         enableICP: [{ type: i0.Input }],
         annotationSet: [{ type: i0.Input }],
+        enableRedactSearch: [{ type: i0.Input }],
         height: [{ type: i0.Input }],
         caseId: [{ type: i0.Input }],
         viewerContainer: [{ type: i0.ViewChild, args: ['viewerContainer', { static: true },] }],
@@ -3021,7 +3079,7 @@
     ImageViewerComponent.decorators = [
         { type: i0.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 */
@@ -3170,6 +3228,7 @@
     var CommentService = /** @class */ (function () {
         function CommentService() {
             this.unsavedChanges = new rxjs.Subject();
+            this.marginToCommentEmitter = new rxjs.BehaviorSubject(false);
         }
         CommentService.prototype.setCommentSet = function (commentSetComponent) {
             this.commentSetComponent = commentSetComponent;
@@ -3202,6 +3261,9 @@
         CommentService.prototype.allCommentsSaved = function () {
             this.onCommentChange(this.commentSetComponent.commentComponents.some(function (comment) { return comment.hasUnsavedChanges === true; }));
         };
+        CommentService.prototype.createMarginToCommentEvent = function (margin) {
+            this.marginToCommentEmitter.next(margin);
+        };
         return CommentService;
     }());
     CommentService.decorators = [
@@ -3337,6 +3399,7 @@
             this.enableRedactions = false;
             this.enableICP = false;
             this.multimediaPlayerEnabled = false;
+            this.enableRedactSearch = false;
             this.multimediaContent = false;
             this.convertibleContent = false;
             this.unsupportedContent = false;
@@ -3462,7 +3525,7 @@
     MediaViewerComponent.decorators = [
         { type: i0.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: i0.ViewEncapsulation.None
                 },] }
     ];
@@ -3494,9 +3557,270 @@
         enableRedactions: [{ type: i0.Input }],
         enableICP: [{ type: i0.Input }],
         multimediaPlayerEnabled: [{ type: i0.Input }],
+        enableRedactSearch: [{ type: i0.Input }],
         caseId: [{ type: i0.Input }]
     };
 
+    var HighlightCreateService = /** @class */ (function () {
+        function HighlightCreateService(toolBarEvents, store) {
+            this.toolBarEvents = toolBarEvents;
+            this.store = store;
+        }
+        HighlightCreateService.prototype.saveAnnotation = function (rectangles, page) {
+            var _this = this;
+            this.store.pipe(store.select(getDocumentIdSetId), operators.take(1)).subscribe(function (anoSetDocId) {
+                var anno = Object.assign(Object.assign({ id: uuid$1.v4(), color: 'FFFF00', comments: [], page: page, rectangles: rectangles, type: 'highlight' }, anoSetDocId), { createdBy: '', createdByDetails: undefined, createdDate: moment__default["default"].utc().tz('Europe/London').toISOString(), lastModifiedBy: '', lastModifiedByDetails: undefined, lastModifiedDate: '', tags: [] });
+                _this.store.dispatch(new SaveAnnotation(anno));
+            });
+        };
+        HighlightCreateService.prototype.applyRotation = function (pageHeight, pageWidth, offsetHeight, offsetWidth, offsetTop, offsetLeft, rotate, zoom) {
+            var _a = {
+                x: +(offsetLeft / zoom).toFixed(2),
+                y: +(offsetTop / zoom).toFixed(2),
+                width: +(offsetWidth / zoom).toFixed(2),
+                height: +(offsetHeight / zoom).toFixed(2)
+            }, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+            var rectangle = { x: x, y: y, width: width, height: 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;
+        };
+        HighlightCreateService.prototype.resetHighlight = function () {
+            window.getSelection().removeAllRanges();
+            this.toolBarEvents.highlightModeSubject.next(false);
+        };
+        return HighlightCreateService;
+    }());
+    HighlightCreateService.decorators = [
+        { type: i0.Injectable }
+    ];
+    /** @nocollapse */
+    HighlightCreateService.ctorParameters = function () { return [
+        { type: ToolbarEventService },
+        { type: store.Store }
+    ]; };
+
+    var RedactionSearchBarComponent = /** @class */ (function () {
+        function RedactionSearchBarComponent(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;
+        }
+        RedactionSearchBarComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.subscription = this.toolbarEvents.redactionSerachSubject.subscribe(function (results) { return _this.redactAllSearched(results); });
+            this.subscription.add(this.store.pipe(store.select(getDocumentId)).subscribe(function (docId) { return _this.documentId = docId; }));
+            this.subscription.add(this.store.pipe(store.select(getPages)).subscribe(function (pages) {
+                if (pages[1]) {
+                    _this.allPages = pages;
+                }
+            }));
+            this.subscription.add(this.toolbarEvents.searchResultsCountSubject.subscribe(function (results) { return _this.setSearchResultsCount(results); }));
+            this.subscription.add(this.toolbarEvents.openRedactionSearch.subscribe(function (isOpen) { return _this.openSearchModal = isOpen; }));
+            this.subscription.add(this.toolbarEvents.redactAllInProgressSubject
+                .subscribe(function (inProgress) { return _this.redactAllInProgress = inProgress; }));
+        };
+        RedactionSearchBarComponent.prototype.ngOnDestroy = function () {
+            this.subscription.unsubscribe();
+        };
+        RedactionSearchBarComponent.prototype.onWindowKeyDown = function (e) {
+            var _this = this;
+            if (e.code === 'F3' || (e.ctrlKey && e.code === 'KeyF')) {
+                e.preventDefault();
+                this.toolbarEvents.searchBarHidden.next(false);
+                setTimeout(function () { return _this.findInput.nativeElement.focus(); }, 200);
+            }
+        };
+        RedactionSearchBarComponent.prototype.search = function (reset) {
+            if (reset === void 0) { 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: reset
+            });
+        };
+        RedactionSearchBarComponent.prototype.saveRedaction = function (redactRectangle) {
+            var _this = this;
+            var redaction = redactRectangle.map(function (ele) {
+                return { page: ele.page, rectangles: ele.rectangles, redactionId: uuid__default$1["default"](), documentId: _this.documentId };
+            });
+            this.store.dispatch(new SaveBulkRedaction({ searchRedactions: redaction }));
+        };
+        RedactionSearchBarComponent.prototype.existInRedactElements = function (pageNumber, matechedIndex, rectangles) {
+            if (this.redactElements && this.redactElements.length > 0) {
+                var pagesFound = this.redactElements.find(function (re) { return re.page === pageNumber && re.matchedIndex === matechedIndex; });
+                var pageRectangles = pagesFound === null || pagesFound === void 0 ? void 0 : pagesFound.rectangles;
+                if (!pageRectangles || pageRectangles.length <= 0) {
+                    return false;
+                }
+                var matchesRectangles = 0;
+                var _loop_1 = function (rectIndx) {
+                    var rectangle = pageRectangles[rectIndx];
+                    var foundRectangle = rectangles.find(function (re) { return re.width === rectangle.width &&
+                        re.height === rectangle.height && re.x === rectangle.x && re.y === rectangle.y; });
+                    if (foundRectangle) {
+                        matchesRectangles++;
+                    }
+                };
+                for (var rectIndx = 0; rectIndx < pageRectangles.length; rectIndx++) {
+                    _loop_1(rectIndx);
+                }
+                return pageRectangles.length === matchesRectangles;
+            }
+            return false;
+        };
+        RedactionSearchBarComponent.prototype.onCloseSearchModal = function () {
+            this.toolbarEvents.openRedactionSearch.next(false);
+        };
+        RedactionSearchBarComponent.prototype.setSearchResultsCount = function (results) {
+            this.resultCount = results.total;
+            this.resultsText = this.resultCount > 0
+                ? results.total + " results founds"
+                : 'No results found';
+        };
+        RedactionSearchBarComponent.prototype.redactAllSearched = function (results) {
+            var $this = this;
+            var intervalId = setInterval(function () {
+                var highlightElement = document.getElementsByClassName('highlight selected');
+                if (highlightElement && highlightElement.length > 0) {
+                    clearInterval(intervalId);
+                    $this.redactAllSearchedTick(results);
+                }
+            }, 100);
+        };
+        RedactionSearchBarComponent.prototype.redactAllSearchedTick = function (results) {
+            var highlightElement = document.getElementsByClassName('highlight selected');
+            if (highlightElement && highlightElement.length > 0) {
+                this.resultCount = results.matchesCount;
+                var pageNumber = results.page + 1;
+                var 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: 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);
+                }
+            }
+        };
+        RedactionSearchBarComponent.prototype.CreateRedactAllText = function () {
+            this.redactAllText = this.redactElements.length + " of " + this.resultCount;
+        };
+        RedactionSearchBarComponent.prototype.onEscapeKeyPress = function (e) {
+            this.toolbarEvents.searchBarHidden.next(true);
+        };
+        RedactionSearchBarComponent.prototype.onEnterKeyPress = function (e) {
+            this.search();
+        };
+        RedactionSearchBarComponent.prototype.toggleSearchBar = function () {
+            this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
+        };
+        RedactionSearchBarComponent.prototype.getRectangles = function (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);
+            var selectedHighLightedElements = document.getElementsByClassName('highlight selected');
+            if (selectedHighLightedElements && selectedHighLightedElements.length > 0) {
+                var docRange = document.createRange();
+                docRange.selectNodeContents(selectedHighLightedElements[0]);
+                var 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) {
+                    var range = selection.getRangeAt(0).cloneRange();
+                    var clientRects = range.getClientRects();
+                    if (clientRects) {
+                        var parentRect = selectedHighLightedElements[0].parentElement.parentElement.getBoundingClientRect();
+                        var selectionRectangles = [];
+                        var _loop_2 = function (i) {
+                            var selectionRectangle = this_1.createTextRectangle(clientRects[i], parentRect);
+                            var findSelecttionRectangle = selectionRectangles.find(function (rect) { return rect.width === selectionRectangle.width && rect.x === selectionRectangle.x; });
+                            if (!findSelecttionRectangle) {
+                                selectionRectangles.push(selectionRectangle);
+                            }
+                        };
+                        var this_1 = this;
+                        for (var i = 0; i < clientRects.length; i++) {
+                            _loop_2(i);
+                        }
+                        return selectionRectangles;
+                    }
+                }
+            }
+        };
+        RedactionSearchBarComponent.prototype.createTextRectangle = function (rect, parentRect) {
+            var height = rect.bottom - rect.top;
+            var width = rect.right - rect.left;
+            var top = rect.top - parentRect.top;
+            var left = rect.left - parentRect.left;
+            var rectangle = this.highlightService.applyRotation(this.pageHeight, this.pageWidth, height, width, top, left, this.rotate, this.zoom);
+            rectangle = Object.assign({ id: uuid__default$1["default"]() }, rectangle);
+            return rectangle;
+        };
+        return RedactionSearchBarComponent;
+    }());
+    RedactionSearchBarComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: store.Store },
+        { type: ToolbarButtonVisibilityService },
+        { type: ToolbarEventService },
+        { type: HighlightCreateService }
+    ]; };
+    RedactionSearchBarComponent.propDecorators = {
+        findInput: [{ type: i0.ViewChild, args: ['findInput', { static: true },] }],
+        onWindowKeyDown: [{ type: i0.HostListener, args: ['window:keydown', ['$event'],] }]
+    };
+
     /**
      * Number Helper Service
      * */
@@ -3559,6 +3883,8 @@
                 }
             }), this.toolbarEvents.redactionMode.subscribe(function (enabled) {
                 _this.redactionEnabled = enabled;
+            }), this.toolbarEvents.redactAllInProgressSubject.subscribe(function (disable) {
+                _this.redactAllInProgress = disable;
             }));
         };
         MainToolbarComponent.prototype.ngOnDestroy = function () {
@@ -3594,8 +3920,21 @@
         MainToolbarComponent.prototype.onClickDrawToggle = function () {
             this.toolbarEvents.toggleDrawMode();
         };
-        MainToolbarComponent.prototype.toggleSideBar = function () {
-            this.toolbarEvents.sidebarOpen.next(!this.toolbarEvents.sidebarOpen.getValue());
+        MainToolbarComponent.prototype.toggleIndexSideBar = function () {
+            var sidebarOpen = this.toolbarEvents.sidebarOpen.getValue();
+            var sidebarView = this.toolbarEvents.sidebarOutlineView.getValue();
+            if (!(sidebarOpen && !sidebarView)) {
+                this.toolbarEvents.toggleSideBar(!sidebarOpen);
+            }
+            this.toolbarEvents.toggleSideBarView(true);
+        };
+        MainToolbarComponent.prototype.toggleBookmarksSideBar = function () {
+            var sidebarOpen = this.toolbarEvents.sidebarOpen.getValue();
+            var sidebarView = this.toolbarEvents.sidebarOutlineView.getValue();
+            if (!(sidebarOpen && sidebarView)) {
+                this.toolbarEvents.toggleSideBar(!sidebarOpen);
+            }
+            this.toolbarEvents.toggleSideBarView(false);
         };
         MainToolbarComponent.prototype.togglePresentBar = function () {
             this.toolbarEvents.searchBarHidden.next(true);
@@ -3664,7 +4003,7 @@
     MainToolbarComponent.decorators = [
         { type: i0.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 */
@@ -3831,12 +4170,19 @@
             this.store = store;
             this.preview = false;
             this.hasRedactions = false;
+            this.subscriptions = [];
         }
         RedactionToolbarComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.$subscription = this.store.pipe(store.select(getRedactionArray)).subscribe(function (redactions) {
+            this.subscriptions.push(this.store.pipe(store.select(getRedactionArray)).subscribe(function (redactions) {
                 _this.hasRedactions = !!redactions.redactions.length;
-            });
+            }));
+            this.subscriptions.push(this.toolbarEventService.redactAllInProgressSubject.subscribe(function (inprogress) {
+                _this.redactionAllInProgress = inprogress;
+            }));
+        };
+        RedactionToolbarComponent.prototype.onRedactAllSearch = function () {
+            this.toolbarEventService.openRedactionSearch.next(true);
         };
         RedactionToolbarComponent.prototype.toggleTextRedactionMode = function () {
             this.toolbarEventService.highlightModeSubject.next(true);
@@ -3862,14 +4208,27 @@
             this.toolbarEventService.redactPage();
         };
         RedactionToolbarComponent.prototype.ngOnDestroy = function () {
-            this.$subscription.unsubscribe();
+            var e_1, _a;
+            try {
+                for (var _b = __values(this.subscriptions), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var subscription = _c.value;
+                    subscription.unsubscribe();
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
         };
         return RedactionToolbarComponent;
     }());
     RedactionToolbarComponent.decorators = [
         { type: i0.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 */
@@ -3878,6 +4237,9 @@
         { type: ToolbarButtonVisibilityService },
         { type: store.Store }
     ]; };
+    RedactionToolbarComponent.propDecorators = {
+        showRedactSearch: [{ type: i0.Input }]
+    };
 
     var IcpToolbarComponent = /** @class */ (function () {
         function IcpToolbarComponent(toolbarEventService, store) {
@@ -3931,7 +4293,8 @@
                         SearchBarComponent,
                         MainToolbarComponent,
                         RedactionToolbarComponent,
-                        IcpToolbarComponent
+                        IcpToolbarComponent,
+                        RedactionSearchBarComponent
                     ],
                     providers: [
                         ToolbarButtonVisibilityService,
@@ -3941,7 +4304,8 @@
                         MainToolbarComponent,
                         SearchBarComponent,
                         RedactionToolbarComponent,
-                        IcpToolbarComponent
+                        IcpToolbarComponent,
+                        RedactionSearchBarComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -4084,92 +4448,37 @@
         pageWidth: [{ type: i0.Input }]
     };
 
-    var HighlightCreateService = /** @class */ (function () {
-        function HighlightCreateService(toolBarEvents, store) {
-            this.toolBarEvents = toolBarEvents;
-            this.store = store;
+    var RectangleComponent = /** @class */ (function () {
+        function RectangleComponent(toolbarEvents, highlightService) {
+            this.toolbarEvents = toolbarEvents;
+            this.highlightService = highlightService;
+            this.select = new i0.EventEmitter();
+            this.update = new i0.EventEmitter();
+            this.subscriptions = [];
+            this.enableGrabNDrag = false;
         }
-        HighlightCreateService.prototype.saveAnnotation = function (rectangles, page) {
+        Object.defineProperty(RectangleComponent.prototype, "annoRect", {
+            get: function () {
+                return this._annoRect;
+            },
+            set: function (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);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        RectangleComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.rotate) {
+                this.adjustForRotation(this.rotate);
+            }
+        };
+        RectangleComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
-            this.store.pipe(store.select(getDocumentIdSetId), operators.take(1)).subscribe(function (anoSetDocId) {
-                var anno = Object.assign(Object.assign({ id: uuid__default$1["default"](), color: 'FFFF00', comments: [], page: page, rectangles: rectangles, type: 'highlight' }, anoSetDocId), { createdBy: '', createdByDetails: undefined, createdDate: moment__default["default"].utc().tz('Europe/London').toISOString(), lastModifiedBy: '', lastModifiedByDetails: undefined, lastModifiedDate: '', tags: [] });
-                _this.store.dispatch(new SaveAnnotation(anno));
-            });
-        };
-        HighlightCreateService.prototype.applyRotation = function (pageHeight, pageWidth, offsetHeight, offsetWidth, offsetTop, offsetLeft, rotate, zoom) {
-            var _a = {
-                x: +(offsetLeft / zoom).toFixed(2),
-                y: +(offsetTop / zoom).toFixed(2),
-                width: +(offsetWidth / zoom).toFixed(2),
-                height: +(offsetHeight / zoom).toFixed(2)
-            }, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
-            var rectangle = { x: x, y: y, width: width, height: 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;
-        };
-        HighlightCreateService.prototype.resetHighlight = function () {
-            window.getSelection().removeAllRanges();
-            this.toolBarEvents.highlightModeSubject.next(false);
-        };
-        return HighlightCreateService;
-    }());
-    HighlightCreateService.decorators = [
-        { type: i0.Injectable }
-    ];
-    /** @nocollapse */
-    HighlightCreateService.ctorParameters = function () { return [
-        { type: ToolbarEventService },
-        { type: store.Store }
-    ]; };
-
-    var RectangleComponent = /** @class */ (function () {
-        function RectangleComponent(toolbarEvents, highlightService) {
-            this.toolbarEvents = toolbarEvents;
-            this.highlightService = highlightService;
-            this.select = new i0.EventEmitter();
-            this.update = new i0.EventEmitter();
-            this.subscriptions = [];
-            this.enableGrabNDrag = false;
-        }
-        Object.defineProperty(RectangleComponent.prototype, "annoRect", {
-            get: function () {
-                return this._annoRect;
-            },
-            set: function (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);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        RectangleComponent.prototype.ngOnChanges = function (changes) {
-            if (changes.rotate) {
-                this.adjustForRotation(this.rotate);
-            }
-        };
-        RectangleComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            this.subscriptions.push(this.toolbarEvents.grabNDrag.subscribe(function (grabNDrag) { return _this.enableGrabNDrag = grabNDrag; }));
+            this.subscriptions.push(this.toolbarEvents.grabNDrag.subscribe(function (grabNDrag) { return _this.enableGrabNDrag = grabNDrag; }));
         };
         RectangleComponent.prototype.ngOnDestroy = function () {
             this.subscriptions.filter(function (subscription) { return !subscription.closed; })
@@ -4312,6 +4621,7 @@
             this.subscriptions = this.store.select(getComponentSearchText)
                 .pipe(operators.distinctUntilChanged()).subscribe(function (searchString) { return _this.searchString = searchString; });
             this.reRenderComments();
+            this.marginToComment$ = this.commentService.marginToCommentEmitter.asObservable();
         };
         CommentComponent.prototype.ngAfterContentInit = function () {
             if (this.tagItems && this.tagItems.length) {
@@ -4443,7 +4753,7 @@
     CommentComponent.decorators = [
         { type: i0.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 */
@@ -4940,7 +5250,7 @@
             if (this.height / this.zoom > 5 || this.width / this.zoom > 5) {
                 var 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__default$1["default"]() }, rectangle);
+                rectangle = Object.assign({ id: uuid$1.v4() }, rectangle);
                 this.saveSelection.emit({ rectangles: [rectangle], page: this.page });
                 this.resetHighlight();
             }
@@ -4985,8 +5295,9 @@
     };
 
     var CommentSetHeaderComponent = /** @class */ (function () {
-        function CommentSetHeaderComponent(store, toolbarEvents) {
+        function CommentSetHeaderComponent(store, commentService, toolbarEvents) {
             this.store = store;
+            this.commentService = commentService;
             this.toolbarEvents = toolbarEvents;
             this.showCommentSummaryDialog = new i0.EventEmitter();
             this.tabs = [];
@@ -5012,6 +5323,14 @@
         };
         CommentSetHeaderComponent.prototype.selectTab = function (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);
+            }
         };
         CommentSetHeaderComponent.prototype.toggleCommentsPanel = function () {
             this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
@@ -5031,6 +5350,7 @@
     /** @nocollapse */
     CommentSetHeaderComponent.ctorParameters = function () { return [
         { type: store.Store },
+        { type: CommentService },
         { type: ToolbarEventService }
     ]; };
     CommentSetHeaderComponent.propDecorators = {
@@ -5614,7 +5934,7 @@
             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(function (a, b) { return a.index - b.index; })[bookmarkNodes.length - 1].id : undefined,
             documentId: docId
         };
     };
@@ -5677,8 +5997,9 @@
             this.store.pipe(store.select(getBookmarkInfo), operators.take(1))
                 .subscribe(function (bookmarkInfo) {
                 var 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__default$1["default"](), 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: uuid$1.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;
             });
@@ -5758,6 +6079,7 @@
                         BookmarksApiService,
                         CommentSetRenderService,
                         HighlightCreateService,
+                        CommentService,
                         TagsServices
                     ],
                     exports: [
@@ -5829,17 +6151,205 @@
         onWindowPointerUp: [{ type: i0.HostListener, args: ['window:pointerup',] }]
     };
 
+    var BookmarksComponent = /** @class */ (function () {
+        function BookmarksComponent(store) {
+            this.store = store;
+            this.goToDestination = new i0.EventEmitter();
+            this.pageLookup = {};
+            this.BOOKMARK_CHAR_LIMIT = 30;
+            this.options = {
+                allowDrag: true,
+                allowDrop: true
+            };
+            this._customSort = 'CUSTOM';
+            this._positionSort = 'POSITION';
+        }
+        BookmarksComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.sortMode = this.customSort;
+            this.$subscription = this.store.pipe(store.select(getEditableBookmark))
+                .subscribe(function (editableId) { return _this.editableBookmark = editableId; });
+            this.$subscription.add(this.store.select(getPages)
+                .subscribe(function (pages) {
+                Object.keys(pages).map(function (key) {
+                    _this.pageLookup[key] = pages[key];
+                });
+            }));
+        };
+        BookmarksComponent.prototype.ngOnChanges = function (changes) {
+            if (changes.bookmarkNodes && this.sortMode !== this.customSort) {
+                this.sortBookmarks();
+            }
+        };
+        BookmarksComponent.prototype.ngOnDestroy = function () {
+            this.$subscription.unsubscribe();
+        };
+        BookmarksComponent.prototype.editBookmark = function (id) {
+            this.editableBookmark = id;
+        };
+        BookmarksComponent.prototype.onAddBookmarkClick = function () {
+            var _this = this;
+            this.store.pipe(store.select(getBookmarkInfo), operators.take(1))
+                .subscribe(function (bookmarkInfo) {
+                _this.store.dispatch(new CreateBookmark(Object.assign(Object.assign({}, bookmarkInfo), { name: '', id: uuid__default$1["default"]() })));
+            });
+        };
+        BookmarksComponent.prototype.onBookmarkMove = function (_a) {
+            var node = _a.node, from = _a.from, to = _a.to;
+            var 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 })];
+            var fromNext = this.getSibling(from, from.index);
+            fromNext = fromNext && fromNext.id === node.previous ? this.getSibling(from, from.index + 1) : fromNext;
+            if (fromNext) {
+                movedBookmarks = __spread(movedBookmarks, [Object.assign(Object.assign({}, fromNext), { previous: node.previous })]);
+            }
+            var toNext = this.getSibling(to, to.index + 1);
+            if (toNext) {
+                movedBookmarks = __spread(movedBookmarks, [Object.assign(Object.assign({}, toNext), { previous: node.id })]);
+            }
+            this.store.dispatch(new MoveBookmark(movedBookmarks));
+        };
+        BookmarksComponent.prototype.deleteBookmark = function (node) {
+            this.customSortBookmarks();
+            var next;
+            node = this.tree.treeModel.getNodeById(node.id);
+            if (!node.parent) {
+                node.parent = this.tree.treeModel.virtualRoot;
+            }
+            var 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: __spread([node.data.id], getBookmarkChildren(node.data.children)),
+                updated: next
+            }));
+        };
+        BookmarksComponent.prototype.updateBookmark = function (bookmark, name) {
+            var editedBookmark = Object.assign(Object.assign({}, bookmark), { name: name });
+            if (name) {
+                this.store.dispatch(new UpdateBookmark(editedBookmark));
+                this.editableBookmark = undefined;
+            }
+        };
+        BookmarksComponent.prototype.goToBookmark = function (bookmark) {
+            var thisPage = this.pageLookup[bookmark.pageNumber + 1];
+            var defaultHeight = thisPage.styles.height;
+            var defaultScaleY = this.scaledY(bookmark.yCoordinate, defaultHeight, thisPage);
+            var 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
+            ]);
+        };
+        Object.defineProperty(BookmarksComponent.prototype, "customSort", {
+            get: function () {
+                return this._customSort;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BookmarksComponent.prototype, "positionSort", {
+            get: function () {
+                return this._positionSort;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        BookmarksComponent.prototype.sort = function (mode) {
+            this.sortMode = mode;
+            this.sortBookmarks();
+        };
+        BookmarksComponent.prototype.sortBookmarks = function () {
+            switch (this.sortMode) {
+                case this.customSort: {
+                    this.customSortBookmarks();
+                    break;
+                }
+                case this.positionSort: {
+                    this.positionSortBookmarks();
+                    break;
+                }
+                default: {
+                    this.customSortBookmarks();
+                    break;
+                }
+            }
+        };
+        BookmarksComponent.prototype.positionSortBookmarks = function () {
+            this.bookmarkNodes.sort(function (a, b) { return a.pageNumber === b.pageNumber ? a.yCoordinate - b.yCoordinate : a.pageNumber - b.pageNumber; });
+            this.tree.treeModel.update();
+            this.setDragNDrop(false);
+        };
+        BookmarksComponent.prototype.customSortBookmarks = function () {
+            this.bookmarkNodes.sort(function (a, b) { return a.index - b.index; });
+            this.tree.treeModel.update();
+            this.setDragNDrop(true);
+        };
+        BookmarksComponent.prototype.setDragNDrop = function (enabled) {
+            this.options = {
+                allowDrag: enabled,
+                allowDrop: enabled
+            };
+        };
+        BookmarksComponent.prototype.getSibling = function (node, index) {
+            return node.parent.children.length > index ? node.parent.children[index] : undefined;
+        };
+        BookmarksComponent.prototype.scaledY = function (yCoordinate, height, page) {
+            var viewportScale = page.viewportScale / this.zoom;
+            return ((height / this.zoom) - yCoordinate) / viewportScale;
+        };
+        return BookmarksComponent;
+    }());
+    BookmarksComponent.decorators = [
+        { type: i0.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 = function () { return [
+        { type: store.Store }
+    ]; };
+    BookmarksComponent.propDecorators = {
+        bookmarkNodes: [{ type: i0.Input }],
+        zoom: [{ type: i0.Input }],
+        rotate: [{ type: i0.Input }],
+        goToDestination: [{ type: i0.Output }],
+        tree: [{ type: i0.ViewChild, args: [angularTreeComponent.TreeComponent,] }]
+    };
+
     var SideBarComponent = /** @class */ (function () {
-        function SideBarComponent(viewerEvents, store) {
+        function SideBarComponent(viewerEvents, store, toolbarEvents) {
             this.viewerEvents = viewerEvents;
             this.store = store;
+            this.toolbarEvents = toolbarEvents;
             this.selectedView = 'outline';
+            this.subscriptions = [];
         }
         SideBarComponent.prototype.ngOnInit = function () {
             var _this = this;
             this.bookmarkNodes$ = this.store.pipe(store.select(getBookmarkNodes));
-            this.$subscription = this.store.pipe(store.select(getEditableBookmark))
-                .subscribe(function (editable) { return _this.selectedView = editable ? 'bookmarks' : _this.selectedView; });
+            this.subscriptions.push(this.store.pipe(store.select(getEditableBookmark))
+                .subscribe(function (editable) { return _this.selectedView = editable ? 'bookmarks' : _this.selectedView; }));
+            this.subscriptions.push(this.toolbarEvents.sidebarOutlineView.subscribe(function (toggle) {
+                _this.selectedView = toggle ? 'outline' : 'bookmarks';
+            }));
         };
         SideBarComponent.prototype.ngOnChanges = function (changes) {
             if (changes.url && this.url) {
@@ -5847,7 +6357,9 @@
             }
         };
         SideBarComponent.prototype.ngOnDestroy = function () {
-            this.$subscription.unsubscribe();
+            if (this.subscriptions.length > 0) {
+                this.subscriptions.forEach(function (subscription) { return subscription.unsubscribe(); });
+            }
         };
         SideBarComponent.prototype.goToDestination = function (destination) {
             this.viewerEvents.goToDestination(destination);
@@ -5855,15 +6367,10 @@
         SideBarComponent.prototype.toggleSidebarView = function (sidebarView) {
             this.selectedView = sidebarView;
         };
-        SideBarComponent.prototype.onAddBookmarkClick = function () {
-            var _this = this;
-            this.toggleSidebarView('bookmarks');
-            this.store.pipe(store.select(getBookmarkInfo), operators.take(1))
-                .subscribe(function (bookmarkInfo) {
-                _this.store.dispatch(new CreateBookmark(Object.assign(Object.assign({}, bookmarkInfo), { name: '', id: uuid__default$1["default"]() })));
-            });
-        };
         SideBarComponent.prototype.isViewedItem = function (current, next) {
+            if (current.pageNumber === this.currentPageNumber) {
+                return true;
+            }
             return next === undefined ? current.pageNumber <= this.currentPageNumber :
                 current.pageNumber <= this.currentPageNumber && (next.pageNumber > this.currentPageNumber);
         };
@@ -5875,13 +6382,14 @@
     SideBarComponent.decorators = [
         { type: i0.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 = function () { return [
         { type: ViewerEventService },
-        { type: store.Store }
+        { type: store.Store },
+        { type: ToolbarEventService }
     ]; };
     SideBarComponent.propDecorators = {
         annotationsEnabled: [{ type: i0.Input }],
@@ -5889,7 +6397,8 @@
         url: [{ type: i0.Input }],
         zoom: [{ type: i0.Input }],
         rotate: [{ type: i0.Input }],
-        currentPageNumber: [{ type: i0.Input }]
+        currentPageNumber: [{ type: i0.Input }],
+        bookmarks: [{ type: i0.ViewChild, args: [BookmarksComponent,] }]
     };
 
     var OutlineItemComponent = /** @class */ (function () {
@@ -5908,6 +6417,9 @@
             this.showOutlineItems = !this.showOutlineItems;
         };
         OutlineItemComponent.prototype.isViewedItem = function (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);
         };
@@ -5973,7 +6485,7 @@
             this.toolbarEvents.drawModeSubject.next(false);
         };
         RedactionComponent.prototype.saveRedaction = function (page, rectangles) {
-            var redaction = { page: page, rectangles: rectangles, redactionId: uuid__default$1["default"](), documentId: this.documentId };
+            var redaction = { page: page, rectangles: rectangles, redactionId: uuid$1.v4(), documentId: this.documentId };
             this.store.dispatch(new SaveRedaction(redaction));
         };
         RedactionComponent.prototype.onMarkerDelete = function (event) {
@@ -6162,6 +6674,7 @@
             this.httpClient = httpClient;
             this.markupsApiUrl = '/api/markups';
             this.redactApiUrl = '/api/redaction';
+            this.markupsSearchApiUrl = '/api/markups/search';
         }
         RedactionApiService.prototype.getRedactions = function (documentId) {
             var fixedUrl = this.markupsApiUrl + "/" + documentId;
@@ -6173,6 +6686,11 @@
                 .post(this.markupsApiUrl, body, { observe: 'response', withCredentials: true })
                 .pipe(operators.map(function (response) { return response.body; }), operators.catchError(function () { return []; }));
         };
+        RedactionApiService.prototype.saveBulkRedaction = function (body) {
+            return this.httpClient
+                .post(this.markupsSearchApiUrl, body, { observe: 'response', withCredentials: true })
+                .pipe(operators.map(function (response) { return response.body; }), operators.catchError(function () { return []; }));
+        };
         RedactionApiService.prototype.deleteRedaction = function (payload) {
             var url = this.markupsApiUrl + "/" + payload.documentId + "/" + payload.redactionId;
             return this.httpClient
@@ -6201,10 +6719,11 @@
     ]; };
 
     var RedactionEffects = /** @class */ (function () {
-        function RedactionEffects(actions$, redactionApiService) {
+        function RedactionEffects(actions$, redactionApiService, toolbarEvents) {
             var _this = this;
             this.actions$ = actions$;
             this.redactionApiService = redactionApiService;
+            this.toolbarEvents = toolbarEvents;
             this.loadRedactions$ = this.actions$.pipe(effects$1.ofType(LOAD_REDACTIONS), operators.map(function (action) { return action.payload; }), operators.switchMap(function (documentId) {
                 return _this.redactionApiService.getRedactions(documentId).pipe(operators.map(function (resp) {
                     return new LoadRedactionSuccess(resp.body);
@@ -6219,6 +6738,13 @@
                     return rxjs.of(new SaveRedactionFailure(error));
                 }));
             }));
+            this.saveBulkRedaction$ = this.actions$.pipe(effects$1.ofType(SAVE_BULK_REDACTION), operators.map(function (action) { return action.payload; }), operators.exhaustMap(function (redaction) {
+                return _this.redactionApiService.saveBulkRedaction(redaction).pipe(operators.tap(function () { return _this.toolbarEvents.redactAllInProgressSubject.next(false); })).pipe(operators.map(function (resp) {
+                    return new SaveBulkRedactionSuccess(resp);
+                }), operators.catchError(function (error) {
+                    return rxjs.of(new SaveBulkRedactionFailure(error));
+                }));
+            }));
             this.deleteRedaction$ = this.actions$.pipe(effects$1.ofType(DELETE_REDACTION), operators.map(function (action) { return action.payload; }), operators.exhaustMap(function (redactionPayload) {
                 return _this.redactionApiService.deleteRedaction(redactionPayload).pipe(operators.map(function () {
                     return new DeleteRedactionSuccess(redactionPayload);
@@ -6252,7 +6778,8 @@
     /** @nocollapse */
     RedactionEffects.ctorParameters = function () { return [
         { type: effects$1.Actions },
-        { type: RedactionApiService }
+        { type: RedactionApiService },
+        { type: ToolbarEventService }
     ]; };
     __decorate([
         effects$1.Effect(),
@@ -6262,6 +6789,10 @@
         effects$1.Effect(),
         __metadata("design:type", Object)
     ], RedactionEffects.prototype, "saveRedaction$", void 0);
+    __decorate([
+        effects$1.Effect(),
+        __metadata("design:type", Object)
+    ], RedactionEffects.prototype, "saveBulkRedaction$", void 0);
     __decorate([
         effects$1.Effect(),
         __metadata("design:type", Object)
@@ -6407,118 +6938,6 @@
 
     var effects = [AnnotationEffects, BookmarksEffects, RedactionEffects, DocumentEffects, IcpEffects];
 
-    var BookmarksComponent = /** @class */ (function () {
-        function BookmarksComponent(store) {
-            this.store = store;
-            this.goToDestination = new i0.EventEmitter();
-            this.pageLookup = {};
-            this.BOOKMARK_CHAR_LIMIT = 30;
-            this.options = {
-                allowDrag: true,
-                allowDrop: true
-            };
-        }
-        BookmarksComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.$subscription = this.store.pipe(store.select(getEditableBookmark))
-                .subscribe(function (editableId) { return _this.editableBookmark = editableId; });
-            this.$subscription.add(this.store.select(getPages)
-                .subscribe(function (pages) {
-                Object.keys(pages).map(function (key) {
-                    _this.pageLookup[key] = pages[key];
-                });
-            }));
-        };
-        BookmarksComponent.prototype.ngOnDestroy = function () {
-            this.$subscription.unsubscribe();
-        };
-        BookmarksComponent.prototype.editBookmark = function (id) {
-            this.editableBookmark = id;
-        };
-        BookmarksComponent.prototype.onBookmarkMove = function (_a) {
-            var node = _a.node, from = _a.from, to = _a.to;
-            var 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 })];
-            var fromNext = this.getSibling(from, from.index);
-            fromNext = fromNext && fromNext.id === node.previous ? this.getSibling(from, from.index + 1) : fromNext;
-            if (fromNext) {
-                movedBookmarks = __spread(movedBookmarks, [Object.assign(Object.assign({}, fromNext), { previous: node.previous })]);
-            }
-            var toNext = this.getSibling(to, to.index + 1);
-            if (toNext) {
-                movedBookmarks = __spread(movedBookmarks, [Object.assign(Object.assign({}, toNext), { previous: node.id })]);
-            }
-            this.store.dispatch(new MoveBookmark(movedBookmarks));
-        };
-        BookmarksComponent.prototype.deleteBookmark = function (node) {
-            var next;
-            var 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: __spread([node.data.id], getBookmarkChildren(node.data.children)),
-                updated: next
-            }));
-        };
-        BookmarksComponent.prototype.updateBookmark = function (bookmark, name) {
-            var editedBookmark = Object.assign(Object.assign({}, bookmark), { name: name });
-            if (name) {
-                this.store.dispatch(new UpdateBookmark(editedBookmark));
-                this.editableBookmark = undefined;
-            }
-        };
-        BookmarksComponent.prototype.goToBookmark = function (bookmark) {
-            var thisPage = this.pageLookup[bookmark.pageNumber + 1];
-            var defaultHeight = thisPage.styles.height;
-            var defaultScaleY = this.scaledY(bookmark.yCoordinate, defaultHeight, thisPage);
-            var 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
-            ]);
-        };
-        BookmarksComponent.prototype.getSibling = function (node, index) {
-            return node.parent.children.length > index ? node.parent.children[index] : undefined;
-        };
-        BookmarksComponent.prototype.scaledY = function (yCoordinate, height, page) {
-            var viewportScale = page.viewportScale / this.zoom;
-            return ((height / this.zoom) - yCoordinate) / viewportScale;
-        };
-        return BookmarksComponent;
-    }());
-    BookmarksComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: store.Store }
-    ]; };
-    BookmarksComponent.propDecorators = {
-        bookmarkNodes: [{ type: i0.Input }],
-        zoom: [{ type: i0.Input }],
-        rotate: [{ type: i0.Input }],
-        goToDestination: [{ type: i0.Output }]
-    };
-
     var ConvertibleContentViewerComponent = /** @class */ (function () {
         function ConvertibleContentViewerComponent(store) {
             this.store = store;
@@ -6801,7 +7220,7 @@
             var top = rect.top - parentRect.top;
             var left = rect.left - parentRect.left;
             var rectangle = this.highlightService.applyRotation(this.pageHeight, this.pageWidth, height, width, top, left, this.rotate, this.zoom);
-            rectangle = Object.assign({ id: uuid__default$1["default"]() }, rectangle);
+            rectangle = Object.assign({ id: uuid$1.v4() }, rectangle);
             return rectangle;
         };
         HighlightCreateDirective.prototype.removeEnhancedTextModeStyling = function (element) {
@@ -7048,50 +7467,51 @@
     exports["ɵ6"] = ɵ6;
     exports["ɵ7"] = ɵ7;
     exports["ɵa"] = NumberHelperService;
-    exports["ɵba"] = TextHighlightDirective;
-    exports["ɵbb"] = CtxToolbarComponent;
-    exports["ɵbc"] = CommentSetRenderService;
-    exports["ɵbd"] = CommentsNavigateComponent;
-    exports["ɵbe"] = TextareaAutoExpandDirective;
-    exports["ɵbf"] = PrintService;
-    exports["ɵbg"] = BookmarksApiService;
-    exports["ɵbh"] = effects;
-    exports["ɵbi"] = BookmarksEffects;
-    exports["ɵbj"] = RedactionEffects;
-    exports["ɵbk"] = RedactionApiService;
-    exports["ɵbl"] = DocumentEffects;
-    exports["ɵbm"] = DocumentConversionApiService;
-    exports["ɵbn"] = RotationApiService;
-    exports["ɵbo"] = IcpEffects;
-    exports["ɵbp"] = IcpSessionApiService;
-    exports["ɵbq"] = IcpUpdateService;
-    exports["ɵbr"] = SocketService;
-    exports["ɵbs"] = PdfViewerComponent;
-    exports["ɵbt"] = PdfJsWrapperFactory;
-    exports["ɵbu"] = IcpService;
-    exports["ɵbv"] = IcpPresenterService;
-    exports["ɵbw"] = IcpFollowerService;
-    exports["ɵbx"] = SideBarComponent;
-    exports["ɵby"] = BookmarksComponent;
-    exports["ɵbz"] = OutlineItemComponent;
+    exports["ɵba"] = TagsServices;
+    exports["ɵbb"] = TextHighlightDirective;
+    exports["ɵbc"] = CtxToolbarComponent;
+    exports["ɵbd"] = CommentSetRenderService;
+    exports["ɵbe"] = CommentsNavigateComponent;
+    exports["ɵbf"] = TextareaAutoExpandDirective;
+    exports["ɵbg"] = PrintService;
+    exports["ɵbh"] = BookmarksApiService;
+    exports["ɵbi"] = effects;
+    exports["ɵbj"] = BookmarksEffects;
+    exports["ɵbk"] = RedactionEffects;
+    exports["ɵbl"] = RedactionApiService;
+    exports["ɵbm"] = DocumentEffects;
+    exports["ɵbn"] = DocumentConversionApiService;
+    exports["ɵbo"] = RotationApiService;
+    exports["ɵbp"] = IcpEffects;
+    exports["ɵbq"] = IcpSessionApiService;
+    exports["ɵbr"] = IcpUpdateService;
+    exports["ɵbs"] = SocketService;
+    exports["ɵbt"] = PdfViewerComponent;
+    exports["ɵbu"] = PdfJsWrapperFactory;
+    exports["ɵbv"] = IcpService;
+    exports["ɵbw"] = IcpPresenterService;
+    exports["ɵbx"] = IcpFollowerService;
+    exports["ɵby"] = SideBarComponent;
+    exports["ɵbz"] = BookmarksComponent;
     exports["ɵc"] = reducers;
-    exports["ɵca"] = ImageViewerComponent;
-    exports["ɵcb"] = ViewerUtilService;
-    exports["ɵcc"] = UnsupportedViewerComponent;
-    exports["ɵcd"] = MultimediaPlayerComponent;
-    exports["ɵce"] = ConvertibleContentViewerComponent;
-    exports["ɵcf"] = GrabNDragDirective;
-    exports["ɵcg"] = RotationPersistDirective;
-    exports["ɵch"] = HighlightCreateDirective;
-    exports["ɵci"] = ConfirmActionDialogComponent;
-    exports["ɵcj"] = RedactionComponent;
-    exports["ɵck"] = BookmarkIconsComponent;
-    exports["ɵcl"] = ParticipantsListComponent;
-    exports["ɵcm"] = getDocumentState;
-    exports["ɵcn"] = getPages;
-    exports["ɵco"] = getTagsRootState;
-    exports["ɵcp"] = getTagFiltered;
-    exports["ɵcq"] = getFilteredPageEntities;
+    exports["ɵca"] = OutlineItemComponent;
+    exports["ɵcb"] = ImageViewerComponent;
+    exports["ɵcc"] = ViewerUtilService;
+    exports["ɵcd"] = UnsupportedViewerComponent;
+    exports["ɵce"] = MultimediaPlayerComponent;
+    exports["ɵcf"] = ConvertibleContentViewerComponent;
+    exports["ɵcg"] = GrabNDragDirective;
+    exports["ɵch"] = RotationPersistDirective;
+    exports["ɵci"] = HighlightCreateDirective;
+    exports["ɵcj"] = ConfirmActionDialogComponent;
+    exports["ɵck"] = RedactionComponent;
+    exports["ɵcl"] = BookmarkIconsComponent;
+    exports["ɵcm"] = ParticipantsListComponent;
+    exports["ɵcn"] = getDocumentState;
+    exports["ɵco"] = getPages;
+    exports["ɵcp"] = getTagsRootState;
+    exports["ɵcq"] = getTagFiltered;
+    exports["ɵcr"] = getFilteredPageEntities;
     exports["ɵd"] = getMVState;
     exports["ɵf"] = docReducer;
     exports["ɵg"] = getDocPages;
@@ -7101,17 +7521,17 @@
     exports["ɵl"] = bookmarksReducer;
     exports["ɵm"] = redactionReducer;
     exports["ɵn"] = icpReducer;
-    exports["ɵp"] = SharedModule;
-    exports["ɵq"] = GovUkDateComponent;
-    exports["ɵr"] = GovUkErrorMessageComponent;
-    exports["ɵs"] = GovUkFieldsetComponent;
-    exports["ɵt"] = GovUkLabelComponent;
-    exports["ɵu"] = HighlightCreateService;
-    exports["ɵv"] = ViewerEventService;
-    exports["ɵw"] = CommentService;
-    exports["ɵx"] = RectangleComponent;
-    exports["ɵy"] = CommentComponent;
-    exports["ɵz"] = TagsServices;
+    exports["ɵp"] = RedactionSearchBarComponent;
+    exports["ɵq"] = HighlightCreateService;
+    exports["ɵr"] = SharedModule;
+    exports["ɵs"] = GovUkDateComponent;
+    exports["ɵt"] = GovUkErrorMessageComponent;
+    exports["ɵu"] = GovUkFieldsetComponent;
+    exports["ɵv"] = GovUkLabelComponent;
+    exports["ɵw"] = ViewerEventService;
+    exports["ɵx"] = CommentService;
+    exports["ɵy"] = RectangleComponent;
+    exports["ɵz"] = CommentComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });