@hmcts/media-viewer 3.0.2 → 3.0.3-RC.3

package/fesm2015/hmcts-media-viewer.mjs

@@ -10,7 +10,7 @@ import * as i1$1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
 import { __awaiter } from 'tslib';
 import { BehaviorSubject, Subject, of, combineLatest, asyncScheduler } from 'rxjs';
-import { take, filter, distinctUntilChanged, auditTime, tap, throttleTime, map, catchError, switchMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
+import { take, filter, distinctUntilChanged, auditTime, tap, throttleTime, map, catchError, switchMap, concatMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
 import * as i1 from '@ngrx/store';
 import { createFeatureSelector, createSelector, select, StoreModule } from '@ngrx/store';
 import uuid from 'uuid/v4';
@@ -19,6 +19,7 @@ import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
 import * as pdfjsLib from 'pdfjs-dist';
 import 'pdfjs-dist/build/pdf.worker';
 import uuid$1, { v4 } from 'uuid';
+import { some } from 'lodash';
 import * as i4$1 from 'ngx-chips';
 import { TagInputModule } from 'ngx-chips';
 import * as i5$1 from '@angular/router';
@@ -320,6 +321,9 @@ const getConvertedDocument$1 = (state) => state.convertedDocument;
 const LOAD_ANNOTATION_SET = '[Annotations] Load Annotation Set';
 const LOAD_ANNOTATION_SET_SUCCESS = '[Annotations] Load Annotation Set Success';
 const LOAD_ANNOTATION_SET_FAIL = '[Annotations] Load Annotation Set Fail';
+const SAVE_ANNOTATION_SET = '[Annotations] Save Annotation Set';
+const SAVE_ANNOTATION_SET_SUCCESS = '[Annotations] Save Annotation Set Success';
+const SAVE_ANNOTATION_SET_FAIL = '[Annotations] Save Annotation Set Fail';
 const SAVE_ANNOTATION = '[Annotations] Save Annotation';
 const SAVE_ANNOTATION_SUCCESS = '[Annotations] Save Annotation Success';
 const SAVE_ANNOTATION_FAIL = '[Annotations] Save Annotation Fail';
@@ -337,18 +341,36 @@ class LoadAnnotationSet {
         this.type = LOAD_ANNOTATION_SET;
     }
 }
+class SaveAnnotationSet {
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SAVE_ANNOTATION_SET;
+    }
+}
 class LoadAnnotationSetSucess {
     constructor(payload) {
         this.payload = payload;
         this.type = LOAD_ANNOTATION_SET_SUCCESS;
     }
 }
+class SaveAnnotationSetSuccess {
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SAVE_ANNOTATION_SET_SUCCESS;
+    }
+}
 class LoadAnnotationSetFail {
     constructor(payload) {
         this.payload = payload;
         this.type = LOAD_ANNOTATION_SET_FAIL;
     }
 }
+class SaveAnnotationSetFail {
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SAVE_ANNOTATION_SET_FAIL;
+    }
+}
 class SaveAnnotation {
     constructor(payload) {
         this.payload = payload;
@@ -547,6 +569,19 @@ function reducer(state = initialState, action) {
                 annotationPageEntities,
                 commentEntities, loading: false, loaded: true });
         }
