@hmcts/media-viewer 4.2.39 → 4.2.40-exui-4316-rc1

package/fesm2022/hmcts-media-viewer.mjs

@@ -19,7 +19,6 @@ import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer.mjs';
 import { PDFLinkService } from 'pdfjs-dist/web/pdf_viewer.mjs';
 import * as pdfjs from 'pdfjs-dist';
 import 'pdfjs-dist/build/pdf.worker';
-import { some } from 'lodash';
 import * as i4$1 from 'ngx-chips';
 import { TagInputModule } from 'ngx-chips';
 import * as i3 from '@angular/router';
@@ -2065,8 +2064,8 @@ class HighlightCreateDirective {
         }
         this.setPageProperties(page);
         const range = selection.getRangeAt(0).cloneRange();
-        const clientRects = range.getClientRects();
-        if (!clientRects || clientRects.length === 0) {
+        const selectionRects = this.getSelectionRectangles(range);
+        if (!selectionRects || selectionRects.length === 0) {
             return [];
         }
         let textLayerElement = range.startContainer;
@@ -2078,7 +2077,7 @@ class HighlightCreateDirective {
             return [];
         }
         this.removeEnhancedTextModeStyling(textLayerElement);
-        return this.processClientRects(clientRects, textLayer);
+        return this.processClientRects(selectionRects, textLayer);
     }
     onPdfViewerClick(event) {
         this.store.dispatch(new SelectedAnnotation({
@@ -2096,14 +2095,17 @@ class HighlightCreateDirective {
             this.removeEnhancedTextModeStyling(localElement);
             if (selection.rangeCount && !selection.isCollapsed) {
                 const range = selection.getRangeAt(0).cloneRange();
-                const clientRects = range.getClientRects();
-                if (clientRects) {
+                const selectionRects = this.getSelectionRectangles(range);
+                if (selectionRects) {
                     const textLayer = localElement.closest(".textLayer");
-                    return this.processClientRects(clientRects, textLayer);
+                    return this.processClientRects(selectionRects, textLayer);
                 }
             }
         }
     }
+    getSelectionRectangles(range) {
+        return range.getClientRects();
+    }
     createTextRectangle(rect, parentRect) {
         const height = rect.bottom - rect.top;
         const width = rect.right - rect.left;
@@ -2136,7 +2138,10 @@ class HighlightCreateDirective {
         const selectionRectangles = [];
         for (let i = 0; i < clientRects.length; i++) {
             const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
-            const findSelectionRectangle = selectionRectangles.find((rect) => rect.width === selectionRectangle.width && rect.x === selectionRectangle.x);
+            const findSelectionRectangle = selectionRectangles.find((rect) => rect.width === selectionRectangle.width
+                && rect.height === selectionRectangle.height
+                && rect.x === selectionRectangle.x
+                && rect.y === selectionRectangle.y);
             if (!findSelectionRectangle) {
                 selectionRectangles.push(selectionRectangle);
             }
@@ -3152,7 +3157,8 @@ class RedactionSearchBarComponent {
         const selectedHighLightedElements = document.getElementsByClassName('highlight selected');
         if (selectedHighLightedElements && selectedHighLightedElements.length > 0) {
             const docRange = document.createRange();
-            if (some(selectedHighLightedElements, element => element.className === 'highlight begin selected' || element.className === 'highlight end selected')) {
+            const isMultiElementHighlight = Array.from(selectedHighLightedElements).some(element => element.classList?.contains('begin') || element.classList?.contains('end'));
+            if (isMultiElementHighlight) {
                 docRange.setStart(selectedHighLightedElements[0], 0);
                 const endNode = selectedHighLightedElements[selectedHighLightedElements.length - 1];
                 docRange.setEnd(endNode, endNode.childNodes.length);
@@ -3170,8 +3176,14 @@ class RedactionSearchBarComponent {
                     const parentRect = HtmlTemplatesHelper.getAdjustedBoundingRect(selectedHighLightedElements[0]?.parentElement?.parentElement);
                     const selectionRectangles = [];
                     for (let i = 0; i < clientRects.length; i++) {
+                        if (clientRects[i].width <= 0 || clientRects[i].height <= 0) {
+                            continue;
+                        }
                         const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
-                        const findSelecttionRectangle = selectionRectangles.find((rect) => rect.width === selectionRectangle.width && rect.x === selectionRectangle.x);
+                        const findSelecttionRectangle = selectionRectangles.find((rect) => rect.width === selectionRectangle.width
+                            && rect.height === selectionRectangle.height
+                            && rect.x === selectionRectangle.x
+                            && rect.y === selectionRectangle.y);
                         if (!findSelecttionRectangle) {
                             selectionRectangles.push(selectionRectangle);
                         }
@@ -4785,7 +4797,12 @@ class KeyboardBoxMoveDirective {
         element.dispatchEvent(stoppedEvent);
         if (wasFocused) {
             setTimeout(() => {
-                element.focus();
+                try {
+                    element.focus({ preventScroll: true });
+                }
+                catch {
+                    element.focus();
+                }
             }, 50);
         }
     }
@@ -4850,7 +4867,7 @@ class RectangleComponent {
         this.subscriptions.push(this.toolbarEvents.grabNDrag.subscribe(grabNDrag => this.enableGrabNDrag = grabNDrag));
         setTimeout(() => this.updateMovementBounds(), 0);
         if (this._selected && this.viewRect) {
-            this.viewRect.nativeElement.focus();
+            this.focusWithoutScrolling();
         }
     }
     ngOnDestroy() {
@@ -4860,7 +4877,7 @@ class RectangleComponent {
     set selected(selected) {
         this._selected = selected;
         if (this._selected && this.viewRect) {
-            this.viewRect.nativeElement.focus();
+            this.focusWithoutScrolling();
         }
     }
     get selected() {
@@ -4930,6 +4947,14 @@ class RectangleComponent {
         }
         this.tabToToolbar.emit(event);
     }
+    focusWithoutScrolling() {
+        try {
+            this.viewRect.nativeElement.focus({ preventScroll: true });
+        }
+        catch {
+            this.viewRect.nativeElement.focus();
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: RectangleComponent, deps: [{ token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component }); }
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.31", type: RectangleComponent, isStandalone: false, 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", tabToToolbar: "tabToToolbar" }, 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       (keydown.tab)=\"onTab($event)\"\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       (keydown.tab)=\"onTab($event)\"\n       (boxDelete)=\"onDelete()\">\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.DraggableElementDirective, selector: "[draggable]", inputs: ["rotate"], outputs: ["coordinates", "stopped"] }, { kind: "directive", type: i4$2.ResizableElementDirective, selector: "[resizable]", inputs: ["rotate", "selected"], outputs: ["stopped"] }, { kind: "directive", type: KeyboardBoxMoveDirective, selector: "[mvKeyboardBoxMove]", inputs: ["enabled", "incrementSmall", "incrementLarge", "movementBounds"], outputs: ["keyboardMovingChange", "boxDelete"] }] }); }
 }