@hmcts/media-viewer 4.2.1 → 4.2.4-exui-3994-g

package/fesm2022/hmcts-media-viewer.mjs

@@ -5400,12 +5400,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: "20.3.4", 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: "20.3.4", type: PdfViewerComponent, isStandalone: false, 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: "20.3.4", type: PdfViewerComponent, isStandalone: false, 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: "20.3.4", ngImport: i0, type: PdfViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-pdf-viewer', encapsulation: ViewEncapsulation.None, standalone: false, 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, standalone: false, 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: [{