+        case SAVE_ANNOTATION_SET_SUCCESS: {
+            const anno = action.payload.annotations;
+            const annEntities = Object.assign(Object.assign({}, state.annotationEntities), anno);
+            const annotArray = Object.keys(annEntities).map(key => annEntities[key]);
+            const annotationEntities = StoreUtils.generateAnnotationEntities(annotArray);
+            const annotationPageEntities = StoreUtils.groupByKeyEntities(annotArray, 'page');
+            const commentEntities = StoreUtils.generateCommentsEntities(annotArray);
+            const selectedAnnotation = Object.assign(Object.assign(Object.assign({}, state.selectedAnnotation), anno), { editable: false });
+            return Object.assign(Object.assign({}, state), { annotationEntities,
+                annotationPageEntities,
+                commentEntities,
+                selectedAnnotation, loading: false, loaded: true });
+        }
         case SAVE_ANNOTATION_SUCCESS: {
             const anno = action.payload;
             const annEntities = Object.assign(Object.assign({}, state.annotationEntities), { [anno.id]: anno });
@@ -1223,18 +1258,21 @@ class PdfJsWrapper {
             this.sendSearchDetails(event);
         });
         this.pdfViewer.eventBus.on('updatefindmatchescount', event => {
-            this.toolbarEvents.searchResultsCountSubject.next(event.matchesCount);
+            var _a, _b;
+            const result = Object.assign(Object.assign({}, event.matchesCount), { isPrevious: (_b = (_a = event === null || event === void 0 ? void 0 : event.source) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.findPrevious });
+            this.toolbarEvents.searchResultsCountSubject.next(result);
         });
         this.zoomValue = 1;
     }
     sendSearchDetails(event) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         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) {
+            const result = Object.assign(Object.assign({}, event.matchesCount), { isPrevious: (_b = (_a = event === null || event === void 0 ? void 0 : event.source) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.findPrevious });
+            this.toolbarEvents.searchResultsCountSubject.next(result);
+            if (((_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) !== -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,
+                    page: (_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.pageIdx,
+                    matchedIndex: (_h = (_g = event === null || event === void 0 ? void 0 : event.source) === null || _g === void 0 ? void 0 : _g.selected) === null || _h === void 0 ? void 0 : _h.matchIdx,
                     matchesCount: event.matchesCount.total
                 });
             }
@@ -1253,6 +1291,7 @@ class PdfJsWrapper {
         this.pageRendered.next(allPages);
     }
     loadDocument(documentUrl) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const loadingTask = this.createLoadingTask(documentUrl);
             loadingTask.onProgress = ({ loaded, total }) => {
@@ -1265,14 +1304,28 @@ class PdfJsWrapper {
                 this.toolbarEvents.pageCountSubject.next(pdfDocument.numPages);
                 this.pdfViewer.setDocument(pdfDocument);
                 this.pdfViewer.linkService.setDocument(pdfDocument, null);
-                const outline = yield pdfDocument.getOutline();
+                const outlineNode = yield pdfDocument.getOutline();
+                const outline = outlineNode.map(x => {
+                    return {
+                        bold: x.bold,
+                        color: x.color,
+                        count: x.count,
+                        dest: x.dest,
+                        italic: x.italic,
+                        items: x.items,
+                        newWindow: x.newWindow,
+                        title: x.title,
+                        unsafeUrl: x.unsafeUrl,
+                        url: x.url
+                    };
+                });
                 if (outline) {
                     yield this.setOutlinePageNumbers(pdfDocument, outline);
                 }
                 this.documentOutline = outline;
                 this.outlineLoaded.next(this.documentOutline);
                 const pdfMetaData = yield pdfDocument.getMetadata();
-                this.setCurrentPDFTitle(pdfMetaData.info.Title);
+                this.setCurrentPDFTitle((_a = pdfMetaData.info) === null || _a === void 0 ? void 0 : _a.Title);
             }
             catch (e) {
                 this.documentLoadFailed.next(e);
@@ -1435,9 +1488,15 @@ var icpEvents = /*#__PURE__*/Object.freeze({
     stoppingPresenting: stoppingPresenting
 });
 
+var SearchType;
+(function (SearchType) {
+    SearchType["Redact"] = "Redact";
+    SearchType["Highlight"] = "Highlight";
+})(SearchType || (SearchType = {}));
 class ToolbarEventService {
     constructor() {
         this.highlightModeSubject = new BehaviorSubject(false);
+        this.highlightToolbarSubject = new BehaviorSubject(false);
         this.drawModeSubject = new BehaviorSubject(false);
         this.rotateSubject = new Subject();
         this.searchSubject = new Subject();
@@ -1461,7 +1520,7 @@ class ToolbarEventService {
         this.redactWholePage = new Subject();
         this.redactionSerachSubject = new Subject();
         this.redactAllInProgressSubject = new BehaviorSubject(false);
-        this.openRedactionSearch = new Subject();
+        this.openRedactionSearch = new BehaviorSubject(null);
         this.sidebarOpen = new BehaviorSubject(false);
         this.sidebarOutlineView = new BehaviorSubject(true);
         this.searchBarHidden = new BehaviorSubject(true);
@@ -1475,6 +1534,7 @@ class ToolbarEventService {
         this.setCurrentPageSubject.next(1);
         this.zoomValueSubject.next(1);
         this.highlightModeSubject.next(false);
+        this.highlightToolbarSubject.next(false);
         this.drawModeSubject.next(false);
         this.showCommentSummary.next(false);
         this.grabNDrag.next(false);
@@ -1502,6 +1562,9 @@ class ToolbarEventService {
             this.drawModeSubject.next(false);
         }
     }
+    toggleHighlightToolbar() {
+        this.highlightToolbarSubject.next(!this.highlightToolbarSubject.getValue());
+    }
     rotate(angle) {
         this.rotateSubject.next(angle);
     }
@@ -1565,7 +1628,7 @@ class ToolbarEventService {
         else {
             this.redactionMode.next(false);
         }
-        this.openRedactionSearch.next(false);
+        this.openRedactionSearch.next({ modeType: SearchType.Redact, isOpen: false });
     }
     toggleRedactionPreview(viewMode) {
         this.redactionPreview.next(viewMode);
@@ -1639,6 +1702,10 @@ class PrintService {
         printWindow.focus();
         setTimeout((printer) => {
             printer.print();
+            printer.onafterprint = () => {
+                printer.close();
+                window.close();
+            };
         }, 3000, printWindow);
     }
     printElementNatively(element, width, height) {
@@ -2240,6 +2307,16 @@ class HighlightCreateService {
             this.store.dispatch(new SaveAnnotation(anno));
         });
     }
+    saveAnnotationSet(searchRectangles) {
+        this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
+            const annoSet = searchRectangles.map(x => {
+                return Object.assign(Object.assign({ id: v4(), color: 'FFFF00', comments: [], page: x.page, rectangles: x.rectangles, type: 'highlight' }, anoSetDocId), { createdBy: '', createdByDetails: undefined, createdDate: moment.utc().tz('Europe/London').toISOString(), lastModifiedBy: '', lastModifiedByDetails: undefined, lastModifiedDate: '', tags: [] });
+            });
+            this.store.dispatch(new SaveAnnotationSet({
+                id: anoSetDocId.annotationSetId, annotations: annoSet, documentId: anoSetDocId.documentId
+            }));
+        });
+    }
     applyRotation(pageHeight, pageWidth, offsetHeight, offsetWidth, offsetTop, offsetLeft, rotate, zoom) {
         const { x, y, width, height } = {
             x: +(offsetLeft / zoom).toFixed(2),
@@ -2303,7 +2380,13 @@ class RedactionSearchBarComponent {
             }
         }));
         this.subscription.add(this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results)));
-        this.subscription.add(this.toolbarEvents.openRedactionSearch.subscribe(isOpen => this.openSearchModal = isOpen));
+        this.subscription.add(this.toolbarEvents.openRedactionSearch.subscribe((searchMode) => {
+            if (searchMode) {
+                this.openSearchModal = searchMode.isOpen;
+                this.searchType = searchMode.modeType;
+                this.modeText();
+            }
+        }));
         this.subscription.add(this.toolbarEvents.redactAllInProgressSubject
             .subscribe(inProgress => this.redactAllInProgress = inProgress));
     }
@@ -2334,6 +2417,16 @@ class RedactionSearchBarComponent {
             reset
         });
     }
