@hmcts/media-viewer 4.1.8 → 4.1.9-exui-1580

package/fesm2022/hmcts-media-viewer.mjs

@@ -1,15 +1,15 @@
 import * as i5$1 from 'rpx-xui-translation';
 import { RpxTranslationModule } from 'rpx-xui-translation';
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewChild, HostListener, Directive, Input, ViewEncapsulation, Pipe, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
+import { Injectable, Directive, HostListener, Component, ViewChild, Input, ViewEncapsulation, Pipe, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
 import * as i5 from '@angular/common';
 import { DatePipe, CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { UntypedFormControl, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
-import { BehaviorSubject, Subject, of, combineLatest, asyncScheduler } from 'rxjs';
-import { take, distinctUntilChanged, filter, auditTime, tap, throttleTime, map, catchError, switchMap, concatMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
+import { BehaviorSubject, Subject, filter, debounceTime, of, combineLatest, asyncScheduler } from 'rxjs';
+import { take, distinctUntilChanged, filter as filter$1, 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 { v4 } from 'uuid';
@@ -1526,482 +1526,887 @@ const getConvertedDocument = createSelector(getDocumentState, getConvertedDocume
 const getRotation = createSelector(getDocumentState, getRotation$1);
 const rotationLoaded = createSelector(getDocumentState, rotationLoaded$1);
 
-pdfjs.GlobalWorkerOptions.workerSrc = '/assets/build/pdf.worker.min.js';
 /**
- * Values of the state field returned by the find events
- */
-var FindState;
-(function (FindState) {
-    FindState[FindState["FOUND"] = 0] = "FOUND";
-    FindState[FindState["NOT_FOUND"] = 1] = "NOT_FOUND";
-    FindState[FindState["WRAPPED"] = 2] = "WRAPPED";
-    FindState[FindState["PENDING"] = 3] = "PENDING";
-})(FindState || (FindState = {}));
-class PdfJsWrapper {
-    constructor(pdfViewer, downloadManager, toolbarEvents, documentLoadInit, documentLoadProgress, documentLoaded, outlineLoaded, documentLoadFailed, pageRendered, positionUpdated) {
-        this.pdfViewer = pdfViewer;
-        this.downloadManager = downloadManager;
-        this.toolbarEvents = toolbarEvents;
-        this.documentLoadInit = documentLoadInit;
-        this.documentLoadProgress = documentLoadProgress;
-        this.documentLoaded = documentLoaded;
-        this.outlineLoaded = outlineLoaded;
-        this.documentLoadFailed = documentLoadFailed;
-        this.pageRendered = pageRendered;
-        this.positionUpdated = positionUpdated;
-        this.pdfViewer.eventBus.on('updateviewarea', e => positionUpdated.next(e));
-        this.pdfViewer.eventBus.on('pagechanging', e => this.toolbarEvents.setCurrentPageInputValueSubject.next(e.pageNumber));
-        this.pdfViewer.eventBus.on('pagechanging', e => this.drawMissingPages(e));
-        this.pdfViewer.eventBus.on('pagesinit', () => this.pdfViewer.currentScaleValue = '1');
-        this.pdfViewer.eventBus.on('pagerendered', e => { }); // not used left for future convenience
-        this.pdfViewer.eventBus.on('pagesloaded', (e) => this.emitDocumentInfo(e));
-        this.pdfViewer.eventBus.on('scalechanging', (e) => this.emitDocumentInfo(e));
-        this.pdfViewer.eventBus.on('rotationchanging', (e) => this.emitDocumentInfo(e));
-        this.pdfViewer.eventBus.on('updatefindcontrolstate', event => {
-            this.sendSearchDetails(event);
-        });
-        this.pdfViewer.eventBus.on('updatefindmatchescount', event => {
-            const result = { ...event.matchesCount, isPrevious: event?.source?.state?.findPrevious };
-            this.toolbarEvents.searchResultsCountSubject.next(result);
-        });
-        this.zoomValue = 1;
-        this.redactionPages = [];
-        // Subscribe to redactionMode changes and run a function when it changes
-        this.toolbarEvents.redactionMode.subscribe((redactionModeValue) => {
-            this.onRedactionModeChanged(redactionModeValue);
-        });
+ * Helper Class
+ * Used for dynamic templates manipulation
+ * */
+class HtmlTemplatesHelper {
+    static setDescribedBy(errorMessage, config) {
+        if (!errorMessage) {
+            return config.hint ? `${config.id}-hint` : null;
+        }
+        else if (errorMessage && errorMessage.isInvalid) {
+            return config.hint ? `${config.id}-hint ${config.id}-error` : `${config.id}-error`;
+        }
+        else {
+            return config.hint ? `${config.id}-hint` : null;
+        }
     }
-    sendSearchDetails(event) {
-        if (event.state !== FindState.PENDING) {
-            const result = { ...event.matchesCount, isPrevious: event?.source?.state?.findPrevious };
-            this.toolbarEvents.searchResultsCountSubject.next(result);
-            if (event?.source?.selected?.pageIdx !== -1 && event.matchesCount.total > 0) {
-                this.toolbarEvents.redactionSerachSubject.next({
-                    page: event?.source?.selected?.pageIdx,
-                    matchedIndex: event?.source?.selected?.matchIdx,
-                    matchesCount: event.matchesCount.total
-                });
-            }
+    static getAdjustedBoundingRect(element, log = true) {
+        const viewportX = window.visualViewport.offsetLeft;
+        const viewportY = window.visualViewport.offsetTop;
+        const viewportScale = window.visualViewport.scale;
+        const viewportPageX = window.visualViewport.pageLeft;
+        const viewportPageY = window.visualViewport.pageTop;
+        if (log && viewportX || viewportY || (viewportScale != 1) || viewportPageX || viewportPageY) {
+            console.log(`Element: ${element.id} Viewport X: ${viewportX}, Y: ${viewportY}, Scale: ${viewportScale}, PageX: ${viewportPageX}, PageY: ${viewportPageY}`);
         }
+        return element.getBoundingClientRect();
     }
-    // in the event a user fast scrolls or navigates to a specific page, 
-    // we need to render the missing pages so redaction box is in right place
-    drawMissingPages(e) {
-        const redactionMode = this.toolbarEvents.redactionMode.getValue();
-        const { pageNumber, previous: previousPageNumber } = e;
-        if (!previousPageNumber || pageNumber < previousPageNumber || Math.abs(pageNumber - previousPageNumber) <= 1) {
-            return;
+}
+
+class IcpEventService {
+    constructor() {
+        this.enabled = new BehaviorSubject(false);
+        this.sessionLaunch = new Subject();
+        this.becomingPresenter = new Subject();
+        this.stoppingPresenting = new Subject();
+        this.leavingSession = new BehaviorSubject(false);
+        this.sessionExitConfirmed = new Subject();
+        this.participantsListVisible = new BehaviorSubject(false);
+        this.launchSession = () => {
+            this.sessionLaunch.next();
+        };
+        this.enable = () => {
+            this.enabled.next(true);
+            this.launchSession();
+        };
+        this.becomePresenter = () => {
+            this.becomingPresenter.next();
+        };
+        this.stopPresenting = () => {
+            this.stoppingPresenting.next();
+        };
+        this.leaveSession = () => {
+            this.leavingSession.next(true);
+        };
+        this.confirmExit = () => {
+            this.sessionExitConfirmed.next();
+            this.participantsListVisible.next(false);
+            this.enabled.next(false);
+        };
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IcpEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IcpEventService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IcpEventService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+var SearchType;
+(function (SearchType) {
+    SearchType["Redact"] = "Redact";
+    SearchType["Highlight"] = "Highlight";
+})(SearchType || (SearchType = {}));
+class ToolbarEventService {
+    constructor(icpEventService) {
+        this.icpEventService = icpEventService;
+        this.highlightModeSubject = new BehaviorSubject(false);
+        this.highlightToolbarSubject = new BehaviorSubject(false);
+        this.drawModeSubject = new BehaviorSubject(false);
+        this.rotateSubject = new Subject();
+        this.searchSubject = new Subject();
+        this.searchResultsCountSubject = new Subject();
+        this.zoomSubject = new Subject();
+        this.stepZoomSubject = new Subject();
+        this.zoomValueSubject = new BehaviorSubject(1);
+        this.pageCountSubject = new Subject();
+        this.printSubject = new Subject();
+        this.downloadSubject = new Subject();
+        this.setCurrentPageSubject = new Subject();
+        this.setCurrentPageInputValueSubject = new Subject();
+        this.changePageByDeltaSubject = new Subject();
+        this.showCommentSummary = new BehaviorSubject(false);
+        this.grabNDrag = new BehaviorSubject(false);
+        this.saveRotationSubject = new Subject();
+        this.redactionMode = new BehaviorSubject(false);
+        this.redactionPreview = new Subject();
+        this.applyRedactToDocument = new Subject();
+        this.clearAllRedactMarkers = new Subject();
+        this.redactWholePage = new Subject();
+        this.redactionSerachSubject = new Subject();
+        this.redactAllInProgressSubject = new BehaviorSubject(false);
+        this.openRedactionSearch = new BehaviorSubject(null);
+        this.sidebarOpen = new BehaviorSubject(false);
+        this.sidebarOutlineView = new BehaviorSubject(true);
+        this.searchBarHidden = new BehaviorSubject(true);
+        this.commentsPanelVisible = new BehaviorSubject(false);
+    }
+    /**
+     * Reset the stateful behaviour subjects
+     */
+    reset() {
+        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);
+    }
+    // Function to inform Observers that highlightMode has been enabled
+    toggleHighlightMode() {
+        // Highlight and Draw states are mutually exclusive
+        if (this.highlightModeSubject.getValue() === false) {
+            this.drawModeSubject.next(false);
+            this.grabNDrag.next(false);
+            this.highlightModeSubject.next(true);
         }
-        const start = previousPageNumber + 1;
-        const end = pageNumber;
-        // if the redaction mode is on render the pages now
-        if (redactionMode) {
-            for (let i = start; i < end; i++) {
-                const page = this.pdfViewer._pages[i - 1];
-                if (page && !page.renderingState) {
-                    page.draw();
-                }
-            }
+        else {
+            this.highlightModeSubject.next(false);
+        }
+    }
+    // Function to inform Observers that ToggleMode has been enabled
+    toggleDrawMode() {
+        if (this.drawModeSubject.getValue() === false) {
+            this.highlightModeSubject.next(false);
+            this.grabNDrag.next(false);
+            this.drawModeSubject.next(true);
         }
         else {
-            // keep track of pages as if a user skips to a page we need to render all the missing pages
-            console.log('Adding redaction pages to queue:', start, end);
-            this.redactionPages.push({ start, end });
+            this.drawModeSubject.next(false);
         }
     }
-    onRedactionModeChanged(redactionMode) {
-        if (redactionMode && this.redactionPages.length) {
-            this.redactionPages.forEach(({ start, end }) => {
-                console.log('Drawing redaction pages from queue:', start, end);
-                for (let i = start; i < end; i++) {
-                    const page = this.pdfViewer._pages[i - 1];
-                    if (page && !page.renderingState) {
-                        page.draw();
-                    }
-                }
-            });
-            this.redactionPages = [];
+    toggleHighlightToolbar() {
+        this.highlightToolbarSubject.next(!this.highlightToolbarSubject.getValue());
+    }
+    rotate(angle) {
+        this.rotateSubject.next(angle);
+    }
+    search(phrase) {
+        this.searchSubject.next(phrase);
+    }
+    getSearchResultsCount() {
+        return this.searchResultsCountSubject.asObservable();
+    }
+    zoom(value) {
+        this.zoomSubject.next(value);
+    }
+    stepZoom(value) {
+        this.stepZoomSubject.next(value);
+    }
+    getZoomValue() {
+        return this.zoomValueSubject.asObservable();
+    }
+    getPageCount() {
+        return this.pageCountSubject.asObservable();
+    }
+    print() {
+        this.printSubject.next();
+    }
+    download() {
+        this.downloadSubject.next();
+    }
+    setPage(value) {
+        this.setCurrentPageSubject.next(value);
+    }
+    incrementPage(value) {
+        this.changePageByDeltaSubject.next(value);
+    }
+    getCurrentPageNumber() {
+        return this.setCurrentPageInputValueSubject.asObservable();
+    }
+    getShowCommentSummary() {
+        return this.showCommentSummary.asObservable();
+    }
+    toggleCommentsSummary(value) {
+        this.showCommentSummary.next(value);
+    }
+    saveRotation() {
+        this.saveRotationSubject.next();
+    }
+    toggleGrabNDrag() {
+        this.grabNDrag.next(!this.grabNDrag.getValue());
+    }
+    toggleSideBar(toggle) {
+        this.sidebarOpen.next(toggle);
+    }
+    toggleSideBarView(toggle) {
+        this.sidebarOutlineView.next(toggle);
+    }
+    toggleRedactionMode() {
+        if (this.redactionMode.getValue() === false) {
+            this.drawModeSubject.next(false);
+            this.grabNDrag.next(false);
+            this.redactionMode.next(true);
+        }
+        else {
+            this.redactionMode.next(false);
         }
+        this.openRedactionSearch.next({ modeType: SearchType.Redact, isOpen: false });
     }
-    emitDocumentInfo(e) {
-        const allPages = [...this.pdfViewer._pages].map(page => {
-            return {
-                div: page.div,
-                scale: page.scale,
-                rotation: page.rotation,
-                id: page.id,
-                viewportScale: page.viewport.scale
-            };
-        });
-        this.pageRendered.next(allPages);
+    toggleRedactionPreview(viewMode) {
+        this.redactionPreview.next(viewMode);
     }
-    async loadDocument(documentUrl) {
-        const loadingTask = this.createLoadingTask(documentUrl);
-        loadingTask.onProgress = ({ loaded, total }) => {
-            this.documentLoadProgress.next({ loaded, total });
-        };
-        this.documentLoadInit.next(documentUrl);
-        try {
-            const pdfDocument = await loadingTask.promise;
-            this.documentLoaded.next(pdfDocument);
-            this.toolbarEvents.pageCountSubject.next(pdfDocument.numPages);
-            this.pdfViewer.setDocument(pdfDocument);
-            if (this.pdfViewer.linkService instanceof PDFLinkService) {
-                const linkservice = this.pdfViewer.linkService;
-                linkservice.setDocument(pdfDocument, null);
-            }
-            const outlineNode = await pdfDocument.getOutline();
-            const outline = outlineNode ? 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
-                };
-            }) : null;
-            if (outline) {
-                await this.setOutlinePageNumbers(pdfDocument, outline);
-            }
-            this.documentOutline = outline;
-            this.outlineLoaded.next(this.documentOutline);
-            const pdfMetaData = await pdfDocument.getMetadata();
-            this.setCurrentPDFTitle(pdfMetaData.info?.Title);
+    unmarkAll() {
+        this.clearAllRedactMarkers.next();
+    }
+    applyRedactionToDocument() {
+        this.applyRedactToDocument.next();
+    }
+    redactPage() {
+        this.redactWholePage.next();
+    }
+    toggleCommentsPanel(isVisible) {
+        if (isVisible) {
+            this.toggleParticipantsList(!isVisible);
         }
-        catch (e) {
-            this.documentLoadFailed.next(e);
+        this.commentsPanelVisible.next(isVisible);
+    }
+    toggleParticipantsList(isVisible) {
+        if (isVisible) {
+            this.toggleCommentsPanel(!isVisible);
         }
+        this.icpEventService.participantsListVisible.next(isVisible);
     }
-    createLoadingTask(documentUrl) {
-        return pdfjs.getDocument({
-            url: documentUrl,
-            cMapUrl: 'assets/minified/cmaps',
-            cMapPacked: true,
-            withCredentials: true,
-            isEvalSupported: false
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToolbarEventService, deps: [{ token: IcpEventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToolbarEventService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToolbarEventService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: IcpEventService }] });
+
+class ViewerEventService {
+    constructor() {
+        this.textHighlight = new Subject();
+        this.boxHighlight = new Subject();
+        this.ctxToolbarCleared = new Subject();
+        this.navigationEvent = new Subject();
+        this.navigationEventICP = new Subject();
+    }
+    textSelected(selectionData) {
+        this.textHighlight.next(selectionData);
+    }
+    boxSelected(selectionData) {
+        this.boxHighlight.next(selectionData);
+    }
+    clearCtxToolbar() {
+        this.ctxToolbarCleared.next();
+    }
+    goToDestination(destination) {
+        this.navigationEvent.next(destination);
+    }
+    goToDestinationICP(destination) {
+        this.navigationEventICP.next(destination);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewerEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewerEventService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewerEventService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+const getTagsRootState = createSelector(getMVState, (state) => state.tags);
+const getTagEntities = createSelector(getTagsRootState, getTagNameEnt);
+const getTagFilters = createSelector(getTagsRootState, getFilters);
+const getTagFiltered = createSelector(getTagsRootState, getFilteredComments);
+const getFilteredPageEntities = createSelector(getTagsRootState, getFilteredPageEnt);
+const getAllTagsArr = createSelector(getTagEntities, (tagEnt) => Object.keys(tagEnt).map(key => {
+    return {
+        key,
+        length: Object.keys(tagEnt[key]).length
+    };
+}));
+
+const getAnnotationsSetState = createSelector(getMVState, (state) => state.annotations);
+const getAnnotationEntities = createSelector(getAnnotationsSetState, getAnnoEnt);
+const getSet = createSelector(getAnnotationsSetState, getAnnoSet);
+const getDocumentIdSetId = createSelector(getSet, (annoSet) => {
+    return {
+        documentId: annoSet.documentId,
+        annotationSetId: annoSet.id
+    };
+});
+const getAnnotationSet = createSelector(getAnnotationEntities, getSet, (entities, set) => {
+    return {
+        ...set,
+        annotations: Object.keys(entities).map(key => entities[key])
+    };
+});
+const getSelectedAnnotation = createSelector(getAnnotationsSetState, getSelectedAnno);
+const getCommentEntities = createSelector(getAnnotationsSetState, getCommentEnts);
+const getPageEntities = createSelector(getAnnotationsSetState, getAnnoPageEnt);
+const getComponentSearchQueries = createSelector(getAnnotationsSetState, commentSearchQ);
+const getComponentSearchText = createSelector(getComponentSearchQueries, (queries) => queries.commentSearch);
+const getCommentSummaryFilters = createSelector(getAnnotationsSetState, getSummaryFilters);
+const getAnnoPerPage = createSelector(getPages, getPageEntities, getFilteredPageEntities, (pages, pageEnt, filteredPageEnt) => {
+    const isFiltered = !!Object.keys(filteredPageEnt).length;
+    const entities = isFiltered ? filteredPageEnt : pageEnt;
+    if (pages) {
+        const arr = [];
+        Object.keys(pages).forEach(key => {
+            arr.push({
+                anno: entities[key] ? entities[key] : [],
+                styles: pages[key].styles
+            });
         });
+        return arr;
     }
-    async setOutlinePageNumbers(pdfDocument, outlineArray) {
-        outlineArray.forEach(async (outline) => {
-            await this.setNestedOutlinePageNumbers(pdfDocument, outline);
+});
+const getCommentsArray = createSelector(getCommentEntities, getPages, getAnnotationEntities, getTagFiltered, (commentEnts, pages, annoEnts, filtered) => {
+    if (commentEnts && annoEnts && pages[1]) {
+        const isFiltered = !!Object.keys(filtered).length;
+        const com = isFiltered ? filtered : commentEnts;
+        return Object.keys(com).map(key => {
+            const page = annoEnts[key].page;
+            return {
+                ...commentEnts[key],
+                page,
+                pages
+            };
         });
     }
-    async setNestedOutlinePageNumbers(pdfDocument, outline) {
-        outline.pageNumber = await this.getOutlinePageNumber(pdfDocument, outline);
-        outline.items.forEach(async (outlineItem) => {
-            outlineItem.pageNumber = await this.getOutlinePageNumber(pdfDocument, outlineItem);
-            this.setNestedOutlinePageNumbers(pdfDocument, outlineItem);
+});
+const getCommentSummary = createSelector(getCommentsArray, getCommentSummaryFilters, (commentSummary = [], filters) => {
+    const comments = StoreUtils.filterCommentsSummary(commentSummary, filters.filters);
+    if (comments.length) {
+        const savedComments = comments.filter((comment) => {
+            return comment.createdByDetails !== undefined;
+        });
+        return savedComments.map((comment) => {
+            return {
+                page: comment.page,
+                user: comment.createdByDetails.forename.concat(' ').concat(comment.createdByDetails.surname),
+                date: moment(comment.lastModifiedDate).format('D MMMM YYYY'),
+                tags: comment.tags,
+                comment: comment.content
+            };
         });
     }
-    async getOutlinePageNumber(pdfDocument, outline) {
-        const dest = outline.dest;
-        const pageIndex = await pdfDocument.getPageIndex(dest[0]);
-        return Number(pageIndex) + 1;
+    return [''];
+});
+const getFilteredAnnotations = createSelector(getAnnotationEntities, getTagFiltered, (annoEnt, filters) => {
+    const isFiltered = !!Object.keys(filters).length;
+    const anno = isFiltered ? filters : annoEnt;
+    return Object.keys(anno).map(key => annoEnt[key])
+        .filter(annotation => annotation.comments && annotation.comments.length > 0);
+});
+
+class HighlightCreateService {
+    constructor(toolBarEvents, store) {
+        this.toolBarEvents = toolBarEvents;
+        this.store = store;
     }
-    downloadFile(url, filename) {
-        this.downloadManager.download(null, url, filename);
+    saveAnnotation(rectangles, page) {
+        this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
+            const anno = {
+                id: v4(),
+                color: 'FFFF00',
+                comments: [],
+                page: page,
+                rectangles: rectangles,
+                type: 'highlight',
+                ...anoSetDocId,
+                createdBy: '',
+                createdByDetails: undefined,
+                createdDate: moment.utc().tz('Europe/London').toISOString(),
+                lastModifiedBy: '',
+                lastModifiedByDetails: undefined,
+                lastModifiedDate: '',
+                tags: [],
+            };
+            this.store.dispatch(new SaveAnnotation(anno));
+        });
     }
-    setPageNumber(pageNumber) {
-        this.pdfViewer.currentPageNumber = pageNumber;
+    saveAnnotationSet(searchRectangles) {
+        this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
+            const annoSet = searchRectangles.map(x => {
+                return {
+                    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
+            }));
+        });
     }
-    getPageNumber() {
-        return this.pdfViewer.currentPageNumber;
+    applyRotation(pageHeight, pageWidth, offsetHeight, offsetWidth, offsetTop, offsetLeft, rotate, zoom) {
+        const { x, y, width, height } = {
+            x: +(offsetLeft / zoom).toFixed(2),
+            y: +(offsetTop / zoom).toFixed(2),
+            width: +(offsetWidth / zoom).toFixed(2),
+            height: +(offsetHeight / zoom).toFixed(2)
+        };
+        const rectangle = { x, y, width, height };
+        switch (rotate) {
+            case 90:
+                rectangle.width = height;
+                rectangle.height = width;
+                rectangle.x = y;
+                rectangle.y = +(pageWidth / zoom - x - width).toFixed(2);
+                break;
+            case 180:
+                rectangle.x = +(pageWidth / zoom - x - width).toFixed(2);
+                rectangle.y = +(pageHeight / zoom - y - height).toFixed(2);
+                break;
+            case 270:
+                rectangle.width = height;
+                rectangle.height = width;
+                rectangle.x = +(pageHeight / zoom - y - height).toFixed(2);
+                rectangle.y = x;
+                break;
+        }
+        return rectangle;
     }
-    changePageNumber(numPages) {
-        this.pdfViewer.currentPageNumber += numPages;
+    resetHighlight() {
+        window.getSelection().removeAllRanges();
+        this.toolBarEvents.highlightModeSubject.next(false);
     }
-    search(operation) {
-        const command = operation.reset ? '' : 'again';
-        const data = {
-            source: this.pdfViewer,
-            type: command,
-            query: operation.searchTerm,
-            phraseSearch: true,
-            caseSensitive: operation.matchCase,
-            entireWord: operation.wholeWord,
-            highlightAll: operation.highlightAll,
-            findPrevious: operation.previous,
-        };
-        this.pdfViewer.eventBus.dispatch('find', data);
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateService, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: i1.Store }] });
+
+class HighlightCreateDirective {
+    constructor(element, toolbarEvents, viewerEvents, highlightService, store) {
+        this.element = element;
+        this.toolbarEvents = toolbarEvents;
+        this.viewerEvents = viewerEvents;
+        this.highlightService = highlightService;
+        this.store = store;
+        this.$subscriptions = [];
     }
-    clearSearch() {
-        this.pdfViewer.eventBus.dispatch('findbarclose', {});
+    ngOnInit() {
+        this.$subscriptions.push(this.store.select(getPages).subscribe((pages) => {
+            if (pages[1]) {
+                this.allPages = pages;
+            }
+        }));
+        this.$subscriptions.push(this.toolbarEvents.highlightModeSubject.pipe(filter(enabled => enabled && !!this.element.nativeElement), debounceTime(100)).subscribe(() => {
+            this.element.nativeElement.focus();
+        }));
     }
-    navigateTo(destination) {
-        if (destination instanceof Object) {
-            if (!destination[1].name.includes('XYZ')) {
-                destination[1] = { name: 'XYZ' };
-                destination[2] = destination[2] || null;
-                destination[3] = destination[3] || null;
+    ngOnDestroy() {
+        this.$subscriptions.forEach(sub => sub.unsubscribe());
+    }
+    onMouseUp(mouseEvent) {
+        let page;
+        let currentElement = mouseEvent.target;
+        while (currentElement.offsetParent) {
+            currentElement = currentElement.offsetParent;
+            if (currentElement.getAttribute) {
+                page = parseInt(currentElement.getAttribute('data-page-number'), 10);
+                if (page) {
+                    break;
+                }
             }
-            destination[4] = this.zoomValue;
         }
-        this.nativeNavigate(destination);
-    }
-    nativeNavigate(destination) {
-        this.pdfViewer.linkService.goToDestination(destination);
+        if (this.toolbarEvents.highlightModeSubject.getValue()) {
+            const rectangles = this.getRectangles(mouseEvent, page);
+            this.viewerEvents.textSelected({ page, rectangles });
+        }
     }
-    setZoom(zoomValue) {
-        this.pdfViewer.currentScaleValue = this.getZoomValue(zoomValue).toString();
-        this.zoomValue = +this.pdfViewer.currentScaleValue;
-        this.toolbarEvents.zoomValueSubject.next(this.zoomValue);
+    onKeyboardSelectionConfirmed() {
+        if (this.toolbarEvents.highlightModeSubject.getValue()) {
+            const selection = window.getSelection();
+            if (selection && selection.rangeCount && !selection.isCollapsed) {
+                const page = this.getCurrentPageFromSelection(selection);
+                const rectangles = this.getRectanglesFromSelection(selection, page);
+                if (rectangles && rectangles.length > 0) {
+                    this.viewerEvents.textSelected({ page, rectangles });
+                }
+            }
+        }
     }
-    stepZoom(zoomValue) {
-        this.pdfViewer.currentScaleValue = this.getZoomValue((+this.pdfViewer.currentScaleValue) + zoomValue).toString();
-        this.zoomValue = +this.pdfViewer.currentScaleValue;
-        this.toolbarEvents.zoomValueSubject.next(this.zoomValue);
+    getCurrentPageFromSelection(selection) {
+        const range = selection.getRangeAt(0);
+        let currentElement = range.startContainer;
+        if (currentElement.nodeType === Node.TEXT_NODE) {
+            currentElement = currentElement.parentElement;
+        }
+        while (currentElement && currentElement.offsetParent) {
+            currentElement = currentElement.offsetParent;
+            if (currentElement.getAttribute) {
+                const page = parseInt(currentElement.getAttribute('data-page-number'), 10);
+                if (page) {
+                    return page;
+                }
+            }
+        }
+        return 1;
     }
-    getZoomValue(zoomValue) {
-        if (isNaN(zoomValue)) {
-            return this.zoomValue;
+    getRectanglesFromSelection(selection, page) {
+        if (!this.allPages || !this.allPages[page]) {
+            return [];
         }
-        if (zoomValue > 5) {
-            return 5;
+        this.setPageProperties(page);
+        const range = selection.getRangeAt(0).cloneRange();
+        const clientRects = range.getClientRects();
+        if (!clientRects || clientRects.length === 0) {
+            return [];
         }
-        if (zoomValue < 0.1) {
-            return 0.1;
+        let textLayerElement = range.startContainer;
+        if (textLayerElement.nodeType === Node.TEXT_NODE) {
+            textLayerElement = textLayerElement.parentElement;
         }
-        return +zoomValue.toFixed(2);
-    }
-    rotate(rotation) {
-        return this.pdfViewer.pagesRotation = (this.pdfViewer.pagesRotation + rotation) % 360;
+        const textLayer = textLayerElement.closest('.textLayer');
+        if (!textLayer) {
+            return [];
+        }
+        this.removeEnhancedTextModeStyling(textLayerElement);
+        return this.processClientRects(clientRects, textLayer);
     }
-    resetRotation(rotation) {
-        return this.pdfViewer.pagesRotation = rotation;
+    onPdfViewerClick(event) {
+        this.store.dispatch(new SelectedAnnotation({
+            annotationId: '',
+            selected: false,
+            editable: false,
+        }));
+        this.viewerEvents.clearCtxToolbar();
     }
-    getNormalisedPagesRotation() {
-        return this.pdfViewer.pagesRotation;
+    getRectangles(event, page) {
+        this.setPageProperties(page);
+        const selection = window.getSelection();
+        if (selection) {
+            const localElement = event.target;
+            this.removeEnhancedTextModeStyling(localElement);
+            if (selection.rangeCount && !selection.isCollapsed) {
+                const range = selection.getRangeAt(0).cloneRange();
+                const clientRects = range.getClientRects();
+                if (clientRects) {
+                    const textLayer = localElement.closest(".textLayer");
+                    return this.processClientRects(clientRects, textLayer);
+                }
+            }
+        }
     }
-    getCurrentPDFZoomValue() {
-        return +this.pdfViewer.currentScaleValue;
+    createTextRectangle(rect, parentRect) {
+        const height = rect.bottom - rect.top;
+        const width = rect.right - rect.left;
+        const top = rect.top - parentRect.top;
+        const left = rect.left - parentRect.left;
+        let rectangle = this.highlightService.applyRotation(this.pageHeight, this.pageWidth, height, width, top, left, this.rotate, this.zoom);
+        rectangle = { id: v4(), ...rectangle };
+        return rectangle;
     }
-    setCurrentPDFTitle(title) {
-        this.documentTitle = title;
+    removeEnhancedTextModeStyling(element) {
+        if (element.parentElement.children) {
+            for (let i = 0; i < element.parentElement.children.length; i++) {
+                const child = element.parentElement.children[i];
+                child.style.padding = '0';
+                // regex will be targeting the translate style in string
+                // e.g. scaleX(0.969918) translateX(-110.684px) translateY(-105.274px) will become scaleX(0.969918)
+                const translateCSSRegex = /translate[XYZ]\(-?\d*(\.\d+)?(px)?\)/g;
+                child.style.transform = child.style.transform.replace(translateCSSRegex, '').trim();
+            }
+        }
     }
-    getCurrentPDFTitle() {
-        return this.documentTitle;
+    setPageProperties(page) {
+        this.pageHeight = this.allPages[page].styles.height;
+        this.pageWidth = this.allPages[page].styles.width;
+        this.zoom = parseFloat(this.allPages[page].scaleRotation.scale);
+        this.rotate = parseInt(this.allPages[page].scaleRotation.rotation, 10);
     }
-}
-
-class IcpEventService {
-    constructor() {
-        this.enabled = new BehaviorSubject(false);
-        this.sessionLaunch = new Subject();
-        this.becomingPresenter = new Subject();
-        this.stoppingPresenting = new Subject();
-        this.leavingSession = new BehaviorSubject(false);
-        this.sessionExitConfirmed = new Subject();
-        this.participantsListVisible = new BehaviorSubject(false);
-        this.launchSession = () => {
-            this.sessionLaunch.next();
-        };
-        this.enable = () => {
-            this.enabled.next(true);
-            this.launchSession();
-        };
-        this.becomePresenter = () => {
-            this.becomingPresenter.next();
-        };
-        this.stopPresenting = () => {
-            this.stoppingPresenting.next();
-        };
-        this.leaveSession = () => {
-            this.leavingSession.next(true);
-        };
-        this.confirmExit = () => {
-            this.sessionExitConfirmed.next();
-            this.participantsListVisible.next(false);
-            this.enabled.next(false);
-        };
+    processClientRects(clientRects, textLayer) {
+        const parentRect = HtmlTemplatesHelper.getAdjustedBoundingRect(textLayer);
+        const selectionRectangles = [];
+        for (let i = 0; i < clientRects.length; i++) {
+            const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
+            const findSelectionRectangle = selectionRectangles.find((rect) => rect.width === selectionRectangle.width && rect.x === selectionRectangle.x);
+            if (!findSelectionRectangle) {
+                selectionRectangles.push(selectionRectangle);
+            }
+        }
+        return selectionRectangles;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IcpEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IcpEventService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateDirective, deps: [{ token: i0.ElementRef }, { token: ToolbarEventService }, { token: ViewerEventService }, { token: HighlightCreateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: HighlightCreateDirective, selector: "[mvCreateTextHighlight]", host: { listeners: { "mouseup": "onMouseUp($event)", "mousedown": "onPdfViewerClick($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: IcpEventService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root'
+                    selector: '[mvCreateTextHighlight]'
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ToolbarEventService }, { type: ViewerEventService }, { type: HighlightCreateService }, { type: i1.Store }], propDecorators: { onMouseUp: [{
+                type: HostListener,
+                args: ['mouseup', ['$event']]
+            }], onPdfViewerClick: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
 
-var SearchType;
-(function (SearchType) {
-    SearchType["Redact"] = "Redact";
-    SearchType["Highlight"] = "Highlight";
-})(SearchType || (SearchType = {}));
-class ToolbarEventService {
-    constructor(icpEventService) {
-        this.icpEventService = icpEventService;
-        this.highlightModeSubject = new BehaviorSubject(false);
-        this.highlightToolbarSubject = new BehaviorSubject(false);
-        this.drawModeSubject = new BehaviorSubject(false);
-        this.rotateSubject = new Subject();
-        this.searchSubject = new Subject();
-        this.searchResultsCountSubject = new Subject();
-        this.zoomSubject = new Subject();
-        this.stepZoomSubject = new Subject();
-        this.zoomValueSubject = new BehaviorSubject(1);
-        this.pageCountSubject = new Subject();
-        this.printSubject = new Subject();
-        this.downloadSubject = new Subject();
-        this.setCurrentPageSubject = new Subject();
-        this.setCurrentPageInputValueSubject = new Subject();
-        this.changePageByDeltaSubject = new Subject();
-        this.showCommentSummary = new BehaviorSubject(false);
-        this.grabNDrag = new BehaviorSubject(false);
-        this.saveRotationSubject = new Subject();
-        this.redactionMode = new BehaviorSubject(false);
-        this.redactionPreview = new Subject();
-        this.applyRedactToDocument = new Subject();
-        this.clearAllRedactMarkers = new Subject();
-        this.redactWholePage = new Subject();
-        this.redactionSerachSubject = new Subject();
-        this.redactAllInProgressSubject = new BehaviorSubject(false);
-        this.openRedactionSearch = new BehaviorSubject(null);
-        this.sidebarOpen = new BehaviorSubject(false);
-        this.sidebarOutlineView = new BehaviorSubject(true);
-        this.searchBarHidden = new BehaviorSubject(true);
-        this.commentsPanelVisible = new BehaviorSubject(false);
+pdfjs.GlobalWorkerOptions.workerSrc = '/assets/build/pdf.worker.min.js';
+/**
+ * Values of the state field returned by the find events
+ */
+var FindState;
+(function (FindState) {
+    FindState[FindState["FOUND"] = 0] = "FOUND";
+    FindState[FindState["NOT_FOUND"] = 1] = "NOT_FOUND";
+    FindState[FindState["WRAPPED"] = 2] = "WRAPPED";
+    FindState[FindState["PENDING"] = 3] = "PENDING";
+})(FindState || (FindState = {}));
+class PdfJsWrapper {
+    constructor(pdfViewer, downloadManager, toolbarEvents, documentLoadInit, documentLoadProgress, documentLoaded, outlineLoaded, documentLoadFailed, pageRendered, positionUpdated) {
+        this.pdfViewer = pdfViewer;
+        this.downloadManager = downloadManager;
+        this.toolbarEvents = toolbarEvents;
+        this.documentLoadInit = documentLoadInit;
+        this.documentLoadProgress = documentLoadProgress;
+        this.documentLoaded = documentLoaded;
+        this.outlineLoaded = outlineLoaded;
+        this.documentLoadFailed = documentLoadFailed;
+        this.pageRendered = pageRendered;
+        this.positionUpdated = positionUpdated;
+        this.pdfViewer.eventBus.on('updateviewarea', e => positionUpdated.next(e));
+        this.pdfViewer.eventBus.on('pagechanging', e => this.toolbarEvents.setCurrentPageInputValueSubject.next(e.pageNumber));
+        this.pdfViewer.eventBus.on('pagechanging', e => this.drawMissingPages(e));
+        this.pdfViewer.eventBus.on('pagesinit', () => this.pdfViewer.currentScaleValue = '1');
+        this.pdfViewer.eventBus.on('pagerendered', e => { }); // not used left for future convenience
+        this.pdfViewer.eventBus.on('pagesloaded', (e) => this.emitDocumentInfo(e));
+        this.pdfViewer.eventBus.on('scalechanging', (e) => this.emitDocumentInfo(e));
+        this.pdfViewer.eventBus.on('rotationchanging', (e) => this.emitDocumentInfo(e));
+        this.pdfViewer.eventBus.on('updatefindcontrolstate', event => {
+            this.sendSearchDetails(event);
+        });
+        this.pdfViewer.eventBus.on('updatefindmatchescount', event => {
+            const result = { ...event.matchesCount, isPrevious: event?.source?.state?.findPrevious };
+            this.toolbarEvents.searchResultsCountSubject.next(result);
+        });
+        this.zoomValue = 1;
+        this.redactionPages = [];
+        // Subscribe to redactionMode changes and run a function when it changes
+        this.toolbarEvents.redactionMode.subscribe((redactionModeValue) => {
+            this.onRedactionModeChanged(redactionModeValue);
+        });
     }
-    /**
-     * Reset the stateful behaviour subjects
-     */
-    reset() {
-        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);
+    sendSearchDetails(event) {
+        if (event.state !== FindState.PENDING) {
+            const result = { ...event.matchesCount, isPrevious: event?.source?.state?.findPrevious };
+            this.toolbarEvents.searchResultsCountSubject.next(result);
+            if (event?.source?.selected?.pageIdx !== -1 && event.matchesCount.total > 0) {
+                this.toolbarEvents.redactionSerachSubject.next({
+                    page: event?.source?.selected?.pageIdx,
+                    matchedIndex: event?.source?.selected?.matchIdx,
+                    matchesCount: event.matchesCount.total
+                });
+            }
+        }
     }
-    // Function to inform Observers that highlightMode has been enabled
-    toggleHighlightMode() {
-        // Highlight and Draw states are mutually exclusive
-        if (this.highlightModeSubject.getValue() === false) {
-            this.drawModeSubject.next(false);
-            this.grabNDrag.next(false);
-            this.highlightModeSubject.next(true);
+    // in the event a user fast scrolls or navigates to a specific page, 
+    // we need to render the missing pages so redaction box is in right place
+    drawMissingPages(e) {
+        const redactionMode = this.toolbarEvents.redactionMode.getValue();
+        const { pageNumber, previous: previousPageNumber } = e;
+        if (!previousPageNumber || pageNumber < previousPageNumber || Math.abs(pageNumber - previousPageNumber) <= 1) {
+            return;
+        }
+        const start = previousPageNumber + 1;
+        const end = pageNumber;
+        // if the redaction mode is on render the pages now
+        if (redactionMode) {
+            for (let i = start; i < end; i++) {
+                const page = this.pdfViewer._pages[i - 1];
+                if (page && !page.renderingState) {
+                    page.draw();
+                }
+            }
         }
         else {
-            this.highlightModeSubject.next(false);
+            // keep track of pages as if a user skips to a page we need to render all the missing pages
+            console.log('Adding redaction pages to queue:', start, end);
+            this.redactionPages.push({ start, end });
         }
     }
-    // Function to inform Observers that ToggleMode has been enabled
-    toggleDrawMode() {
-        if (this.drawModeSubject.getValue() === false) {
-            this.highlightModeSubject.next(false);
-            this.grabNDrag.next(false);
-            this.drawModeSubject.next(true);
-        }
-        else {
-            this.drawModeSubject.next(false);
+    onRedactionModeChanged(redactionMode) {
+        if (redactionMode && this.redactionPages.length) {
+            this.redactionPages.forEach(({ start, end }) => {
+                console.log('Drawing redaction pages from queue:', start, end);
+                for (let i = start; i < end; i++) {
+                    const page = this.pdfViewer._pages[i - 1];
+                    if (page && !page.renderingState) {
+                        page.draw();
+                    }
+                }
+            });
+            this.redactionPages = [];
         }
     }
-    toggleHighlightToolbar() {
-        this.highlightToolbarSubject.next(!this.highlightToolbarSubject.getValue());
-    }
-    rotate(angle) {
-        this.rotateSubject.next(angle);
-    }
-    search(phrase) {
-        this.searchSubject.next(phrase);
-    }
-    getSearchResultsCount() {
-        return this.searchResultsCountSubject.asObservable();
+    emitDocumentInfo(e) {
+        const allPages = [...this.pdfViewer._pages].map(page => {
+            return {
+                div: page.div,
+                scale: page.scale,
+                rotation: page.rotation,
+                id: page.id,
+                viewportScale: page.viewport.scale
+            };
+        });
+        this.pageRendered.next(allPages);
     }
-    zoom(value) {
-        this.zoomSubject.next(value);
+    async loadDocument(documentUrl) {
+        const loadingTask = this.createLoadingTask(documentUrl);
+        loadingTask.onProgress = ({ loaded, total }) => {
+            this.documentLoadProgress.next({ loaded, total });
+        };
+        this.documentLoadInit.next(documentUrl);
+        try {
+            const pdfDocument = await loadingTask.promise;
+            this.documentLoaded.next(pdfDocument);
+            this.toolbarEvents.pageCountSubject.next(pdfDocument.numPages);
+            this.pdfViewer.setDocument(pdfDocument);
+            if (this.pdfViewer.linkService instanceof PDFLinkService) {
+                const linkservice = this.pdfViewer.linkService;
+                linkservice.setDocument(pdfDocument, null);
+            }
+            const outlineNode = await pdfDocument.getOutline();
+            const outline = outlineNode ? 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
+                };
+            }) : null;
+            if (outline) {
+                await this.setOutlinePageNumbers(pdfDocument, outline);
+            }
+            this.documentOutline = outline;
+            this.outlineLoaded.next(this.documentOutline);
+            const pdfMetaData = await pdfDocument.getMetadata();
+            this.setCurrentPDFTitle(pdfMetaData.info?.Title);
+        }
+        catch (e) {
+            this.documentLoadFailed.next(e);
+        }
     }
-    stepZoom(value) {
-        this.stepZoomSubject.next(value);
+    createLoadingTask(documentUrl) {
+        return pdfjs.getDocument({
+            url: documentUrl,
+            cMapUrl: 'assets/minified/cmaps',
+            cMapPacked: true,
+            withCredentials: true,
+            isEvalSupported: false
+        });
     }
-    getZoomValue() {
-        return this.zoomValueSubject.asObservable();
+    async setOutlinePageNumbers(pdfDocument, outlineArray) {
+        outlineArray.forEach(async (outline) => {
+            await this.setNestedOutlinePageNumbers(pdfDocument, outline);
+        });
     }
-    getPageCount() {
-        return this.pageCountSubject.asObservable();
+    async setNestedOutlinePageNumbers(pdfDocument, outline) {
+        outline.pageNumber = await this.getOutlinePageNumber(pdfDocument, outline);
+        outline.items.forEach(async (outlineItem) => {
+            outlineItem.pageNumber = await this.getOutlinePageNumber(pdfDocument, outlineItem);
+            this.setNestedOutlinePageNumbers(pdfDocument, outlineItem);
+        });
     }
-    print() {
-        this.printSubject.next();
+    async getOutlinePageNumber(pdfDocument, outline) {
+        const dest = outline.dest;
+        const pageIndex = await pdfDocument.getPageIndex(dest[0]);
+        return Number(pageIndex) + 1;
     }
-    download() {
-        this.downloadSubject.next();
+    downloadFile(url, filename) {
+        this.downloadManager.download(null, url, filename);
     }
-    setPage(value) {
-        this.setCurrentPageSubject.next(value);
+    setPageNumber(pageNumber) {
+        this.pdfViewer.currentPageNumber = pageNumber;
     }
-    incrementPage(value) {
-        this.changePageByDeltaSubject.next(value);
+    getPageNumber() {
+        return this.pdfViewer.currentPageNumber;
     }
-    getCurrentPageNumber() {
-        return this.setCurrentPageInputValueSubject.asObservable();
+    changePageNumber(numPages) {
+        this.pdfViewer.currentPageNumber += numPages;
     }
-    getShowCommentSummary() {
-        return this.showCommentSummary.asObservable();
+    search(operation) {
+        const command = operation.reset ? '' : 'again';
+        const data = {
+            source: this.pdfViewer,
+            type: command,
+            query: operation.searchTerm,
+            phraseSearch: true,
+            caseSensitive: operation.matchCase,
+            entireWord: operation.wholeWord,
+            highlightAll: operation.highlightAll,
+            findPrevious: operation.previous,
+        };
+        this.pdfViewer.eventBus.dispatch('find', data);
     }
-    toggleCommentsSummary(value) {
-        this.showCommentSummary.next(value);
+    clearSearch() {
+        this.pdfViewer.eventBus.dispatch('findbarclose', {});
     }
-    saveRotation() {
-        this.saveRotationSubject.next();
+    navigateTo(destination) {
+        if (destination instanceof Object) {
+            if (!destination[1].name.includes('XYZ')) {
+                destination[1] = { name: 'XYZ' };
+                destination[2] = destination[2] || null;
+                destination[3] = destination[3] || null;
+            }
+            destination[4] = this.zoomValue;
+        }
+        this.nativeNavigate(destination);
     }
-    toggleGrabNDrag() {
-        this.grabNDrag.next(!this.grabNDrag.getValue());
+    nativeNavigate(destination) {
+        this.pdfViewer.linkService.goToDestination(destination);
     }
-    toggleSideBar(toggle) {
-        this.sidebarOpen.next(toggle);
+    setZoom(zoomValue) {
+        this.pdfViewer.currentScaleValue = this.getZoomValue(zoomValue).toString();
+        this.zoomValue = +this.pdfViewer.currentScaleValue;
+        this.toolbarEvents.zoomValueSubject.next(this.zoomValue);
     }
-    toggleSideBarView(toggle) {
-        this.sidebarOutlineView.next(toggle);
+    stepZoom(zoomValue) {
+        this.pdfViewer.currentScaleValue = this.getZoomValue((+this.pdfViewer.currentScaleValue) + zoomValue).toString();
+        this.zoomValue = +this.pdfViewer.currentScaleValue;
+        this.toolbarEvents.zoomValueSubject.next(this.zoomValue);
     }
-    toggleRedactionMode() {
-        if (this.redactionMode.getValue() === false) {
-            this.drawModeSubject.next(false);
-            this.grabNDrag.next(false);
-            this.redactionMode.next(true);
+    getZoomValue(zoomValue) {
+        if (isNaN(zoomValue)) {
+            return this.zoomValue;
         }
-        else {
-            this.redactionMode.next(false);
+        if (zoomValue > 5) {
+            return 5;
         }
-        this.openRedactionSearch.next({ modeType: SearchType.Redact, isOpen: false });
+        if (zoomValue < 0.1) {
+            return 0.1;
+        }
+        return +zoomValue.toFixed(2);
     }
-    toggleRedactionPreview(viewMode) {
-        this.redactionPreview.next(viewMode);
+    rotate(rotation) {
+        return this.pdfViewer.pagesRotation = (this.pdfViewer.pagesRotation + rotation) % 360;
     }
-    unmarkAll() {
-        this.clearAllRedactMarkers.next();
+    resetRotation(rotation) {
+        return this.pdfViewer.pagesRotation = rotation;
     }
-    applyRedactionToDocument() {
-        this.applyRedactToDocument.next();
+    getNormalisedPagesRotation() {
+        return this.pdfViewer.pagesRotation;
     }
-    redactPage() {
-        this.redactWholePage.next();
+    getCurrentPDFZoomValue() {
+        return +this.pdfViewer.currentScaleValue;
     }
-    toggleCommentsPanel(isVisible) {
-        if (isVisible) {
-            this.toggleParticipantsList(!isVisible);
-        }
-        this.commentsPanelVisible.next(isVisible);
+    setCurrentPDFTitle(title) {
+        this.documentTitle = title;
     }
-    toggleParticipantsList(isVisible) {
-        if (isVisible) {
-            this.toggleCommentsPanel(!isVisible);
-        }
-        this.icpEventService.participantsListVisible.next(isVisible);
+    getCurrentPDFTitle() {
+        return this.documentTitle;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToolbarEventService, deps: [{ token: IcpEventService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToolbarEventService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToolbarEventService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: IcpEventService }] });
 
 class PdfJsWrapperFactory {
     constructor(toolbarEvents) {
@@ -2046,56 +2451,25 @@ class PrintService {
     }
     printElementNatively(element, width, height) {
         const printWindow = window.open('', '', `left=0,top=0,width=${width},height=${height},toolbar=0,scrollbars=0,status=0`);
-        const documentHead = document.head;
-        printWindow.document.body.appendChild(documentHead.cloneNode(true));
-        printWindow.document.body.appendChild(element.cloneNode(true));
-        printWindow.document.close();
-        printWindow.focus();
-        printWindow.print();
-        setTimeout((printer) => {
-            printer.close();
-        }, 1000, printWindow);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrintService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrintService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class ViewerEventService {
-    constructor() {
-        this.textHighlight = new Subject();
-        this.boxHighlight = new Subject();
-        this.ctxToolbarCleared = new Subject();
-        this.navigationEvent = new Subject();
-        this.navigationEventICP = new Subject();
-    }
-    textSelected(selectionData) {
-        this.textHighlight.next(selectionData);
-    }
-    boxSelected(selectionData) {
-        this.boxHighlight.next(selectionData);
-    }
-    clearCtxToolbar() {
-        this.ctxToolbarCleared.next();
-    }
-    goToDestination(destination) {
-        this.navigationEvent.next(destination);
-    }
-    goToDestinationICP(destination) {
-        this.navigationEventICP.next(destination);
+        const documentHead = document.head;
+        printWindow.document.body.appendChild(documentHead.cloneNode(true));
+        printWindow.document.body.appendChild(element.cloneNode(true));
+        printWindow.document.close();
+        printWindow.focus();
+        printWindow.print();
+        setTimeout((printer) => {
+            printer.close();
+        }, 1000, printWindow);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewerEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewerEventService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrintService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrintService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewerEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PrintService, decorators: [{
             type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 const getIcpState = createSelector(getMVState, (state) => state.icp);
 const getIcpSession = createSelector(getIcpState, getIcpSession$1);
@@ -2428,7 +2802,7 @@ class IcpService {
         this.followerSubscriptions = followerSubscriptions;
         this.store = store;
         this.icpEventService = icpEventService;
-        this.subscription = this.store.pipe(select(getCaseId), filter(value => !!value)).subscribe(caseId => {
+        this.subscription = this.store.pipe(select(getCaseId), filter$1(value => !!value)).subscribe(caseId => {
             this.caseId = caseId;
         });
         this.subscription.add(this.store.pipe(select(getDocumentId)).subscribe(docId => this.documentId = docId));
@@ -2444,7 +2818,7 @@ class IcpService {
     }
     launchSession() {
         this.store.dispatch(new LoadIcpSession({ caseId: this.caseId, documentId: this.documentId }));
-        this.subscription.add(this.store.pipe(select(getIcpSession), filter(value => !!value && Object.keys(value).length > 1), take(1)).subscribe(() => { this.setUpSessionSubscriptions(); }));
+        this.subscription.add(this.store.pipe(select(getIcpSession), filter$1(value => !!value && Object.keys(value).length > 1), take(1)).subscribe(() => { this.setUpSessionSubscriptions(); }));
     }
     setUpSessionSubscriptions() {
         this.sessionSubscription = this.icpEventService.becomingPresenter.subscribe(() => this.becomePresenter());
@@ -2565,241 +2939,35 @@ const defaultPdfOptions = {
     showSearchBar: true,
     showSidebar: true,
     showGrabNDragButton: true,
-    showCommentSummary: true,
-    showPresentationMode: true,
-    showRedact: true
-};
-/**
- * Default toolbar state for the image viewer
- */
-const defaultImageOptions = {
-    showPrint: true,
-    showDownload: true,
-    showZoom: true,
-    showRotate: true,
-    showGrabNDragButton: true,
-    showCommentSummary: true,
-    showRedact: true
-};
-/**
- * Default toolbar state for multimedia
- */
-const defaultMultimediaOptions = {
-    showDownload: true
-};
-/**
- * Default toolbar state for unsupported media
- */
-const defaultUnsupportedOptions = {
-    showDownload: true,
-    showPrint: true
-};
-
-/**
- * Helper Class
- * Used for dynamic templates manipulation
- * */
-class HtmlTemplatesHelper {
-    static setDescribedBy(errorMessage, config) {
-        if (!errorMessage) {
-            return config.hint ? `${config.id}-hint` : null;
-        }
-        else if (errorMessage && errorMessage.isInvalid) {
-            return config.hint ? `${config.id}-hint ${config.id}-error` : `${config.id}-error`;
-        }
-        else {
-            return config.hint ? `${config.id}-hint` : null;
-        }
-    }
-    static getAdjustedBoundingRect(element, log = true) {
-        const viewportX = window.visualViewport.offsetLeft;
-        const viewportY = window.visualViewport.offsetTop;
-        const viewportScale = window.visualViewport.scale;
-        const viewportPageX = window.visualViewport.pageLeft;
-        const viewportPageY = window.visualViewport.pageTop;
-        if (log && viewportX || viewportY || (viewportScale != 1) || viewportPageX || viewportPageY) {
-            console.log(`Element: ${element.id} Viewport X: ${viewportX}, Y: ${viewportY}, Scale: ${viewportScale}, PageX: ${viewportPageX}, PageY: ${viewportPageY}`);
-        }
-        return element.getBoundingClientRect();
-    }
-}
-
-const getTagsRootState = createSelector(getMVState, (state) => state.tags);
-const getTagEntities = createSelector(getTagsRootState, getTagNameEnt);
-const getTagFilters = createSelector(getTagsRootState, getFilters);
-const getTagFiltered = createSelector(getTagsRootState, getFilteredComments);
-const getFilteredPageEntities = createSelector(getTagsRootState, getFilteredPageEnt);
-const getAllTagsArr = createSelector(getTagEntities, (tagEnt) => Object.keys(tagEnt).map(key => {
-    return {
-        key,
-        length: Object.keys(tagEnt[key]).length
-    };
-}));
-
-const getAnnotationsSetState = createSelector(getMVState, (state) => state.annotations);
-const getAnnotationEntities = createSelector(getAnnotationsSetState, getAnnoEnt);
-const getSet = createSelector(getAnnotationsSetState, getAnnoSet);
-const getDocumentIdSetId = createSelector(getSet, (annoSet) => {
-    return {
-        documentId: annoSet.documentId,
-        annotationSetId: annoSet.id
-    };
-});
-const getAnnotationSet = createSelector(getAnnotationEntities, getSet, (entities, set) => {
-    return {
-        ...set,
-        annotations: Object.keys(entities).map(key => entities[key])
-    };
-});
-const getSelectedAnnotation = createSelector(getAnnotationsSetState, getSelectedAnno);
-const getCommentEntities = createSelector(getAnnotationsSetState, getCommentEnts);
-const getPageEntities = createSelector(getAnnotationsSetState, getAnnoPageEnt);
-const getComponentSearchQueries = createSelector(getAnnotationsSetState, commentSearchQ);
-const getComponentSearchText = createSelector(getComponentSearchQueries, (queries) => queries.commentSearch);
-const getCommentSummaryFilters = createSelector(getAnnotationsSetState, getSummaryFilters);
-const getAnnoPerPage = createSelector(getPages, getPageEntities, getFilteredPageEntities, (pages, pageEnt, filteredPageEnt) => {
-    const isFiltered = !!Object.keys(filteredPageEnt).length;
-    const entities = isFiltered ? filteredPageEnt : pageEnt;
-    if (pages) {
-        const arr = [];
-        Object.keys(pages).forEach(key => {
-            arr.push({
-                anno: entities[key] ? entities[key] : [],
-                styles: pages[key].styles
-            });
-        });
-        return arr;
-    }
-});
-const getCommentsArray = createSelector(getCommentEntities, getPages, getAnnotationEntities, getTagFiltered, (commentEnts, pages, annoEnts, filtered) => {
-    if (commentEnts && annoEnts && pages[1]) {
-        const isFiltered = !!Object.keys(filtered).length;
-        const com = isFiltered ? filtered : commentEnts;
-        return Object.keys(com).map(key => {
-            const page = annoEnts[key].page;
-            return {
-                ...commentEnts[key],
-                page,
-                pages
-            };
-        });
-    }
-});
-const getCommentSummary = createSelector(getCommentsArray, getCommentSummaryFilters, (commentSummary = [], filters) => {
-    const comments = StoreUtils.filterCommentsSummary(commentSummary, filters.filters);
-    if (comments.length) {
-        const savedComments = comments.filter((comment) => {
-            return comment.createdByDetails !== undefined;
-        });
-        return savedComments.map((comment) => {
-            return {
-                page: comment.page,
-                user: comment.createdByDetails.forename.concat(' ').concat(comment.createdByDetails.surname),
-                date: moment(comment.lastModifiedDate).format('D MMMM YYYY'),
-                tags: comment.tags,
-                comment: comment.content
-            };
-        });
-    }
-    return [''];
-});
-const getFilteredAnnotations = createSelector(getAnnotationEntities, getTagFiltered, (annoEnt, filters) => {
-    const isFiltered = !!Object.keys(filters).length;
-    const anno = isFiltered ? filters : annoEnt;
-    return Object.keys(anno).map(key => annoEnt[key])
-        .filter(annotation => annotation.comments && annotation.comments.length > 0);
-});
-
-class HighlightCreateService {
-    constructor(toolBarEvents, store) {
-        this.toolBarEvents = toolBarEvents;
-        this.store = store;
-    }
-    saveAnnotation(rectangles, page) {
-        this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
-            const anno = {
-                id: v4(),
-                color: 'FFFF00',
-                comments: [],
-                page: page,
-                rectangles: rectangles,
-                type: 'highlight',
-                ...anoSetDocId,
-                createdBy: '',
-                createdByDetails: undefined,
-                createdDate: moment.utc().tz('Europe/London').toISOString(),
-                lastModifiedBy: '',
-                lastModifiedByDetails: undefined,
-                lastModifiedDate: '',
-                tags: [],
-            };
-            this.store.dispatch(new SaveAnnotation(anno));
-        });
-    }
-    saveAnnotationSet(searchRectangles) {
-        this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
-            const annoSet = searchRectangles.map(x => {
-                return {
-                    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),
-            y: +(offsetTop / zoom).toFixed(2),
-            width: +(offsetWidth / zoom).toFixed(2),
-            height: +(offsetHeight / zoom).toFixed(2)
-        };
-        const rectangle = { x, y, width, height };
-        switch (rotate) {
-            case 90:
-                rectangle.width = height;
-                rectangle.height = width;
-                rectangle.x = y;
-                rectangle.y = +(pageWidth / zoom - x - width).toFixed(2);
-                break;
-            case 180:
-                rectangle.x = +(pageWidth / zoom - x - width).toFixed(2);
-                rectangle.y = +(pageHeight / zoom - y - height).toFixed(2);
-                break;
-            case 270:
-                rectangle.width = height;
-                rectangle.height = width;
-                rectangle.x = +(pageHeight / zoom - y - height).toFixed(2);
-                rectangle.y = x;
-                break;
-        }
-        return rectangle;
-    }
-    resetHighlight() {
-        window.getSelection().removeAllRanges();
-        this.toolBarEvents.highlightModeSubject.next(false);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateService, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: i1.Store }] });
+    showCommentSummary: true,
+    showPresentationMode: true,
+    showRedact: true
+};
+/**
+ * Default toolbar state for the image viewer
+ */
+const defaultImageOptions = {
+    showPrint: true,
+    showDownload: true,
+    showZoom: true,
+    showRotate: true,
+    showGrabNDragButton: true,
+    showCommentSummary: true,
+    showRedact: true
+};
+/**
+ * Default toolbar state for multimedia
+ */
+const defaultMultimediaOptions = {
+    showDownload: true
+};
+/**
+ * Default toolbar state for unsupported media
+ */
+const defaultUnsupportedOptions = {
+    showDownload: true,
+    showPrint: true
+};
 
 class RedactionSearchBarComponent {
     constructor(store, toolbarButtons, toolbarEvents, highlightService) {
@@ -3889,6 +4057,148 @@ const getBookmarksPerPage = createSelector(getPages, getBookmarkPages, (pages, p
     }
 });
 
+class CtxToolbarComponent {
+    constructor() {
+        this.createHighlightEvent = new EventEmitter();
+        this.deleteHighlightEvent = new EventEmitter();
+        this.addOrEditCommentEvent = new EventEmitter();
+        this.createBookmarkEvent = new EventEmitter();
+        this.cancelEvent = new EventEmitter();
+        this.defaultHeight = 70;
+        this.defaultWidth = 300;
+    }
+    ngOnChanges(changes) {
+        this.setRectangle();
+        this.top = this.popupTop();
+        this.left = this.popupLeft();
+    }
+    onEscapeKey(event) {
+        if (this.rectangle) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.rectangle = undefined;
+            this.cancelEvent.emit();
+        }
+    }
+    set rectangles(rectangles) {
+        if (rectangles) {
+            this._rectangles = rectangles;
+            this.setRectangle();
+        }
+    }
+    get rectangles() {
+        return this._rectangles;
+    }
+    createHighlight() {
+        this.createHighlightEvent.emit();
+        this.rectangle = undefined;
+    }
+    deleteHighlight() {
+        this.deleteHighlightEvent.emit();
+    }
+    addOrEditComment() {
+        this.addOrEditCommentEvent.emit();
+        setTimeout(() => {
+            // This hack to wait until the element is rendered seems to be unreliable,
+            if (!location.hash) {
+                document.getElementById('viewerContainer')?.scrollBy(0, 1);
+            }
+        }, 20);
+    }
+    createBookmark() {
+        this.createBookmarkEvent.emit(this.rectangle);
+        this.rectangle = undefined;
+    }
+    setRectangle() {
+        const rectangle = this.rectangles
+            .reduce((prev, current) => prev.y < current.y ? prev : current);
+        this.rectangle = { ...rectangle };
+        switch (this.rotate) {
+            case 90:
+                this.rectangle.width = rectangle.height;
+                this.rectangle.height = rectangle.width;
+                this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.y - rectangle.height;
+                this.rectangle.y = rectangle.x;
+                break;
+            case 180:
+                this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.x - rectangle.width;
+                this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.y - rectangle.height;
+                break;
+            case 270:
+                this.rectangle.width = rectangle.height;
+                this.rectangle.height = rectangle.width;
+                this.rectangle.x = rectangle.y;
+                this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.x - rectangle.width;
+                break;
+        }
+    }
+    popupTop() {
+        const popupTop = this.rectangle.y * this.zoom - this.defaultHeight;
+        return popupTop <= 0 ? this.defaultHeight : popupTop;
+    }
+    popupLeft() {
+        const popupLeft = (this.rectangle.x + (this.rectangle.width / 2)) * this.zoom - (this.defaultWidth / 2);
+        if (popupLeft <= 0) {
+            return 0;
+        }
+        else if (popupLeft >= this.pageWidth - this.defaultWidth) {
+            return this.pageWidth - this.defaultWidth;
+        }
+        else {
+            return popupLeft;
+        }
+    }
+    focusToolbar() {
+        if (this.toolbarContainer?.nativeElement) {
+            const firstButton = this.toolbarContainer.nativeElement.querySelector('button');
+            if (firstButton) {
+                setTimeout(() => firstButton.focus(), 0);
+                return;
+            }
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CtxToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: { zoom: "zoom", rotate: "rotate", pageHeight: "pageHeight", pageWidth: "pageWidth", canHighlight: "canHighlight", canBookmark: "canBookmark", canComment: "canComment", canDelete: "canDelete", rectangles: "rectangles" }, outputs: { createHighlightEvent: "createHighlightEvent", deleteHighlightEvent: "deleteHighlightEvent", addOrEditCommentEvent: "addOrEditCommentEvent", createBookmarkEvent: "createBookmarkEvent", cancelEvent: "cancelEvent" }, host: { listeners: { "document:keydown.escape": "onEscapeKey($event)" } }, viewQueries: [{ propertyName: "toolbarContainer", first: true, predicate: ["toolbarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #toolbarContainer class=\"toolbar\" *ngIf=\"rectangle\"\n     [style.top.px]=\"top\"\n     [style.left.px]=\"left\">\n  <button *ngIf=\"canHighlight\"\n          type=\"button\" title=\"Highlight\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight\"\n          (mousedown)=\"createHighlight()\"\n          (keydown.enter)=\"createHighlight()\">\n    <span>Highlight</span>\n  </button>\n  <button *ngIf=\"canDelete\"\n          type=\"button\" title=\"Delete\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton\"\n          (mousedown)=\"deleteHighlight()\"\n          (keydown.enter)=\"deleteHighlight()\">\n    <span>Remove</span>\n  </button>\n  <button *ngIf=\"canComment\"\n          type=\"button\" title=\"Comment\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment\"\n          (mousedown)=\"addOrEditComment()\"\n          (keydown.enter)=\"addOrEditComment()\">\n    <span>Comment</span></button>\n  <button *ngIf=\"canBookmark\"\n          type=\"button\" title=\"Bookmark\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark\"\n          id=\"bookmarkButton\"\n          (mousedown)=\"createBookmark()\"\n          (keydown.enter)=\"createBookmark()\">\n    <span>Bookmark</span></button>\n  <div class=\"arrow-down\">\n    <div class=\"inner-triangle\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CtxToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mv-ctx-toolbar', template: "<div #toolbarContainer class=\"toolbar\" *ngIf=\"rectangle\"\n     [style.top.px]=\"top\"\n     [style.left.px]=\"left\">\n  <button *ngIf=\"canHighlight\"\n          type=\"button\" title=\"Highlight\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight\"\n          (mousedown)=\"createHighlight()\"\n          (keydown.enter)=\"createHighlight()\">\n    <span>Highlight</span>\n  </button>\n  <button *ngIf=\"canDelete\"\n          type=\"button\" title=\"Delete\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton\"\n          (mousedown)=\"deleteHighlight()\"\n          (keydown.enter)=\"deleteHighlight()\">\n    <span>Remove</span>\n  </button>\n  <button *ngIf=\"canComment\"\n          type=\"button\" title=\"Comment\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment\"\n          (mousedown)=\"addOrEditComment()\"\n          (keydown.enter)=\"addOrEditComment()\">\n    <span>Comment</span></button>\n  <button *ngIf=\"canBookmark\"\n          type=\"button\" title=\"Bookmark\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark\"\n          id=\"bookmarkButton\"\n          (mousedown)=\"createBookmark()\"\n          (keydown.enter)=\"createBookmark()\">\n    <span>Bookmark</span></button>\n  <div class=\"arrow-down\">\n    <div class=\"inner-triangle\"></div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { toolbarContainer: [{
+                type: ViewChild,
+                args: ['toolbarContainer', { static: false }]
+            }], zoom: [{
+                type: Input
+            }], rotate: [{
+                type: Input
+            }], pageHeight: [{
+                type: Input
+            }], pageWidth: [{
+                type: Input
+            }], canHighlight: [{
+                type: Input
+            }], canBookmark: [{
+                type: Input
+            }], canComment: [{
+                type: Input
+            }], canDelete: [{
+                type: Input
+            }], createHighlightEvent: [{
+                type: Output
+            }], deleteHighlightEvent: [{
+                type: Output
+            }], addOrEditCommentEvent: [{
+                type: Output
+            }], createBookmarkEvent: [{
+                type: Output
+            }], cancelEvent: [{
+                type: Output
+            }], onEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }], rectangles: [{
+                type: Input
+            }] } });
+
 class BoxHighlightCreateComponent {
     constructor(toolbarEvents, highlightService) {
         this.toolbarEvents = toolbarEvents;
@@ -4071,163 +4381,47 @@ class RectangleComponent {
                 this.top = this.pageHeight - top - height;
                 break;
             case 270:
-                this.width = height;
-                this.height = width;
-                this.left = top;
-                this.top = this.pageHeight - left - width;
-                break;
-        }
-    }
-    hasRectangleChanged(viewRect) {
-        return Math.round(this.left) !== viewRect.offsetLeft ||
-            Math.round(this.top) !== viewRect.offsetTop ||
-            Math.round(this.width) !== viewRect.offsetWidth ||
-            Math.round(this.height) !== viewRect.offsetHeight;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RectangleComponent, deps: [{ token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RectangleComponent, selector: "mv-anno-rectangle", inputs: { color: "color", zoom: "zoom", rotate: "rotate", editable: "editable", pageHeight: "pageHeight", pageWidth: "pageWidth", annoRect: "annoRect", selected: "selected" }, outputs: { selectEvent: "selectEvent", updateEvent: "updateEvent" }, viewQueries: [{ propertyName: "viewRect", first: true, predicate: ["rectElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"editable; else nonEditable\">\n  <div #rectElement\n       class=\"rectangle\"\n       draggable\n       resizable\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected, 'grabNDrag': enableGrabNDrag }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height + 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       [rotate]=\"0\"\n       [selected]=\"selected\"\n       (click)=\"onClick()\"\n       (stopped)=\"onUpdate(rectElement)\">\n  </div>\n</div>\n<ng-template #nonEditable>\n  <div #rectElement\n       class=\"rectangle\"\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height+ 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       (click)=\"onClick()\">\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.DraggableElementDirective, selector: "[draggable]", inputs: ["rotate"], outputs: ["coordinates", "stopped"] }, { kind: "directive", type: i4$1.ResizableElementDirective, selector: "[resizable]", inputs: ["rotate", "selected"], outputs: ["stopped"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RectangleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mv-anno-rectangle', template: "<div *ngIf=\"editable; else nonEditable\">\n  <div #rectElement\n       class=\"rectangle\"\n       draggable\n       resizable\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected, 'grabNDrag': enableGrabNDrag }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height + 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       [rotate]=\"0\"\n       [selected]=\"selected\"\n       (click)=\"onClick()\"\n       (stopped)=\"onUpdate(rectElement)\">\n  </div>\n</div>\n<ng-template #nonEditable>\n  <div #rectElement\n       class=\"rectangle\"\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height+ 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       (click)=\"onClick()\">\n  </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: HighlightCreateService }], propDecorators: { color: [{
-                type: Input
-            }], zoom: [{
-                type: Input
-            }], rotate: [{
-                type: Input
-            }], editable: [{
-                type: Input
-            }], pageHeight: [{
-                type: Input
-            }], pageWidth: [{
-                type: Input
-            }], selectEvent: [{
-                type: Output
-            }], updateEvent: [{
-                type: Output
-            }], viewRect: [{
-                type: ViewChild,
-                args: ['rectElement', { static: false }]
-            }], annoRect: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }] } });
-
-class CtxToolbarComponent {
-    constructor() {
-        this.createHighlightEvent = new EventEmitter();
-        this.deleteHighlightEvent = new EventEmitter();
-        this.addOrEditCommentEvent = new EventEmitter();
-        this.createBookmarkEvent = new EventEmitter();
-        this.defaultHeight = 70;
-        this.defaultWidth = 300;
-    }
-    ngOnChanges(changes) {
-        this.setRectangle();
-        this.top = this.popupTop();
-        this.left = this.popupLeft();
-    }
-    set rectangles(rectangles) {
-        if (rectangles) {
-            this._rectangles = rectangles;
-            this.setRectangle();
-        }
-    }
-    get rectangles() {
-        return this._rectangles;
-    }
-    createHighlight() {
-        this.createHighlightEvent.emit();
-        this.rectangle = undefined;
-    }
-    deleteHighlight() {
-        this.deleteHighlightEvent.emit();
-    }
-    addOrEditComment() {
-        this.addOrEditCommentEvent.emit();
-        setTimeout(() => {
-            // This hack to wait until the element is rendered seems to be unreliable,
-            if (!location.hash) {
-                document.getElementById('viewerContainer')?.scrollBy(0, 1);
-            }
-        }, 20);
-    }
-    createBookmark() {
-        this.createBookmarkEvent.emit(this.rectangle);
-        this.rectangle = undefined;
-    }
-    setRectangle() {
-        const rectangle = this.rectangles
-            .reduce((prev, current) => prev.y < current.y ? prev : current);
-        this.rectangle = { ...rectangle };
-        switch (this.rotate) {
-            case 90:
-                this.rectangle.width = rectangle.height;
-                this.rectangle.height = rectangle.width;
-                this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.y - rectangle.height;
-                this.rectangle.y = rectangle.x;
-                break;
-            case 180:
-                this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.x - rectangle.width;
-                this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.y - rectangle.height;
-                break;
-            case 270:
-                this.rectangle.width = rectangle.height;
-                this.rectangle.height = rectangle.width;
-                this.rectangle.x = rectangle.y;
-                this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.x - rectangle.width;
+                this.width = height;
+                this.height = width;
+                this.left = top;
+                this.top = this.pageHeight - left - width;
                 break;
         }
     }
-    popupTop() {
-        const popupTop = this.rectangle.y * this.zoom - this.defaultHeight;
-        return popupTop <= 0 ? this.defaultHeight : popupTop;
-    }
-    popupLeft() {
-        const popupLeft = (this.rectangle.x + (this.rectangle.width / 2)) * this.zoom - (this.defaultWidth / 2);
-        if (popupLeft <= 0) {
-            return 0;
-        }
-        else if (popupLeft >= this.pageWidth - this.defaultWidth) {
-            return this.pageWidth - this.defaultWidth;
-        }
-        else {
-            return popupLeft;
-        }
+    hasRectangleChanged(viewRect) {
+        return Math.round(this.left) !== viewRect.offsetLeft ||
+            Math.round(this.top) !== viewRect.offsetTop ||
+            Math.round(this.width) !== viewRect.offsetWidth ||
+            Math.round(this.height) !== viewRect.offsetHeight;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CtxToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: { zoom: "zoom", rotate: "rotate", pageHeight: "pageHeight", pageWidth: "pageWidth", canHighlight: "canHighlight", canBookmark: "canBookmark", canComment: "canComment", canDelete: "canDelete", rectangles: "rectangles" }, outputs: { createHighlightEvent: "createHighlightEvent", deleteHighlightEvent: "deleteHighlightEvent", addOrEditCommentEvent: "addOrEditCommentEvent", createBookmarkEvent: "createBookmarkEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbar\" *ngIf=\"rectangle\"\n     [style.top.px]=\"top\"\n     [style.left.px]=\"left\">\n  <button *ngIf=\"canHighlight\"\n          type=\"button\" title=\"Highlight\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight\"\n          (mousedown)=\"createHighlight()\">\n    <span>Highlight</span>\n  </button>\n  <button *ngIf=\"canDelete\"\n          type=\"button\" title=\"Delete\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton\"\n          (mousedown)=\"deleteHighlight()\">\n    <span>Remove</span>\n  </button>\n  <button *ngIf=\"canComment\"\n          type=\"button\" title=\"Comment\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment\"\n          (mousedown)=\"addOrEditComment()\">\n    <span>Comment</span></button>\n  <button *ngIf=\"canBookmark\"\n          type=\"button\" title=\"Bookmark\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark\"\n          id=\"bookmarkButton\"\n          (mousedown)=\"createBookmark()\">\n    <span>Bookmark</span></button>\n  <div class=\"arrow-down\">\n    <div class=\"inner-triangle\"></div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RectangleComponent, deps: [{ token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RectangleComponent, selector: "mv-anno-rectangle", inputs: { color: "color", zoom: "zoom", rotate: "rotate", editable: "editable", pageHeight: "pageHeight", pageWidth: "pageWidth", annoRect: "annoRect", selected: "selected" }, outputs: { selectEvent: "selectEvent", updateEvent: "updateEvent" }, viewQueries: [{ propertyName: "viewRect", first: true, predicate: ["rectElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"editable; else nonEditable\">\n  <div #rectElement\n       class=\"rectangle\"\n       draggable\n       resizable\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected, 'grabNDrag': enableGrabNDrag }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height + 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       [rotate]=\"0\"\n       [selected]=\"selected\"\n       (click)=\"onClick()\"\n       (stopped)=\"onUpdate(rectElement)\">\n  </div>\n</div>\n<ng-template #nonEditable>\n  <div #rectElement\n       class=\"rectangle\"\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height+ 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       (click)=\"onClick()\">\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.DraggableElementDirective, selector: "[draggable]", inputs: ["rotate"], outputs: ["coordinates", "stopped"] }, { kind: "directive", type: i4$1.ResizableElementDirective, selector: "[resizable]", inputs: ["rotate", "selected"], outputs: ["stopped"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CtxToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RectangleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-ctx-toolbar', template: "<div class=\"toolbar\" *ngIf=\"rectangle\"\n     [style.top.px]=\"top\"\n     [style.left.px]=\"left\">\n  <button *ngIf=\"canHighlight\"\n          type=\"button\" title=\"Highlight\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight\"\n          (mousedown)=\"createHighlight()\">\n    <span>Highlight</span>\n  </button>\n  <button *ngIf=\"canDelete\"\n          type=\"button\" title=\"Delete\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton\"\n          (mousedown)=\"deleteHighlight()\">\n    <span>Remove</span>\n  </button>\n  <button *ngIf=\"canComment\"\n          type=\"button\" title=\"Comment\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment\"\n          (mousedown)=\"addOrEditComment()\">\n    <span>Comment</span></button>\n  <button *ngIf=\"canBookmark\"\n          type=\"button\" title=\"Bookmark\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark\"\n          id=\"bookmarkButton\"\n          (mousedown)=\"createBookmark()\">\n    <span>Bookmark</span></button>\n  <div class=\"arrow-down\">\n    <div class=\"inner-triangle\"></div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [], propDecorators: { zoom: [{
+            args: [{ selector: 'mv-anno-rectangle', template: "<div *ngIf=\"editable; else nonEditable\">\n  <div #rectElement\n       class=\"rectangle\"\n       draggable\n       resizable\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected, 'grabNDrag': enableGrabNDrag }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height + 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       [rotate]=\"0\"\n       [selected]=\"selected\"\n       (click)=\"onClick()\"\n       (stopped)=\"onUpdate(rectElement)\">\n  </div>\n</div>\n<ng-template #nonEditable>\n  <div #rectElement\n       class=\"rectangle\"\n       [tabindex]=\"annoRect.id\"\n       [ngClass]=\"{ 'selected': selected }\"\n       [style.backgroundColor]=\"'#' + color\"\n       [style.width]=\"width + 'px'\"\n       [style.height]=\"height+ 'px'\"\n       [style.left]=\"left + 'px'\"\n       [style.top]=\"top + 'px'\"\n       (click)=\"onClick()\">\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [{ type: ToolbarEventService }, { type: HighlightCreateService }], propDecorators: { color: [{
+                type: Input
+            }], zoom: [{
                 type: Input
             }], rotate: [{
                 type: Input
+            }], editable: [{
+                type: Input
             }], pageHeight: [{
                 type: Input
             }], pageWidth: [{
                 type: Input
-            }], canHighlight: [{
-                type: Input
-            }], canBookmark: [{
-                type: Input
-            }], canComment: [{
-                type: Input
-            }], canDelete: [{
-                type: Input
-            }], createHighlightEvent: [{
-                type: Output
-            }], deleteHighlightEvent: [{
-                type: Output
-            }], addOrEditCommentEvent: [{
+            }], selectEvent: [{
                 type: Output
-            }], createBookmarkEvent: [{
+            }], updateEvent: [{
                 type: Output
-            }], rectangles: [{
+            }], viewRect: [{
+                type: ViewChild,
+                args: ['rectElement', { static: false }]
+            }], annoRect: [{
+                type: Input
+            }], selected: [{
                 type: Input
             }] } });
 
@@ -4287,7 +4481,7 @@ class AnnotationViewComponent {
         this.toolbarEvents.toggleCommentsPanel(true);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnotationViewComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AnnotationViewComponent, selector: "mv-annotation", inputs: { annotation: "annotation", zoom: "zoom", rotate: "rotate", selectedAnnoId: "selectedAnnoId", pageHeight: "pageHeight", pageWidth: "pageWidth" }, outputs: { update: "update", delete: "delete", annotationClick: "annotationClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container [tabindex]=\"anno.id\">\n  <mv-ctx-toolbar *ngIf=\"selected\"\n                  [canDelete]=\"true\" [canComment]=\"true\"\n                  [rectangles]=\"anno.rectangles\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotate\"\n                  [pageHeight]=\"pageHeight\"\n                  [pageWidth]=\"pageWidth\"\n                  (deleteHighlightEvent)=\"deleteHighlight()\"\n                  (addOrEditCommentEvent)=\"addOrEditComment()\">\n  </mv-ctx-toolbar>\n  <ng-container *ngFor=\"let rectangle of anno.rectangles\">\n    <mv-anno-rectangle\n      (selectEvent)=\"onSelect()\"\n      (updateEvent)=\"onRectangleUpdate($event)\"\n      [selected]=\"selected\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotate\"\n      [pageHeight]=\"pageHeight\"\n      [pageWidth]=\"pageWidth\"\n      [editable]=\"anno.rectangles.length <= 1\"\n      [annoRect]=\"rectangle\"\n      [color]=\"anno.color\">\n    </mv-anno-rectangle>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RectangleComponent, selector: "mv-anno-rectangle", inputs: ["color", "zoom", "rotate", "editable", "pageHeight", "pageWidth", "annoRect", "selected"], outputs: ["selectEvent", "updateEvent"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AnnotationViewComponent, selector: "mv-annotation", inputs: { annotation: "annotation", zoom: "zoom", rotate: "rotate", selectedAnnoId: "selectedAnnoId", pageHeight: "pageHeight", pageWidth: "pageWidth" }, outputs: { update: "update", delete: "delete", annotationClick: "annotationClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container [tabindex]=\"anno.id\">\n  <mv-ctx-toolbar *ngIf=\"selected\"\n                  [canDelete]=\"true\" [canComment]=\"true\"\n                  [rectangles]=\"anno.rectangles\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotate\"\n                  [pageHeight]=\"pageHeight\"\n                  [pageWidth]=\"pageWidth\"\n                  (deleteHighlightEvent)=\"deleteHighlight()\"\n                  (addOrEditCommentEvent)=\"addOrEditComment()\">\n  </mv-ctx-toolbar>\n  <ng-container *ngFor=\"let rectangle of anno.rectangles\">\n    <mv-anno-rectangle\n      (selectEvent)=\"onSelect()\"\n      (updateEvent)=\"onRectangleUpdate($event)\"\n      [selected]=\"selected\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotate\"\n      [pageHeight]=\"pageHeight\"\n      [pageWidth]=\"pageWidth\"\n      [editable]=\"anno.rectangles.length <= 1\"\n      [annoRect]=\"rectangle\"\n      [color]=\"anno.color\">\n    </mv-anno-rectangle>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RectangleComponent, selector: "mv-anno-rectangle", inputs: ["color", "zoom", "rotate", "editable", "pageHeight", "pageWidth", "annoRect", "selected"], outputs: ["selectEvent", "updateEvent"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent", "cancelEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnotationViewComponent, decorators: [{
             type: Component,
@@ -4381,11 +4575,20 @@ class MetadataLayerComponent {
         this.rectangles = highlight.rectangles;
         if (this.rectangles) {
             this.toolbarEvents.highlightModeSubject.next(false);
+            setTimeout(() => this.ctxToolbar.focusToolbar(), 0);
         }
     }
     clearContextToolbar() {
         this.rectangles = undefined;
     }
+    cancelContextToolbar() {
+        const selection = window.getSelection();
+        if (selection) {
+            selection.removeAllRanges();
+        }
+        this.rectangles = undefined;
+        this.toolbarEvents.highlightModeSubject.next(true);
+    }
     createHighlight() {
         this.highlightService.saveAnnotation(this.rectangles, this.highlightPage);
         this.highlightService.resetHighlight();
@@ -4414,15 +4617,18 @@ class MetadataLayerComponent {
         this.toolbarEvents.drawModeSubject.next(false);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataLayerComponent, deps: [{ token: i1.Store }, { token: HighlightCreateService }, { token: ToolbarEventService }, { token: ViewerEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: { zoom: "zoom", rotate: "rotate" }, ngImport: i0, template: "<div class=\"pageContainer\">\n  <div  *ngFor=\"let page of pages;  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': page.styles.width,\n       'height.px': page.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"page.styles.height\"\n      [pageWidth]=\"page.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"saveAnnotation($event)\">\n    </mv-box-highlight-create>\n    <mv-ctx-toolbar *ngIf=\"rectangles && highlightPage === (i + 1)\"\n                    [rectangles]=\"rectangles\"\n                    [canBookmark]=\"true\" [canHighlight]=\"true\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotate\"\n                    [pageHeight]=\"page.styles.height\"\n                    [pageWidth]=\"page.styles.width\"\n                    (createBookmarkEvent)=\"createBookmark($event)\"\n                    (createHighlightEvent)=\"createHighlight()\">\n    </mv-ctx-toolbar>\n    <div class=\"pageContainer__page-item\">\n      <mv-annotation-set *ngIf=\"(annoPages$ | async) as annoPages\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotate\"\n                         [pageHeight]=\"page.styles.height\"\n                         [pageWidth]=\"page.styles.width\"\n                         [page]=\"i\" [annotations]=\"annoPages[i + 1]\"></mv-annotation-set>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: BoxHighlightCreateComponent, selector: "mv-box-highlight-create", inputs: ["page", "pageHeight", "pageWidth", "rotate", "zoom", "container"], outputs: ["saveSelection"] }, { kind: "component", type: AnnotationSetComponent, selector: "mv-annotation-set", inputs: ["page", "annotations", "zoom", "rotate", "pageHeight", "pageWidth"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: { zoom: "zoom", rotate: "rotate" }, viewQueries: [{ propertyName: "ctxToolbar", first: true, predicate: CtxToolbarComponent, descendants: true }], ngImport: i0, template: "<div class=\"pageContainer\">\n  <div  *ngFor=\"let page of pages;  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': page.styles.width,\n       'height.px': page.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"page.styles.height\"\n      [pageWidth]=\"page.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"saveAnnotation($event)\">\n    </mv-box-highlight-create>\n    <mv-ctx-toolbar *ngIf=\"rectangles && highlightPage === (i + 1)\"\n                    [rectangles]=\"rectangles\"\n                    [canBookmark]=\"true\" [canHighlight]=\"true\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotate\"\n                    [pageHeight]=\"page.styles.height\"\n                    [pageWidth]=\"page.styles.width\"\n                    (createBookmarkEvent)=\"createBookmark($event)\"\n                    (createHighlightEvent)=\"createHighlight()\"\n                    (cancelEvent)=\"cancelContextToolbar()\">\n    </mv-ctx-toolbar>\n    <div class=\"pageContainer__page-item\">\n      <mv-annotation-set *ngIf=\"(annoPages$ | async) as annoPages\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotate\"\n                         [pageHeight]=\"page.styles.height\"\n                         [pageWidth]=\"page.styles.width\"\n                         [page]=\"i\" [annotations]=\"annoPages[i + 1]\"></mv-annotation-set>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: BoxHighlightCreateComponent, selector: "mv-box-highlight-create", inputs: ["page", "pageHeight", "pageWidth", "rotate", "zoom", "container"], outputs: ["saveSelection"] }, { kind: "component", type: AnnotationSetComponent, selector: "mv-annotation-set", inputs: ["page", "annotations", "zoom", "rotate", "pageHeight", "pageWidth"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent", "cancelEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MetadataLayerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-metadata-layer', template: "<div class=\"pageContainer\">\n  <div  *ngFor=\"let page of pages;  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': page.styles.width,\n       'height.px': page.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"page.styles.height\"\n      [pageWidth]=\"page.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"saveAnnotation($event)\">\n    </mv-box-highlight-create>\n    <mv-ctx-toolbar *ngIf=\"rectangles && highlightPage === (i + 1)\"\n                    [rectangles]=\"rectangles\"\n                    [canBookmark]=\"true\" [canHighlight]=\"true\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotate\"\n                    [pageHeight]=\"page.styles.height\"\n                    [pageWidth]=\"page.styles.width\"\n                    (createBookmarkEvent)=\"createBookmark($event)\"\n                    (createHighlightEvent)=\"createHighlight()\">\n    </mv-ctx-toolbar>\n    <div class=\"pageContainer__page-item\">\n      <mv-annotation-set *ngIf=\"(annoPages$ | async) as annoPages\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotate\"\n                         [pageHeight]=\"page.styles.height\"\n                         [pageWidth]=\"page.styles.width\"\n                         [page]=\"i\" [annotations]=\"annoPages[i + 1]\"></mv-annotation-set>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mv-metadata-layer', template: "<div class=\"pageContainer\">\n  <div  *ngFor=\"let page of pages;  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': page.styles.width,\n       'height.px': page.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"page.styles.height\"\n      [pageWidth]=\"page.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"saveAnnotation($event)\">\n    </mv-box-highlight-create>\n    <mv-ctx-toolbar *ngIf=\"rectangles && highlightPage === (i + 1)\"\n                    [rectangles]=\"rectangles\"\n                    [canBookmark]=\"true\" [canHighlight]=\"true\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotate\"\n                    [pageHeight]=\"page.styles.height\"\n                    [pageWidth]=\"page.styles.width\"\n                    (createBookmarkEvent)=\"createBookmark($event)\"\n                    (createHighlightEvent)=\"createHighlight()\"\n                    (cancelEvent)=\"cancelContextToolbar()\">\n    </mv-ctx-toolbar>\n    <div class=\"pageContainer__page-item\">\n      <mv-annotation-set *ngIf=\"(annoPages$ | async) as annoPages\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotate\"\n                         [pageHeight]=\"page.styles.height\"\n                         [pageWidth]=\"page.styles.width\"\n                         [page]=\"i\" [annotations]=\"annoPages[i + 1]\"></mv-annotation-set>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: HighlightCreateService }, { type: ToolbarEventService }, { type: ViewerEventService }], propDecorators: { zoom: [{
                 type: Input
             }], rotate: [{
                 type: Input
+            }], ctxToolbar: [{
+                type: ViewChild,
+                args: [CtxToolbarComponent, { static: false }]
             }] } });
 
 class BookmarksComponent {
@@ -4975,114 +5181,356 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['window:pointerup']
             }] } });
 
-class HighlightCreateDirective {
-    constructor(element, toolbarEvents, viewerEvents, highlightService, store) {
-        this.element = element;
-        this.toolbarEvents = toolbarEvents;
-        this.viewerEvents = viewerEvents;
-        this.highlightService = highlightService;
-        this.store = store;
+class KeyboardTextHighlightDirective {
+    set enabled(value) {
+        const wasEnabled = this._enabled;
+        this._enabled = value;
+        // Don't auto-initialize cursor - let it appear on first arrow key press
+        // This prevents the Enter key from the button click triggering startTextSelection
+    }
+    get enabled() {
+        return this._enabled;
+    }
+    static { this.lastInteractionWasKeyboard = false; }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this._enabled = false;
+        this.incrementSmall = 5;
+        this.incrementMedium = 10;
+        this.incrementLarge = 20;
+        this.selectionStarted = new EventEmitter();
+        this.selectionUpdated = new EventEmitter();
+        this.selectionConfirmed = new EventEmitter();
+        this.selectionCancelled = new EventEmitter();
+        this.cursorPositionChanged = new EventEmitter();
+        this.selectionCursorPositionChanged = new EventEmitter();
+        this.isSelecting = false;
+        this.showCursor = false;
+        this.lastValidEndNode = null;
+        this.lastValidEndOffset = 0;
+        if (typeof window !== 'undefined') {
+            window.addEventListener('keydown', KeyboardTextHighlightDirective.onGlobalKeyDown, { capture: true });
+            window.addEventListener('mousedown', KeyboardTextHighlightDirective.onGlobalMouseDown, { capture: true });
+        }
+    }
+    static onGlobalKeyDown() {
+        KeyboardTextHighlightDirective.lastInteractionWasKeyboard = true;
+    }
+    static onGlobalMouseDown() {
+        KeyboardTextHighlightDirective.lastInteractionWasKeyboard = false;
     }
-    ngOnInit() {
-        this.$subscription = this.store.select(getPages).subscribe((pages) => {
-            if (pages[1]) {
-                this.allPages = pages;
+    ngOnDestroy() {
+        this.cleanup();
+    }
+    onKeyDown(event) {
+        if (!this.enabled) {
+            return;
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (!this.isSelecting) {
+                this.startTextSelection();
             }
-        });
+            else {
+                this.confirmTextSelection();
+            }
+            return;
+        }
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.isSelecting) {
+                this.cancelTextSelection();
+            }
+            else if (this.showCursor) {
+                this.hideCursor();
+            }
+            return;
+        }
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (this.isSelecting) {
+                this.expandTextSelection(event);
+            }
+            else {
+                this.moveCursor(event);
+            }
+        }
     }
-    ngOnDestroy() {
-        if (this.$subscription) {
-            this.$subscription.unsubscribe();
+    onBlur() {
+        if (this.showCursor && !this.isSelecting) {
+            this.hideCursor();
         }
     }
-    onMouseUp(mouseEvent) {
-        let page;
-        let currentElement = mouseEvent.target;
-        while (currentElement.offsetParent) {
-            currentElement = currentElement.offsetParent;
-            if (currentElement.getAttribute) {
-                page = parseInt(currentElement.getAttribute('data-page-number'), 10);
-                if (page) {
-                    break;
-                }
+    moveCursor(event) {
+        const increment = event.shiftKey ? this.incrementLarge : this.incrementMedium;
+        if (!this.showCursor) {
+            // we use window dimensions because we're using fixed positioning
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            this.cursorX = viewportWidth / 2;
+            this.cursorY = viewportHeight / 2;
+            this.showCursor = true;
+            this.emitCursorPosition();
+            return;
+        }
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        switch (event.key) {
+            case 'ArrowUp':
+                this.cursorY = Math.max(0, this.cursorY - increment);
+                break;
+            case 'ArrowDown':
+                this.cursorY = Math.min(viewportHeight, this.cursorY + increment);
+                break;
+            case 'ArrowLeft':
+                this.cursorX = Math.max(0, this.cursorX - increment);
+                break;
+            case 'ArrowRight':
+                this.cursorX = Math.min(viewportWidth, this.cursorX + increment);
+                break;
+        }
+        this.emitCursorPosition();
+    }
+    startTextSelection() {
+        if (this.showCursor) {
+            this.selectionStartX = this.cursorX;
+            this.selectionStartY = this.cursorY;
+            this.selectionEndX = this.cursorX;
+            this.selectionEndY = this.cursorY;
+            this.showCursor = false;
+            this.emitCursorPosition();
+        }
+        else {
+            // default to center
+            this.selectionStartX = window.innerWidth / 2;
+            this.selectionStartY = window.innerHeight / 2;
+            this.selectionEndX = this.selectionStartX;
+            this.selectionEndY = this.selectionStartY;
+        }
+        this.isSelecting = true;
+        this.currentPage = this.getCurrentPageNumber();
+        this.lastValidEndNode = null;
+        this.lastValidEndOffset = 0;
+        this.selectionCursorPositionChanged.emit({
+            x: this.selectionEndX,
+            y: this.selectionEndY,
+            visible: true
+        });
+        this.createTextSelectionAtPoint(this.selectionStartX, this.selectionStartY);
+        this.selectionStarted.emit();
+    }
+    expandTextSelection(event) {
+        const increment = event.shiftKey ? this.incrementLarge : this.incrementSmall;
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        switch (event.key) {
+            case 'ArrowRight':
+                this.selectionEndX = Math.min(viewportWidth, this.selectionEndX + increment);
+                break;
+            case 'ArrowLeft':
+                this.selectionEndX = Math.max(0, this.selectionEndX - increment);
+                break;
+            case 'ArrowDown':
+                this.selectionEndY = Math.min(viewportHeight, this.selectionEndY + increment);
+                break;
+            case 'ArrowUp':
+                this.selectionEndY = Math.max(0, this.selectionEndY - increment);
+                break;
+        }
+        this.selectionCursorPositionChanged.emit({
+            x: this.selectionEndX,
+            y: this.selectionEndY,
+            visible: true
+        });
+        this.updateTextSelection();
+        this.emitSelectionUpdated();
+    }
+    createTextSelectionAtPoint(viewportX, viewportY) {
+        const selection = window.getSelection();
+        // get precise caret position at the coordinates
+        // caretPositionFromPoint is standard but not supported in all browsers
+        // caretRangeFromPoint is older and supported in more browsers
+        let range = null;
+        if (document.caretPositionFromPoint) {
+            const caretPosition = document.caretPositionFromPoint(viewportX, viewportY);
+            if (caretPosition) {
+                range = document.createRange();
+                range.setStart(caretPosition.offsetNode, caretPosition.offset);
+                range.collapse(true);
             }
         }
-        if (this.toolbarEvents.highlightModeSubject.getValue()) {
-            const rectangles = this.getRectangles(mouseEvent, page);
-            this.viewerEvents.textSelected({ page, rectangles });
+        else if (document.caretRangeFromPoint) {
+            range = document.caretRangeFromPoint(viewportX, viewportY);
+        }
+        if (range) {
+            selection.removeAllRanges();
+            selection.addRange(range);
         }
     }
-    onPdfViewerClick(event) {
-        this.store.dispatch(new SelectedAnnotation({
-            annotationId: '',
-            selected: false,
-            editable: false,
-        }));
-        this.viewerEvents.clearCtxToolbar();
+    updateTextSelection() {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0) {
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        const startNode = range.startContainer;
+        const startOffset = range.startOffset;
+        // get end position using caret APIs
+        // caretPositionFromPoint is standard but not supported in all browsers
+        // caretRangeFromPoint is older and supported in more browsers
+        let endNode = null;
+        let endOffset = 0;
+        if (document.caretPositionFromPoint) {
+            const caretPosition = document.caretPositionFromPoint(this.selectionEndX, this.selectionEndY);
+            if (caretPosition) {
+                endNode = caretPosition.offsetNode;
+                endOffset = caretPosition.offset;
+            }
+        }
+        else if (document.caretRangeFromPoint) {
+            const caretRange = document.caretRangeFromPoint(this.selectionEndX, this.selectionEndY);
+            if (caretRange) {
+                endNode = caretRange.startContainer;
+                endOffset = caretRange.startOffset;
+            }
+        }
+        if (endNode) {
+            const range = document.createRange();
+            range.setStart(startNode, startOffset);
+            range.setEnd(endNode, endOffset);
+            const isBackward = range.collapsed && (startNode !== endNode || endOffset < startOffset);
+            const comparison = startNode.compareDocumentPosition(endNode);
+            const endBeforeStart = (comparison & Node.DOCUMENT_POSITION_PRECEDING) !== 0;
+            if (isBackward || endBeforeStart) {
+                if (this.lastValidEndNode) {
+                    endNode = this.lastValidEndNode;
+                    endOffset = this.lastValidEndOffset;
+                }
+                else {
+                    endNode = startNode;
+                    endOffset = startOffset;
+                }
+            }
+            else {
+                this.lastValidEndNode = endNode;
+                this.lastValidEndOffset = endOffset;
+            }
+            // use setBaseAndExtent to handle selection direction with precise offsets
+            // to ensure the selection always starts from the original start point
+            // and extends to the exact character position at the cursor
+            selection.setBaseAndExtent(startNode, startOffset, endNode, endOffset);
+        }
+    }
+    confirmTextSelection() {
+        this.selectionConfirmed.emit();
+        this.selectionCursorPositionChanged.emit({
+            x: this.selectionEndX,
+            y: this.selectionEndY,
+            visible: false
+        });
+        this.cleanup();
     }
-    getRectangles(event, page) {
-        this.pageHeight = this.allPages[page].styles.height;
-        this.pageWidth = this.allPages[page].styles.width;
-        this.zoom = parseFloat(this.allPages[page].scaleRotation.scale);
-        this.rotate = parseInt(this.allPages[page].scaleRotation.rotation, 10);
+    cancelTextSelection() {
         const selection = window.getSelection();
         if (selection) {
-            const localElement = event.target;
-            this.removeEnhancedTextModeStyling(localElement);
-            if (selection.rangeCount && !selection.isCollapsed) {
-                const range = selection.getRangeAt(0).cloneRange();
-                const clientRects = range.getClientRects();
-                if (clientRects) {
-                    const parentRect = HtmlTemplatesHelper
-                        .getAdjustedBoundingRect(localElement.closest(".textLayer"));
-                    const selectionRectangles = [];
-                    for (let i = 0; i < clientRects.length; i++) {
-                        const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
-                        const findSelecttionRectangle = selectionRectangles.find((rect) => rect.width === selectionRectangle.width && rect.x === selectionRectangle.x);
-                        if (!findSelecttionRectangle) {
-                            selectionRectangles.push(selectionRectangle);
-                        }
-                    }
-                    return selectionRectangles;
+            selection.removeAllRanges();
+        }
+        this.selectionCancelled.emit();
+        this.selectionCursorPositionChanged.emit({
+            x: this.selectionEndX,
+            y: this.selectionEndY,
+            visible: false
+        });
+        this.cleanup();
+    }
+    hideCursor() {
+        this.showCursor = false;
+        this.emitCursorPosition();
+    }
+    cleanup() {
+        this.isSelecting = false;
+        this.showCursor = false;
+        this.cursorX = undefined;
+        this.cursorY = undefined;
+        this.selectionStartX = undefined;
+        this.selectionStartY = undefined;
+        this.selectionEndX = undefined;
+        this.selectionEndY = undefined;
+        this.currentPage = undefined;
+        this.lastValidEndNode = null;
+        this.lastValidEndOffset = 0;
+    }
+    getCurrentPageNumber() {
+        let currentElement = this.elementRef.nativeElement;
+        while (currentElement && currentElement.offsetParent) {
+            currentElement = currentElement.offsetParent;
+            if (currentElement.getAttribute) {
+                const page = parseInt(currentElement.getAttribute('data-page-number'), 10);
+                if (page) {
+                    return page;
                 }
             }
         }
+        return 1;
     }
-    createTextRectangle(rect, parentRect) {
-        const height = rect.bottom - rect.top;
-        const width = rect.right - rect.left;
-        const top = rect.top - parentRect.top;
-        const left = rect.left - parentRect.left;
-        let rectangle = this.highlightService.applyRotation(this.pageHeight, this.pageWidth, height, width, top, left, this.rotate, this.zoom);
-        rectangle = { id: v4(), ...rectangle };
-        return rectangle;
+    emitCursorPosition() {
+        const position = {
+            x: this.cursorX,
+            y: this.cursorY,
+            visible: this.showCursor
+        };
+        this.cursorPositionChanged.emit(position);
+    }
+    emitSelectionUpdated() {
+        this.selectionUpdated.emit({
+            page: this.currentPage,
+            startX: this.selectionStartX,
+            startY: this.selectionStartY,
+            endX: this.selectionEndX,
+            endY: this.selectionEndY
+        });
     }
-    removeEnhancedTextModeStyling(element) {
-        if (element.parentElement.children) {
-            for (let i = 0; i < element.parentElement.children.length; i++) {
-                const child = element.parentElement.children[i];
-                child.style.padding = '0';
-                // regex will be targeting the translate style in string
-                // e.g. scaleX(0.969918) translateX(-110.684px) translateY(-105.274px) will become scaleX(0.969918)
-                const translateCSSRegex = /translate[XYZ]\(-?\d*(\.\d+)?(px)?\)/g;
-                child.style.transform = child.style.transform.replace(translateCSSRegex, '').trim();
-            }
-        }
+    reset() {
+        this.cleanup();
+        this.emitCursorPosition();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateDirective, deps: [{ token: i0.ElementRef }, { token: ToolbarEventService }, { token: ViewerEventService }, { token: HighlightCreateService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: HighlightCreateDirective, selector: "[mvCreateTextHighlight]", host: { listeners: { "mouseup": "onMouseUp($event)", "mousedown": "onPdfViewerClick($event)" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeyboardTextHighlightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KeyboardTextHighlightDirective, selector: "[mvKeyboardTextHighlight]", inputs: { enabled: "enabled", incrementSmall: "incrementSmall", incrementMedium: "incrementMedium", incrementLarge: "incrementLarge" }, outputs: { selectionStarted: "selectionStarted", selectionUpdated: "selectionUpdated", selectionConfirmed: "selectionConfirmed", selectionCancelled: "selectionCancelled", cursorPositionChanged: "cursorPositionChanged", selectionCursorPositionChanged: "selectionCursorPositionChanged" }, host: { listeners: { "keydown": "onKeyDown($event)", "blur": "onBlur()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeyboardTextHighlightDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[mvCreateTextHighlight]'
+                    selector: '[mvKeyboardTextHighlight]'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ToolbarEventService }, { type: ViewerEventService }, { type: HighlightCreateService }, { type: i1.Store }], propDecorators: { onMouseUp: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { enabled: [{
+                type: Input
+            }], incrementSmall: [{
+                type: Input
+            }], incrementMedium: [{
+                type: Input
+            }], incrementLarge: [{
+                type: Input
+            }], selectionStarted: [{
+                type: Output
+            }], selectionUpdated: [{
+                type: Output
+            }], selectionConfirmed: [{
+                type: Output
+            }], selectionCancelled: [{
+                type: Output
+            }], cursorPositionChanged: [{
+                type: Output
+            }], selectionCursorPositionChanged: [{
+                type: Output
+            }], onKeyDown: [{
                 type: HostListener,
-                args: ['mouseup', ['$event']]
-            }], onPdfViewerClick: [{
+                args: ['keydown', ['$event']]
+            }], onBlur: [{
                 type: HostListener,
-                args: ['mousedown', ['$event']]
+                args: ['blur']
             }] } });
 
 const getRedactionState = createSelector(getMVState, (state) => state.redactions);
@@ -5117,7 +5565,7 @@ class RedactionComponent {
         this.redactionsPerPage$ = this.store.pipe(select(getRedactionsPerPage));
         this.selectedRedaction$ = this.store.pipe(select(getSelected));
         this.$subscription = this.toolbarEvents.drawModeSubject.subscribe(drawMode => this.drawMode = drawMode);
-        this.$subscription.add(this.store.pipe(select(getRedactedDocumentInfo), filter(value => !!value))
+        this.$subscription.add(this.store.pipe(select(getRedactedDocumentInfo), filter$1(value => !!value))
             .subscribe(redactedDocInfo => this.downloadDocument(redactedDocInfo)));
         this.$subscription.add(this.store.pipe(select(getDocumentId)).subscribe(docId => this.documentId = docId));
         this.$subscription.add(this.viewerEvents.textHighlight.subscribe(highlight => this.markTextRedaction(highlight)));
@@ -5244,6 +5692,8 @@ class PdfViewerComponent {
         this.loadingDocument = false;
         this.hasDifferentPageSize = false;
         this.enableGrabNDrag = false;
+        this.showSelectionStartCursor = false;
+        this.showSelectionEndCursor = false;
         this.highlightMode = toolbarEvents.highlightModeSubject.pipe(tap(() => {
             this.store.dispatch(new ClearFilterTags());
         }));
@@ -5282,7 +5732,7 @@ class PdfViewerComponent {
         if (changes.url && this.pdfWrapper) {
             await this.loadDocument();
             if (this.enableRedactions) {
-                this.toolbarEvents.redactionMode.pipe(filter(value => !!value))
+                this.toolbarEvents.redactionMode.pipe(filter$1(value => !!value))
                     .subscribe(() => this.resetRotation());
             }
         }
@@ -5393,12 +5843,43 @@ class PdfViewerComponent {
     getCurrentPageNumber() {
         return this.pdfWrapper.getPageNumber();
     }
+    onKeyboardTextSelectionConfirmed() {
+        if (this.highlightCreateDirective) {
+            this.highlightCreateDirective.onKeyboardSelectionConfirmed();
+        }
+    }
+    onKeyboardTextSelectionCancelled() {
+        const selection = window.getSelection();
+        if (selection) {
+            selection.removeAllRanges();
+        }
+    }
+    onSelectionStartCursorChanged(position) {
+        if (position.visible) {
+            this.selectionStartCursorX = position.x;
+            this.selectionStartCursorY = position.y;
+            this.showSelectionStartCursor = true;
+        }
+        else {
+            this.showSelectionStartCursor = false;
+        }
+    }
+    onSelectionEndCursorChanged(position) {
+        if (position.visible) {
+            this.selectionEndCursorX = position.x;
+            this.selectionEndCursorY = position.y;
+            this.showSelectionEndCursor = true;
+        }
+        else {
+            this.showSelectionEndCursor = false;
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1.Store }, { token: i1.Store }, { token: PdfJsWrapperFactory }, { token: PrintService }, { token: ToolbarEventService }, { token: ViewerEventService }, { token: IcpService }, { token: ToolbarButtonVisibilityService }, { token: IcpEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: { downloadUrl: "downloadUrl", url: "url", downloadFileName: "downloadFileName", enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", annotationSet: "annotationSet", enableRedactSearch: "enableRedactSearch", height: "height", caseId: "caseId", searchBarHidden: "searchBarHidden" }, outputs: { mediaLoadStatus: "mediaLoadStatus", pdfViewerException: "pdfViewerException", documentTitle: "documentTitle" }, viewQueries: [{ propertyName: "viewerContainer", first: true, predicate: ["viewerContainer"], descendants: true, static: true }, { propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mv-side-bar\n  *ngIf=\"toolbarEvents.sidebarOpen\"\n  id=\"sidebarContainer\"\n  [url]=\"url\"\n  [zoom]=\"zoom\"\n  [rotate]=\"rotation\"\n  [outline]=\"documentOutline\"\n  [annotationsEnabled]=\"enableAnnotations\"\n  [currentPageNumber]=\"getCurrentPageNumber()\"\n>\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [isHidden]=\"!showCommentsPanel\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n  class=\"pdfContainer\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ pdfContainer: true, hidden: errorMessage }\"\n>\n  <mv-redaction-search-bar></mv-redaction-search-bar>\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"\n      (showCommentsPanel || showIcpParticipantsList) &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [class.grabNDrag]=\"enableGrabNDrag\"\n  >\n    <div\n      #pdfViewer\n      class=\"pdfViewer\"\n      mvCreateTextHighlight\n      [ngClass]=\"{\n        hidden: false,\n        highlightMode: highlightMode | async,\n        drawMode: drawMode | async\n      }\"\n    ></div>\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\" [rotate]=\"rotation\"> </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set\n    [contentScrollTop]=\"viewerContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"pdfViewer.offsetHeight\"\n    [pageHeights]=\"pageHeights\"\n  >\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">\n      {{ \"Loading...\" | rpxTranslate}}{{\n        loadingDocumentProgress ? loadingDocumentProgress + \"%\" : \"\"\n      }}\n    </h3>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar" }, { kind: "component", type: CommentSetComponent, selector: "mv-comment-set", inputs: ["annotationSet", "zoom", "rotate", "height", "pageHeights", "contentScrollTop"] }, { kind: "component", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: ["showCommentSummary", "isHidden"], outputs: ["showCommentSummaryDialog"] }, { kind: "component", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: ["zoom", "rotate"] }, { kind: "component", type: SideBarComponent, selector: "mv-side-bar", inputs: ["annotationsEnabled", "outline", "url", "zoom", "rotate", "currentPageNumber"] }, { kind: "directive", type: GrabNDragDirective, selector: "[mvGrabNDrag]", inputs: ["dragEnabled", "dragX"] }, { kind: "directive", type: HighlightCreateDirective, selector: "[mvCreateTextHighlight]" }, { kind: "component", type: RedactionComponent, selector: "mv-redactions", inputs: ["zoom", "rotate"] }, { kind: "component", type: BookmarkIconsComponent, selector: "mv-bookmark-icons", inputs: ["zoom", "rotate"] }, { kind: "component", type: ParticipantsListComponent, selector: "mv-participants-list" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: { downloadUrl: "downloadUrl", url: "url", downloadFileName: "downloadFileName", enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", annotationSet: "annotationSet", enableRedactSearch: "enableRedactSearch", height: "height", caseId: "caseId", searchBarHidden: "searchBarHidden" }, outputs: { mediaLoadStatus: "mediaLoadStatus", pdfViewerException: "pdfViewerException", documentTitle: "documentTitle" }, viewQueries: [{ propertyName: "viewerContainer", first: true, predicate: ["viewerContainer"], descendants: true, static: true }, { propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true }, { propertyName: "highlightCreateDirective", first: true, predicate: HighlightCreateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mv-side-bar\n  *ngIf=\"toolbarEvents.sidebarOpen\"\n  id=\"sidebarContainer\"\n  [url]=\"url\"\n  [zoom]=\"zoom\"\n  [rotate]=\"rotation\"\n  [outline]=\"documentOutline\"\n  [annotationsEnabled]=\"enableAnnotations\"\n  [currentPageNumber]=\"getCurrentPageNumber()\"\n>\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [isHidden]=\"!showCommentsPanel\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n  class=\"pdfContainer\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ pdfContainer: true, hidden: errorMessage }\"\n>\n  <mv-redaction-search-bar></mv-redaction-search-bar>\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"\n      (showCommentsPanel || showIcpParticipantsList) &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [class.grabNDrag]=\"enableGrabNDrag\"\n  >\n    <div\n      #pdfViewer\n      class=\"pdfViewer\"\n      mvCreateTextHighlight\n      mvKeyboardTextHighlight\n      [enabled]=\"highlightMode | async\"\n      [tabindex]=\"(highlightMode | async) ? 0 : -1\"\n      (selectionConfirmed)=\"onKeyboardTextSelectionConfirmed()\"\n      (selectionCancelled)=\"onKeyboardTextSelectionCancelled()\"\n      (cursorPositionChanged)=\"onSelectionStartCursorChanged($event)\"\n      (selectionCursorPositionChanged)=\"onSelectionEndCursorChanged($event)\"\n      [ngClass]=\"{\n        hidden: false,\n        highlightMode: highlightMode | async,\n        drawMode: drawMode | async\n      }\"\n    ></div>\n    <div *ngIf=\"showSelectionStartCursor\"\n      class=\"selection-start-cursor\"\n      [style.position]=\"'fixed'\"\n      [style.top]=\"selectionStartCursorY + 'px'\"\n      [style.left]=\"selectionStartCursorX + 'px'\">\n    </div>\n    <div *ngIf=\"showSelectionEndCursor\"\n      class=\"selection-end-cursor\"\n      [style.position]=\"'fixed'\"\n      [style.top]=\"selectionEndCursorY + 'px'\"\n      [style.left]=\"selectionEndCursorX + 'px'\">\n    </div>\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\" [rotate]=\"rotation\"> </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set\n    [contentScrollTop]=\"viewerContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"pdfViewer.offsetHeight\"\n    [pageHeights]=\"pageHeights\"\n  >\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">\n      {{ \"Loading...\" | rpxTranslate}}{{\n        loadingDocumentProgress ? loadingDocumentProgress + \"%\" : \"\"\n      }}\n    </h3>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar" }, { kind: "component", type: CommentSetComponent, selector: "mv-comment-set", inputs: ["annotationSet", "zoom", "rotate", "height", "pageHeights", "contentScrollTop"] }, { kind: "component", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: ["showCommentSummary", "isHidden"], outputs: ["showCommentSummaryDialog"] }, { kind: "component", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: ["zoom", "rotate"] }, { kind: "component", type: SideBarComponent, selector: "mv-side-bar", inputs: ["annotationsEnabled", "outline", "url", "zoom", "rotate", "currentPageNumber"] }, { kind: "directive", type: GrabNDragDirective, selector: "[mvGrabNDrag]", inputs: ["dragEnabled", "dragX"] }, { kind: "directive", type: HighlightCreateDirective, selector: "[mvCreateTextHighlight]" }, { kind: "directive", type: KeyboardTextHighlightDirective, selector: "[mvKeyboardTextHighlight]", inputs: ["enabled", "incrementSmall", "incrementMedium", "incrementLarge"], outputs: ["selectionStarted", "selectionUpdated", "selectionConfirmed", "selectionCancelled", "cursorPositionChanged", "selectionCursorPositionChanged"] }, { kind: "component", type: RedactionComponent, selector: "mv-redactions", inputs: ["zoom", "rotate"] }, { kind: "component", type: BookmarkIconsComponent, selector: "mv-bookmark-icons", inputs: ["zoom", "rotate"] }, { kind: "component", type: ParticipantsListComponent, selector: "mv-participants-list" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PdfViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-pdf-viewer', encapsulation: ViewEncapsulation.None, template: "<mv-side-bar\n  *ngIf=\"toolbarEvents.sidebarOpen\"\n  id=\"sidebarContainer\"\n  [url]=\"url\"\n  [zoom]=\"zoom\"\n  [rotate]=\"rotation\"\n  [outline]=\"documentOutline\"\n  [annotationsEnabled]=\"enableAnnotations\"\n  [currentPageNumber]=\"getCurrentPageNumber()\"\n>\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [isHidden]=\"!showCommentsPanel\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n  class=\"pdfContainer\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ pdfContainer: true, hidden: errorMessage }\"\n>\n  <mv-redaction-search-bar></mv-redaction-search-bar>\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"\n      (showCommentsPanel || showIcpParticipantsList) &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [class.grabNDrag]=\"enableGrabNDrag\"\n  >\n    <div\n      #pdfViewer\n      class=\"pdfViewer\"\n      mvCreateTextHighlight\n      [ngClass]=\"{\n        hidden: false,\n        highlightMode: highlightMode | async,\n        drawMode: drawMode | async\n      }\"\n    ></div>\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\" [rotate]=\"rotation\"> </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set\n    [contentScrollTop]=\"viewerContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"pdfViewer.offsetHeight\"\n    [pageHeights]=\"pageHeights\"\n  >\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">\n      {{ \"Loading...\" | rpxTranslate}}{{\n        loadingDocumentProgress ? loadingDocumentProgress + \"%\" : \"\"\n      }}\n    </h3>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mv-pdf-viewer', encapsulation: ViewEncapsulation.None, template: "<mv-side-bar\n  *ngIf=\"toolbarEvents.sidebarOpen\"\n  id=\"sidebarContainer\"\n  [url]=\"url\"\n  [zoom]=\"zoom\"\n  [rotate]=\"rotation\"\n  [outline]=\"documentOutline\"\n  [annotationsEnabled]=\"enableAnnotations\"\n  [currentPageNumber]=\"getCurrentPageNumber()\"\n>\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [isHidden]=\"!showCommentsPanel\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n  class=\"pdfContainer\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ pdfContainer: true, hidden: errorMessage }\"\n>\n  <mv-redaction-search-bar></mv-redaction-search-bar>\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"\n      (showCommentsPanel || showIcpParticipantsList) &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [class.grabNDrag]=\"enableGrabNDrag\"\n  >\n    <div\n      #pdfViewer\n      class=\"pdfViewer\"\n      mvCreateTextHighlight\n      mvKeyboardTextHighlight\n      [enabled]=\"highlightMode | async\"\n      [tabindex]=\"(highlightMode | async) ? 0 : -1\"\n      (selectionConfirmed)=\"onKeyboardTextSelectionConfirmed()\"\n      (selectionCancelled)=\"onKeyboardTextSelectionCancelled()\"\n      (cursorPositionChanged)=\"onSelectionStartCursorChanged($event)\"\n      (selectionCursorPositionChanged)=\"onSelectionEndCursorChanged($event)\"\n      [ngClass]=\"{\n        hidden: false,\n        highlightMode: highlightMode | async,\n        drawMode: drawMode | async\n      }\"\n    ></div>\n    <div *ngIf=\"showSelectionStartCursor\"\n      class=\"selection-start-cursor\"\n      [style.position]=\"'fixed'\"\n      [style.top]=\"selectionStartCursorY + 'px'\"\n      [style.left]=\"selectionStartCursorX + 'px'\">\n    </div>\n    <div *ngIf=\"showSelectionEndCursor\"\n      class=\"selection-end-cursor\"\n      [style.position]=\"'fixed'\"\n      [style.top]=\"selectionEndCursorY + 'px'\"\n      [style.left]=\"selectionEndCursorX + 'px'\">\n    </div>\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\" [rotate]=\"rotation\"> </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set\n    [contentScrollTop]=\"viewerContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"pdfViewer.offsetHeight\"\n    [pageHeights]=\"pageHeights\"\n  >\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">\n      {{ \"Loading...\" | rpxTranslate}}{{\n        loadingDocumentProgress ? loadingDocumentProgress + \"%\" : \"\"\n      }}\n    </h3>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.Store }, { type: i1.Store }, { type: PdfJsWrapperFactory }, { type: PrintService }, { type: ToolbarEventService }, { type: ViewerEventService }, { type: IcpService }, { type: ToolbarButtonVisibilityService }, { type: IcpEventService }], propDecorators: { mediaLoadStatus: [{
                 type: Output
             }], pdfViewerException: [{
@@ -5431,6 +5912,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], pdfViewer: [{
                 type: ViewChild,
                 args: ['pdfViewer', { static: false }]
+            }], highlightCreateDirective: [{
+                type: ViewChild,
+                args: [HighlightCreateDirective, { static: false }]
             }], searchBarHidden: [{
                 type: Input
             }] } });
@@ -5820,6 +6304,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['window:keydown', ['$event']]
             }] } });
 
+class TooltipDismissDirective {
+    constructor(el) {
+        this.el = el;
+    }
+    onEscapeDismissTooltip() {
+        const element = this.el.nativeElement;
+        element.setAttribute('data-tooltip-dismissed', 'true');
+    }
+    onShowTooltip() {
+        const element = this.el.nativeElement;
+        element.removeAttribute('data-tooltip-dismissed');
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipDismissDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: TooltipDismissDirective, selector: ".mv-tooltip, [mvTooltipDismiss]", host: { listeners: { "document:keydown.escape": "onEscapeDismissTooltip($event)", "mouseenter": "onShowTooltip()", "focus": "onShowTooltip()", "focusin": "onShowTooltip()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TooltipDismissDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '.mv-tooltip, [mvTooltipDismiss]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onEscapeDismissTooltip: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }], onShowTooltip: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['focus']
+            }, {
+                type: HostListener,
+                args: ['focusin']
+            }] } });
+
 class MainToolbarComponent {
     constructor(toolbarEvents, toolbarButtons, cdr, numberHelper, icpEventService) {
         this.toolbarEvents = toolbarEvents;
@@ -5980,11 +6498,11 @@ class MainToolbarComponent {
         }, 100);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MainToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i0.ChangeDetectorRef }, { token: NumberHelperService }, { token: IcpEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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            [attr.aria-expanded]=\"isDropdownMenuOpen\"\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            [attr.aria-expanded]=\"isIndexOpen\"\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            [attr.aria-expanded]=\"isBookmarksOpen\"\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              [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            [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            [ngClass]=\"onToolBarOffSetChange('mvPresentBtn')\"\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            [ngClass]=\"onToolBarOffSetChange('mvRedactBtn')\"\n            [attr.aria-expanded]=\"isRedactOpen\"\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            [ngClass]=\"onToolBarOffSetChange('mvGrabBtn')\"\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            [ngClass]=\"onToolBarOffSetChange('mvDownloadBtn')\"\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            [ngClass]=\"onToolBarOffSetChange('mvPrintBtn')\"\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            [ngClass]=\"onToolBarOffSetChange('mvCommentsBtn')\"\n            [attr.aria-expanded]=\"isCommentsOpen\"\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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SearchBarComponent, selector: "mv-search-bar" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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 mv-tooltip\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            [attr.aria-expanded]=\"isDropdownMenuOpen\"\n            [attr.data-tooltip]=\"'More options' | rpxTranslate\"\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      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            data-l10n-id=\"index\"\n            [attr.data-tooltip]=\"'Index' | rpxTranslate\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index mv-tooltip\"\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            [attr.aria-expanded]=\"isIndexOpen\"\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            data-l10n-id=\"bookmarks\"\n            [attr.data-tooltip]=\"'Bookmarks' | rpxTranslate\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-tooltip 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            [attr.aria-expanded]=\"isBookmarksOpen\"\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 mv-tooltip\"\n            [attr.data-tooltip]=\"'Draw a box' | rpxTranslate\"\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 mv-tooltip\"\n            [attr.data-tooltip]=\"'Highlight' | rpxTranslate\"\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              [attr.data-tooltip]=\"'Page' | rpxTranslate\"\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                [attr.data-tooltip]=\"'Previous page' | rpxTranslate\"\n                [attr.aria-label]=\"'Previous page' | rpxTranslate\"\n                class=\"mv-toolbar__menu-button--up button-image mv-tooltip\"\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                [attr.data-tooltip]=\"'Next page' | rpxTranslate\"\n                [attr.aria-label]=\"'Next page' | rpxTranslate\"\n                class=\"mv-toolbar__menu-button--down button-image mv-tooltip\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <span class=\"mv-tooltip\" [attr.data-tooltip]=\"'Page number' | rpxTranslate\">\n                <input\n                  type=\"number\"\n                  id=\"pageNumber\"\n                  class=\"hmcts-toolbar-input govuk-input--width-2\"\n                  [attr.aria-label]=\"'Page number' | rpxTranslate\"\n                  value=\"1\"\n                  size=\"4\"\n                  min=\"1\"\n                  [value]=\"pageNumber\"\n                  tabindex=\"0\"\n                  data-l10n-id=\"page\"\n                  (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                  [disabled]=\"redactAllInProgress\"\n                  #pageNumberInput\n                />\n              </span>\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 mv-tooltip\"\n                [attr.data-tooltip]=\"'Zoom out' | rpxTranslate\"\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              <span class=\"mv-tooltip\" [attr.data-tooltip]=\"'Zoom' | rpxTranslate\"> \n                <select\n                  id=\"scaleSelect\"\n                  class=\"hmcts-toolbar-select\"\n                  data-l10n-id=\"zoom\"\n                  (change)=\"zoom($event.target.value)\"\n                  tabindex=\"0\"\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              </span>\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 mv-tooltip\"\n                (click)=\"stepZoom(0.1)\"\n                [attr.data-tooltip]=\"'Zoom in' | rpxTranslate\"\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            [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 mv-tooltip\"\n              [attr.aria-label]=\"'Rotate counterclockwise' | rpxTranslate\"\n              [attr.data-tooltip]=\"'Rotate counterclockwise' | rpxTranslate\"\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 mv-tooltip\"\n              [attr.aria-label]=\"'Rotate clockwise' | rpxTranslate\"\n              [attr.data-tooltip]=\"'Rotate clockwise' | rpxTranslate\"\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            [attr.data-tooltip]=\"'Search' | rpxTranslate\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search mv-tooltip\"\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 mv-tooltip\"\n            [attr.data-tooltip]=\"'In-Court presentation mode' | rpxTranslate\"\n            data-l10n-id=\"icpMode_label\"\n            [ngClass]=\"onToolBarOffSetChange('mvPresentBtn')\"\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            [attr.data-tooltip]=\"'Redact' | rpxTranslate\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact mv-tooltip\"\n            [ngClass]=\"onToolBarOffSetChange('mvRedactBtn')\"\n            [attr.aria-expanded]=\"isRedactOpen\"\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 mv-tooltip\"\n            data-tooltip=\"Grab and drag\"\n            [ngClass]=\"onToolBarOffSetChange('mvGrabBtn')\"\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 mv-tooltip\"\n            [attr.data-tooltip]=\"'Download' | rpxTranslate\"\n            data-l10n-id=\"download\"\n            [ngClass]=\"onToolBarOffSetChange('mvDownloadBtn')\"\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            data-l10n-id=\"print\"\n            aria-label=\"Print\"\n            [attr.data-tooltip]=\"'Print' | rpxTranslate\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print mv-tooltip\"\n            [ngClass]=\"onToolBarOffSetChange('mvPrintBtn')\"\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 mv-tooltip\"\n            [attr.data-tooltip]=\"'Comments' | rpxTranslate\"\n            data-l10n-id=\"comments\"\n            [ngClass]=\"onToolBarOffSetChange('mvCommentsBtn')\"\n            [attr.aria-expanded]=\"isCommentsOpen\"\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: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.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: i7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SearchBarComponent, selector: "mv-search-bar" }, { kind: "directive", type: TooltipDismissDirective, selector: ".mv-tooltip, [mvTooltipDismiss]" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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            [attr.aria-expanded]=\"isDropdownMenuOpen\"\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            [attr.aria-expanded]=\"isIndexOpen\"\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            [attr.aria-expanded]=\"isBookmarksOpen\"\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              [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            [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            [ngClass]=\"onToolBarOffSetChange('mvPresentBtn')\"\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            [ngClass]=\"onToolBarOffSetChange('mvRedactBtn')\"\n            [attr.aria-expanded]=\"isRedactOpen\"\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            [ngClass]=\"onToolBarOffSetChange('mvGrabBtn')\"\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            [ngClass]=\"onToolBarOffSetChange('mvDownloadBtn')\"\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            [ngClass]=\"onToolBarOffSetChange('mvPrintBtn')\"\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            [ngClass]=\"onToolBarOffSetChange('mvCommentsBtn')\"\n            [attr.aria-expanded]=\"isCommentsOpen\"\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 mv-tooltip\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            [attr.aria-expanded]=\"isDropdownMenuOpen\"\n            [attr.data-tooltip]=\"'More options' | rpxTranslate\"\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      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            data-l10n-id=\"index\"\n            [attr.data-tooltip]=\"'Index' | rpxTranslate\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index mv-tooltip\"\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            [attr.aria-expanded]=\"isIndexOpen\"\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            data-l10n-id=\"bookmarks\"\n            [attr.data-tooltip]=\"'Bookmarks' | rpxTranslate\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-tooltip 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            [attr.aria-expanded]=\"isBookmarksOpen\"\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 mv-tooltip\"\n            [attr.data-tooltip]=\"'Draw a box' | rpxTranslate\"\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 mv-tooltip\"\n            [attr.data-tooltip]=\"'Highlight' | rpxTranslate\"\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              [attr.data-tooltip]=\"'Page' | rpxTranslate\"\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                [attr.data-tooltip]=\"'Previous page' | rpxTranslate\"\n                [attr.aria-label]=\"'Previous page' | rpxTranslate\"\n                class=\"mv-toolbar__menu-button--up button-image mv-tooltip\"\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                [attr.data-tooltip]=\"'Next page' | rpxTranslate\"\n                [attr.aria-label]=\"'Next page' | rpxTranslate\"\n                class=\"mv-toolbar__menu-button--down button-image mv-tooltip\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <span class=\"mv-tooltip\" [attr.data-tooltip]=\"'Page number' | rpxTranslate\">\n                <input\n                  type=\"number\"\n                  id=\"pageNumber\"\n                  class=\"hmcts-toolbar-input govuk-input--width-2\"\n                  [attr.aria-label]=\"'Page number' | rpxTranslate\"\n                  value=\"1\"\n                  size=\"4\"\n                  min=\"1\"\n                  [value]=\"pageNumber\"\n                  tabindex=\"0\"\n                  data-l10n-id=\"page\"\n                  (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                  [disabled]=\"redactAllInProgress\"\n                  #pageNumberInput\n                />\n              </span>\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 mv-tooltip\"\n                [attr.data-tooltip]=\"'Zoom out' | rpxTranslate\"\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              <span class=\"mv-tooltip\" [attr.data-tooltip]=\"'Zoom' | rpxTranslate\"> \n                <select\n                  id=\"scaleSelect\"\n                  class=\"hmcts-toolbar-select\"\n                  data-l10n-id=\"zoom\"\n                  (change)=\"zoom($event.target.value)\"\n                  tabindex=\"0\"\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              </span>\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 mv-tooltip\"\n                (click)=\"stepZoom(0.1)\"\n                [attr.data-tooltip]=\"'Zoom in' | rpxTranslate\"\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            [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 mv-tooltip\"\n              [attr.aria-label]=\"'Rotate counterclockwise' | rpxTranslate\"\n              [attr.data-tooltip]=\"'Rotate counterclockwise' | rpxTranslate\"\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 mv-tooltip\"\n              [attr.aria-label]=\"'Rotate clockwise' | rpxTranslate\"\n              [attr.data-tooltip]=\"'Rotate clockwise' | rpxTranslate\"\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            [attr.data-tooltip]=\"'Search' | rpxTranslate\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search mv-tooltip\"\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 mv-tooltip\"\n            [attr.data-tooltip]=\"'In-Court presentation mode' | rpxTranslate\"\n            data-l10n-id=\"icpMode_label\"\n            [ngClass]=\"onToolBarOffSetChange('mvPresentBtn')\"\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            [attr.data-tooltip]=\"'Redact' | rpxTranslate\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact mv-tooltip\"\n            [ngClass]=\"onToolBarOffSetChange('mvRedactBtn')\"\n            [attr.aria-expanded]=\"isRedactOpen\"\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 mv-tooltip\"\n            data-tooltip=\"Grab and drag\"\n            [ngClass]=\"onToolBarOffSetChange('mvGrabBtn')\"\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 mv-tooltip\"\n            [attr.data-tooltip]=\"'Download' | rpxTranslate\"\n            data-l10n-id=\"download\"\n            [ngClass]=\"onToolBarOffSetChange('mvDownloadBtn')\"\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            data-l10n-id=\"print\"\n            aria-label=\"Print\"\n            [attr.data-tooltip]=\"'Print' | rpxTranslate\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print mv-tooltip\"\n            [ngClass]=\"onToolBarOffSetChange('mvPrintBtn')\"\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 mv-tooltip\"\n            [attr.data-tooltip]=\"'Comments' | rpxTranslate\"\n            data-l10n-id=\"comments\"\n            [ngClass]=\"onToolBarOffSetChange('mvCommentsBtn')\"\n            [attr.aria-expanded]=\"isCommentsOpen\"\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: () => [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i0.ChangeDetectorRef }, { type: NumberHelperService }, { type: IcpEventService }], propDecorators: { enableAnnotations: [{
                 type: Input
             }], enableRedactions: [{
@@ -6062,11 +6580,11 @@ class RedactionToolbarComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RedactionToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RedactionToolbarComponent, selector: "mv-redaction-toolbar", inputs: { showRedactSearch: "showRedactSearch" }, ngImport: i0, template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">{{\n    \"Redaction options\" | rpxTranslate\n  }}</label>\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw\"\n    title=\"{{ 'Draw a box' | rpxTranslate }}}\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">{{\n      \"Draw a box\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page\"\n    title=\"{{ 'Redact page' | rpxTranslate }}\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">{{\n      \"Redact page\" | rpxTranslate\n    }}</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    title=\"{{ 'From search' | rpxTranslate }}\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\">{{\n      \"From search\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Redact text' | rpxTranslate }}\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">{{\n      \"Redact text\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Clear all' | rpxTranslate }}\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">{{ \"Clear all\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    title=\"{{ 'Preview' | rpxTranslate }}\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">{{\n      \"Preview\" | rpxTranslate\n    }}</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">{{\n      \"Hide preview\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Save document' | rpxTranslate }}\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">{{\n      \"Save document\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"{{ 'Close Redaction' | rpxTranslate }}\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">{{\n      \"Close Redaction\" | rpxTranslate\n    }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RedactionToolbarComponent, selector: "mv-redaction-toolbar", inputs: { showRedactSearch: "showRedactSearch" }, ngImport: i0, template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">{{\n    \"Redaction options\" | rpxTranslate\n  }}</label>\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw mv-tooltip\"\n    [attr.data-tooltip]=\"'Draw a box' | rpxTranslate\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">{{\n      \"Draw a box\" | rpxTranslate\n    }}</span>\n  </button>\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page mv-tooltip\"\n    [attr.data-tooltip]=\"'Redact page' | rpxTranslate\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">{{\n      \"Redact page\" | rpxTranslate\n    }}</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    class=\"mv-button redaction-button--search mv-tooltip\"\n    [attr.data-tooltip]=\"'From search' | rpxTranslate\"\n    data-l10n-id=\"fromSearchButton\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\">{{\n      \"From search\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact mv-tooltip\"\n    aria-pressed=\"false\"\n    [attr.data-tooltip]=\"'Redact text' | rpxTranslate\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">{{\n      \"Redact text\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear mv-tooltip\"\n    aria-pressed=\"false\"\n    [attr.data-tooltip]=\"'Clear all' | rpxTranslate\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">{{ \"Clear all\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button mv-tooltip\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    [attr.data-tooltip]=\"'Preview' | rpxTranslate\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">{{\n      \"Preview\" | rpxTranslate\n    }}</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">{{\n      \"Hide preview\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download mv-tooltip\"\n    aria-pressed=\"false\"\n    [attr.data-tooltip]=\"'Save document' | rpxTranslate\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">{{\n      \"Save document\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close mv-tooltip\"\n    [attr.data-tooltip]=\"'Close Redaction' | rpxTranslate\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">{{\n      \"Close Redaction\" | rpxTranslate\n    }}</span>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDismissDirective, selector: ".mv-tooltip, [mvTooltipDismiss]" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RedactionToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-redaction-toolbar', template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">{{\n    \"Redaction options\" | rpxTranslate\n  }}</label>\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw\"\n    title=\"{{ 'Draw a box' | rpxTranslate }}}\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">{{\n      \"Draw a box\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page\"\n    title=\"{{ 'Redact page' | rpxTranslate }}\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">{{\n      \"Redact page\" | rpxTranslate\n    }}</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    title=\"{{ 'From search' | rpxTranslate }}\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\">{{\n      \"From search\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Redact text' | rpxTranslate }}\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">{{\n      \"Redact text\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Clear all' | rpxTranslate }}\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">{{ \"Clear all\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    title=\"{{ 'Preview' | rpxTranslate }}\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">{{\n      \"Preview\" | rpxTranslate\n    }}</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">{{\n      \"Hide preview\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download\"\n    aria-pressed=\"false\"\n    title=\"{{ 'Save document' | rpxTranslate }}\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">{{\n      \"Save document\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"{{ 'Close Redaction' | rpxTranslate }}\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">{{\n      \"Close Redaction\" | rpxTranslate\n    }}</span>\n  </button>\n</div>\n" }]
+            args: [{ selector: 'mv-redaction-toolbar', template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">{{\n    \"Redaction options\" | rpxTranslate\n  }}</label>\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw mv-tooltip\"\n    [attr.data-tooltip]=\"'Draw a box' | rpxTranslate\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">{{\n      \"Draw a box\" | rpxTranslate\n    }}</span>\n  </button>\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page mv-tooltip\"\n    [attr.data-tooltip]=\"'Redact page' | rpxTranslate\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">{{\n      \"Redact page\" | rpxTranslate\n    }}</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    class=\"mv-button redaction-button--search mv-tooltip\"\n    [attr.data-tooltip]=\"'From search' | rpxTranslate\"\n    data-l10n-id=\"fromSearchButton\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\">{{\n      \"From search\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact mv-tooltip\"\n    aria-pressed=\"false\"\n    [attr.data-tooltip]=\"'Redact text' | rpxTranslate\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">{{\n      \"Redact text\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear mv-tooltip\"\n    aria-pressed=\"false\"\n    [attr.data-tooltip]=\"'Clear all' | rpxTranslate\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">{{ \"Clear all\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button mv-tooltip\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    [attr.data-tooltip]=\"'Preview' | rpxTranslate\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">{{\n      \"Preview\" | rpxTranslate\n    }}</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">{{\n      \"Hide preview\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download mv-tooltip\"\n    aria-pressed=\"false\"\n    [attr.data-tooltip]=\"'Save document' | rpxTranslate\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">{{\n      \"Save document\" | rpxTranslate\n    }}</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close mv-tooltip\"\n    [attr.data-tooltip]=\"'Close Redaction' | rpxTranslate\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">{{\n      \"Close Redaction\" | rpxTranslate\n    }}</span>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i1.Store }], propDecorators: { showRedactSearch: [{
                 type: Input
             }] } });
@@ -6137,11 +6655,11 @@ class HighlightToolbarComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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: i5.AsyncPipe, name: "async" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\" | rpxTranslate }}</label\n  >\n\n  <button\n    id=\"mvDrawBtn\"\n    #mvDrawBtn\n    class=\"mv-button mv-toolbar__menu-button--draw mv-tooltip\"\n    [attr.data-tooltip]=\"'Draw a box' | rpxTranslate\"\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\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    id=\"highlightTextBtn\"\n    class=\"mv-button mv-toolbar__menu-button--highlight mv-tooltip\"\n    [attr.data-tooltip]=\"'Highlight text' | rpxTranslate\"\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\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    id=\"mvHighlightFromSearchBtn\"\n    [attr.data-tooltip]=\"'From search' | rpxTranslate\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search mv-tooltip\"\n    (click)=\"onAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >{{ \"From search\" | rpxTranslate }}</span\n    >\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close mv-tooltip\"\n    [attr.data-tooltip]=\"'Close highlight' | rpxTranslate\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"onClose()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">{{ \"Close Highlight\" | rpxTranslate }}</span>\n  </button>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: TooltipDismissDirective, selector: ".mv-tooltip, [mvTooltipDismiss]" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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" }]
+            args: [{ selector: 'mv-highlight-toolbar', template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >{{ \"Highlight options\" | rpxTranslate }}</label\n  >\n\n  <button\n    id=\"mvDrawBtn\"\n    #mvDrawBtn\n    class=\"mv-button mv-toolbar__menu-button--draw mv-tooltip\"\n    [attr.data-tooltip]=\"'Draw a box' | rpxTranslate\"\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\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    id=\"highlightTextBtn\"\n    class=\"mv-button mv-toolbar__menu-button--highlight mv-tooltip\"\n    [attr.data-tooltip]=\"'Highlight text' | rpxTranslate\"\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\" | rpxTranslate }}</span>\n  </button>\n\n  <button\n    id=\"mvHighlightFromSearchBtn\"\n    [attr.data-tooltip]=\"'From search' | rpxTranslate\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search mv-tooltip\"\n    (click)=\"onAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >{{ \"From search\" | rpxTranslate }}</span\n    >\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close mv-tooltip\"\n    [attr.data-tooltip]=\"'Close highlight' | rpxTranslate\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"onClose()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">{{ \"Close Highlight\" | rpxTranslate }}</span>\n  </button>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }] });
 
 /*
@@ -6457,7 +6975,7 @@ class ConvertibleContentViewerComponent {
         this.documentTitle = new EventEmitter();
     }
     ngOnInit() {
-        this.$subscription = this.store.pipe(select(getConvertedDocument), filter(value => !!value))
+        this.$subscription = this.store.pipe(select(getConvertedDocument), filter$1(value => !!value))
             .subscribe((docInfo) => {
             if (docInfo.url) {
                 this.convertedUrl = docInfo.url;
@@ -6542,7 +7060,7 @@ class RotationPersistDirective {
     onMediaLoad(status) {
         this.rotation = 0;
         this.store.dispatch(new LoadRotation(this.documentId));
-        this.store.pipe(select(rotationLoaded), filter(value => !!value), take(1))
+        this.store.pipe(select(rotationLoaded), filter$1(value => !!value), take(1))
             .subscribe(() => {
             if (this.savedRotation) {
                 this.toolbarEvents.rotateSubject.next(this.savedRotation);
@@ -6817,7 +7335,8 @@ class ToolbarModule {
             RedactionToolbarComponent,
             IcpToolbarComponent,
             RedactionSearchBarComponent,
-            HighlightToolbarComponent], imports: [CommonModule,
+            HighlightToolbarComponent,
+            TooltipDismissDirective], imports: [CommonModule,
             FormsModule,
             OverlayModule,
             RouterModule, i5$1.RpxTranslationModule], exports: [MainToolbarComponent,
@@ -6843,7 +7362,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         RedactionToolbarComponent,
                         IcpToolbarComponent,
                         RedactionSearchBarComponent,
-                        HighlightToolbarComponent
+                        HighlightToolbarComponent,
+                        TooltipDismissDirective
                     ],
                     providers: [
                         ToolbarButtonVisibilityService
@@ -6861,7 +7381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         FormsModule,
                         OverlayModule,
                         RouterModule,
-                        RpxTranslationModule.forChild(),
+                        RpxTranslationModule.forChild()
                     ]
                 }]
         }] });
@@ -7387,6 +7907,7 @@ class MediaViewerModule {
             GrabNDragDirective,
             RotationPersistDirective,
             HighlightCreateDirective,
+            KeyboardTextHighlightDirective,
             ConfirmActionDialogComponent,
             RedactionComponent,
             BookmarkIconsComponent,
@@ -7453,6 +7974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         GrabNDragDirective,
                         RotationPersistDirective,
                         HighlightCreateDirective,
+                        KeyboardTextHighlightDirective,
                         ConfirmActionDialogComponent,
                         RedactionComponent,
                         BookmarkIconsComponent,