@hmcts/media-viewer 4.1.9-exui-1580 → 4.1.9-exui-2821-1

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, Directive, HostListener, Component, ViewChild, Input, ViewEncapsulation, Pipe, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
+import { Injectable, Component, ViewChild, HostListener, Directive, 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, 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 { BehaviorSubject, Subject, of, combineLatest, asyncScheduler } from 'rxjs';
+import { take, distinctUntilChanged, filter, 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,626 +1526,6 @@ const getConvertedDocument = createSelector(getDocumentState, getConvertedDocume
 const getRotation = createSelector(getDocumentState, getRotation$1);
 const rotationLoaded = createSelector(getDocumentState, rotationLoaded$1);
 
-/**
- * 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();
-    }
-}
-
-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);
-        }
-        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 {
-            this.drawModeSubject.next(false);
-        }
-    }
-    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 });
-    }
-    toggleRedactionPreview(viewMode) {
-        this.redactionPreview.next(viewMode);
-    }
-    unmarkAll() {
-        this.clearAllRedactMarkers.next();
-    }
-    applyRedactionToDocument() {
-        this.applyRedactToDocument.next();
-    }
-    redactPage() {
-        this.redactWholePage.next();
-    }
-    toggleCommentsPanel(isVisible) {
-        if (isVisible) {
-            this.toggleParticipantsList(!isVisible);
-        }
-        this.commentsPanelVisible.next(isVisible);
-    }
-    toggleParticipantsList(isVisible) {
-        if (isVisible) {
-            this.toggleCommentsPanel(!isVisible);
-        }
-        this.icpEventService.participantsListVisible.next(isVisible);
-    }
-    /** @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;
-    }
-});
-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 }] });
-
-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 = [];
-    }
-    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();
-        }));
-    }
-    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;
-                }
-            }
-        }
-        if (this.toolbarEvents.highlightModeSubject.getValue()) {
-            const rectangles = this.getRectangles(mouseEvent, page);
-            this.viewerEvents.textSelected({ page, rectangles });
-        }
-    }
-    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 });
-                }
-            }
-        }
-    }
-    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;
-    }
-    getRectanglesFromSelection(selection, page) {
-        if (!this.allPages || !this.allPages[page]) {
-            return [];
-        }
-        this.setPageProperties(page);
-        const range = selection.getRangeAt(0).cloneRange();
-        const clientRects = range.getClientRects();
-        if (!clientRects || clientRects.length === 0) {
-            return [];
-        }
-        let textLayerElement = range.startContainer;
-        if (textLayerElement.nodeType === Node.TEXT_NODE) {
-            textLayerElement = textLayerElement.parentElement;
-        }
-        const textLayer = textLayerElement.closest('.textLayer');
-        if (!textLayer) {
-            return [];
-        }
-        this.removeEnhancedTextModeStyling(textLayerElement);
-        return this.processClientRects(clientRects, textLayer);
-    }
-    onPdfViewerClick(event) {
-        this.store.dispatch(new SelectedAnnotation({
-            annotationId: '',
-            selected: false,
-            editable: false,
-        }));
-        this.viewerEvents.clearCtxToolbar();
-    }
-    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);
-                }
-            }
-        }
-    }
-    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;
-    }
-    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();
-            }
-        }
-    }
-    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);
-    }
-    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: 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: HighlightCreateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mvCreateTextHighlight]'
-                }]
-        }], 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']]
-            }] } });
-
 pdfjs.GlobalWorkerOptions.workerSrc = '/assets/build/pdf.worker.min.js';
 /**
  * Values of the state field returned by the find events
@@ -2383,30 +1763,245 @@ class PdfJsWrapper {
         if (zoomValue > 5) {
             return 5;
         }
-        if (zoomValue < 0.1) {
-            return 0.1;
+        if (zoomValue < 0.1) {
+            return 0.1;
+        }
+        return +zoomValue.toFixed(2);
+    }
+    rotate(rotation) {
+        return this.pdfViewer.pagesRotation = (this.pdfViewer.pagesRotation + rotation) % 360;
+    }
+    resetRotation(rotation) {
+        return this.pdfViewer.pagesRotation = rotation;
+    }
+    getNormalisedPagesRotation() {
+        return this.pdfViewer.pagesRotation;
+    }
+    getCurrentPDFZoomValue() {
+        return +this.pdfViewer.currentScaleValue;
+    }
+    setCurrentPDFTitle(title) {
+        this.documentTitle = title;
+    }
+    getCurrentPDFTitle() {
+        return this.documentTitle;
+    }
+}
+
+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);
+        }
+        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 {
+            this.drawModeSubject.next(false);
+        }
+    }
+    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);
         }
-        return +zoomValue.toFixed(2);
+        this.openRedactionSearch.next({ modeType: SearchType.Redact, isOpen: false });
     }
-    rotate(rotation) {
-        return this.pdfViewer.pagesRotation = (this.pdfViewer.pagesRotation + rotation) % 360;
+    toggleRedactionPreview(viewMode) {
+        this.redactionPreview.next(viewMode);
     }
-    resetRotation(rotation) {
-        return this.pdfViewer.pagesRotation = rotation;
+    unmarkAll() {
+        this.clearAllRedactMarkers.next();
     }
-    getNormalisedPagesRotation() {
-        return this.pdfViewer.pagesRotation;
+    applyRedactionToDocument() {
+        this.applyRedactToDocument.next();
     }
-    getCurrentPDFZoomValue() {
-        return +this.pdfViewer.currentScaleValue;
+    redactPage() {
+        this.redactWholePage.next();
     }
-    setCurrentPDFTitle(title) {
-        this.documentTitle = title;
+    toggleCommentsPanel(isVisible) {
+        if (isVisible) {
+            this.toggleParticipantsList(!isVisible);
+        }
+        this.commentsPanelVisible.next(isVisible);
     }
-    getCurrentPDFTitle() {
-        return this.documentTitle;
+    toggleParticipantsList(isVisible) {
+        if (isVisible) {
+            this.toggleCommentsPanel(!isVisible);
+        }
+        this.icpEventService.participantsListVisible.next(isVisible);
     }
+    /** @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) {
@@ -2471,6 +2066,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+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 getIcpState = createSelector(getMVState, (state) => state.icp);
 const getIcpSession = createSelector(getIcpState, getIcpSession$1);
 const getCaseId = createSelector(getIcpSession, session => session === null ? null : session.caseId);
@@ -2802,7 +2428,7 @@ class IcpService {
         this.followerSubscriptions = followerSubscriptions;
         this.store = store;
         this.icpEventService = icpEventService;
-        this.subscription = this.store.pipe(select(getCaseId), filter$1(value => !!value)).subscribe(caseId => {
+        this.subscription = this.store.pipe(select(getCaseId), filter(value => !!value)).subscribe(caseId => {
             this.caseId = caseId;
         });
         this.subscription.add(this.store.pipe(select(getDocumentId)).subscribe(docId => this.documentId = docId));
@@ -2818,7 +2444,7 @@ class IcpService {
     }
     launchSession() {
         this.store.dispatch(new LoadIcpSession({ caseId: this.caseId, documentId: this.documentId }));
-        this.subscription.add(this.store.pipe(select(getIcpSession), filter$1(value => !!value && Object.keys(value).length > 1), take(1)).subscribe(() => { this.setUpSessionSubscriptions(); }));
+        this.subscription.add(this.store.pipe(select(getIcpSession), filter(value => !!value && Object.keys(value).length > 1), take(1)).subscribe(() => { this.setUpSessionSubscriptions(); }));
     }
     setUpSessionSubscriptions() {
         this.sessionSubscription = this.icpEventService.becomingPresenter.subscribe(() => this.becomePresenter());
@@ -2969,6 +2595,212 @@ const defaultUnsupportedOptions = {
     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 }] });
+
 class RedactionSearchBarComponent {
     constructor(store, toolbarButtons, toolbarEvents, highlightService) {
         this.store = store;
@@ -4057,148 +3889,6 @@ 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;
@@ -4371,57 +4061,173 @@ class RectangleComponent {
         const { top, left, height, width } = this;
         switch (rotation) {
             case 90:
-                this.width = height;
-                this.height = width;
-                this.left = this.pageWidth - top - height;
-                this.top = left;
+                this.width = height;
+                this.height = width;
+                this.left = this.pageWidth - top - height;
+                this.top = left;
+                break;
+            case 180:
+                this.left = this.pageWidth - left - width;
+                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.left = this.pageWidth - left - width;
-                this.top = this.pageHeight - top - height;
+                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.width = height;
-                this.height = width;
-                this.left = top;
-                this.top = this.pageHeight - left - width;
+                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;
         }
     }
-    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;
+    popupTop() {
+        const popupTop = this.rectangle.y * this.zoom - this.defaultHeight;
+        return popupTop <= 0 ? this.defaultHeight : popupTop;
     }
-    /** @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"] }] }); }
+    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;
+        }
+    }
+    /** @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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RectangleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CtxToolbarComponent, 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: [{
+            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: [{
                 type: Input
             }], rotate: [{
                 type: Input
-            }], editable: [{
-                type: Input
             }], pageHeight: [{
                 type: Input
             }], pageWidth: [{
                 type: Input
-            }], selectEvent: [{
+            }], canHighlight: [{
+                type: Input
+            }], canBookmark: [{
+                type: Input
+            }], canComment: [{
+                type: Input
+            }], canDelete: [{
+                type: Input
+            }], createHighlightEvent: [{
                 type: Output
-            }], updateEvent: [{
+            }], deleteHighlightEvent: [{
                 type: Output
-            }], viewRect: [{
-                type: ViewChild,
-                args: ['rectElement', { static: false }]
-            }], annoRect: [{
-                type: Input
-            }], selected: [{
+            }], addOrEditCommentEvent: [{
+                type: Output
+            }], createBookmarkEvent: [{
+                type: Output
+            }], rectangles: [{
                 type: Input
             }] } });
 
@@ -4481,7 +4287,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", "cancelEvent"] }] }); }
+    /** @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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnotationViewComponent, decorators: [{
             type: Component,
@@ -4575,20 +4381,11 @@ 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();
@@ -4617,18 +4414,15 @@ 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" }, 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" }] }); }
+    /** @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" }] }); }
 }
 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                    (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" }]
+            args: [{ selector: 'mv-metadata-layer', template: "<div class=\"pageContainer\">\n  <div  *ngFor=\"let page of pages;  index as i\"\n       class=\"pageContainer__page\"\n       [ngStyle]=\"{\n       'width.px': page.styles.width,\n       'height.px': page.styles.height\n       }\"\n       [ngClass]=\"{ 'pageContainer__page--draw' : drawMode }\">\n    <mv-box-highlight-create\n      [page]=\"i + 1\"\n      [pageHeight]=\"page.styles.height\"\n      [pageWidth]=\"page.styles.width\"\n      [rotate]=\"rotate\"\n      [zoom]=\"zoom\"\n      (saveSelection)=\"saveAnnotation($event)\">\n    </mv-box-highlight-create>\n    <mv-ctx-toolbar *ngIf=\"rectangles && highlightPage === (i + 1)\"\n                    [rectangles]=\"rectangles\"\n                    [canBookmark]=\"true\" [canHighlight]=\"true\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotate\"\n                    [pageHeight]=\"page.styles.height\"\n                    [pageWidth]=\"page.styles.width\"\n                    (createBookmarkEvent)=\"createBookmark($event)\"\n                    (createHighlightEvent)=\"createHighlight()\">\n    </mv-ctx-toolbar>\n    <div class=\"pageContainer__page-item\">\n      <mv-annotation-set *ngIf=\"(annoPages$ | async) as annoPages\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotate\"\n                         [pageHeight]=\"page.styles.height\"\n                         [pageWidth]=\"page.styles.width\"\n                         [page]=\"i\" [annotations]=\"annoPages[i + 1]\"></mv-annotation-set>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ 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 {
@@ -5181,356 +4975,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['window:pointerup']
             }] } });
 
-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;
-    }
-    ngOnDestroy() {
-        this.cleanup();
+class HighlightCreateDirective {
+    constructor(element, toolbarEvents, viewerEvents, highlightService, store) {
+        this.element = element;
+        this.toolbarEvents = toolbarEvents;
+        this.viewerEvents = viewerEvents;
+        this.highlightService = highlightService;
+        this.store = store;
     }
-    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);
+    ngOnInit() {
+        this.$subscription = this.store.select(getPages).subscribe((pages) => {
+            if (pages[1]) {
+                this.allPages = pages;
             }
-        }
-    }
-    onBlur() {
-        if (this.showCursor && !this.isSelecting) {
-            this.hideCursor();
-        }
-    }
-    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);
-            }
-        }
-        else if (document.caretRangeFromPoint) {
-            range = document.caretRangeFromPoint(viewportX, viewportY);
-        }
-        if (range) {
-            selection.removeAllRanges();
-            selection.addRange(range);
+    ngOnDestroy() {
+        if (this.$subscription) {
+            this.$subscription.unsubscribe();
         }
     }
-    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;
+    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;
+                }
             }
         }
-        else if (document.caretRangeFromPoint) {
-            const caretRange = document.caretRangeFromPoint(this.selectionEndX, this.selectionEndY);
-            if (caretRange) {
-                endNode = caretRange.startContainer;
-                endOffset = caretRange.startOffset;
-            }
+        if (this.toolbarEvents.highlightModeSubject.getValue()) {
+            const rectangles = this.getRectangles(mouseEvent, page);
+            this.viewerEvents.textSelected({ page, rectangles });
         }
-        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();
     }
-    cancelTextSelection() {
+    onPdfViewerClick(event) {
+        this.store.dispatch(new SelectedAnnotation({
+            annotationId: '',
+            selected: false,
+            editable: false,
+        }));
+        this.viewerEvents.clearCtxToolbar();
+    }
+    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);
         const selection = window.getSelection();
         if (selection) {
-            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;
+            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;
                 }
             }
         }
-        return 1;
     }
-    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
-        });
+    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;
     }
-    reset() {
-        this.cleanup();
-        this.emitCursorPosition();
+    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();
+            }
+        }
     }
-    /** @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 }); }
+    /** @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: KeyboardTextHighlightDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HighlightCreateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[mvKeyboardTextHighlight]'
+                    selector: '[mvCreateTextHighlight]'
                 }]
-        }], 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: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ToolbarEventService }, { type: ViewerEventService }, { type: HighlightCreateService }, { type: i1.Store }], propDecorators: { onMouseUp: [{
                 type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onBlur: [{
+                args: ['mouseup', ['$event']]
+            }], onPdfViewerClick: [{
                 type: HostListener,
-                args: ['blur']
+                args: ['mousedown', ['$event']]
             }] } });
 
 const getRedactionState = createSelector(getMVState, (state) => state.redactions);
@@ -5565,7 +5117,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$1(value => !!value))
+        this.$subscription.add(this.store.pipe(select(getRedactedDocumentInfo), filter(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)));
@@ -5692,8 +5244,6 @@ 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());
         }));
@@ -5732,7 +5282,7 @@ class PdfViewerComponent {
         if (changes.url && this.pdfWrapper) {
             await this.loadDocument();
             if (this.enableRedactions) {
-                this.toolbarEvents.redactionMode.pipe(filter$1(value => !!value))
+                this.toolbarEvents.redactionMode.pipe(filter(value => !!value))
                     .subscribe(() => this.resetRotation());
             }
         }
@@ -5843,43 +5393,12 @@ 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 }, { 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 }); }
+    /** @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 }); }
 }
 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      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" }]
+            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" }]
         }], 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: [{
@@ -5912,9 +5431,6 @@ 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
             }] } });
@@ -6975,7 +6491,7 @@ class ConvertibleContentViewerComponent {
         this.documentTitle = new EventEmitter();
     }
     ngOnInit() {
-        this.$subscription = this.store.pipe(select(getConvertedDocument), filter$1(value => !!value))
+        this.$subscription = this.store.pipe(select(getConvertedDocument), filter(value => !!value))
             .subscribe((docInfo) => {
             if (docInfo.url) {
                 this.convertedUrl = docInfo.url;
@@ -7060,7 +6576,7 @@ class RotationPersistDirective {
     onMediaLoad(status) {
         this.rotation = 0;
         this.store.dispatch(new LoadRotation(this.documentId));
-        this.store.pipe(select(rotationLoaded), filter$1(value => !!value), take(1))
+        this.store.pipe(select(rotationLoaded), filter(value => !!value), take(1))
             .subscribe(() => {
             if (this.savedRotation) {
                 this.toolbarEvents.rotateSubject.next(this.savedRotation);
@@ -7095,6 +6611,11 @@ class ConfirmActionDialogComponent {
     constructor(icpEventService) {
         this.icpEventService = icpEventService;
     }
+    ngAfterViewInit() {
+        if (this.modalContainer) {
+            this.modalContainer.nativeElement.focus();
+        }
+    }
     onCancel() {
         this.icpEventService.leavingSession.next(false);
     }
@@ -7103,12 +6624,15 @@ class ConfirmActionDialogComponent {
         this.icpEventService.leavingSession.next(false);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmActionDialogComponent, deps: [{ token: IcpEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmActionDialogComponent, selector: "mv-confirm-action", ngImport: i0, template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onCancel()\">\n  <div id=\"modal\" class=\"modal-content govuk-width-container clearfix\" (click)=\"$event.stopPropagation()\">\n    <h2 class=\"govuk-heading-s\">Are you sure you want to leave the presentation?</h2>\n    <div class=\"button-container\">\n      <button id=\"modal-close-button\" (click)=\"onConfirm()\" class=\"govuk-button\">Confirm</button>\n      <button (click)=\"onCancel()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n    </div>\n  </div>\n</div>\n" }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ConfirmActionDialogComponent, selector: "mv-confirm-action", viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true }], ngImport: i0, template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onCancel()\">\n  <div id=\"modal\" \n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    #modalContainer\n    tabIndex=\"-1\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    <h2 class=\"govuk-heading-s\">Are you sure you want to leave the presentation?</h2>\n    <div class=\"button-container\">\n      <button id=\"modal-close-button\" (click)=\"onConfirm()\" class=\"govuk-button\">Confirm</button>\n      <button (click)=\"onCancel()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n    </div>\n  </div>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ConfirmActionDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-confirm-action', template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onCancel()\">\n  <div id=\"modal\" class=\"modal-content govuk-width-container clearfix\" (click)=\"$event.stopPropagation()\">\n    <h2 class=\"govuk-heading-s\">Are you sure you want to leave the presentation?</h2>\n    <div class=\"button-container\">\n      <button id=\"modal-close-button\" (click)=\"onConfirm()\" class=\"govuk-button\">Confirm</button>\n      <button (click)=\"onCancel()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: IcpEventService }] });
+            args: [{ selector: 'mv-confirm-action', template: "<div id=\"modal-background\" class=\"modal\" (click)=\"onCancel()\">\n  <div id=\"modal\" \n    class=\"modal-content govuk-width-container clearfix\"\n    (click)=\"$event.stopPropagation()\"\n    #modalContainer\n    tabIndex=\"-1\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n  >\n    <h2 class=\"govuk-heading-s\">Are you sure you want to leave the presentation?</h2>\n    <div class=\"button-container\">\n      <button id=\"modal-close-button\" (click)=\"onConfirm()\" class=\"govuk-button\">Confirm</button>\n      <button (click)=\"onCancel()\" class=\"govuk-button govuk-button--secondary\">Cancel</button>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: IcpEventService }], propDecorators: { modalContainer: [{
+                type: ViewChild,
+                args: ['modalContainer']
+            }] } });
 
 var CoreContentTypes;
 (function (CoreContentTypes) {
@@ -7907,7 +7431,6 @@ class MediaViewerModule {
             GrabNDragDirective,
             RotationPersistDirective,
             HighlightCreateDirective,
-            KeyboardTextHighlightDirective,
             ConfirmActionDialogComponent,
             RedactionComponent,
             BookmarkIconsComponent,
@@ -7974,7 +7497,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         GrabNDragDirective,
                         RotationPersistDirective,
                         HighlightCreateDirective,
-                        KeyboardTextHighlightDirective,
                         ConfirmActionDialogComponent,
                         RedactionComponent,
                         BookmarkIconsComponent,