@hmcts/media-viewer 4.1.8-exui-2488-1 → 4.1.8-exui-2600-1

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, asyncScheduler } from 'rxjs';
-import { take, distinctUntilChanged, filter, auditTime, tap, delay, throttleTime, map, catchError, switchMap, concatMap, exhaustMap, withLatestFrom } from 'rxjs/operators';
+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 * as i1 from '@ngrx/store';
 import { createFeatureSelector, createSelector, select, StoreModule } from '@ngrx/store';
 import { v4 } from 'uuid';
@@ -433,8 +433,9 @@ class SaveAnnotationSetFail {
     }
 }
 class SaveAnnotation {
-    constructor(payload) {
+    constructor(payload, autoSelect) {
         this.payload = payload;
+        this.autoSelect = autoSelect;
         this.type = SAVE_ANNOTATION;
     }
 }
@@ -2715,10 +2716,10 @@ class HighlightCreateService {
         this.toolBarEvents = toolBarEvents;
         this.store = store;
     }
-    saveAnnotation(rectangles, page) {
+    saveAnnotation(rectangles, page, annotationId) {
         this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
             const anno = {
-                id: v4(),
+                id: annotationId || v4(),
                 color: 'FFFF00',
                 comments: [],
                 page: page,
@@ -2733,7 +2734,7 @@ class HighlightCreateService {
                 lastModifiedDate: '',
                 tags: [],
             };
-            this.store.dispatch(new SaveAnnotation(anno));
+            this.store.dispatch(new SaveAnnotation(anno, !!annotationId));
         });
     }
     saveAnnotationSet(searchRectangles) {
@@ -3889,6 +3890,262 @@ 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;
@@ -3897,6 +4154,8 @@ class BoxHighlightCreateComponent {
         this.drawStartX = -1;
         this.drawStartY = -1;
         this.backgroundColor = 'none';
+        this.keyboardDrawingMode = false;
+        this.showCursor = false;
         this.subscriptions = [];
     }
     ngOnInit() {
@@ -3904,6 +4163,14 @@ 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;
@@ -3915,13 +4182,20 @@ 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;
@@ -3931,18 +4205,7 @@ class BoxHighlightCreateComponent {
         this.width = 50;
         this.top = this.drawStartY;
         this.left = this.drawStartX;
-        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;
-        }
+        this.adjustForRotation();
     }
     updateHighlight(event) {
         const rect = HtmlTemplatesHelper.getAdjustedBoundingRect(event.target, false), offsetX = event.clientX - rect.left, offsetY = event.clientY - rect.top;
@@ -3957,12 +4220,56 @@ 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);
-            rectangle = { id: v4(), ...rectangle };
-            console.log(`createHighlight: rectangle=${JSON.stringify(rectangle)}`);
-            this.saveSelection.emit({ rectangles: [rectangle], page: this.page });
+            const annotationId = v4();
+            rectangle = { id: annotationId, ...rectangle };
+            this.saveSelection.emit({ rectangles: [rectangle], page: this.page, annotationId });
             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;
@@ -3981,11 +4288,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 }], 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" }); }
+    /** @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"] }] }); }
 }
 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 [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" }]
+            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" }]
         }], ctorParameters: () => [{ type: ToolbarEventService }, { type: HighlightCreateService }], propDecorators: { page: [{
                 type: Input
             }], pageHeight: [{
@@ -4003,6 +4310,127 @@ 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 {
@@ -4019,8 +4447,11 @@ 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;
     }
@@ -4028,9 +4459,16 @@ 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)
@@ -4048,6 +4486,9 @@ 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)) {
@@ -4084,12 +4525,28 @@ 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", 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"] }] }); }
+    /** @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"] }] }); }
 }
 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" }]
+            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" }]
         }], ctorParameters: () => [{ type: ToolbarEventService }, { type: HighlightCreateService }], propDecorators: { color: [{
                 type: Input
             }], zoom: [{
@@ -4102,10 +4559,16 @@ 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 }]
@@ -4239,18 +4702,41 @@ 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 };
@@ -4286,12 +4772,22 @@ 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]=\"anno.id\">\n  <mv-ctx-toolbar *ngIf=\"selected\"\n                  [canDelete]=\"true\" [canComment]=\"true\"\n                  [rectangles]=\"anno.rectangles\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotate\"\n                  [pageHeight]=\"pageHeight\"\n                  [pageWidth]=\"pageWidth\"\n                  (deleteHighlightEvent)=\"deleteHighlight()\"\n                  (addOrEditCommentEvent)=\"addOrEditComment()\">\n  </mv-ctx-toolbar>\n  <ng-container *ngFor=\"let rectangle of anno.rectangles\">\n    <mv-anno-rectangle\n      (selectEvent)=\"onSelect()\"\n      (updateEvent)=\"onRectangleUpdate($event)\"\n      [selected]=\"selected\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotate\"\n      [pageHeight]=\"pageHeight\"\n      [pageWidth]=\"pageWidth\"\n      [editable]=\"anno.rectangles.length <= 1\"\n      [annoRect]=\"rectangle\"\n      [color]=\"anno.color\">\n    </mv-anno-rectangle>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RectangleComponent, selector: "mv-anno-rectangle", inputs: ["color", "zoom", "rotate", "editable", "pageHeight", "pageWidth", "annoRect", "selected"], outputs: ["selectEvent", "updateEvent"] }, { kind: "component", type: CtxToolbarComponent, selector: "mv-ctx-toolbar", inputs: ["zoom", "rotate", "pageHeight", "pageWidth", "canHighlight", "canBookmark", "canComment", "canDelete", "rectangles"], outputs: ["createHighlightEvent", "deleteHighlightEvent", "addOrEditCommentEvent", "createBookmarkEvent"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AnnotationViewComponent, selector: "mv-annotation", inputs: { annotation: "annotation", zoom: "zoom", rotate: "rotate", selectedAnnoId: "selectedAnnoId", pageHeight: "pageHeight", pageWidth: "pageWidth" }, outputs: { update: "update", delete: "delete", annotationClick: "annotationClick" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div #container [tabindex]=\"-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"] }] }); }
 }
 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]=\"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" }]
+            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" }]
         }], ctorParameters: () => [{ type: ToolbarEventService }, { type: i1.Store }], propDecorators: { annotation: [{
                 type: Input
             }], zoom: [{
@@ -4409,8 +4905,8 @@ class MetadataLayerComponent {
             this.rectangles = undefined;
         });
     }
-    saveAnnotation({ rectangles, page }) {
-        this.highlightService.saveAnnotation(rectangles, page);
+    saveAnnotation({ rectangles, page, annotationId }) {
+        this.highlightService.saveAnnotation(rectangles, page, annotationId);
         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 }); }
@@ -4852,10 +5348,6 @@ class SideBarComponent {
             this.selectedView = toggle ? 'outline' : 'bookmarks';
         }), this.toolbarEvents.sidebarOpen.subscribe(toggle => {
             this.sidebarOpen = toggle;
-        }), this.toolbarEvents.sidebarOpen.pipe(filter(toggle => toggle === true), delay(0)).subscribe(() => {
-            if (this.sidebarDiv?.nativeElement) {
-                this.sidebarDiv.nativeElement.focus();
-            }
         }));
         this.subscriptions.push(this.store.pipe(select(getScrollTop)).subscribe(scrollTopValue => {
             if (this.sidebarDiv?.nativeElement) {
@@ -4899,11 +5391,11 @@ class SideBarComponent {
         return next === undefined ? Number.MAX_SAFE_INTEGER : next.pageNumber;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SideBarComponent, deps: [{ token: ViewerEventService }, { token: i1.Store }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SideBarComponent, selector: "mv-side-bar", inputs: { annotationsEnabled: "annotationsEnabled", outline: "outline", url: "url", zoom: "zoom", rotate: "rotate", currentPageNumber: "currentPageNumber" }, viewQueries: [{ propertyName: "bookmarks", first: true, predicate: BookmarksComponent, descendants: true }, { propertyName: "sidebarDiv", first: true, predicate: ["sidebar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"toolbarSidebar\">\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton toggled\"\n  >\n    <button\n      id=\"sortBookmarkPosition\"\n      class=\"splitToolbarButton left bookmark__sort__position\"\n      (click)=\"bookmarks.sort(bookmarks.positionSort)\"\n      title=\"Order by place in document\"\n      aria-pressed=\"true\"\n    ></button>\n    <button\n      id=\"sortBookmarkCustom\"\n      class=\"splitToolbarButton left bookmark__sort__custom\"\n      (click)=\"bookmarks.sort(bookmarks.customSort)\"\n      title=\"Order manually\"\n      aria-pressed=\"true\"\n    ></button>\n  </div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton right\"\n  >\n    <button\n      id=\"addBookmark\"\n      class=\"toolbarButton addBookmark\"\n      (click)=\"bookmarks.onAddBookmarkClick()\"\n      title=\"Add bookmark\"\n      tabindex=\"3\"\n      data-l10n-id=\"addBookmark\"\n    >\n      <span data-l10n-id=\"addBookmark_label\">{{\n        \"Add bookmark\" | rpxTranslate\n      }}</span>\n    </button>\n  </div>\n</div>\n<div \n  #sidebar\n  id=\"sidebarContent\"\n  cdkScrollable\n  (scroll)=\"onScroll($event)\"\n  [hidden]=\"!sidebarOpen\"\n  tabIndex=\"-1\"\n  role=\"region\"\n  aria-label=\"Document sidebar\"\n>\n  <div id=\"outlineView\" class=\"outlineWithDeepNesting\">\n    <div class=\"outlineItem\" *ngIf=\"selectedView === 'outline'\">\n      <mv-outline-item\n        *ngFor=\"let outlineItem of outline; index as i\"\n        [outline]=\"outlineItem\"\n        [currentPageNumber]=\"currentPageNumber\"\n        [isCurrentSection]=\"isViewedItem(outlineItem, outline[i + 1])\"\n        [endPage]=\"findEndPage(outline[i + 1])\"\n        (navigationEvent)=\"goToDestination($event)\"\n      ></mv-outline-item>\n    </div>\n    <div\n      *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n      id=\"bookmarkContainer\"\n    >\n      <mv-bookmarks\n        [bookmarkNodes]=\"bookmarkNodes$ | async\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        [parentScrollTop]=\"scrollTop\"\n        (goToDestination)=\"goToDestination($event)\"\n        (treeHasChanged)=\"hasTreeChanged($event)\"\n      ></mv-bookmarks>\n    </div>\n  </div>\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: "directive", type: i5$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: BookmarksComponent, selector: "mv-bookmarks", inputs: ["bookmarkNodes", "zoom", "rotate", "parentScrollTop"], outputs: ["goToDestination", "treeHasChanged"] }, { kind: "component", type: OutlineItemComponent, selector: "mv-outline-item", inputs: ["outline", "currentPageNumber", "isCurrentSection", "endPage"], outputs: ["navigationEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SideBarComponent, selector: "mv-side-bar", inputs: { annotationsEnabled: "annotationsEnabled", outline: "outline", url: "url", zoom: "zoom", rotate: "rotate", currentPageNumber: "currentPageNumber" }, viewQueries: [{ propertyName: "bookmarks", first: true, predicate: BookmarksComponent, descendants: true }, { propertyName: "sidebarDiv", first: true, predicate: ["sidebar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"toolbarSidebar\">\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton toggled\"\n  >\n    <button\n      id=\"sortBookmarkPosition\"\n      class=\"splitToolbarButton left bookmark__sort__position\"\n      (click)=\"bookmarks.sort(bookmarks.positionSort)\"\n      title=\"Order by place in document\"\n      aria-pressed=\"true\"\n    ></button>\n    <button\n      id=\"sortBookmarkCustom\"\n      class=\"splitToolbarButton left bookmark__sort__custom\"\n      (click)=\"bookmarks.sort(bookmarks.customSort)\"\n      title=\"Order manually\"\n      aria-pressed=\"true\"\n    ></button>\n  </div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton right\"\n  >\n    <button\n      id=\"addBookmark\"\n      class=\"toolbarButton addBookmark\"\n      (click)=\"bookmarks.onAddBookmarkClick()\"\n      title=\"Add bookmark\"\n      tabindex=\"3\"\n      data-l10n-id=\"addBookmark\"\n    >\n      <span data-l10n-id=\"addBookmark_label\">{{\n        \"Add bookmark\" | rpxTranslate\n      }}</span>\n    </button>\n  </div>\n</div>\n<div #sidebar id=\"sidebarContent\" cdkScrollable (scroll)=\"onScroll($event)\" [hidden]=\"!sidebarOpen\">\n  <div id=\"outlineView\" class=\"outlineWithDeepNesting\">\n    <div class=\"outlineItem\" *ngIf=\"selectedView === 'outline'\">\n      <mv-outline-item\n        *ngFor=\"let outlineItem of outline; index as i\"\n        [outline]=\"outlineItem\"\n        [currentPageNumber]=\"currentPageNumber\"\n        [isCurrentSection]=\"isViewedItem(outlineItem, outline[i + 1])\"\n        [endPage]=\"findEndPage(outline[i + 1])\"\n        (navigationEvent)=\"goToDestination($event)\"\n      ></mv-outline-item>\n    </div>\n    <div\n      *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n      id=\"bookmarkContainer\"\n    >\n      <mv-bookmarks\n        [bookmarkNodes]=\"bookmarkNodes$ | async\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        [parentScrollTop]=\"scrollTop\"\n        (goToDestination)=\"goToDestination($event)\"\n        (treeHasChanged)=\"hasTreeChanged($event)\"\n      ></mv-bookmarks>\n    </div>\n  </div>\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: "directive", type: i5$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "component", type: BookmarksComponent, selector: "mv-bookmarks", inputs: ["bookmarkNodes", "zoom", "rotate", "parentScrollTop"], outputs: ["goToDestination", "treeHasChanged"] }, { kind: "component", type: OutlineItemComponent, selector: "mv-outline-item", inputs: ["outline", "currentPageNumber", "isCurrentSection", "endPage"], outputs: ["navigationEvent"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i5$1.RpxTranslatePipe, name: "rpxTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SideBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-side-bar', template: "<div id=\"toolbarSidebar\">\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton toggled\"\n  >\n    <button\n      id=\"sortBookmarkPosition\"\n      class=\"splitToolbarButton left bookmark__sort__position\"\n      (click)=\"bookmarks.sort(bookmarks.positionSort)\"\n      title=\"Order by place in document\"\n      aria-pressed=\"true\"\n    ></button>\n    <button\n      id=\"sortBookmarkCustom\"\n      class=\"splitToolbarButton left bookmark__sort__custom\"\n      (click)=\"bookmarks.sort(bookmarks.customSort)\"\n      title=\"Order manually\"\n      aria-pressed=\"true\"\n    ></button>\n  </div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton right\"\n  >\n    <button\n      id=\"addBookmark\"\n      class=\"toolbarButton addBookmark\"\n      (click)=\"bookmarks.onAddBookmarkClick()\"\n      title=\"Add bookmark\"\n      tabindex=\"3\"\n      data-l10n-id=\"addBookmark\"\n    >\n      <span data-l10n-id=\"addBookmark_label\">{{\n        \"Add bookmark\" | rpxTranslate\n      }}</span>\n    </button>\n  </div>\n</div>\n<div \n  #sidebar\n  id=\"sidebarContent\"\n  cdkScrollable\n  (scroll)=\"onScroll($event)\"\n  [hidden]=\"!sidebarOpen\"\n  tabIndex=\"-1\"\n  role=\"region\"\n  aria-label=\"Document sidebar\"\n>\n  <div id=\"outlineView\" class=\"outlineWithDeepNesting\">\n    <div class=\"outlineItem\" *ngIf=\"selectedView === 'outline'\">\n      <mv-outline-item\n        *ngFor=\"let outlineItem of outline; index as i\"\n        [outline]=\"outlineItem\"\n        [currentPageNumber]=\"currentPageNumber\"\n        [isCurrentSection]=\"isViewedItem(outlineItem, outline[i + 1])\"\n        [endPage]=\"findEndPage(outline[i + 1])\"\n        (navigationEvent)=\"goToDestination($event)\"\n      ></mv-outline-item>\n    </div>\n    <div\n      *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n      id=\"bookmarkContainer\"\n    >\n      <mv-bookmarks\n        [bookmarkNodes]=\"bookmarkNodes$ | async\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        [parentScrollTop]=\"scrollTop\"\n        (goToDestination)=\"goToDestination($event)\"\n        (treeHasChanged)=\"hasTreeChanged($event)\"\n      ></mv-bookmarks>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'mv-side-bar', template: "<div id=\"toolbarSidebar\">\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton toggled\"\n  >\n    <button\n      id=\"sortBookmarkPosition\"\n      class=\"splitToolbarButton left bookmark__sort__position\"\n      (click)=\"bookmarks.sort(bookmarks.positionSort)\"\n      title=\"Order by place in document\"\n      aria-pressed=\"true\"\n    ></button>\n    <button\n      id=\"sortBookmarkCustom\"\n      class=\"splitToolbarButton left bookmark__sort__custom\"\n      (click)=\"bookmarks.sort(bookmarks.customSort)\"\n      title=\"Order manually\"\n      aria-pressed=\"true\"\n    ></button>\n  </div>\n  <div class=\"splitToolbarButtonSeparator\"></div>\n  <div\n    *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n    class=\"splitToolbarButton right\"\n  >\n    <button\n      id=\"addBookmark\"\n      class=\"toolbarButton addBookmark\"\n      (click)=\"bookmarks.onAddBookmarkClick()\"\n      title=\"Add bookmark\"\n      tabindex=\"3\"\n      data-l10n-id=\"addBookmark\"\n    >\n      <span data-l10n-id=\"addBookmark_label\">{{\n        \"Add bookmark\" | rpxTranslate\n      }}</span>\n    </button>\n  </div>\n</div>\n<div #sidebar id=\"sidebarContent\" cdkScrollable (scroll)=\"onScroll($event)\" [hidden]=\"!sidebarOpen\">\n  <div id=\"outlineView\" class=\"outlineWithDeepNesting\">\n    <div class=\"outlineItem\" *ngIf=\"selectedView === 'outline'\">\n      <mv-outline-item\n        *ngFor=\"let outlineItem of outline; index as i\"\n        [outline]=\"outlineItem\"\n        [currentPageNumber]=\"currentPageNumber\"\n        [isCurrentSection]=\"isViewedItem(outlineItem, outline[i + 1])\"\n        [endPage]=\"findEndPage(outline[i + 1])\"\n        (navigationEvent)=\"goToDestination($event)\"\n      ></mv-outline-item>\n    </div>\n    <div\n      *ngIf=\"annotationsEnabled && selectedView === 'bookmarks'\"\n      id=\"bookmarkContainer\"\n    >\n      <mv-bookmarks\n        [bookmarkNodes]=\"bookmarkNodes$ | async\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        [parentScrollTop]=\"scrollTop\"\n        (goToDestination)=\"goToDestination($event)\"\n        (treeHasChanged)=\"hasTreeChanged($event)\"\n      ></mv-bookmarks>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: ViewerEventService }, { type: i1.Store }, { type: ToolbarEventService }], propDecorators: { annotationsEnabled: [{
                 type: Input
             }], outline: [{
@@ -6975,7 +7467,9 @@ class AnnotationsModule {
             MomentDatePipe,
             CommentFilterComponent,
             FilterPipe,
-            UnsnakePipe], imports: [A11yModule,
+            UnsnakePipe,
+            KeyboardBoxDrawDirective,
+            KeyboardBoxMoveDirective], imports: [A11yModule,
             CommonModule,
             FormsModule,
             HttpClientModule,
@@ -7051,7 +7545,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MomentDatePipe,
                         CommentFilterComponent,
                         FilterPipe,
-                        UnsnakePipe
+                        UnsnakePipe,
+                        KeyboardBoxDrawDirective,
+                        KeyboardBoxMoveDirective
                     ],
                     providers: [
                         AnnotationApiService,
@@ -7095,7 +7591,10 @@ class AnnotationEffects {
         })));
         this.postAnnotation$ = createEffect(() => this.actions$.pipe(ofType(SAVE_ANNOTATION), concatMap((action) => {
             return this.annotationApiService.postAnnotation(action.payload).pipe(map(annotations => {
-                return new SaveAnnotationSuccess(annotations);
+                const successAction = new SaveAnnotationSuccess(annotations);
+                successAction.autoSelect = action.autoSelect;
+                successAction.annotationId = action.payload.id;
+                return successAction;
             }), catchError(error => {
                 return of(new LoadAnnotationSetFail(error));
             }));
@@ -7114,6 +7613,13 @@ 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 }); }