@hmcts/media-viewer 4.1.8-exui-2600 → 4.1.8-exui-2489

package/fesm2022/hmcts-media-viewer.mjs

@@ -8,8 +8,8 @@ import * as i2 from '@angular/forms';
 import { UntypedFormControl, FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
-import { BehaviorSubject, Subject, of, combineLatest, debounceTime as debounceTime$1, asyncScheduler } from 'rxjs';
-import { take, distinctUntilChanged, filter, auditTime, tap, debounceTime, 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';
@@ -433,9 +433,8 @@ class SaveAnnotationSetFail {
     }
 }
 class SaveAnnotation {
-    constructor(payload, autoSelect) {
+    constructor(payload) {
         this.payload = payload;
-        this.autoSelect = autoSelect;
         this.type = SAVE_ANNOTATION;
     }
 }
@@ -2716,10 +2715,10 @@ class HighlightCreateService {
         this.toolBarEvents = toolBarEvents;
         this.store = store;
     }
-    saveAnnotation(rectangles, page, annotationId) {
+    saveAnnotation(rectangles, page) {
         this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
             const anno = {
-                id: annotationId || v4(),
+                id: v4(),
                 color: 'FFFF00',
                 comments: [],
                 page: page,
@@ -2734,7 +2733,7 @@ class HighlightCreateService {
                 lastModifiedDate: '',
                 tags: [],
             };
-            this.store.dispatch(new SaveAnnotation(anno, !!annotationId));
+            this.store.dispatch(new SaveAnnotation(anno));
         });
     }
     saveAnnotationSet(searchRectangles) {
@@ -3890,262 +3889,6 @@ const getBookmarksPerPage = createSelector(getPages, getBookmarkPages, (pages, p
     }
 });
 
-class KeyboardBoxDrawDirective {
-    set enabled(value) {
-        const wasEnabled = this._enabled;
-        this._enabled = value;
-        if (value && !wasEnabled && KeyboardBoxDrawDirective.lastInteractionWasKeyboard && !this.showCursor) {
-            this.initializeCursorForKeyboard();
-        }
-    }
-    get enabled() {
-        return this._enabled;
-    }
-    static { this.lastInteractionWasKeyboard = false; }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this._enabled = false;
-        this.minBoxSize = 10;
-        this.incrementSmall = 1;
-        this.incrementMedium = 5;
-        this.incrementLarge = 10;
-        this.drawingStarted = new EventEmitter();
-        this.drawingUpdated = new EventEmitter();
-        this.drawingConfirmed = new EventEmitter();
-        this.drawingCancelled = new EventEmitter();
-        this.cursorPositionChanged = new EventEmitter();
-        this.isDrawing = false;
-        this.showCursor = false;
-        if (typeof window !== 'undefined') {
-            window.addEventListener('keydown', KeyboardBoxDrawDirective.onGlobalKeyDown, { capture: true });
-            window.addEventListener('mousedown', KeyboardBoxDrawDirective.onGlobalMouseDown, { capture: true });
-        }
-    }
-    static onGlobalKeyDown() {
-        KeyboardBoxDrawDirective.lastInteractionWasKeyboard = true;
-    }
-    static onGlobalMouseDown() {
-        KeyboardBoxDrawDirective.lastInteractionWasKeyboard = false;
-    }
-    ngOnDestroy() {
-        this.cleanup();
-    }
-    initializeCursorForKeyboard() {
-        if (this.enabled && !this.showCursor && !this.isDrawing) {
-            const rect = this.elementRef.nativeElement.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0) {
-                this.cursorX = rect.width / 2;
-                this.cursorY = rect.height / 2;
-                this.showCursor = true;
-                this.emitCursorPosition();
-            }
-        }
-    }
-    onKeyDown(event) {
-        if (!this.enabled) {
-            return;
-        }
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            event.stopPropagation();
-            if (!this.isDrawing) {
-                this.startDrawing();
-            }
-            else {
-                this.confirmDrawing();
-            }
-            return;
-        }
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.isDrawing) {
-                this.cancelDrawing();
-            }
-            else if (this.showCursor) {
-                this.hideCursor();
-            }
-            return;
-        }
-        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-            event.preventDefault();
-            event.stopPropagation();
-            if (this.isDrawing) {
-                this.resizeBox(event);
-            }
-            else {
-                this.moveCursor(event);
-            }
-        }
-    }
-    onBlur() {
-        if (this.showCursor && !this.isDrawing) {
-            this.hideCursor();
-        }
-    }
-    moveCursor(event) {
-        const increment = event.shiftKey ? this.incrementLarge : this.incrementMedium;
-        if (!this.showCursor) {
-            const rect = this.elementRef.nativeElement.getBoundingClientRect();
-            this.cursorX = rect.width / 2;
-            this.cursorY = rect.height / 2;
-            this.showCursor = true;
-            this.emitCursorPosition();
-            return;
-        }
-        const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        switch (event.key) {
-            case 'ArrowUp':
-                this.cursorY = Math.max(0, this.cursorY - increment);
-                break;
-            case 'ArrowDown':
-                this.cursorY = Math.min(rect.height, this.cursorY + increment);
-                break;
-            case 'ArrowLeft':
-                this.cursorX = Math.max(0, this.cursorX - increment);
-                break;
-            case 'ArrowRight':
-                this.cursorX = Math.min(rect.width, this.cursorX + increment);
-                break;
-        }
-        this.emitCursorPosition();
-    }
-    startDrawing() {
-        let startX;
-        let startY;
-        if (this.showCursor) {
-            startX = this.cursorX;
-            startY = this.cursorY;
-            this.showCursor = false;
-            this.emitCursorPosition();
-        }
-        else {
-            // default to center
-            const rect = this.elementRef.nativeElement.getBoundingClientRect();
-            startX = rect.width / 2;
-            startY = rect.height / 2;
-        }
-        this.isDrawing = true;
-        this.drawStartX = startX;
-        this.drawStartY = startY;
-        this.currentWidth = this.minBoxSize;
-        this.currentHeight = this.minBoxSize;
-        this.emitDrawingStarted();
-    }
-    resizeBox(event) {
-        const increment = event.shiftKey ? this.incrementLarge : this.incrementSmall;
-        const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        switch (event.key) {
-            case 'ArrowRight':
-                const maxWidth = rect.width - this.drawStartX;
-                this.currentWidth = Math.min(maxWidth, this.currentWidth + increment);
-                break;
-            case 'ArrowLeft':
-                this.currentWidth = Math.max(this.minBoxSize, this.currentWidth - increment);
-                break;
-            case 'ArrowDown':
-                const maxHeight = rect.height - this.drawStartY;
-                this.currentHeight = Math.min(maxHeight, this.currentHeight + increment);
-                break;
-            case 'ArrowUp':
-                this.currentHeight = Math.max(this.minBoxSize, this.currentHeight - increment);
-                break;
-        }
-        this.emitDrawingUpdated();
-    }
-    confirmDrawing() {
-        this.emitDrawingConfirmed();
-        this.cleanup();
-    }
-    cancelDrawing() {
-        this.drawingCancelled.emit();
-        this.cleanup();
-    }
-    hideCursor() {
-        this.showCursor = false;
-        this.emitCursorPosition();
-    }
-    cleanup() {
-        this.isDrawing = false;
-        this.showCursor = false;
-        this.cursorX = undefined;
-        this.cursorY = undefined;
-        this.drawStartX = undefined;
-        this.drawStartY = undefined;
-        this.currentWidth = undefined;
-        this.currentHeight = undefined;
-    }
-    emitCursorPosition() {
-        this.cursorPositionChanged.emit({
-            x: this.cursorX,
-            y: this.cursorY,
-            visible: this.showCursor
-        });
-    }
-    emitDrawingStarted() {
-        this.drawingStarted.emit({
-            startX: this.drawStartX,
-            startY: this.drawStartY,
-            width: this.currentWidth,
-            height: this.currentHeight
-        });
-    }
-    emitDrawingUpdated() {
-        this.drawingUpdated.emit({
-            startX: this.drawStartX,
-            startY: this.drawStartY,
-            width: this.currentWidth,
-            height: this.currentHeight
-        });
-    }
-    emitDrawingConfirmed() {
-        this.drawingConfirmed.emit({
-            startX: this.drawStartX,
-            startY: this.drawStartY,
-            width: this.currentWidth,
-            height: this.currentHeight
-        });
-    }
-    reset() {
-        this.cleanup();
-        this.emitCursorPosition();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeyboardBoxDrawDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KeyboardBoxDrawDirective, selector: "[mvKeyboardBoxDraw]", inputs: { enabled: "enabled", minBoxSize: "minBoxSize", incrementSmall: "incrementSmall", incrementMedium: "incrementMedium", incrementLarge: "incrementLarge" }, outputs: { drawingStarted: "drawingStarted", drawingUpdated: "drawingUpdated", drawingConfirmed: "drawingConfirmed", drawingCancelled: "drawingCancelled", cursorPositionChanged: "cursorPositionChanged" }, host: { listeners: { "keydown": "onKeyDown($event)", "blur": "onBlur()" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeyboardBoxDrawDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mvKeyboardBoxDraw]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { enabled: [{
-                type: Input
-            }], minBoxSize: [{
-                type: Input
-            }], incrementSmall: [{
-                type: Input
-            }], incrementMedium: [{
-                type: Input
-            }], incrementLarge: [{
-                type: Input
-            }], drawingStarted: [{
-                type: Output
-            }], drawingUpdated: [{
-                type: Output
-            }], drawingConfirmed: [{
-                type: Output
-            }], drawingCancelled: [{
-                type: Output
-            }], cursorPositionChanged: [{
-                type: Output
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }] } });
-
 class BoxHighlightCreateComponent {
     constructor(toolbarEvents, highlightService) {
         this.toolbarEvents = toolbarEvents;
@@ -4154,8 +3897,6 @@ class BoxHighlightCreateComponent {
         this.drawStartX = -1;
         this.drawStartY = -1;
         this.backgroundColor = 'none';
-        this.keyboardDrawingMode = false;
-        this.showCursor = false;
         this.subscriptions = [];
     }
     ngOnInit() {
@@ -4163,14 +3904,6 @@ class BoxHighlightCreateComponent {
             this.toolbarEvents.drawModeSubject.subscribe(drawMode => {
                 this.defaultHeight = drawMode ? '100%' : '0px';
                 this.defaultWidth = drawMode ? '100%' : '0px';
-                this.drawMode = drawMode;
-                if (drawMode) {
-                    setTimeout(() => {
-                        if (this.drawingContainer?.nativeElement && this.isElementInViewport(this.drawingContainer.nativeElement)) {
-                            this.drawingContainer.nativeElement.focus();
-                        }
-                    }, 100);
-                }
             }),
             this.toolbarEvents.redactWholePage.subscribe(() => {
                 this.wholePage = true;
@@ -4182,20 +3915,13 @@ class BoxHighlightCreateComponent {
             subscription.unsubscribe();
         });
     }
-    isElementInViewport(el) {
-        const rect = el.getBoundingClientRect();
-        const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
-        const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
-        const verticallyVisible = rect.bottom > 0 && rect.top < windowHeight;
-        const horizontallyVisible = rect.right > 0 && rect.left < windowWidth;
-        return verticallyVisible && horizontallyVisible;
-    }
     initHighlight(event) {
         if (this.wholePage) {
             this.highlightPage();
             return;
         }
         const rect = HtmlTemplatesHelper.getAdjustedBoundingRect(event.target), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
+        console.log(`initHighlight: rect=${JSON.stringify(rect)}, clientX=${event.clientX}, clientY=${event.clientY}, offsetX=${offsetX}, offsetY=${offsetY}`);
         this.position = 'absolute';
         this.backgroundColor = 'yellow';
         this.drawStartX = offsetX;
@@ -4205,7 +3931,18 @@ class BoxHighlightCreateComponent {
         this.width = 50;
         this.top = this.drawStartY;
         this.left = this.drawStartX;
-        this.adjustForRotation();
+        switch (this.rotate) {
+            case 90:
+                this.top = this.drawStartY - this.height;
+                break;
+            case 180:
+                this.top = this.drawStartY - this.height;
+                this.left = this.drawStartX - this.width;
+                break;
+            case 270:
+                this.left = this.drawStartX - this.width;
+                break;
+        }
     }
     updateHighlight(event) {
         const rect = HtmlTemplatesHelper.getAdjustedBoundingRect(event.target, false), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
@@ -4220,56 +3957,12 @@ class BoxHighlightCreateComponent {
         if (this.height / this.zoom > 5 || this.width / this.zoom > 5) {
             let rectangle = this.highlightService
                 .applyRotation(this.pageHeight, this.pageWidth, this.height, this.width, this.top, this.left, this.rotate, this.zoom);
-            const annotationId = v4();
-            rectangle = { id: annotationId, ...rectangle };
-            this.saveSelection.emit({ rectangles: [rectangle], page: this.page, annotationId });
+            rectangle = { id: v4(), ...rectangle };
+            console.log(`createHighlight: rectangle=${JSON.stringify(rectangle)}`);
+            this.saveSelection.emit({ rectangles: [rectangle], page: this.page });
             this.resetHighlight();
         }
     }
-    onCursorPositionChanged(position) {
-        this.cursorX = position.x;
-        this.cursorY = position.y;
-        this.showCursor = position.visible;
-    }
-    onDrawingStarted(event) {
-        this.keyboardDrawingMode = true;
-        this.position = 'absolute';
-        this.backgroundColor = 'yellow';
-        this.display = 'block';
-        this.drawStartX = event.startX;
-        this.drawStartY = event.startY;
-        this.width = event.width;
-        this.height = event.height;
-        this.top = this.drawStartY;
-        this.left = this.drawStartX;
-        this.adjustForRotation();
-    }
-    onDrawingUpdated(event) {
-        this.width = event.width;
-        this.height = event.height;
-    }
-    onDrawingConfirmed(event) {
-        this.keyboardDrawingMode = false;
-        this.createHighlight();
-    }
-    onDrawingCancelled() {
-        this.keyboardDrawingMode = false;
-        this.resetHighlight();
-    }
-    adjustForRotation() {
-        switch (this.rotate) {
-            case 90:
-                this.top = this.drawStartY - this.height;
-                break;
-            case 180:
-                this.top = this.drawStartY - this.height;
-                this.left = this.drawStartX - this.width;
-                break;
-            case 270:
-                this.left = this.drawStartX - this.width;
-                break;
-        }
-    }
     resetHighlight() {
         this.drawStartX = -1;
         this.drawStartY = -1;
@@ -4288,11 +3981,11 @@ class BoxHighlightCreateComponent {
         this.createHighlight();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BoxHighlightCreateComponent, deps: [{ token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BoxHighlightCreateComponent, selector: "mv-box-highlight-create", inputs: { page: "page", pageHeight: "pageHeight", pageWidth: "pageWidth", rotate: "rotate", zoom: "zoom", container: "container" }, outputs: { saveSelection: "saveSelection" }, viewQueries: [{ propertyName: "highlight", first: true, predicate: ["boxHighlight"], descendants: true }, { propertyName: "drawingContainer", first: true, predicate: ["drawingContainer"], descendants: true }], ngImport: i0, template: "<div #drawingContainer\n  [style.height]=\"defaultHeight\"\n  [style.width]=\"defaultWidth\"\n  [tabindex]=\"drawMode ? 0 : -1\"\n  mvKeyboardBoxDraw\n  [enabled]=\"drawMode\"\n  (cursorPositionChanged)=\"onCursorPositionChanged($event)\"\n  (drawingStarted)=\"onDrawingStarted($event)\"\n  (drawingUpdated)=\"onDrawingUpdated($event)\"\n  (drawingConfirmed)=\"onDrawingConfirmed($event)\"\n  (drawingCancelled)=\"onDrawingCancelled()\"\n  (mousedown)=\"initHighlight($event)\"\n  (mousemove)=\"updateHighlight($event)\"\n  (mouseup)=\"createHighlight()\">\n\n  <div *ngIf=\"showCursor\"\n    class=\"drawing-cursor\"\n    [style.position]=\"'absolute'\"\n    [style.top]=\"cursorY + 'px'\"\n    [style.left]=\"cursorX + 'px'\">\n  </div>\n\n  <div #boxHighlight\n    class=\"box-highlight\"\n    [style.display]=\"display\"\n    [style.position]=\"position\"\n    [style.background-color]=\"backgroundColor\"\n    [style.height]=\"height ? height + 'px' : '100%'\"\n    [style.width]=\"width ? width + 'px' : '100%'\"\n    [style.top]=\"top + 'px'\"\n    [style.left]=\"left + 'px'\">\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: KeyboardBoxDrawDirective, selector: "[mvKeyboardBoxDraw]", inputs: ["enabled", "minBoxSize", "incrementSmall", "incrementMedium", "incrementLarge"], outputs: ["drawingStarted", "drawingUpdated", "drawingConfirmed", "drawingCancelled", "cursorPositionChanged"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BoxHighlightCreateComponent, selector: "mv-box-highlight-create", inputs: { page: "page", pageHeight: "pageHeight", pageWidth: "pageWidth", rotate: "rotate", zoom: "zoom", container: "container" }, outputs: { saveSelection: "saveSelection" }, viewQueries: [{ propertyName: "highlight", first: true, predicate: ["boxHighlight"], descendants: true }], ngImport: i0, template: "<div [style.height]=\"defaultHeight\"\n     [style.width]=\"defaultWidth\"\n     (mousedown)=\"initHighlight($event)\"\n     (mousemove)=\"updateHighlight($event)\"\n     (mouseup)=\"createHighlight()\">\n  <div #boxHighlight\n     class=\"box-highlight\"\n     [style.display]=\"display\"\n     [style.position]=\"position\"\n     [style.background-color]=\"backgroundColor\"\n     [style.height]=\"height ? height + 'px' : '100%'\"\n     [style.width]=\"width ? width + 'px' : '100%'\"\n     [style.top]=\"top + 'px'\"\n     [style.left]=\"left + 'px'\">\n  </div>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BoxHighlightCreateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-box-highlight-create', template: "<div #drawingContainer\n  [style.height]=\"defaultHeight\"\n  [style.width]=\"defaultWidth\"\n  [tabindex]=\"drawMode ? 0 : -1\"\n  mvKeyboardBoxDraw\n  [enabled]=\"drawMode\"\n  (cursorPositionChanged)=\"onCursorPositionChanged($event)\"\n  (drawingStarted)=\"onDrawingStarted($event)\"\n  (drawingUpdated)=\"onDrawingUpdated($event)\"\n  (drawingConfirmed)=\"onDrawingConfirmed($event)\"\n  (drawingCancelled)=\"onDrawingCancelled()\"\n  (mousedown)=\"initHighlight($event)\"\n  (mousemove)=\"updateHighlight($event)\"\n  (mouseup)=\"createHighlight()\">\n\n  <div *ngIf=\"showCursor\"\n    class=\"drawing-cursor\"\n    [style.position]=\"'absolute'\"\n    [style.top]=\"cursorY + 'px'\"\n    [style.left]=\"cursorX + 'px'\">\n  </div>\n\n  <div #boxHighlight\n    class=\"box-highlight\"\n    [style.display]=\"display\"\n    [style.position]=\"position\"\n    [style.background-color]=\"backgroundColor\"\n    [style.height]=\"height ? height + 'px' : '100%'\"\n    [style.width]=\"width ? width + 'px' : '100%'\"\n    [style.top]=\"top + 'px'\"\n    [style.left]=\"left + 'px'\">\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mv-box-highlight-create', template: "<div [style.height]=\"defaultHeight\"\n     [style.width]=\"defaultWidth\"\n     (mousedown)=\"initHighlight($event)\"\n     (mousemove)=\"updateHighlight($event)\"\n     (mouseup)=\"createHighlight()\">\n  <div #boxHighlight\n     class=\"box-highlight\"\n     [style.display]=\"display\"\n     [style.position]=\"position\"\n     [style.background-color]=\"backgroundColor\"\n     [style.height]=\"height ? height + 'px' : '100%'\"\n     [style.width]=\"width ? width + 'px' : '100%'\"\n     [style.top]=\"top + 'px'\"\n     [style.left]=\"left + 'px'\">\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ToolbarEventService }, { type: HighlightCreateService }], propDecorators: { page: [{
                 type: Input
             }], pageHeight: [{
@@ -4310,127 +4003,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], highlight: [{
                 type: ViewChild,
                 args: ['boxHighlight', { static: false }]
-            }], drawingContainer: [{
-                type: ViewChild,
-                args: ['drawingContainer', { static: false }]
-            }] } });
-
-class KeyboardBoxMoveDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.enabled = true;
-        this.incrementSmall = 1;
-        this.incrementLarge = 10;
-        this.keyboardMovingChange = new EventEmitter();
-        this.boxDelete = new EventEmitter();
-        this.moveSubject = new Subject();
-        this.isMoving = false;
-        this.moveSubscription = this.moveSubject
-            .pipe(debounceTime(500))
-            .subscribe(() => {
-            this.setMoving(false);
-            this.emitStoppedEvent();
-        });
-    }
-    ngOnDestroy() {
-        if (this.moveSubscription) {
-            this.moveSubscription.unsubscribe();
-        }
-        this.moveSubject.complete();
-    }
-    onKeyDown(event) {
-        if (event.key === 'Delete' || event.key === 'Backspace') {
-            event.preventDefault();
-            event.stopPropagation();
-            this.boxDelete.emit();
-            return;
-        }
-        if (!this.enabled) {
-            return;
-        }
-        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
-            event.preventDefault();
-            event.stopPropagation();
-            this.moveBox(event);
-        }
-    }
-    moveBox(event) {
-        const element = this.elementRef.nativeElement;
-        const increment = event.shiftKey ? this.incrementLarge : this.incrementSmall;
-        if (!this.isMoving) {
-            this.setMoving(true);
-        }
-        const currentTop = parseFloat(element.style.top) || 0;
-        const currentLeft = parseFloat(element.style.left) || 0;
-        const currentWidth = element.offsetWidth;
-        const currentHeight = element.offsetHeight;
-        let newTop = currentTop;
-        let newLeft = currentLeft;
-        switch (event.key) {
-            case 'ArrowUp':
-                newTop = currentTop - increment;
-                break;
-            case 'ArrowDown':
-                newTop = currentTop + increment;
-                break;
-            case 'ArrowLeft':
-                newLeft = currentLeft - increment;
-                break;
-            case 'ArrowRight':
-                newLeft = currentLeft + increment;
-                break;
-        }
-        if (this.movementBounds) {
-            newTop = Math.max(0, Math.min(newTop, this.movementBounds.containerHeight - currentHeight));
-            newLeft = Math.max(0, Math.min(newLeft, this.movementBounds.containerWidth - currentWidth));
-        }
-        element.style.top = `${newTop}px`;
-        element.style.left = `${newLeft}px`;
-        this.moveSubject.next();
-    }
-    setMoving(moving) {
-        if (this.isMoving !== moving) {
-            this.isMoving = moving;
-            this.keyboardMovingChange.emit(moving);
-        }
-    }
-    emitStoppedEvent() {
-        const element = this.elementRef.nativeElement;
-        const wasFocused = document.activeElement === element;
-        const stoppedEvent = new CustomEvent('stopped', {
-            detail: element,
-            bubbles: true
-        });
-        element.dispatchEvent(stoppedEvent);
-        if (wasFocused) {
-            setTimeout(() => {
-                element.focus();
-            }, 50);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeyboardBoxMoveDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KeyboardBoxMoveDirective, selector: "[mvKeyboardBoxMove]", inputs: { enabled: "enabled", incrementSmall: "incrementSmall", incrementLarge: "incrementLarge", movementBounds: "movementBounds" }, outputs: { keyboardMovingChange: "keyboardMovingChange", boxDelete: "boxDelete" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KeyboardBoxMoveDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mvKeyboardBoxMove]'
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { enabled: [{
-                type: Input
-            }], incrementSmall: [{
-                type: Input
-            }], incrementLarge: [{
-                type: Input
-            }], movementBounds: [{
-                type: Input
-            }], keyboardMovingChange: [{
-                type: Output
-            }], boxDelete: [{
-                type: Output
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
 class RectangleComponent {
@@ -4447,11 +4019,8 @@ class RectangleComponent {
     constructor(toolbarEvents, highlightService) {
         this.toolbarEvents = toolbarEvents;
         this.highlightService = highlightService;
-        this.rectangleTabIndex = 0;
         this.selectEvent = new EventEmitter();
         this.updateEvent = new EventEmitter();
-        this.deleteEvent = new EventEmitter();
-        this.keyboardMovingChange = new EventEmitter();
         this.subscriptions = [];
         this.enableGrabNDrag = false;
     }
@@ -4459,16 +4028,9 @@ class RectangleComponent {
         if (changes.rotate) {
             this.adjustForRotation(this.rotate);
         }
-        if (changes.pageHeight || changes.pageWidth) {
-            this.updateMovementBounds();
-        }
     }
     ngAfterViewInit() {
         this.subscriptions.push(this.toolbarEvents.grabNDrag.subscribe(grabNDrag => this.enableGrabNDrag = grabNDrag));
-        setTimeout(() => this.updateMovementBounds(), 0);
-        if (this._selected && this.viewRect) {
-            this.viewRect.nativeElement.focus();
-        }
     }
     ngOnDestroy() {
         this.subscriptions.filter(subscription => !subscription.closed)
@@ -4486,9 +4048,6 @@ class RectangleComponent {
     onClick() {
         this.selectEvent.emit(this.annoRect);
     }
-    onFocus() {
-        this.selectEvent.emit(this.annoRect);
-    }
     onUpdate(viewRect) {
         const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = viewRect;
         if (this.hasRectangleChanged(viewRect)) {
@@ -4525,28 +4084,12 @@ class RectangleComponent {
             Math.round(this.width) !== viewRect.offsetWidth ||
             Math.round(this.height) !== viewRect.offsetHeight;
     }
-    updateMovementBounds() {
-        if (this.pageHeight && this.pageWidth) {
-            this.movementBounds = {
-                containerHeight: this.pageHeight,
-                containerWidth: this.pageWidth
-            };
-        }
-    }
-    onKeyboardMovingChange(isMoving) {
-        this.keyboardMovingChange.emit(isMoving);
-    }
-    onDelete() {
-        if (this._selected) {
-            this.deleteEvent.emit(this.annoRect);
-        }
-    }
     /** @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", rectangleTabIndex: "rectangleTabIndex", annoRect: "annoRect", selected: "selected" }, outputs: { selectEvent: "selectEvent", updateEvent: "updateEvent", deleteEvent: "deleteEvent", keyboardMovingChange: "keyboardMovingChange" }, 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       mvKeyboardBoxMove\n       [tabindex]=\"rectangleTabIndex\"\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       [movementBounds]=\"movementBounds\"\n       (click)=\"onClick()\"\n       (focus)=\"onFocus()\"\n       (stopped)=\"onUpdate(rectElement)\"\n       (keyboardMovingChange)=\"onKeyboardMovingChange($event)\"\n       (boxDelete)=\"onDelete()\">\n  </div>\n</div>\n<ng-template #nonEditable>\n  <div #rectElement\n       class=\"rectangle\"\n       mvKeyboardBoxMove\n       [tabindex]=\"rectangleTabIndex\"\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       [enabled]=\"false\"\n       (click)=\"onClick()\"\n       (focus)=\"onFocus()\"\n       (boxDelete)=\"onDelete()\">\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"] }, { kind: "directive", type: KeyboardBoxMoveDirective, selector: "[mvKeyboardBoxMove]", inputs: ["enabled", "incrementSmall", "incrementLarge", "movementBounds"], outputs: ["keyboardMovingChange", "boxDelete"] }] }); }
+    /** @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       mvKeyboardBoxMove\n       [tabindex]=\"rectangleTabIndex\"\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       [movementBounds]=\"movementBounds\"\n       (click)=\"onClick()\"\n       (focus)=\"onFocus()\"\n       (stopped)=\"onUpdate(rectElement)\"\n       (keyboardMovingChange)=\"onKeyboardMovingChange($event)\"\n       (boxDelete)=\"onDelete()\">\n  </div>\n</div>\n<ng-template #nonEditable>\n  <div #rectElement\n       class=\"rectangle\"\n       mvKeyboardBoxMove\n       [tabindex]=\"rectangleTabIndex\"\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       [enabled]=\"false\"\n       (click)=\"onClick()\"\n       (focus)=\"onFocus()\"\n       (boxDelete)=\"onDelete()\">\n  </div>\n</ng-template>\n" }]
+            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: [{
@@ -4559,16 +4102,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], pageWidth: [{
                 type: Input
-            }], rectangleTabIndex: [{
-                type: Input
             }], selectEvent: [{
                 type: Output
             }], updateEvent: [{
                 type: Output
-            }], deleteEvent: [{
-                type: Output
-            }], keyboardMovingChange: [{
-                type: Output
             }], viewRect: [{
                 type: ViewChild,
                 args: ['rectElement', { static: false }]
@@ -4702,41 +4239,18 @@ class AnnotationViewComponent {
         if (selectedId) {
             const id = this.anno.id || this.anno.redactionId; // todo make it unique
             this.selected = selectedId.annotationId ? (selectedId.annotationId === id) : false;
-            if (this.selected && !this.isKeyboardMoving) {
-                this.showToolbarSubject.next(true);
-            }
-            else {
-                this.showToolbarSubject.next(false);
-            }
         }
     }
     constructor(toolbarEvents, store) {
         this.toolbarEvents = toolbarEvents;
         this.store = store;
-        this.isKeyboardMoving = false;
-        this.showToolbar = false;
-        this.showToolbarSubject = new Subject();
         this.update = new EventEmitter();
         this.delete = new EventEmitter();
         this.annotationClick = new EventEmitter();
-        this.showToolbarSubject
-            .pipe(debounceTime$1(300))
-            .subscribe(show => {
-            this.showToolbar = show;
-        });
-    }
-    ngOnDestroy() {
-        this.showToolbarSubject.complete();
-    }
-    setShowToolbar(show) {
-        this.showToolbarSubject.next(show);
     }
     onSelect() {
         const annotationId = this.anno.id || this.anno.redactionId;
         this.annotationClick.emit({ annotationId, editable: false, selected: true });
-        if (!this.isKeyboardMoving) {
-            this.setShowToolbar(true);
-        }
     }
     onRectangleUpdate(rectangle) {
         const annotation = { ...this.anno };
@@ -4772,22 +4286,12 @@ class AnnotationViewComponent {
         this.annotationClick.emit({ annotationId: this.anno.id, editable: true, selected: true });
         this.toolbarEvents.toggleCommentsPanel(true);
     }
-    onKeyboardMovingChange(isMoving) {
-        this.isKeyboardMoving = isMoving;
-        if (isMoving) {
-            this.showToolbar = false;
-            this.showToolbarSubject.next(false);
-        }
-        else if (this.selected) {
-            this.setShowToolbar(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]=\"-1\">\n  <mv-ctx-toolbar *ngIf=\"selected && showToolbar\"\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; let i = index\">\n    <mv-anno-rectangle\n      (selectEvent)=\"onSelect()\"\n      (updateEvent)=\"onRectangleUpdate($event)\"\n      (keyboardMovingChange)=\"onKeyboardMovingChange($event)\"\n      (deleteEvent)=\"deleteHighlight()\"\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      [rectangleTabIndex]=\"i + 1\"\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", "rectangleTabIndex", "annoRect", "selected"], outputs: ["selectEvent", "updateEvent", "deleteEvent", "keyboardMovingChange"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AnnotationViewComponent, selector: "mv-annotation", inputs: { annotation: "annotation", zoom: "zoom", rotate: "rotate", selectedAnnoId: "selectedAnnoId", pageHeight: "pageHeight", pageWidth: "pageWidth" }, outputs: { update: "update", delete: "delete", annotationClick: "annotationClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container [tabindex]=\"anno.id\">\n  <mv-ctx-toolbar *ngIf=\"selected\"\n                  [canDelete]=\"true\" [canComment]=\"true\"\n                  [rectangles]=\"anno.rectangles\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotate\"\n                  [pageHeight]=\"pageHeight\"\n                  [pageWidth]=\"pageWidth\"\n                  (deleteHighlightEvent)=\"deleteHighlight()\"\n                  (addOrEditCommentEvent)=\"addOrEditComment()\">\n  </mv-ctx-toolbar>\n  <ng-container *ngFor=\"let rectangle of anno.rectangles\">\n    <mv-anno-rectangle\n      (selectEvent)=\"onSelect()\"\n      (updateEvent)=\"onRectangleUpdate($event)\"\n      [selected]=\"selected\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotate\"\n      [pageHeight]=\"pageHeight\"\n      [pageWidth]=\"pageWidth\"\n      [editable]=\"anno.rectangles.length <= 1\"\n      [annoRect]=\"rectangle\"\n      [color]=\"anno.color\">\n    </mv-anno-rectangle>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RectangleComponent, selector: "mv-anno-rectangle", inputs: ["color", "zoom", "rotate", "editable", "pageHeight", "pageWidth", "annoRect", "selected"], outputs: ["selectEvent", "updateEvent"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnotationViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-annotation', template: "<div #container [tabindex]=\"-1\">\n  <mv-ctx-toolbar *ngIf=\"selected && showToolbar\"\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; let i = index\">\n    <mv-anno-rectangle\n      (selectEvent)=\"onSelect()\"\n      (updateEvent)=\"onRectangleUpdate($event)\"\n      (keyboardMovingChange)=\"onKeyboardMovingChange($event)\"\n      (deleteEvent)=\"deleteHighlight()\"\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      [rectangleTabIndex]=\"i + 1\"\n      [color]=\"anno.color\">\n    </mv-anno-rectangle>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: 'mv-annotation', 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" }]
         }], ctorParameters: () => [{ type: ToolbarEventService }, { type: i1.Store }], propDecorators: { annotation: [{
                 type: Input
             }], zoom: [{
@@ -4905,8 +4409,8 @@ class MetadataLayerComponent {
             this.rectangles = undefined;
         });
     }
-    saveAnnotation({ rectangles, page, annotationId }) {
-        this.highlightService.saveAnnotation(rectangles, page, annotationId);
+    saveAnnotation({ rectangles, page }) {
+        this.highlightService.saveAnnotation(rectangles, page);
         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 }); }
@@ -5889,12 +5393,37 @@ class PdfViewerComponent {
     getCurrentPageNumber() {
         return this.pdfWrapper.getPageNumber();
     }
+    onViewerContainerFocusIn(event) {
+        const elementFrom = event.relatedTarget;
+        const elementTo = event.target;
+        const comingFromSidebar = !!(elementFrom?.closest('#sidebarContainer') ||
+            elementFrom?.closest('#sidebarContent'));
+        const goingToViewer = !!elementTo?.closest('#viewerContainer');
+        if (!comingFromSidebar || !goingToViewer) {
+            return;
+        }
+        const isTextLayer = elementTo?.classList.contains('textLayer');
+        if (isTextLayer) {
+            const focusedPageElement = elementTo.closest('[data-page-number]');
+            const focusedPageNumber = focusedPageElement ? parseInt(focusedPageElement.getAttribute('data-page-number')) : null;
+            const currentPage = this.getCurrentPageNumber();
+            if (focusedPageNumber !== null && focusedPageNumber !== currentPage) {
+                const currentPageElement = this.viewerContainer.nativeElement.querySelector(`[data-page-number='${currentPage}']`);
+                if (currentPageElement) {
+                    const currentPageTextLayer = currentPageElement.querySelector('.textLayer');
+                    if (currentPageTextLayer) {
+                        currentPageTextLayer.focus();
+                    }
+                }
+            }
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PdfViewerComponent, deps: [{ token: i1.Store }, { token: i1.Store }, { token: PdfJsWrapperFactory }, { token: PrintService }, { token: ToolbarEventService }, { token: ViewerEventService }, { token: IcpService }, { token: ToolbarButtonVisibilityService }, { token: IcpEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: { downloadUrl: "downloadUrl", url: "url", downloadFileName: "downloadFileName", enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", annotationSet: "annotationSet", enableRedactSearch: "enableRedactSearch", height: "height", caseId: "caseId", searchBarHidden: "searchBarHidden" }, outputs: { mediaLoadStatus: "mediaLoadStatus", pdfViewerException: "pdfViewerException", documentTitle: "documentTitle" }, viewQueries: [{ propertyName: "viewerContainer", first: true, predicate: ["viewerContainer"], descendants: true, static: true }, { propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mv-side-bar\n  *ngIf=\"toolbarEvents.sidebarOpen\"\n  id=\"sidebarContainer\"\n  [url]=\"url\"\n  [zoom]=\"zoom\"\n  [rotate]=\"rotation\"\n  [outline]=\"documentOutline\"\n  [annotationsEnabled]=\"enableAnnotations\"\n  [currentPageNumber]=\"getCurrentPageNumber()\"\n>\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [isHidden]=\"!showCommentsPanel\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n  class=\"pdfContainer\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ pdfContainer: true, hidden: errorMessage }\"\n>\n  <mv-redaction-search-bar></mv-redaction-search-bar>\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"\n      (showCommentsPanel || showIcpParticipantsList) &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [class.grabNDrag]=\"enableGrabNDrag\"\n  >\n    <div\n      #pdfViewer\n      class=\"pdfViewer\"\n      mvCreateTextHighlight\n      [ngClass]=\"{\n        hidden: false,\n        highlightMode: highlightMode | async,\n        drawMode: drawMode | async\n      }\"\n    ></div>\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\" [rotate]=\"rotation\"> </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set\n    [contentScrollTop]=\"viewerContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"pdfViewer.offsetHeight\"\n    [pageHeights]=\"pageHeights\"\n  >\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">\n      {{ \"Loading...\" | rpxTranslate}}{{\n        loadingDocumentProgress ? loadingDocumentProgress + \"%\" : \"\"\n      }}\n    </h3>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar" }, { kind: "component", type: CommentSetComponent, selector: "mv-comment-set", inputs: ["annotationSet", "zoom", "rotate", "height", "pageHeights", "contentScrollTop"] }, { kind: "component", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: ["showCommentSummary", "isHidden"], outputs: ["showCommentSummaryDialog"] }, { kind: "component", type: MetadataLayerComponent, selector: "mv-metadata-layer", inputs: ["zoom", "rotate"] }, { kind: "component", type: SideBarComponent, selector: "mv-side-bar", inputs: ["annotationsEnabled", "outline", "url", "zoom", "rotate", "currentPageNumber"] }, { kind: "directive", type: GrabNDragDirective, selector: "[mvGrabNDrag]", inputs: ["dragEnabled", "dragX"] }, { kind: "directive", type: HighlightCreateDirective, selector: "[mvCreateTextHighlight]" }, { kind: "component", type: RedactionComponent, selector: "mv-redactions", inputs: ["zoom", "rotate"] }, { kind: "component", type: BookmarkIconsComponent, selector: "mv-bookmark-icons", inputs: ["zoom", "rotate"] }, { kind: "component", type: ParticipantsListComponent, selector: "mv-participants-list" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PdfViewerComponent, selector: "mv-pdf-viewer", inputs: { downloadUrl: "downloadUrl", url: "url", downloadFileName: "downloadFileName", enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", annotationSet: "annotationSet", enableRedactSearch: "enableRedactSearch", height: "height", caseId: "caseId", searchBarHidden: "searchBarHidden" }, outputs: { mediaLoadStatus: "mediaLoadStatus", pdfViewerException: "pdfViewerException", documentTitle: "documentTitle" }, viewQueries: [{ propertyName: "viewerContainer", first: true, predicate: ["viewerContainer"], descendants: true, static: true }, { propertyName: "pdfViewer", first: true, predicate: ["pdfViewer"], descendants: true }], 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    (focusin)=\"onViewerContainerFocusIn($event)\"\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      [ngClass]=\"{\n        hidden: false,\n        highlightMode: highlightMode | async,\n        drawMode: drawMode | async\n      }\"\n    ></div>\n    <mv-redactions\n      *ngIf=\"toolbarEvents.redactionMode | async; else annotationTemplate\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\"\n      >\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\" [rotate]=\"rotation\"> </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set\n    [contentScrollTop]=\"viewerContainer.scrollTop\"\n    *ngIf=\"\n      enableAnnotations &&\n      annotationSet &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [annotationSet]=\"annotationSet\"\n    [zoom]=\"zoom\"\n    [rotate]=\"rotation\"\n    [height]=\"pdfViewer.offsetHeight\"\n    [pageHeights]=\"pageHeights\"\n  >\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">\n      {{ \"Loading...\" | rpxTranslate}}{{\n        loadingDocumentProgress ? loadingDocumentProgress + \"%\" : \"\"\n      }}\n    </h3>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mv-pdf-viewer', encapsulation: ViewEncapsulation.None, template: "<mv-side-bar\n  *ngIf=\"toolbarEvents.sidebarOpen\"\n  id=\"sidebarContainer\"\n  [url]=\"url\"\n  [zoom]=\"zoom\"\n  [rotate]=\"rotation\"\n  [outline]=\"documentOutline\"\n  [annotationsEnabled]=\"enableAnnotations\"\n  [currentPageNumber]=\"getCurrentPageNumber()\"\n>\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{ 'show-comments-panel': showCommentsPanel }\"\n  [isHidden]=\"!showCommentsPanel\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\"\n>\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n  class=\"pdfContainer\"\n  [ngStyle]=\"{ height: height }\"\n  [ngClass]=\"{ pdfContainer: true, hidden: errorMessage }\"\n>\n  <mv-redaction-search-bar></mv-redaction-search-bar>\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"\n      (showCommentsPanel || showIcpParticipantsList) &&\n      (toolbarEvents.redactionMode | async) !== true\n    \"\n    [class.grabNDrag]=\"enableGrabNDrag\"\n    (focusin)=\"onViewerContainerFocusIn($event)\"\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: [{
@@ -7467,9 +6996,7 @@ class AnnotationsModule {
             MomentDatePipe,
             CommentFilterComponent,
             FilterPipe,
-            UnsnakePipe,
-            KeyboardBoxDrawDirective,
-            KeyboardBoxMoveDirective], imports: [A11yModule,
+            UnsnakePipe], imports: [A11yModule,
             CommonModule,
             FormsModule,
             HttpClientModule,
@@ -7545,9 +7072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MomentDatePipe,
                         CommentFilterComponent,
                         FilterPipe,
-                        UnsnakePipe,
-                        KeyboardBoxDrawDirective,
-                        KeyboardBoxMoveDirective
+                        UnsnakePipe
                     ],
                     providers: [
                         AnnotationApiService,
@@ -7591,11 +7116,7 @@ class AnnotationEffects {
         })));
         this.postAnnotation$ = createEffect(() => this.actions$.pipe(ofType(SAVE_ANNOTATION), concatMap((action) => {
             return this.annotationApiService.postAnnotation(action.payload).pipe(map(annotations => {
-                const successAction = new SaveAnnotationSuccess(annotations);
-                successAction.autoSelect = action.autoSelect;
-                successAction.annotationId = action.payload.id;
-                return successAction;
-                // return new annotationsActions.SaveAnnotationSuccess(annotations);
+                return new SaveAnnotationSuccess(annotations);
             }), catchError(error => {
                 return of(new LoadAnnotationSetFail(error));
             }));
@@ -7614,13 +7135,6 @@ class AnnotationEffects {
                 return of(new SaveAnnotationSetFail(error));
             }));
         })));
-        this.autoSelectAnnotation$ = createEffect(() => this.actions$.pipe(ofType(SAVE_ANNOTATION_SUCCESS), filter((action) => action.autoSelect === true && action.annotationId), map((action) => {
-            return new SelectedAnnotation({
-                annotationId: action.annotationId,
-                editable: false,
-                selected: true
-            });
-        })));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnotationEffects, deps: [{ token: i1$2.Actions }, { token: AnnotationApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnotationEffects }); }