@hmcts/media-viewer 4.2.13 → 4.2.14

package/assets/sass/toolbar/redaction-toolbar.scss

@@ -86,6 +86,17 @@ $button-border-color: #dee0e2;
     }
   }
 
+  #mvDrawBtn.toggled:not(:disabled),
+  #highlightTextBtn.toggled:not(:disabled) {
+    background-color: #f3f2f1;
+    box-shadow: inset 0 0 0 2px #ffdd00;
+  }
+
+  #mvDrawBtn.toggled:not(:disabled):hover,
+  #highlightTextBtn.toggled:not(:disabled):hover {
+    background-color: #f3f2f1;
+  }
+
   @media (max-width: 340px) {
     .redaction-button--draw,
     .redaction-button--redact,

package/fesm2022/hmcts-media-viewer.mjs

@@ -1673,7 +1673,12 @@ class ToolbarEventService {
         }
     }
     toggleHighlightToolbar() {
-        this.highlightToolbarSubject.next(!this.highlightToolbarSubject.getValue());
+        const isOpening = !this.highlightToolbarSubject.getValue();
+        this.highlightToolbarSubject.next(isOpening);
+        if (!isOpening) {
+            this.highlightModeSubject.next(false);
+            this.drawModeSubject.next(false);
+        }
     }
     rotate(angle) {
         this.rotateSubject.next(angle);
@@ -1731,11 +1736,15 @@ class ToolbarEventService {
     }
     toggleRedactionMode() {
         if (this.redactionMode.getValue() === false) {
+            this.highlightToolbarSubject.next(false);
+            this.highlightModeSubject.next(false);
             this.drawModeSubject.next(false);
             this.grabNDrag.next(false);
             this.redactionMode.next(true);
         }
         else {
+            this.highlightModeSubject.next(false);
+            this.drawModeSubject.next(false);
             this.redactionMode.next(false);
         }
         this.openRedactionSearch.next({ modeType: SearchType.Redact, isOpen: false });
@@ -1996,12 +2005,20 @@ class HighlightCreateDirective {
             }
         }));
         this.$subscriptions.push(this.toolbarEvents.highlightModeSubject.pipe(filter(enabled => enabled && !!this.element.nativeElement), debounceTime(100)).subscribe(() => {
-            this.element.nativeElement.focus();
+            this.focusWithoutScrolling(this.element.nativeElement);
         }));
     }
     ngOnDestroy() {
         this.$subscriptions.forEach(sub => sub.unsubscribe());
     }
+    focusWithoutScrolling(element) {
+        try {
+            element.focus({ preventScroll: true });
+        }
+        catch {
+            element.focus();
+        }
+    }
     onMouseUp(mouseEvent) {
         let page;
         let currentElement = mouseEvent.target;
@@ -4550,7 +4567,12 @@ class BoxHighlightCreateComponent {
     focusDrawingContainer() {
         setTimeout(() => {
             if (this.drawingContainer?.nativeElement && this.isElementInViewport(this.drawingContainer.nativeElement)) {
-                this.drawingContainer.nativeElement.focus();
+                try {
+                    this.drawingContainer.nativeElement.focus({ preventScroll: true });
+                }
+                catch {
+                    this.drawingContainer.nativeElement.focus();
+                }
             }
         }, 100);
     }
@@ -6895,20 +6917,28 @@ class ToolbarFocusService {
             if (buttonId) {
                 const button = document.querySelector(`#${buttonId}`);
                 if (button) {
-                    button.focus();
+                    this.focusWithoutScrolling(button);
                     return;
                 }
             }
             if (element.tagName === 'BUTTON') {
-                element.focus();
+                this.focusWithoutScrolling(element);
                 return;
             }
             const tabbableButton = element.querySelector('button[tabindex="0"]');
             if (tabbableButton) {
-                tabbableButton.focus();
+                this.focusWithoutScrolling(tabbableButton);
             }
         }, delay);
     }
+    focusWithoutScrolling(element) {
+        try {
+            element.focus({ preventScroll: true });
+        }
+        catch {
+            element.focus();
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolbarFocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolbarFocusService }); }
 }
@@ -7775,6 +7805,7 @@ class HighlightToolbarComponent {
     onClose() {
         this.toolbarEventService.highlightToolbarSubject.next(false);
         this.toolbarEventService.highlightModeSubject.next(false);
+        this.toolbarEventService.drawModeSubject.next(false);
         this.toolbarEventService.openRedactionSearch.next({ modeType: SearchType.Highlight, isOpen: false });
     }
     onEscapeKey(event) {