+    modeText() {
+        if (this.searchType === SearchType.Highlight) {
+            this.inProgressText = 'Highlighting';
+            this.titleText = 'Highlight';
+        }
+        else if (this.searchType === SearchType.Redact) {
+            this.inProgressText = 'Redacting';
+            this.titleText = 'Redact';
+        }
+    }
     saveRedaction(redactRectangle) {
         const redaction = redactRectangle.map(ele => {
             return { page: ele.page, rectangles: ele.rectangles, redactionId: uuid$1(), documentId: this.documentId };
@@ -2361,7 +2454,7 @@ class RedactionSearchBarComponent {
         return false;
     }
     onCloseSearchModal() {
-        this.toolbarEvents.openRedactionSearch.next(false);
+        this.toolbarEvents.openRedactionSearch.next({ isOpen: false, modeType: this.searchType });
     }
     setSearchResultsCount(results) {
         this.resultCount = results.total;
@@ -2397,10 +2490,21 @@ class RedactionSearchBarComponent {
             if (this.redactAll && this.resultCount && this.redactElements.length === this.resultCount) {
                 this.redactAll = false;
                 this.redactAllText = null;
-                this.saveRedaction(this.redactElements);
+                if (this.searchType === SearchType.Redact) {
+                    this.saveRedaction(this.redactElements);
+                }
+                else if (this.searchType === SearchType.Highlight) {
+                    this.highlightService.saveAnnotationSet(this.redactElements);
+                    this.cleanUpPostSave();
+                }
             }
         }
     }
+    cleanUpPostSave() {
+        this.toolbarEvents.redactAllInProgressSubject.next(false);
+        this.searchText = '';
+        this.search();
+    }
     CreateRedactAllText() {
         this.redactAllText = `${this.redactElements.length} of ${this.resultCount}`;
     }
@@ -2421,7 +2525,14 @@ class RedactionSearchBarComponent {
         const selectedHighLightedElements = document.getElementsByClassName('highlight selected');
         if (selectedHighLightedElements && selectedHighLightedElements.length > 0) {
             const docRange = document.createRange();
-            docRange.selectNodeContents(selectedHighLightedElements[0]);
+            if (some(selectedHighLightedElements, element => element.className === 'highlight begin selected' || element.className === 'highlight end selected')) {
+                docRange.setStart(selectedHighLightedElements[0], 0);
+                const endNode = selectedHighLightedElements[selectedHighLightedElements.length - 1];
+                docRange.setEnd(endNode, endNode.childNodes.length);
+            }
+            else {
+                docRange.selectNodeContents(selectedHighLightedElements[0]);
+            }
             const selection = window.getSelection();
             selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
             selection === null || selection === void 0 ? void 0 : selection.addRange(docRange);
@@ -2454,10 +2565,10 @@ class RedactionSearchBarComponent {
     }
 }
 /** @nocollapse */ RedactionSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionSearchBarComponent, deps: [{ token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ RedactionSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }], ngImport: i0, template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Redact from search\"\n        #findInput\n        title=\"Redact from search\"\n        placeholder=\"{{ 'Redact from search...' | rpxTranslate }}\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          {{ \"Search\" | rpxTranslate }}\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          {{ \"Redact all\" | rpxTranslate }}\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            {{ \"Redacting in progress\" | rpxTranslate }}\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] });
+/** @nocollapse */ RedactionSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }], ngImport: i0, template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Redact from search\"\n        #findInput\n        title=\"Redact from search\"\n        placeholder=\"{{ titleText + ' from search...' | rpxTranslate }}\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          {{ \"Search\" | rpxTranslate }}\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress || resultCount <= 0\"\n        >\n          {{ titleText + \" all\" | rpxTranslate }}\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            {{ inProgressText + \" in progress\" | rpxTranslate }}\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RedactionSearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-redaction-search-bar', template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Redact from search\"\n        #findInput\n        title=\"Redact from search\"\n        placeholder=\"{{ 'Redact from search...' | rpxTranslate }}\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          {{ \"Search\" | rpxTranslate }}\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          {{ \"Redact all\" | rpxTranslate }}\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            {{ \"Redacting in progress\" | rpxTranslate }}\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"] }]
+            args: [{ selector: 'mv-redaction-search-bar', template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Redact from search\"\n        #findInput\n        title=\"Redact from search\"\n        placeholder=\"{{ titleText + ' from search...' | rpxTranslate }}\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          {{ \"Search\" | rpxTranslate }}\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress || resultCount <= 0\"\n        >\n          {{ titleText + \" all\" | rpxTranslate }}\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            {{ inProgressText + \" in progress\" | rpxTranslate }}\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }, { type: HighlightCreateService }]; }, propDecorators: { findInput: [{
                 type: ViewChild,
                 args: ['findInput', { static: true }]
@@ -3404,7 +3515,7 @@ class SearchBarComponent {
         this.resultsText = this.resultCount > 0
             ? `Found ${results.current} of ${results.total}`
             : 'No results found';
-        if (this.resultCount && this.resultCount > 0) {
+        if (this.resultCount && this.resultCount > 0 && !results.isPrevious) {
             setTimeout(() => {
                 this.findNext.nativeElement.focus();
             }, 1000);
@@ -3501,7 +3612,7 @@ class MainToolbarComponent {
         this.printFile();
     }
     onClickHighlightToggle() {
-        this.toolbarEvents.toggleHighlightMode();
+        this.toolbarEvents.toggleHighlightToolbar();
     }
     onClickDrawToggle() {
         this.toolbarEvents.toggleDrawMode();
@@ -3585,10 +3696,10 @@ class MainToolbarComponent {
     }
 }
 /** @nocollapse */ MainToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i0.ChangeDetectorRef }, { token: NumberHelperService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MainToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MainToolbarComponent, selector: "mv-main-toolbar", inputs: { enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", contentType: "contentType" }, host: { listeners: { "window:resize": "onResize()", "document:keydown.control.p": "onControlPrint($event)", "document:keydown.meta.p": "onControlPrint($event)" } }, viewQueries: [{ propertyName: "zoomSelect", first: true, predicate: ["zoomSelect"], descendants: true }, { propertyName: "mvToolbarMain", first: true, predicate: ["mvToolbarMain"], descendants: true }, { propertyName: "mvMenuItems", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "<div class=\"toolbar\">\n  <div id=\"toolbarContainer\">\n    <div class=\"mv-toolbar__container\">\n      <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n        <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n        <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n          <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n        </div>\n        <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n        <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n          <button\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\n            <span>{{ \"More options\" | rpxTranslate }}</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Index\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Bookmarks\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDrawButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDrawBtn\"\n            #mvDrawBtn\n            class=\"mv-button mv-toolbar__menu-button--draw\"\n            title=\"Draw a box\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n            aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\"\n            (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">{{\n              \"Draw a box\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            aria-label=\"Highlight\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">{{\n              \"Highlight\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>{{ \"Page\" | rpxTranslate }}</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom Out\" | rpxTranslate\n                }}</span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom In\" | rpxTranslate\n                }}</span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>{{ \"Rotate\" | rpxTranslate }}</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Search\" | rpxTranslate }}</span>\n          </button>\n          <mv-search-bar\n            *ngIf=\"!toolbarEvents.searchBarHidden.getValue()\"\n          ></mv-search-bar>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">{{\n              \"Present\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Redact\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Grab and drag\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Download\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Print\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Comments\" | rpxTranslate }}</span>\n          </button>\n        </ng-template>\n      </div>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SearchBarComponent, selector: "mv-search-bar" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] });
+/** @nocollapse */ MainToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MainToolbarComponent, selector: "mv-main-toolbar", inputs: { enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", contentType: "contentType" }, host: { listeners: { "window:resize": "onResize()", "document:keydown.control.p": "onControlPrint($event)", "document:keydown.meta.p": "onControlPrint($event)" } }, viewQueries: [{ propertyName: "zoomSelect", first: true, predicate: ["zoomSelect"], descendants: true }, { propertyName: "mvToolbarMain", first: true, predicate: ["mvToolbarMain"], descendants: true }, { propertyName: "mvMenuItems", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, template: "<div class=\"toolbar\">\n  <div id=\"toolbarContainer\">\n    <div class=\"mv-toolbar__container\">\n      <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n        <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n        <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n          <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n        </div>\n        <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n        <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n          <button\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\n            <span>{{ \"More options\" | rpxTranslate }}</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Index\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Bookmarks\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n          *ngIf=\"toolbarButtons.showDrawButton\"\n          [disabled]=\"icpEnabled || redactionEnabled\"\n          id=\"mvDrawBtn\"\n          #mvDrawBtn\n          class=\"mv-button mv-toolbar__menu-button--draw\"\n          title=\"Draw a box\"\n          [class.button-hidden-on-toolbar]=\"\n            mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n          \"\n          [class.button-hidden-on-dropdown]=\"\n            mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n          \"\n          [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n          aria-pressed=\"false\"\n          data-l10n-id=\"toggleDrawButton\"\n          (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">{{\n              \"Draw a box\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            aria-label=\"Highlight\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightToolbarSubject | async\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">{{\n              \"Highlight\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>{{ \"Page\" | rpxTranslate }}</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom Out\" | rpxTranslate\n                }}</span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom In\" | rpxTranslate\n                }}</span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>{{ \"Rotate\" | rpxTranslate }}</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Search\" | rpxTranslate }}</span>\n          </button>\n          <mv-search-bar\n            *ngIf=\"!toolbarEvents.searchBarHidden.getValue()\"\n          ></mv-search-bar>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">{{\n              \"Present\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Redact\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Grab and drag\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Download\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Print\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Comments\" | rpxTranslate }}</span>\n          </button>\n        </ng-template>\n      </div>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SearchBarComponent, selector: "mv-search-bar" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.RpxTranslatePipe, name: "rpxTranslate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MainToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-main-toolbar', template: "<div class=\"toolbar\">\n  <div id=\"toolbarContainer\">\n    <div class=\"mv-toolbar__container\">\n      <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n        <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n        <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n          <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n        </div>\n        <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n        <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n          <button\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\n            <span>{{ \"More options\" | rpxTranslate }}</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Index\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Bookmarks\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDrawButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDrawBtn\"\n            #mvDrawBtn\n            class=\"mv-button mv-toolbar__menu-button--draw\"\n            title=\"Draw a box\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n            aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\"\n            (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">{{\n              \"Draw a box\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            aria-label=\"Highlight\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">{{\n              \"Highlight\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>{{ \"Page\" | rpxTranslate }}</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom Out\" | rpxTranslate\n                }}</span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom In\" | rpxTranslate\n                }}</span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>{{ \"Rotate\" | rpxTranslate }}</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Search\" | rpxTranslate }}</span>\n          </button>\n          <mv-search-bar\n            *ngIf=\"!toolbarEvents.searchBarHidden.getValue()\"\n          ></mv-search-bar>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">{{\n              \"Present\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Redact\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Grab and drag\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Download\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Print\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Comments\" | rpxTranslate }}</span>\n          </button>\n        </ng-template>\n      </div>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mv-main-toolbar', template: "<div class=\"toolbar\">\n  <div id=\"toolbarContainer\">\n    <div class=\"mv-toolbar__container\">\n      <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n        <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n        <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n          <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n        </div>\n        <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n        <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n          <button\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\n            <span>{{ \"More options\" | rpxTranslate }}</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Index\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Bookmarks\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n          *ngIf=\"toolbarButtons.showDrawButton\"\n          [disabled]=\"icpEnabled || redactionEnabled\"\n          id=\"mvDrawBtn\"\n          #mvDrawBtn\n          class=\"mv-button mv-toolbar__menu-button--draw\"\n          title=\"Draw a box\"\n          [class.button-hidden-on-toolbar]=\"\n            mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n          \"\n          [class.button-hidden-on-dropdown]=\"\n            mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n          \"\n          [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n          aria-pressed=\"false\"\n          data-l10n-id=\"toggleDrawButton\"\n          (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">{{\n              \"Draw a box\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            aria-label=\"Highlight\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightToolbarSubject | async\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">{{\n              \"Highlight\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>{{ \"Page\" | rpxTranslate }}</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom Out\" | rpxTranslate\n                }}</span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span class=\"mv-toolbar__menu-button--zoom-out-text\">{{\n                  \"Zoom In\" | rpxTranslate\n                }}</span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>{{ \"Rotate\" | rpxTranslate }}</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Search\" | rpxTranslate }}</span>\n          </button>\n          <mv-search-bar\n            *ngIf=\"!toolbarEvents.searchBarHidden.getValue()\"\n          ></mv-search-bar>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">{{\n              \"Present\" | rpxTranslate\n            }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Redact\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Grab and drag\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Download\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Print\" | rpxTranslate }}</span>\n          </button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\n            <span>{{ \"Comments\" | rpxTranslate }}</span>\n          </button>\n        </ng-template>\n      </div>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i0.ChangeDetectorRef }, { type: NumberHelperService }]; }, propDecorators: { enableAnnotations: [{
                 type: Input
             }], enableRedactions: [{
@@ -3657,7 +3768,7 @@ class RedactionToolbarComponent {
         }));
     }
     onRedactAllSearch() {
-        this.toolbarEventService.openRedactionSearch.next(true);
+        this.toolbarEventService.openRedactionSearch.next({ modeType: SearchType.Redact, isOpen: true });
     }
     toggleTextRedactionMode() {
         this.toolbarEventService.highlightModeSubject.next(true);
@@ -3731,6 +3842,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             args: [{ selector: 'mv-icp-toolbar', template: "<div id=\"icp-toolbar\" class=\"icpMode\">\n  <div id=\"toolbar-title\">\n    <label class=\"govuk-label\" data-l10n-id=\"digitalEvidence_label\">Digital evidence presentation</label>\n  </div>\n\n  <div id=\"presentation-mode\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" data-l10n-id=\"icpInfo_label\">You are in presentation mode</label>\n    </div>\n    <div class=\"item-button\">\n      <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" tabindex=\"0\"\n        title=\"Leave presentation\" (click)=\"leaveIcpSession()\">\n        <span data-l10n-id=\"icp-leave-presentation_label\">Leave presentation</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"presenter-info\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" *ngIf=\"!presenterName\" data-l10n-id=\"noPresenter_label\">Waiting for presenter</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && isPresenter\" data-l10n-id=\"isPresenter_label\">You are\n        presenting</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && !isPresenter\"\n        data-l10n-id=\"otherPresenter_label\">{{ presenterName | titlecase }}\n        is presenting</label>\n    </div>\n    <div class=\"item-button\">\n      <button *ngIf=\"!presenterName\" class=\"govuk-button\" id=\"icp-present\" tabindex=\"0\" title=\"Present\"\n        (click)=\"present()\">\n        <span data-l10n-id=\"icp-present_label\">Start presenting</span>\n      </button>\n      <button *ngIf=\"isPresenter\" class=\"govuk-button  govuk-button--warning\" id=\"icp-stop-presenting\" tabindex=\"0\"\n        title=\"Stop presenting\" (click)=\"stopPresenting()\">\n        <span data-l10n-id=\"icp-stop-presenting_label\">Stop Presenting</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"participant-list\">\n    <button class=\"govuk-button govuk-button--secondary\" id=\"icp-participants-list\" tabindex=\"0\"\n      title=\"Participants list\" (click)=\"showParticipantsList()\">\n      <span\n        data-l10n-id=\"icp-stop-presenting_label\">{{(toolbarEventService.icp.participantsListVisible | async) ? 'Hide': 'Show'}}\n        participants</span>\n    </button>\n  </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: i1.Store }]; } });
 
+class HighlightToolbarComponent {
+    constructor(toolbarEventService, toolbarButtons) {
+        this.toolbarEventService = toolbarEventService;
+        this.toolbarButtons = toolbarButtons;
+        this.subscriptions = [];
+    }
+    ngOnInit() {
+        this.subscriptions.push(this.toolbarEventService.redactAllInProgressSubject.subscribe(inprogress => {
+            this.redactionAllInProgress = inprogress;
+        }));
+    }
+    onAllSearch() {
+        this.toolbarEventService.openRedactionSearch.next({ modeType: SearchType.Highlight, isOpen: true });
+    }
+    onHighlight() {
+        this.toolbarEventService.toggleHighlightMode();
+    }
+    onClickDrawToggle() {
+        this.toolbarEventService.toggleDrawMode();
+    }
+    onClose() {
+        this.toolbarEventService.highlightToolbarSubject.next(false);
+        this.toolbarEventService.highlightModeSubject.next(false);
+        this.toolbarEventService.openRedactionSearch.next({ modeType: SearchType.Highlight, isOpen: false });
+    }
+    ngOnDestroy() {
+        for (const subscription of this.subscriptions) {
+            subscription.unsubscribe();
+        }
+    }
+}
+/** @nocollapse */ HighlightToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ HighlightToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HighlightToolbarComponent, selector: "mv-highlight-toolbar", ngImport: i0, template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >Highlight options</label\n  >\n\n  <button\n    id=\"mvDrawBtn\"\n    #mvDrawBtn\n    class=\"mv-button mv-toolbar__menu-button--draw\"\n    title=\"Draw a box\"\n    [class.toggled]=\"toolbarEventService.drawModeSubject | async\"\n    aria-pressed=\"false\"\n    data-l10n-id=\"mvDrawBtn\"\n    (click)=\"onClickDrawToggle()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"draw_label\">Draw a box</span>\n  </button>\n\n  <button\n    id=\"highlightTextBtn\"\n    class=\"mv-button mv-toolbar__menu-button--highlight\"\n    title=\"Highlight text\"\n    data-l10n-id=\"highlightTextBtn\"\n    (click)=\"onHighlight()\"\n    [class.toggled]=\"toolbarEventService.highlightModeSubject | async\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"highlightTextBtn_label\">Highlight text</span>\n  </button>\n\n  <button\n    id=\"mvHighlightFromSearchBtn\"\n    title=\"From search\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >From search</span\n    >\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"Close Redaction\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"onClose()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">Close Highlight</span>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mv-highlight-toolbar', template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >Highlight options</label\n  >\n\n  <button\n    id=\"mvDrawBtn\"\n    #mvDrawBtn\n    class=\"mv-button mv-toolbar__menu-button--draw\"\n    title=\"Draw a box\"\n    [class.toggled]=\"toolbarEventService.drawModeSubject | async\"\n    aria-pressed=\"false\"\n    data-l10n-id=\"mvDrawBtn\"\n    (click)=\"onClickDrawToggle()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"draw_label\">Draw a box</span>\n  </button>\n\n  <button\n    id=\"highlightTextBtn\"\n    class=\"mv-button mv-toolbar__menu-button--highlight\"\n    title=\"Highlight text\"\n    data-l10n-id=\"highlightTextBtn\"\n    (click)=\"onHighlight()\"\n    [class.toggled]=\"toolbarEventService.highlightModeSubject | async\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"highlightTextBtn_label\">Highlight text</span>\n  </button>\n\n  <button\n    id=\"mvHighlightFromSearchBtn\"\n    title=\"From search\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >From search</span\n    >\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"Close Redaction\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"onClose()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">Close Highlight</span>\n  </button>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }]; } });
+
 class ToolbarModule {
 }
 /** @nocollapse */ ToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3738,14 +3887,16 @@ class ToolbarModule {
         MainToolbarComponent,
         RedactionToolbarComponent,
         IcpToolbarComponent,
-        RedactionSearchBarComponent], imports: [CommonModule,
+        RedactionSearchBarComponent,
+        HighlightToolbarComponent], imports: [CommonModule,
         FormsModule,
         OverlayModule,
         RouterModule, i5.RpxTranslationModule], exports: [MainToolbarComponent,
         SearchBarComponent,
         RedactionToolbarComponent,
         IcpToolbarComponent,
-        RedactionSearchBarComponent] });
+        RedactionSearchBarComponent,
+        HighlightToolbarComponent] });
 /** @nocollapse */ ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarModule, providers: [
         ToolbarButtonVisibilityService,
         ToolbarEventService
@@ -3762,7 +3913,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         MainToolbarComponent,
                         RedactionToolbarComponent,
                         IcpToolbarComponent,
-                        RedactionSearchBarComponent
+                        RedactionSearchBarComponent,
+                        HighlightToolbarComponent
                     ],
                     providers: [
                         ToolbarButtonVisibilityService,
@@ -3773,7 +3925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         SearchBarComponent,
                         RedactionToolbarComponent,
                         IcpToolbarComponent,
-                        RedactionSearchBarComponent
+                        RedactionSearchBarComponent,
+                        HighlightToolbarComponent
                     ],
                     imports: [
                         CommonModule,
@@ -5921,7 +6074,7 @@ class MediaViewerComponent {
     }
     setToolbarButtons() {
         if (this.contentType === CoreContentTypes.PDF || this.needsConverting()) {
-            this.toolbarButtons.setup(Object.assign(Object.assign(Object.assign({}, defaultPdfOptions), { showHighlightButton: this.enableAnnotations, showDrawButton: this.enableAnnotations }), this.toolbarButtonOverrides));
+            this.toolbarButtons.setup(Object.assign(Object.assign(Object.assign({}, defaultPdfOptions), { showHighlightButton: this.enableAnnotations, showDrawButton: false }), this.toolbarButtonOverrides));
         }
         else if (this.contentType === CoreContentTypes.IMAGE) {
             this.toolbarButtons.setup(Object.assign(Object.assign(Object.assign({}, defaultImageOptions), { showDrawButton: this.enableAnnotations }), this.toolbarButtonOverrides));
@@ -5961,10 +6114,10 @@ class MediaViewerComponent {
     }
 }
 /** @nocollapse */ MediaViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MediaViewerComponent, deps: [{ token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }, { token: AnnotationApiService }, { token: CommentService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MediaViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MediaViewerComponent, selector: "mv-media-viewer", inputs: { url: "url", downloadFileName: "downloadFileName", contentType: "contentType", showToolbar: "showToolbar", toolbarButtonOverrides: "toolbarButtonOverrides", height: "height", width: "width", enableAnnotations: "enableAnnotations", annotationApiUrl: "annotationApiUrl", enableRedactions: "enableRedactions", enableICP: "enableICP", multimediaPlayerEnabled: "multimediaPlayerEnabled", enableRedactSearch: "enableRedactSearch", caseId: "caseId" }, outputs: { mediaLoadStatus: "mediaLoadStatus", viewerException: "viewerException", toolbarEventsOutput: "toolbarEventsOutput", unsavedChanges: "unsavedChanges" }, viewQueries: [{ propertyName: "viewerRef", first: true, predicate: ["viewerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  id=\"outerContainer\"\n  [ngClass]=\"{\n    'has-redact-bar': toolbarEvents.redactionMode | async,\n    'icp-mode': toolbarEvents.icp.enabled | async,\n    'is-redaction-preview': toolbarEvents.redactionPreview | async,\n    sidebarOpen: toolbarEvents.sidebarOpen | async,\n    'has-scroll-bar': hasScrollBar,\n    'has-different-page-size': hasDifferentPageSize$ | async\n  }\"\n  [ngStyle]=\"{ width: width }\"\n>\n  <mv-comments-summary\n    *ngIf=\"showCommentSummary\"\n    [title]=\"documentTitle || 'Comment Summary'\"\n    [contentType]=\"contentType\"\n  >\n  </mv-comments-summary>\n\n  <mv-confirm-action\n    *ngIf=\"toolbarEvents.icp.leavingSession | async\"\n  ></mv-confirm-action>\n\n  <div id=\"mainContainer\">\n    <mv-main-toolbar\n      *ngIf=\"showToolbar\"\n      [enableAnnotations]=\"enableAnnotations\"\n      [enableICP]=\"enableICP\"\n      [enableRedactions]=\"enableRedactions\"\n      [contentType]=\"contentType\"\n    >\n    </mv-main-toolbar>\n    <mv-redaction-toolbar\n      [showRedactSearch]=\"enableRedactSearch\"\n      *ngIf=\"toolbarEvents.redactionMode | async\"\n    ></mv-redaction-toolbar>\n    <mv-icp-toolbar *ngIf=\"toolbarEvents.icp.enabled | async\"></mv-icp-toolbar>\n\n    <div #viewerRef>\n      <mv-conversion-viewer\n        *ngIf=\"convertibleContent\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (viewerException)=\"onLoadException($event)\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [originalUrl]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-conversion-viewer>\n      <mv-pdf-viewer\n        *ngIf=\"contentType === 'pdf'\"\n        #pdfViewer\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (pdfViewerException)=\"onLoadException($event)\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [enableICP]=\"enableICP\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        [caseId]=\"caseId\"\n        mvRotationPersist\n      >\n      </mv-pdf-viewer>\n      <mv-image-viewer\n        *ngIf=\"contentType === 'image'\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (imageViewerException)=\"onLoadException($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-image-viewer>\n      <mv-multimedia-player\n        *ngIf=\"multimediaContent\"\n        [multimediaOn]=\"multimediaPlayerEnabled\"\n        [url]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n      >\n      </mv-multimedia-player>\n      <mv-unsupported-viewer\n        *ngIf=\"unsupportedContent\"\n        [url]=\"url\"\n        [typeException]=\"typeException\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n        (unsupportedViewerException)=\"onLoadException($event)\"\n      >\n      </mv-unsupported-viewer>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MainToolbarComponent, selector: "mv-main-toolbar", inputs: ["enableAnnotations", "enableRedactions", "enableICP", "contentType"] }, { kind: "component", type: RedactionToolbarComponent, selector: "mv-redaction-toolbar", inputs: ["showRedactSearch"] }, { kind: "component", type: IcpToolbarComponent, selector: "mv-icp-toolbar" }, { kind: "component", type: CommentsSummaryComponent, selector: "mv-comments-summary", inputs: ["title", "contentType"] }, { kind: "component", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: ["downloadUrl", "url", "downloadFileName", "enableAnnotations", "enableRedactions", "enableICP", "annotationSet", "enableRedactSearch", "height", "caseId", "searchBarHidden"], outputs: ["mediaLoadStatus", "pdfViewerException", "documentTitle"] }, { kind: "component", type: ImageViewerComponent, selector: "mv-image-viewer", inputs: ["url", "downloadFileName", "enableAnnotations", "annotationSet", "height"], outputs: ["mediaLoadStatus", "imageViewerException"] }, { kind: "component", type: UnsupportedViewerComponent, selector: "mv-unsupported-viewer", inputs: ["url", "downloadFileName", "typeException"], outputs: ["loadStatus", "unsupportedViewerException"] }, { kind: "component", type: MultimediaPlayerComponent, selector: "mv-multimedia-player", inputs: ["url", "downloadFileName", "multimediaOn"], outputs: ["loadStatus"] }, { kind: "component", type: ConvertibleContentViewerComponent, selector: "mv-conversion-viewer", inputs: ["originalUrl", "downloadFileName", "height", "enableAnnotations", "enableRedactions", "annotationSet"], outputs: ["mediaLoadStatus", "viewerException", "documentTitle"] }, { kind: "directive", type: RotationPersistDirective, selector: "[mvRotationPersist]" }, { kind: "component", type: ConfirmActionDialogComponent, selector: "mv-confirm-action" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ MediaViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MediaViewerComponent, selector: "mv-media-viewer", inputs: { url: "url", downloadFileName: "downloadFileName", contentType: "contentType", showToolbar: "showToolbar", toolbarButtonOverrides: "toolbarButtonOverrides", height: "height", width: "width", enableAnnotations: "enableAnnotations", annotationApiUrl: "annotationApiUrl", enableRedactions: "enableRedactions", enableICP: "enableICP", multimediaPlayerEnabled: "multimediaPlayerEnabled", enableRedactSearch: "enableRedactSearch", caseId: "caseId" }, outputs: { mediaLoadStatus: "mediaLoadStatus", viewerException: "viewerException", toolbarEventsOutput: "toolbarEventsOutput", unsavedChanges: "unsavedChanges" }, viewQueries: [{ propertyName: "viewerRef", first: true, predicate: ["viewerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  id=\"outerContainer\"\n  [ngClass]=\"{\n    'has-redact-bar': toolbarEvents.redactionMode | async,\n    'icp-mode': toolbarEvents.icp.enabled | async,\n    'is-redaction-preview': toolbarEvents.redactionPreview | async,\n    sidebarOpen: toolbarEvents.sidebarOpen | async,\n    'has-scroll-bar': hasScrollBar,\n    'has-different-page-size': hasDifferentPageSize$ | async\n  }\"\n  [ngStyle]=\"{ width: width }\"\n>\n  <mv-comments-summary\n    *ngIf=\"showCommentSummary\"\n    [title]=\"documentTitle || 'Comment Summary'\"\n    [contentType]=\"contentType\"\n  >\n  </mv-comments-summary>\n\n  <mv-confirm-action\n    *ngIf=\"toolbarEvents.icp.leavingSession | async\"\n  ></mv-confirm-action>\n\n  <div id=\"mainContainer\">\n    <mv-main-toolbar\n      *ngIf=\"showToolbar\"\n      [enableAnnotations]=\"enableAnnotations\"\n      [enableICP]=\"enableICP\"\n      [enableRedactions]=\"enableRedactions\"\n      [contentType]=\"contentType\"\n    >\n    </mv-main-toolbar>\n    <mv-redaction-toolbar\n      [showRedactSearch]=\"enableRedactSearch\"\n      *ngIf=\"toolbarEvents.redactionMode | async\"\n    ></mv-redaction-toolbar>\n    <mv-highlight-toolbar\n      *ngIf=\"toolbarEvents.highlightToolbarSubject | async\"\n    ></mv-highlight-toolbar>\n    <mv-icp-toolbar *ngIf=\"toolbarEvents.icp.enabled | async\"></mv-icp-toolbar>\n\n    <div #viewerRef>\n      <mv-conversion-viewer\n        *ngIf=\"convertibleContent\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (viewerException)=\"onLoadException($event)\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [originalUrl]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-conversion-viewer>\n      <mv-pdf-viewer\n        *ngIf=\"contentType === 'pdf'\"\n        #pdfViewer\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (pdfViewerException)=\"onLoadException($event)\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [enableICP]=\"enableICP\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        [caseId]=\"caseId\"\n        mvRotationPersist\n      >\n      </mv-pdf-viewer>\n      <mv-image-viewer\n        *ngIf=\"contentType === 'image'\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (imageViewerException)=\"onLoadException($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-image-viewer>\n      <mv-multimedia-player\n        *ngIf=\"multimediaContent\"\n        [multimediaOn]=\"multimediaPlayerEnabled\"\n        [url]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n      >\n      </mv-multimedia-player>\n      <mv-unsupported-viewer\n        *ngIf=\"unsupportedContent\"\n        [url]=\"url\"\n        [typeException]=\"typeException\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n        (unsupportedViewerException)=\"onLoadException($event)\"\n      >\n      </mv-unsupported-viewer>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MainToolbarComponent, selector: "mv-main-toolbar", inputs: ["enableAnnotations", "enableRedactions", "enableICP", "contentType"] }, { kind: "component", type: RedactionToolbarComponent, selector: "mv-redaction-toolbar", inputs: ["showRedactSearch"] }, { kind: "component", type: IcpToolbarComponent, selector: "mv-icp-toolbar" }, { kind: "component", type: HighlightToolbarComponent, selector: "mv-highlight-toolbar" }, { kind: "component", type: CommentsSummaryComponent, selector: "mv-comments-summary", inputs: ["title", "contentType"] }, { kind: "component", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: ["downloadUrl", "url", "downloadFileName", "enableAnnotations", "enableRedactions", "enableICP", "annotationSet", "enableRedactSearch", "height", "caseId", "searchBarHidden"], outputs: ["mediaLoadStatus", "pdfViewerException", "documentTitle"] }, { kind: "component", type: ImageViewerComponent, selector: "mv-image-viewer", inputs: ["url", "downloadFileName", "enableAnnotations", "annotationSet", "height"], outputs: ["mediaLoadStatus", "imageViewerException"] }, { kind: "component", type: UnsupportedViewerComponent, selector: "mv-unsupported-viewer", inputs: ["url", "downloadFileName", "typeException"], outputs: ["loadStatus", "unsupportedViewerException"] }, { kind: "component", type: MultimediaPlayerComponent, selector: "mv-multimedia-player", inputs: ["url", "downloadFileName", "multimediaOn"], outputs: ["loadStatus"] }, { kind: "component", type: ConvertibleContentViewerComponent, selector: "mv-conversion-viewer", inputs: ["originalUrl", "downloadFileName", "height", "enableAnnotations", "enableRedactions", "annotationSet"], outputs: ["mediaLoadStatus", "viewerException", "documentTitle"] }, { kind: "directive", type: RotationPersistDirective, selector: "[mvRotationPersist]" }, { kind: "component", type: ConfirmActionDialogComponent, selector: "mv-confirm-action" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MediaViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-media-viewer', encapsulation: ViewEncapsulation.None, template: "<div\n  id=\"outerContainer\"\n  [ngClass]=\"{\n    'has-redact-bar': toolbarEvents.redactionMode | async,\n    'icp-mode': toolbarEvents.icp.enabled | async,\n    'is-redaction-preview': toolbarEvents.redactionPreview | async,\n    sidebarOpen: toolbarEvents.sidebarOpen | async,\n    'has-scroll-bar': hasScrollBar,\n    'has-different-page-size': hasDifferentPageSize$ | async\n  }\"\n  [ngStyle]=\"{ width: width }\"\n>\n  <mv-comments-summary\n    *ngIf=\"showCommentSummary\"\n    [title]=\"documentTitle || 'Comment Summary'\"\n    [contentType]=\"contentType\"\n  >\n  </mv-comments-summary>\n\n  <mv-confirm-action\n    *ngIf=\"toolbarEvents.icp.leavingSession | async\"\n  ></mv-confirm-action>\n\n  <div id=\"mainContainer\">\n    <mv-main-toolbar\n      *ngIf=\"showToolbar\"\n      [enableAnnotations]=\"enableAnnotations\"\n      [enableICP]=\"enableICP\"\n      [enableRedactions]=\"enableRedactions\"\n      [contentType]=\"contentType\"\n    >\n    </mv-main-toolbar>\n    <mv-redaction-toolbar\n      [showRedactSearch]=\"enableRedactSearch\"\n      *ngIf=\"toolbarEvents.redactionMode | async\"\n    ></mv-redaction-toolbar>\n    <mv-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" }]
+            args: [{ selector: 'mv-media-viewer', encapsulation: ViewEncapsulation.None, template: "<div\n  id=\"outerContainer\"\n  [ngClass]=\"{\n    'has-redact-bar': toolbarEvents.redactionMode | async,\n    'icp-mode': toolbarEvents.icp.enabled | async,\n    'is-redaction-preview': toolbarEvents.redactionPreview | async,\n    sidebarOpen: toolbarEvents.sidebarOpen | async,\n    'has-scroll-bar': hasScrollBar,\n    'has-different-page-size': hasDifferentPageSize$ | async\n  }\"\n  [ngStyle]=\"{ width: width }\"\n>\n  <mv-comments-summary\n    *ngIf=\"showCommentSummary\"\n    [title]=\"documentTitle || 'Comment Summary'\"\n    [contentType]=\"contentType\"\n  >\n  </mv-comments-summary>\n\n  <mv-confirm-action\n    *ngIf=\"toolbarEvents.icp.leavingSession | async\"\n  ></mv-confirm-action>\n\n  <div id=\"mainContainer\">\n    <mv-main-toolbar\n      *ngIf=\"showToolbar\"\n      [enableAnnotations]=\"enableAnnotations\"\n      [enableICP]=\"enableICP\"\n      [enableRedactions]=\"enableRedactions\"\n      [contentType]=\"contentType\"\n    >\n    </mv-main-toolbar>\n    <mv-redaction-toolbar\n      [showRedactSearch]=\"enableRedactSearch\"\n      *ngIf=\"toolbarEvents.redactionMode | async\"\n    ></mv-redaction-toolbar>\n    <mv-highlight-toolbar\n      *ngIf=\"toolbarEvents.highlightToolbarSubject | async\"\n    ></mv-highlight-toolbar>\n    <mv-icp-toolbar *ngIf=\"toolbarEvents.icp.enabled | async\"></mv-icp-toolbar>\n\n    <div #viewerRef>\n      <mv-conversion-viewer\n        *ngIf=\"convertibleContent\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (viewerException)=\"onLoadException($event)\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [originalUrl]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-conversion-viewer>\n      <mv-pdf-viewer\n        *ngIf=\"contentType === 'pdf'\"\n        #pdfViewer\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (pdfViewerException)=\"onLoadException($event)\"\n        (documentTitle)=\"onDocumentTitleChange($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [enableRedactions]=\"enableRedactions\"\n        [enableICP]=\"enableICP\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        [caseId]=\"caseId\"\n        mvRotationPersist\n      >\n      </mv-pdf-viewer>\n      <mv-image-viewer\n        *ngIf=\"contentType === 'image'\"\n        (mediaLoadStatus)=\"onMediaLoad($event)\"\n        (imageViewerException)=\"onLoadException($event)\"\n        [url]=\"url\"\n        [enableAnnotations]=\"enableAnnotations\"\n        [annotationSet]=\"enableAnnotations ? (annotationSet$ | async) : null\"\n        [downloadFileName]=\"downloadFileName\"\n        [height]=\"viewerHeight\"\n        mvRotationPersist\n      >\n      </mv-image-viewer>\n      <mv-multimedia-player\n        *ngIf=\"multimediaContent\"\n        [multimediaOn]=\"multimediaPlayerEnabled\"\n        [url]=\"url\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n      >\n      </mv-multimedia-player>\n      <mv-unsupported-viewer\n        *ngIf=\"unsupportedContent\"\n        [url]=\"url\"\n        [typeException]=\"typeException\"\n        [downloadFileName]=\"downloadFileName\"\n        (loadStatus)=\"onMediaLoad($event)\"\n        (unsupportedViewerException)=\"onLoadException($event)\"\n      >\n      </mv-unsupported-viewer>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }, { type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }, { type: AnnotationApiService }, { type: CommentService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { viewerRef: [{
                 type: ViewChild,
                 args: ['viewerRef', { static: false }]
@@ -6246,8 +6399,8 @@ class AnnotationEffects {
                 return of(new LoadAnnotationSetFail(error));
             }));
         })));
-        this.postAnnotation$ = createEffect(() => this.actions$.pipe(ofType(SAVE_ANNOTATION), map((action) => action.payload), exhaustMap((annotation) => {
-            return this.annotationApiService.postAnnotation(annotation).pipe(map(annotations => {
+        this.postAnnotation$ = createEffect(() => this.actions$.pipe(ofType(SAVE_ANNOTATION), concatMap((action) => {
+            return this.annotationApiService.postAnnotation(action.payload).pipe(map(annotations => {
                 return new SaveAnnotationSuccess(annotations);
             }), catchError(error => {
                 return of(new LoadAnnotationSetFail(error));
@@ -6260,6 +6413,13 @@ class AnnotationEffects {
                 return of(new DeleteAnnotationFail(error));
             }));
         })));
+        this.saveAnnotationSet$ = createEffect(() => this.actions$.pipe(ofType(SAVE_ANNOTATION_SET), map((action) => action.payload), switchMap((annotationSet) => {
+            return this.annotationApiService.postAnnotationSet(annotationSet).pipe(map(res => {
+                return new SaveAnnotationSetSuccess(res);
+            }), catchError(error => {
+                return of(new SaveAnnotationSetFail(error));
+            }));
+        })));
     }
 }
 /** @nocollapse */ AnnotationEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AnnotationEffects, deps: [{ token: i1$2.Actions }, { token: AnnotationApiService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -6616,5 +6776,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_OR_EDIT_COMMENT, APPLY_COMMENT_SUMMARY_FILTER, AddOrEditComment, AnnotationApiService, AnnotationEffects, AnnotationSetComponent, AnnotationViewComponent, AnnotationsModule, ApplyCommentSymmaryFilter, BoxHighlightCreateComponent, CLEAR_COMMENT_SUMMARY_FILTER, ClearCommentSummaryFilters, CommentFilterComponent, CommentSearchComponent, CommentSetComponent, CommentSetHeaderComponent, CommentsSummaryComponent, DELETE_ANNOTATION, DELETE_ANNOTATION_FAIL, DELETE_ANNOTATION_SUCCESS, DeleteAnnotation, DeleteAnnotationFail, DeleteAnnotationSuccess, FilterPipe, IcpToolbarComponent, LOAD_ANNOTATION_SET, LOAD_ANNOTATION_SET_FAIL, LOAD_ANNOTATION_SET_SUCCESS, LoadAnnotationSet, LoadAnnotationSetFail, LoadAnnotationSetSucess, MainToolbarComponent, MediaViewerComponent, MediaViewerModule, MetadataLayerComponent, MomentDatePipe, RedactionSearchBarComponent, RedactionToolbarComponent, ResponseType, SAVE_ANNOTATION, SAVE_ANNOTATION_FAIL, SAVE_ANNOTATION_SUCCESS, SEARCH_COMMENT, SELECT_ANNOTATION, SaveAnnotation, SaveAnnotationFail, SaveAnnotationSuccess, SearchBarComponent, SearchComment, SelectedAnnotation, TagsComponent, ToolbarButtonVisibilityService, ToolbarEventService, ToolbarModule, UnsnakePipe, ViewerException, commentSearchQ, getAnnoEnt, getAnnoPageEnt, getAnnoPerPage, getAnnoSet, getAnnotationEntities, getAnnotationSet, getAnnotationsSetState, getCommentEntities, getCommentEnts, getCommentSummary, getCommentSummaryFilters, getCommentsArray, getComponentSearchQueries, getComponentSearchText, getDocumentIdSetId, getFilteredAnnotations, getPageEntities, getSelectedAnno, getSelectedAnnotation, getSet, getSummaryFilters, initialState, reducer };
+export { ADD_OR_EDIT_COMMENT, APPLY_COMMENT_SUMMARY_FILTER, AddOrEditComment, AnnotationApiService, AnnotationEffects, AnnotationSetComponent, AnnotationViewComponent, AnnotationsModule, ApplyCommentSymmaryFilter, BoxHighlightCreateComponent, CLEAR_COMMENT_SUMMARY_FILTER, ClearCommentSummaryFilters, CommentFilterComponent, CommentSearchComponent, CommentSetComponent, CommentSetHeaderComponent, CommentsSummaryComponent, DELETE_ANNOTATION, DELETE_ANNOTATION_FAIL, DELETE_ANNOTATION_SUCCESS, DeleteAnnotation, DeleteAnnotationFail, DeleteAnnotationSuccess, FilterPipe, HighlightToolbarComponent, IcpToolbarComponent, LOAD_ANNOTATION_SET, LOAD_ANNOTATION_SET_FAIL, LOAD_ANNOTATION_SET_SUCCESS, LoadAnnotationSet, LoadAnnotationSetFail, LoadAnnotationSetSucess, MainToolbarComponent, MediaViewerComponent, MediaViewerModule, MetadataLayerComponent, MomentDatePipe, RedactionSearchBarComponent, RedactionToolbarComponent, ResponseType, SAVE_ANNOTATION, SAVE_ANNOTATION_FAIL, SAVE_ANNOTATION_SET, SAVE_ANNOTATION_SET_FAIL, SAVE_ANNOTATION_SET_SUCCESS, SAVE_ANNOTATION_SUCCESS, SEARCH_COMMENT, SELECT_ANNOTATION, SaveAnnotation, SaveAnnotationFail, SaveAnnotationSet, SaveAnnotationSetFail, SaveAnnotationSetSuccess, SaveAnnotationSuccess, SearchBarComponent, SearchComment, SelectedAnnotation, TagsComponent, ToolbarButtonVisibilityService, ToolbarEventService, ToolbarModule, UnsnakePipe, ViewerException, commentSearchQ, getAnnoEnt, getAnnoPageEnt, getAnnoPerPage, getAnnoSet, getAnnotationEntities, getAnnotationSet, getAnnotationsSetState, getCommentEntities, getCommentEnts, getCommentSummary, getCommentSummaryFilters, getCommentsArray, getComponentSearchQueries, getComponentSearchText, getDocumentIdSetId, getFilteredAnnotations, getPageEntities, getSelectedAnno, getSelectedAnnotation, getSet, getSummaryFilters, initialState, reducer };
 //# sourceMappingURL=hmcts-media-viewer.mjs.map