@hmcts/media-viewer 2.7.6 → 2.7.10

package/assets/sass/comment-set-header.scss

@@ -29,6 +29,17 @@
   .aui-comment__private-text {
     margin: 0;
   }
+
+  .commentSummaryHeader-button--close {
+    width: 25px;
+    height: 25px;
+    padding-top: 40px;
+    position: absolute;
+    right: 0;
+    &:after {
+      background-image: url(/assets/images/icon-tag-remove-cross.svg);
+    }
+  }
 }
 
 .searchComments {

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

@@ -44,7 +44,7 @@
     &:focus {
       outline: 3px solid #ffbf47;
       outline-offset: -2px;
-      z-index: 99;    
+      z-index: 99;
     }
   }
 
@@ -261,7 +261,7 @@
   width: 120px;
   &:after {
     background-image: url(/assets/images/present.svg);
-    background-size: 16px 19px;    
+    background-size: 16px 19px;
   }
 }
 
@@ -269,7 +269,7 @@
   width: 115px;
   &:after {
     background-image: url(/assets/images/marker-pen.svg);
-    background-size: 18px 19px;    
+    background-size: 18px 19px;
   }
 }
 

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

@@ -69,6 +69,13 @@ $button-border-color: #dee0e2;
     }
   }
 
+  .redaction-button--close {
+    width: 175px;
+    &:after {
+      background-image: url(/assets/images/icon-tag-remove-cross.svg);
+    }
+  }
+
   @media (max-width: 340px) {
     .redaction-button--draw,
     .redaction-button--redact,

package/assets/sass/toolbar/search-bar.scss

@@ -18,6 +18,14 @@
   }
 }
 
+.searchbar-button--close {
+  padding-top: 0px;
+  padding-bottom: 25px;
+  &:after {
+    background-image: url(/assets/images/icon-tag-remove-cross.svg);
+  }
+}
+
 @media screen and (max-width: 425px) {
   .searchbar {
     width: 100%;

package/bundles/hmcts-media-viewer.umd.js

@@ -3217,13 +3217,6 @@
                          * @return {?}
                          */function (toggle) {
                             _this.showCommentsPanel = toggle;
-                            if (toggle) {
-                                setTimeout(( /**
-                                 * @return {?}
-                                 */function () {
-                                    _this.scrollTwo.nativeElement.scrollBy(0, _this.viewerContainer.nativeElement.scrollTop);
-                                }));
-                            }
                         })));
                         this.$subscription.add(this.viewerEvents.navigationEvent.subscribe(( /**
                          * @param {?} dest
@@ -3428,9 +3421,6 @@
             function (rotation) {
                 /** @type {?} */
                 var pageNumber = this.pdfWrapper.getPageNumber();
-                if (this.commentsPanel) {
-                    this.commentsPanel.container.nativeElement.style.height = 0;
-                }
                 this.pdfWrapper.rotate(rotation);
                 this.pdfWrapper.setPageNumber(pageNumber);
                 this.rotation = (this.rotation + rotation) % 360;
@@ -3537,7 +3527,7 @@
         PdfViewerComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'mv-pdf-viewer',
-                        template: "<mv-side-bar *ngIf=\"toolbarEvents.sidebarOpen\"\n             id=\"sidebarContainer\"\n             [url]=\"url\"\n             [zoom]=\"zoom\"\n             [rotate]=\"rotation\"\n             [outline]=\"documentOutline\"\n             [annotationsEnabled]=\"enableAnnotations\">\n</mv-side-bar>\n\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{'show-comments-panel': showCommentsPanel}\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\">\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n\n<div\n     class=\"pdfContainer\"\n     [ngStyle]=\"{ height: height }\"\n     [ngClass]=\"{ 'pdfContainer': true, hidden: errorMessage }\">\n\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    (scroll)=\"scrollTwo.scrollTop = viewerContainer.scrollTop\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"(showCommentsPanel || showIcpParticipantsList) && !(toolbarEvents.redactionMode | async)\"\n    [class.grabNDrag]=\"enableGrabNDrag\">\n\n    <div #pdfViewer\n         class=\"pdfViewer\"\n         mvCreateTextHighlight\n         [ngClass]=\"{ hidden: loadingDocument, highlightMode: highlightMode | async, drawMode: drawMode | async }\">\n    </div>\n\n    <mv-redactions *ngIf=\"(toolbarEvents.redactionMode | async); else annotationTemplate\"\n                   [zoom]=\"zoom\"\n                   [rotate]=\"rotation\"\n    ></mv-redactions>\n\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\">\n      </mv-metadata-layer>\n\n      <mv-bookmark-icons [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-bookmark-icons>\n    </ng-template>\n  </div>\n\n  <div #scrollTwo class=\"comments\">\n    <mv-comment-set #commentsPanel\n                    *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                    [annotationSet]=\"annotationSet\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotation\"\n                    [height]=\"pdfViewer.offsetHeight\"\n                    [pageHeights]=\"pageHeights\">\n    </mv-comment-set>\n  </div>\n\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">Loading...{{ loadingDocumentProgress ? loadingDocumentProgress + '%' : '' }}</h3>\n  </div>\n</div>\n",
+                        template: "<mv-side-bar *ngIf=\"toolbarEvents.sidebarOpen\"\n             id=\"sidebarContainer\"\n             [url]=\"url\"\n             [zoom]=\"zoom\"\n             [rotate]=\"rotation\"\n             [outline]=\"documentOutline\"\n             [annotationsEnabled]=\"enableAnnotations\">\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{'show-comments-panel': showCommentsPanel}\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\">\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  <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]=\"(showCommentsPanel || showIcpParticipantsList) && !(toolbarEvents.redactionMode | async)\"\n    [class.grabNDrag]=\"enableGrabNDrag\">\n    <div #pdfViewer\n         class=\"pdfViewer\"\n         mvCreateTextHighlight\n         [ngClass]=\"{ hidden: loadingDocument, highlightMode: highlightMode | async, drawMode: drawMode | async }\">\n    </div>\n    <mv-redactions *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      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set [contentScrollTop]=\"viewerContainer.scrollTop\"\n                  *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                  [annotationSet]=\"annotationSet\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotation\"\n                  [height]=\"pdfViewer.offsetHeight\"\n                  [pageHeights]=\"pageHeights\">\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">Loading...{{ loadingDocumentProgress ? loadingDocumentProgress + '%' : '' }}</h3>\n  </div>\n</div>\n",
                         encapsulation: i0.ViewEncapsulation.None
                     }] }
         ];
@@ -3568,8 +3558,6 @@
             caseId: [{ type: i0.Input }],
             viewerContainer: [{ type: i0.ViewChild, args: ['viewerContainer',] }],
             pdfViewer: [{ type: i0.ViewChild, args: ['pdfViewer',] }],
-            commentsPanel: [{ type: i0.ViewChild, args: ['commentsPanel',] }],
-            scrollTwo: [{ type: i0.ViewChild, args: ['scrollTwo',] }],
             searchBarHidden: [{ type: i0.Input }]
         };
         return PdfViewerComponent;
@@ -5133,7 +5121,7 @@
         MainToolbarComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'mv-main-toolbar',
-                        template: "<div class=\"toolbar\">\n  <div id=\"toolbarContainer\">\n    <div class=\"mv-toolbar__container\">\n      <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n        <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n        <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n          <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n        </div>\n        <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n        <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n          <button id=\"mvMoreOptionsBtn\" class=\"mv-button mv-toolbar__menu-button--more-options\"\n                  [class.mv-toolbar__menu-button--more-options__hidden]=\"mvToolbar.offsetWidth >= allButtonsWidth\" aria-pressed=\"false\"\n                  (click)=\"toggleMoreOptions()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n            <span>More options</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\" [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\">\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n\n          <button *ngIf=\"toolbarButtons.showSidebar\" id=\"mvIndexBtn\" title=\"Index\" data-l10n-id=\"index\" #mvIndexBtn\n                  class=\"mv-button mv-toolbar__menu-button--index\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleSideBar()\">\n            <span>Index</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showDrawButton\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDrawBtn\"\n            #mvDrawBtn class=\"mv-button mv-toolbar__menu-button--draw\" title=\"Draw a box\" tabindex=\"-1\"\n            [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\" (click)=\"onClickDrawToggle()\">\n            <span data-l10n-id=\"draw_label\">Draw a box</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showHighlightButton\" [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\" #mvHighlightBtn class=\"mv-button mv-toolbar__menu-button--highlight\" title=\"Highlight\"\n            tabindex=\"-1\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle()\" data-l10n-id=\"toggleHighlightButton\">\n            <span data-l10n-id=\"highlight_label\">Highlight</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div id=\"mvPageBtn\" #mvPageBtn class=\"mv-toolbar__menu-button--page\" aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\"\n              [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\">\n              <span>Page</span>\n\n              <button id=\"mvUpBtn\" [disabled]=\"pageNumber === 1\" title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\" data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"><span></span></button>\n              <button id=\"mvDownBtn\" [disabled]=\"pageNumber === pageCount\" title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\" data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"><span></span></button>\n\n              <input type=\"number\" id=\"pageNumber\" class=\"hmcts-toolbar-input govuk-input--width-2\" title=\"Page Number\"\n                value=\"1\" size=\"4\" min=\"1\" [value]=\"pageNumber\" aria-label=\"page number\" tabindex=\"0\"\n                data-l10n-id=\"page\" (change)=\"onPageNumberInputChange(pageNumberInput.value)\" #pageNumberInput>\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div id=\"mvZoomBtn\" #mvZoomBtn class=\"mv-toolbar__menu-button--zoom\" aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\"\n              [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\">\n              <span>Zoom</span>\n              <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 0.1\" id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\" title=\"Zoom Out\" data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"><span></span></button>\n              <select id=\"scaleSelect\" class=\"hmcts-toolbar-select\" title=\"Zoom\" tabindex=\"0\" data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\" aria-label=\"zoom\">\n                <option #zoomSelect id=\"customScaleOption\" title=\"\" [value]=\"toolbarEvents.zoomValueSubject.value\">\n                  {{(toolbarEvents.zoomValueSubject.value) * 100 | number: '1.0-0'}}%</option>\n                <option *ngFor=\"let zoomScale of zoomScales\" title=\"\" [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale*100\">{{ zoomScale *100 }}%\n                </option>\n              </select>\n\n              <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 5\" id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\" (click)=\"stepZoom(0.1)\" title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"><span></span></button>\n            </div>\n          </ng-container>\n\n          <div *ngIf=\"toolbarButtons.showRotate\" id=\"mvRotateBtn\" #mvRotateBtn class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\">\n            <button id=\"mvRotateLeftBtn\" class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\" data-l10n-id=\"page_rotate_ccw\" (click)=\"rotate(270)\"><span></span>\n            </button>\n            <button id=\"mvRotateRightBtn\" class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\" data-l10n-id=\"page_rotate_cw\" (click)=\"rotate(90)\"><span></span>\n            </button>\n            <span>Rotate</span>\n          </div>\n\n          <button *ngIf=\"toolbarButtons.showSearchBar\" [disabled]=\"icpEnabled\" id=\"mvSearchBtn\" #mvSearchBtn\n                  title=\"Search\" data-l10n-id=\"searchbar\" class=\"mv-button mv-toolbar__menu-button--search\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleSearchBar()\">\n            <span data-l10n-id=\"search_label\">Search</span>\n          </button>\n\n          <button *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n                  [disabled]=\"icpEnabled || !contentType || redactionEnabled\" id=\"mvPresentBtn\" #mvPresentBtn\n                  class=\"mv-button mv-toolbar__menu-button--present\" title=\"In-Court Presentation Mode\"\n                  data-l10n-id=\"icpMode_label\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\" aria-pressed=\"false\"\n                  (click)=\"togglePresentBar()\"><span data-l10n-id=\"icpMode_label\">Present</span>\n          </button>\n\n          <button *ngIf=\"enableRedactions && toolbarButtons.showRedact\" [disabled]=\"icpEnabled\" id=\"mvRedactBtn\"\n                  #mvRedactBtn title=\"Redact\" data-l10n-id=\"redact\" class=\"mv-button mv-toolbar__menu-button--redact\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleRedactBar()\">\n            <span>Redact</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showGrabNDragButton\" [disabled]=\"icpEnabled\" id=\"mvGrabBtn\" #mvGrabBtn\n                  class=\"mv-button mv-toolbar__menu-button--grab\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleGrabNDrag()\">\n            <span>Grab and drag</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showDownload\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDownloadBtn\"\n                  #mvDownloadBtn class=\"mv-button mv-toolbar__menu-button--download\" title=\"Download\" data-l10n-id=\"download\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\" aria-pressed=\"false\"\n                  (click)=\"downloadFile()\">\n            <span>Download</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showPrint\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvPrintBtn\"\n                  #mvPrintBtn title=\"Print\" data-l10n-id=\"print\" class=\"mv-button mv-toolbar__menu-button--print\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\" aria-pressed=\"false\"\n                  (click)=\"printFile()\">\n            <span>Print</span>\n          </button>\n\n          <button *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\" [disabled]=\"redactionEnabled\"\n                  id=\"mvCommentsBtn\" #mvCommentsBtn class=\"mv-button mv-toolbar__menu-button--comments\" title=\"Comments\"\n                  data-l10n-id=\"comments\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleCommentsPanel()\">\n            <span>Comments</span>\n          </button>\n        </ng-template>\n      </div>\n      <mv-search-bar></mv-search-bar>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\">\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                        template: "<div class=\"toolbar\">\n  <div id=\"toolbarContainer\">\n    <div class=\"mv-toolbar__container\">\n      <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n        <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n        <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n          <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n        </div>\n        <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n        <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n          <button id=\"mvMoreOptionsBtn\" class=\"mv-button mv-toolbar__menu-button--more-options\"\n                  [class.mv-toolbar__menu-button--more-options__hidden]=\"mvToolbar.offsetWidth >= allButtonsWidth\" aria-pressed=\"false\"\n                  (click)=\"toggleMoreOptions()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n            <span>More options</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\" [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\">\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n\n          <button *ngIf=\"toolbarButtons.showSidebar\" id=\"mvIndexBtn\" title=\"Index\" data-l10n-id=\"index\" #mvIndexBtn\n                  class=\"mv-button mv-toolbar__menu-button--index\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleSideBar(); isDropdownMenuOpen = false\">\n            <span>Index</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showDrawButton\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDrawBtn\"\n            #mvDrawBtn class=\"mv-button mv-toolbar__menu-button--draw\" title=\"Draw a box\" tabindex=\"-1\"\n            [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\" (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\">\n            <span data-l10n-id=\"draw_label\">Draw a box</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showHighlightButton\" [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\" #mvHighlightBtn class=\"mv-button mv-toolbar__menu-button--highlight\" title=\"Highlight\"\n            tabindex=\"-1\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\" data-l10n-id=\"toggleHighlightButton\">\n            <span data-l10n-id=\"highlight_label\">Highlight</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div id=\"mvPageBtn\" #mvPageBtn class=\"mv-toolbar__menu-button--page\" aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\"\n              [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\">\n              <span>Page</span>\n\n              <button id=\"mvUpBtn\" [disabled]=\"pageNumber === 1\" title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\" data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"><span></span></button>\n              <button id=\"mvDownBtn\" [disabled]=\"pageNumber === pageCount\" title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\" data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"><span></span></button>\n\n              <input type=\"number\" id=\"pageNumber\" class=\"hmcts-toolbar-input govuk-input--width-2\" title=\"Page Number\"\n                value=\"1\" size=\"4\" min=\"1\" [value]=\"pageNumber\" aria-label=\"page number\" tabindex=\"0\"\n                data-l10n-id=\"page\" (change)=\"onPageNumberInputChange(pageNumberInput.value)\" #pageNumberInput>\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div id=\"mvZoomBtn\" #mvZoomBtn class=\"mv-toolbar__menu-button--zoom\" aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\"\n              [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\">\n              <span>Zoom</span>\n              <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 0.1\" id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\" title=\"Zoom Out\" data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"><span></span></button>\n              <select id=\"scaleSelect\" class=\"hmcts-toolbar-select\" title=\"Zoom\" tabindex=\"0\" data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\" aria-label=\"zoom\">\n                <option #zoomSelect id=\"customScaleOption\" title=\"\" [value]=\"toolbarEvents.zoomValueSubject.value\">\n                  {{(toolbarEvents.zoomValueSubject.value) * 100 | number: '1.0-0'}}%</option>\n                <option *ngFor=\"let zoomScale of zoomScales\" title=\"\" [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale*100\">{{ zoomScale *100 }}%\n                </option>\n              </select>\n\n              <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 5\" id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\" (click)=\"stepZoom(0.1)\" title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"><span></span></button>\n            </div>\n          </ng-container>\n\n          <div *ngIf=\"toolbarButtons.showRotate\" id=\"mvRotateBtn\" #mvRotateBtn class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\">\n            <button id=\"mvRotateLeftBtn\" class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\" data-l10n-id=\"page_rotate_ccw\" (click)=\"rotate(270)\"><span></span>\n            </button>\n            <button id=\"mvRotateRightBtn\" class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\" data-l10n-id=\"page_rotate_cw\" (click)=\"rotate(90)\"><span></span>\n            </button>\n            <span>Rotate</span>\n          </div>\n\n          <button *ngIf=\"toolbarButtons.showSearchBar\" [disabled]=\"icpEnabled\" id=\"mvSearchBtn\" #mvSearchBtn\n                  title=\"Search\" data-l10n-id=\"searchbar\" class=\"mv-button mv-toolbar__menu-button--search\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\">\n            <span data-l10n-id=\"search_label\">Search</span>\n          </button>\n\n          <button *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n                  [disabled]=\"icpEnabled || !contentType || redactionEnabled\" id=\"mvPresentBtn\" #mvPresentBtn\n                  class=\"mv-button mv-toolbar__menu-button--present\" title=\"In-Court Presentation Mode\"\n                  data-l10n-id=\"icpMode_label\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\" aria-pressed=\"false\"\n                  (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"><span data-l10n-id=\"icpMode_label\">Present</span>\n          </button>\n\n          <button *ngIf=\"enableRedactions && toolbarButtons.showRedact\" [disabled]=\"icpEnabled\" id=\"mvRedactBtn\"\n                  #mvRedactBtn title=\"Redact\" data-l10n-id=\"redact\" class=\"mv-button mv-toolbar__menu-button--redact\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\">\n            <span>Redact</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showGrabNDragButton\" [disabled]=\"icpEnabled\" id=\"mvGrabBtn\" #mvGrabBtn\n                  class=\"mv-button mv-toolbar__menu-button--grab\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\">\n            <span>Grab and drag</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showDownload\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDownloadBtn\"\n                  #mvDownloadBtn class=\"mv-button mv-toolbar__menu-button--download\" title=\"Download\" data-l10n-id=\"download\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\" aria-pressed=\"false\"\n                  (click)=\"downloadFile(); isDropdownMenuOpen = false\">\n            <span>Download</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showPrint\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvPrintBtn\"\n                  #mvPrintBtn title=\"Print\" data-l10n-id=\"print\" class=\"mv-button mv-toolbar__menu-button--print\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\" aria-pressed=\"false\"\n                  (click)=\"printFile(); isDropdownMenuOpen = false\">\n            <span>Print</span>\n          </button>\n\n          <button *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\" [disabled]=\"redactionEnabled\"\n                  id=\"mvCommentsBtn\" #mvCommentsBtn class=\"mv-button mv-toolbar__menu-button--comments\" title=\"Comments\"\n                  data-l10n-id=\"comments\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\">\n            <span>Comments</span>\n          </button>\n        </ng-template>\n      </div>\n      <mv-search-bar></mv-search-bar>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\">\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -5329,10 +5317,19 @@
             function () {
                 this.advancedSearchVisible = !this.advancedSearchVisible;
             };
+        /**
+         * @return {?}
+         */
+        SearchBarComponent.prototype.toggleSearchBar = /**
+         * @return {?}
+         */
+            function () {
+                this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
+            };
         SearchBarComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'mv-search-bar',
-                        template: "<div class=\"searchbar govuk-!-padding-3\" [hidden]=\"toolbarEvents.searchBarHidden | async\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <input class=\"govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-1\"\n        type=\"text\" aria-label=\"Find in document\" #findInput [(ngModel)]=\"searchText\" (keydown.escape)=\"onEscapeKeyPress($event)\" (keydown.enter)=\"onEnterKeyPress($event)\" title=\"Find in document\"\n        placeholder=\"Find in document\u2026\" tabindex=\"0\" data-l10n-id=\"find_input\" />\n      <button class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\" data-module=\"govuk-button\"\n        (click)=\"search()\">\n        Search\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span id=\"findResultsCount\" class=\"govuk-!-display-inline-block govuk-!-margin-right-4\">{{resultsText}}</span>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\" title=\"Find the previous occurrence of the phrase\" data-l10n-id=\"find_previous\">Prev</a>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\" data-l10n-id=\"find_next\">Next</a>\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"toggleAdvancedSearch()\" title=\"Advanced\"\n        data-l10n-id=\"find_advanced\">Advanced</a>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\" *ngIf=\"advancedSearchVisible\">\n    <div class=\"govuk-grid-column-full\">\n      <div class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findHighlightAll\" name=\"findHighlightAll\" type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\" [checked]=\"highlightAll\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findHighlightAll\" data-l10n-id=\"find_highlight\">\n                Highlight all (instances of matches)\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findMatchCase\" name=\"findMatchCase\" type=\"checkbox\"\n                (change)=\"matchCase = !matchCase; search()\" [checked]=\"matchCase\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findMatchCase\"\n                data-l10n-id=\"find_match_case_label\">\n                Match text (exact words)\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findEntireWord\" name=\"findMatchCase\" type=\"checkbox\"\n                (change)=\"wholeWord = !wholeWord; search()\" [checked]=\"wholeWord\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findEntireWord\"\n                data-l10n-id=\"find_entire_word_label\">\n                Match sentence (strings of words)\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>"
+                        template: "<div class=\"searchbar govuk-!-padding-3\" [hidden]=\"toolbarEvents.searchBarHidden | async\">\n  <div class=\"govuk-grid-row\">\n    <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button searchbar-button--close\" title=\"Close Search\" data-l10n-id=\"mvRedactBtn\"\n      (click)=\"toggleSearchBar()\">\n    </button>\n    <div class=\"govuk-grid-column-full\">\n      <input class=\"govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-1\"\n        type=\"text\" aria-label=\"Find in document\" #findInput [(ngModel)]=\"searchText\" (keydown.escape)=\"onEscapeKeyPress($event)\" (keydown.enter)=\"onEnterKeyPress($event)\" title=\"Find in document\"\n        placeholder=\"Find in document\u2026\" tabindex=\"0\" data-l10n-id=\"find_input\" />\n      <button class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\" data-module=\"govuk-button\"\n        (click)=\"search()\">\n        Search\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span id=\"findResultsCount\" class=\"govuk-!-display-inline-block govuk-!-margin-right-4\">{{resultsText}}</span>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\" title=\"Find the previous occurrence of the phrase\" data-l10n-id=\"find_previous\">Prev</a>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\" data-l10n-id=\"find_next\">Next</a>\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"toggleAdvancedSearch()\" title=\"Advanced\"\n        data-l10n-id=\"find_advanced\">Advanced</a>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\" *ngIf=\"advancedSearchVisible\">\n    <div class=\"govuk-grid-column-full\">\n      <div class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findHighlightAll\" name=\"findHighlightAll\" type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\" [checked]=\"highlightAll\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findHighlightAll\" data-l10n-id=\"find_highlight\">\n                Highlight all (instances of matches)\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findMatchCase\" name=\"findMatchCase\" type=\"checkbox\"\n                (change)=\"matchCase = !matchCase; search()\" [checked]=\"matchCase\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findMatchCase\"\n                data-l10n-id=\"find_match_case_label\">\n                Match text (exact words)\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findEntireWord\" name=\"findMatchCase\" type=\"checkbox\"\n                (change)=\"wholeWord = !wholeWord; search()\" [checked]=\"wholeWord\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findEntireWord\"\n                data-l10n-id=\"find_entire_word_label\">\n                Match sentence (strings of words)\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -5477,6 +5474,15 @@
         /**
          * @return {?}
          */
+        RedactionToolbarComponent.prototype.toggleRedactBar = /**
+         * @return {?}
+         */
+            function () {
+                this.toolbarEventService.toggleRedactionMode();
+            };
+        /**
+         * @return {?}
+         */
         RedactionToolbarComponent.prototype.ngOnDestroy = /**
          * @return {?}
          */
@@ -5486,7 +5492,7 @@
         RedactionToolbarComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'mv-redaction-toolbar',
-                        template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">Redaction options</label>\n  <button id=\"toggleDrawButton\" class=\"mv-button redaction-button--draw\" title=\"Draw a box\"\n    data-l10n-id=\"toggleDrawButton\" (click)=\"toggleDrawMode()\">\n    <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n  </button>\n\n  <button *ngIf=\"toolbarButtons.showHighlightButton\" id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\" aria-pressed=\"false\" title=\"Redact text\"\n    data-l10n-id=\"toggleTextRedactionButton\" (click)=\"toggleTextRedactionMode()\">\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvClearBtn\" #mvClearBtn class=\"mv-button redaction-button--clear\" aria-pressed=\"false\" title=\"Clear all\"\n    data-l10n-id=\"toggleClearAllButton\" (click)=\"unmarkAll()\">\n    <span data-l10n-id=\"Clear all\">Clear all</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvPreviewBtn\" class=\"mv-button\" [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\" redaction-button--preview aria-pressed=\"false\" title=\"Preview\"\n    data-l10n-id=\"togglePreviewButton\" (click)=\"togglePreview()\">\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">Hide preview</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvRedactBtn\" class=\"mv-button redaction-button--download\" aria-pressed=\"false\" title=\"Redact\"\n    data-l10n-id=\"mvRedactBtn\" (click)=\"redact()\">\n    <span data-l10n-id=\"Save Document\">Save document</span>\n  </button>\n\n</div>\n"
+                        template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">Redaction options</label>\n  <button id=\"toggleDrawButton\" class=\"mv-button redaction-button--draw\" title=\"Draw a box\"\n    data-l10n-id=\"toggleDrawButton\" (click)=\"toggleDrawMode()\">\n    <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n  </button>\n\n  <button *ngIf=\"toolbarButtons.showHighlightButton\" id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\" aria-pressed=\"false\" title=\"Redact text\"\n    data-l10n-id=\"toggleTextRedactionButton\" (click)=\"toggleTextRedactionMode()\">\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvClearBtn\" #mvClearBtn class=\"mv-button redaction-button--clear\" aria-pressed=\"false\" title=\"Clear all\"\n    data-l10n-id=\"toggleClearAllButton\" (click)=\"unmarkAll()\">\n    <span data-l10n-id=\"Clear all\">Clear all</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvPreviewBtn\" class=\"mv-button\" [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\" redaction-button--preview aria-pressed=\"false\" title=\"Preview\"\n    data-l10n-id=\"togglePreviewButton\" (click)=\"togglePreview()\">\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">Hide preview</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvRedactBtn\" class=\"mv-button redaction-button--download\" aria-pressed=\"false\" title=\"Redact\"\n    data-l10n-id=\"mvRedactBtn\" (click)=\"redact()\">\n    <span data-l10n-id=\"Save Document\">Save document</span>\n  </button>\n\n  <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button redaction-button--close\" title=\"Close Redaction\" data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\">\n    <span data-l10n-id=\"Close Redaction\">Close Redaction</span>\n  </button>\n\n</div>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -6263,8 +6269,8 @@
             this.store = store$$1;
             this.commentService = commentService;
             this.tagsServices = tagsServices;
-            this.COMMENT_CHAR_LIMIT = 5000;
-            this.totalPreviousPagesHeight = 0;
+            this.CHAR_LIMIT = 5000;
+            this.totalPrevPagesHeight = 0;
             this.hasUnsavedChanges = false;
             this.commentClick = new i0.EventEmitter();
             this.renderComments = new i0.EventEmitter();
@@ -6332,12 +6338,12 @@
                 this.tagItems = this._comment.tags;
                 /** @type {?} */
                 var pageMarginBottom = 10;
-                this.totalPreviousPagesHeight = 0;
+                this.totalPrevPagesHeight = 0;
                 for (var i = 0; i < this.page - 1; i++) {
                     /** @type {?} */
                     var height = this._comment.pages[i + 1] ? this._comment.pages[i + 1].styles.height : undefined;
                     if (height) {
-                        this.totalPreviousPagesHeight += height + pageMarginBottom;
+                        this.totalPrevPagesHeight += height + pageMarginBottom;
                     }
                 }
             },
@@ -6392,8 +6398,8 @@
          * @return {?}
          */
             function (updatedComment) {
-                this.hasUnsavedChanges = this.originalComment.substring(0, this.COMMENT_CHAR_LIMIT) !==
-                    updatedComment.substring(0, this.COMMENT_CHAR_LIMIT);
+                this.hasUnsavedChanges =
+                    this.originalComment.substring(0, this.CHAR_LIMIT) !== updatedComment.substring(0, this.CHAR_LIMIT);
                 this.commentService.onCommentChange(this.hasUnsavedChanges);
             };
         /**
@@ -6427,7 +6433,7 @@
                     this._editable = true;
                 }
                 else {
-                    this._comment.content = this.fullComment.substring(0, this.COMMENT_CHAR_LIMIT);
+                    this._comment.content = this.fullComment.substring(0, this.CHAR_LIMIT);
                     /** @type {?} */
                     var tags = this.tagsServices.getNewTags(this._comment.annotationId);
                     /** @type {?} */
@@ -6467,7 +6473,7 @@
             get: /**
              * @return {?}
              */ function () {
-                return this.totalPreviousPagesHeight + (this.rectTop * this.zoom);
+                return this.totalPrevPagesHeight + (this.rectTop * this.zoom);
             },
             enumerable: true,
             configurable: true
@@ -6484,7 +6490,7 @@
         CommentComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'mv-anno-comment',
-                        template: "<div #form (click)=\"onCommentClick()\" class=\"aui-comment\"\n      [style.top.px]=\"commentTop\"\n      [style.zIndex]=\"selected ? 100 : 0\">\n  <div id=\"detailsWrapper {{index}}\" class=\"aui-comment__header\">\n    <span *ngIf=\"author && !editor\" class=\"aui-comment__author\">\n      {{ author.forename }} {{ author.surname }}\n    </span>\n    <span *ngIf=\"editor\" class=\"aui-comment__author\">\n      {{ editor.forename }} {{ editor.surname }}\n    </span>\n    <time [hidden]=\"!selected && !this.editable\" class=\"aui-comment__meta\">\n      {{ lastUpdate | momentDate: 'd MMMM y h:mm a' }}\n    </time>\n  </div>\n  <mv-tags\n    [tagItems]=\"tagItems\"\n    [userId]=\"createdBy\"\n    [editable]=\"editable\"\n    [annoId]=\"_comment.annotationId\">\n  </mv-tags>\n  <textarea *ngIf=\"selected && editable\"\n            #editableComment\n            mvTextAreaAutoExpand\n            type=\"text\"\n            required\n            name=\"content\"\n            [maxlength]=\"COMMENT_CHAR_LIMIT\"\n            class=\"aui-comment__content form-control mimic-focus edit-mode expanded\"\n            [(ngModel)]=\"fullComment\"\n            (ngModelChange)=\"reRenderComments(); onCommentChange($event);\"\n            aria-label=\"comment\">\n  </textarea>\n  <p *ngIf=\"!editable\"\n     mvTextHighlight class=\"commentText\" [textToHighlight]=\"searchString\">\n      {{ fullComment }}\n  </p>\n  <div *ngIf=\"selected || this.editable || (!fullComment.length && (tagItems && !tagItems.length))\"\n       class=\"aui-comment__footer commentBtns\">\n    <button class=\"govuk-button\"\n            type=\"button\" role=\"button\"\n            (click)=\"editOrSave()\">\n      {{ !editable ? 'Edit' : 'Save' }}\n    </button>\n    <button type=\"button\" role=\"button\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"deleteOrCancel()\">\n      {{ !editable ? 'Delete' : 'Cancel' }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">private</span>\n</div>\n"
+                        template: "<div #form (click)=\"onCommentClick()\" class=\"aui-comment\"\n      [style.top.px]=\"commentTop\"\n      [style.zIndex]=\"selected ? 100 : 0\">\n  <div id=\"detailsWrapper {{index}}\" class=\"aui-comment__header\">\n    <span *ngIf=\"author && !editor\" class=\"aui-comment__author\">\n      {{ author.forename }} {{ author.surname }}\n    </span>\n    <span *ngIf=\"editor\" class=\"aui-comment__author\">\n      {{ editor.forename }} {{ editor.surname }}\n    </span>\n    <time [hidden]=\"!selected && !this.editable\" class=\"aui-comment__meta\">\n      {{ lastUpdate | momentDate: 'd MMMM y h:mm a' }}\n    </time>\n  </div>\n  <mv-tags\n    [tagItems]=\"tagItems\"\n    [userId]=\"createdBy\"\n    [editable]=\"editable\"\n    [annoId]=\"_comment.annotationId\">\n  </mv-tags>\n  <textarea *ngIf=\"selected && editable\"\n            #editableComment\n            mvTextAreaAutoExpand\n            type=\"text\"\n            required\n            name=\"content\"\n            [maxlength]=\"CHAR_LIMIT\"\n            class=\"aui-comment__content form-control mimic-focus edit-mode expanded\"\n            [(ngModel)]=\"fullComment\"\n            (ngModelChange)=\"reRenderComments(); onCommentChange($event);\"\n            aria-label=\"comment\">\n  </textarea>\n  <p *ngIf=\"!editable\"\n     mvTextHighlight class=\"commentText\" [textToHighlight]=\"searchString\">\n      {{ fullComment }}\n  </p>\n  <div *ngIf=\"selected || this.editable || (!fullComment.length && (tagItems && !tagItems.length))\"\n       class=\"aui-comment__footer commentBtns\">\n    <button class=\"govuk-button\"\n            type=\"button\" role=\"button\"\n            (click)=\"editOrSave()\">\n      {{ !editable ? 'Edit' : 'Save' }}\n    </button>\n    <button type=\"button\" role=\"button\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"deleteOrCancel()\">\n      {{ !editable ? 'Delete' : 'Cancel' }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">private</span>\n</div>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -6763,7 +6769,7 @@
                     /** @type {?} */
                     var endOfPrevComment = prevComment.commentTop + this.height(prevComment);
                     if (comment.commentTop <= endOfPrevComment) {
-                        comment.rectTop = (endOfPrevComment - comment.totalPreviousPagesHeight) / zoom;
+                        comment.rectTop = (endOfPrevComment - comment.totalPrevPagesHeight) / zoom;
                     }
                 }
             };
@@ -6889,6 +6895,10 @@
                     _this.redrawComments();
                     _this.showCommentsPanel = toggle;
                 })));
+                this.subscriptions.push(this.toolbarEvents.rotateSubject.subscribe(( /**
+                 * @param {?} rotate
+                 * @return {?}
+                 */function (rotate) { return _this.rotateDocument(); })));
             };
         /**
          * @param {?} changes
@@ -6902,6 +6912,11 @@
                 if (changes.annotationSet) {
                     this.commentService.setCommentSet(this);
                 }
+                if (changes.contentScrollTop) {
+                    if (this.container) {
+                        this.container.nativeElement.scrollTo(0, this.contentScrollTop);
+                    }
+                }
             };
         /**
          * @return {?}
@@ -6968,6 +6983,19 @@
                     _this.renderService.redrawComponents(componentList, _this.pageHeights, _this.rotate, _this.zoom);
                 }), 0);
             };
+        /**
+         * @private
+         * @return {?}
+         */
+        CommentSetComponent.prototype.rotateDocument = /**
+         * @private
+         * @return {?}
+         */
+            function () {
+                if (this.panel) {
+                    this.panel.nativeElement.style.height = '0';
+                }
+            };
         /**
          * @param {?} payload
          * @return {?}
@@ -7011,7 +7039,7 @@
          * @return {?}
          */
             function (e) {
-                if (e.path && e.path[0] === this.container.nativeElement) {
+                if (e.path && e.path[0] === this.panel.nativeElement) {
                     this.clearSelection();
                 }
             };
@@ -7036,7 +7064,7 @@
         CommentSetComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'mv-comment-set',
-                        template: "<div #container\n     [ngClass]=\"{ 'comments-panel comment-container': true, 'expanded': showCommentsPanel }\"\n     [style.height.px]=\"height\"\n     (click)=\"onContainerClick($event)\">\n  <ng-container *ngFor=\"let comment of (comments$ | async); let i = index;\">\n    <mv-anno-comment\n      [ngStyle]=\"showCommentsPanel ? {} : {'display':'none'}\"\n      #commentComponent\n      (commentClick)=\"onSelect($event)\"\n      (delete)=\"onCommentDelete($event)\"\n      (updated)=\"onCommentUpdate($event)\"\n      (changes)=\"allCommentsSaved()\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotate\"\n      [index]=\"i\"\n      [page]=\"comment.page\"\n      [comment]=\"comment\"\n      [annotation]=\"(annoEntities$ | async)[comment.annotationId]\"\n      (renderComments)=\"redrawComments()\">\n    </mv-anno-comment>\n  </ng-container>\n</div>\n"
+                        template: "<div #container [ngClass]=\"{'comments': showCommentsPanel}\">\n  <div #panel [ngClass]=\"{ 'comments-panel comment-container': true, 'expanded': showCommentsPanel }\"\n     [style.height.px]=\"height\"\n     (click)=\"onContainerClick($event)\">\n    <ng-container *ngFor=\"let comment of (comments$ | async); let i = index;\">\n      <mv-anno-comment\n        [ngStyle]=\"showCommentsPanel ? {} : {'display':'none'}\"\n        #commentComponent\n        (commentClick)=\"onSelect($event)\"\n        (delete)=\"onCommentDelete($event)\"\n        (updated)=\"onCommentUpdate($event)\"\n        (changes)=\"allCommentsSaved()\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotate\"\n        [index]=\"i\"\n        [page]=\"comment.page\"\n        [comment]=\"comment\"\n        [annotation]=\"(annoEntities$ | async)[comment.annotationId]\"\n        (renderComments)=\"redrawComments()\">\n      </mv-anno-comment>\n    </ng-container>\n  </div>\n</div>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -7054,7 +7082,9 @@
             rotate: [{ type: i0.Input }],
             height: [{ type: i0.Input }],
             pageHeights: [{ type: i0.Input }],
+            contentScrollTop: [{ type: i0.Input }],
             container: [{ type: i0.ViewChild, args: ['container',] }],
+            panel: [{ type: i0.ViewChild, args: ['panel',] }],
             commentComponents: [{ type: i0.ViewChildren, args: ['commentComponent',] }]
         };
         return CommentSetComponent;
@@ -7453,7 +7483,7 @@
             this.toolbarEvents = toolbarEvents;
             this.showCommentSummaryDialog = new i0.EventEmitter();
             this.tabs = [];
-            this.tabSelected = 'comments';
+            this.tabSelected = '';
         }
         /**
          * @return {?}
@@ -7507,6 +7537,15 @@
         /**
          * @return {?}
          */
+        CommentSetHeaderComponent.prototype.toggleCommentsPanel = /**
+         * @return {?}
+         */
+            function () {
+                this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
+            };
+        /**
+         * @return {?}
+         */
         CommentSetHeaderComponent.prototype.ngOnDestroy = /**
          * @return {?}
          */
@@ -7516,7 +7555,7 @@
         CommentSetHeaderComponent.decorators = [
             { type: i0.Component, args: [{
                         selector: 'mv-comment-set-header',
-                        template: "<div class=\"govuk-tabs commentSummaryHeader\" [ngClass]=\"{'icp-mode': toolbarEvents.icp.enabled | async}\" data-module=\"govuk-tabs\">\n  <ul class=\"govuk-tabs__list\">\n    <li *ngFor=\"let tab of tabs\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a (click)=\"selectTab(tab.label)\" [routerLink]=\"\" [ngClass]=\"{'govuk-tabs__list-item--filtered': tab.isFiltered}\"\n         class=\"govuk-tabs__tab\">\n        {{ tab.label | titlecase }}\n      </a>\n\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" [hidden]=\"!tabSelected\">\n    <ng-container *ngIf=\"tabSelected === 'comments'\">\n      <div style=\"width: 100%\">\n        <div class=\"hmcts-banner\" *ngIf=\"navigationList?.length === 0\">\n          <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\nC13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\" /></svg>\n          <div class=\"hmcts-banner__message\">\n            <span class=\"hmcts-banner__assistive\">information</span>\n            Select text to add a comment or highlight.\n          </div>\n        </div>\n        <button type=\"button\" class=\"govuk-button\"\n                id=\"commentSummary\" tabindex=\"0\"\n                data-l10n-id=\"commentSummary\"\n                title=\"Open collate summary\"\n                (click)=\"toggleCommentsSummary()\">Collate comments</button>\n      </div>\n      <ng-container *ngIf=\"navigationList?.length > 0\">\n        <mv-comments-navigate\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </ng-container>\n      <p class=\"aui-comment__private-text\">\n        <span class=\"aui-comment__private\">private</span>\n        All comments can only be seen by you\n      </p>\n    </ng-container>\n    <div [hidden]=\"tabSelected !== 'filter'\">\n      <div class=\"govuk-tabs__panel--container\">\n        <mv-comment-filter></mv-comment-filter>\n        <mv-comments-navigate\n          *ngIf=\"navigationList?.length > 0\"\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </div>\n    </div>\n\n    <div [hidden]=\"tabSelected !== 'search'\">\n      <mv-comment-search [annotations]=\"navigationList\"></mv-comment-search>\n    </div>\n  </div>\n</div>\n",
+                        template: "<div class=\"govuk-tabs commentSummaryHeader\" [ngClass]=\"{'icp-mode': toolbarEvents.icp.enabled | async}\" data-module=\"govuk-tabs\">\n  <ul class=\"govuk-tabs__list\">\n    <li *ngFor=\"let tab of tabs\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a (click)=\"selectTab(tab.label)\" [routerLink]=\"\" [ngClass]=\"{'govuk-tabs__list-item--filtered': tab.isFiltered}\"\n         class=\"govuk-tabs__tab\">\n        {{ tab.label | titlecase }}\n      </a>\n    </li>\n    <li>\n      <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button commentSummaryHeader-button--close\"\n        title=\"Close Comments\" (click)=\"toggleCommentsPanel()\">\n      </button>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" [hidden]=\"!tabSelected\">\n    <ng-container *ngIf=\"tabSelected === 'comments'\">\n      <div style=\"width: 100%\">\n        <div class=\"hmcts-banner\" *ngIf=\"navigationList?.length === 0\">\n          <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\nC13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\" /></svg>\n          <div class=\"hmcts-banner__message\">\n            <span class=\"hmcts-banner__assistive\">information</span>\n            Select text to add a comment or highlight.\n          </div>\n        </div>\n        <button type=\"button\" class=\"govuk-button\"\n                id=\"commentSummary\" tabindex=\"0\"\n                data-l10n-id=\"commentSummary\"\n                title=\"Open collate summary\"\n                (click)=\"toggleCommentsSummary()\">Collate comments</button>\n      </div>\n      <ng-container *ngIf=\"navigationList?.length > 0\">\n        <mv-comments-navigate\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </ng-container>\n      <p class=\"aui-comment__private-text\">\n        <span class=\"aui-comment__private\">private</span>\n        All comments can only be seen by you\n      </p>\n    </ng-container>\n    <div [hidden]=\"tabSelected !== 'filter'\">\n      <div class=\"govuk-tabs__panel--container\">\n        <mv-comment-filter></mv-comment-filter>\n        <mv-comments-navigate\n          *ngIf=\"navigationList?.length > 0\"\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </div>\n    </div>\n\n    <div [hidden]=\"tabSelected !== 'search'\">\n      <mv-comment-search [annotations]=\"navigationList\"></mv-comment-search>\n    </div>\n  </div>\n</div>\n",
                         encapsulation: i0.ViewEncapsulation.None
                     }] }
         ];
@@ -10950,7 +10989,12 @@
              * @return {?}
              */
             function (url) {
-                url = url.includes('/documents/') ? url.split('/documents/')[1] : url;
+                if (url.includes('/documents/')) {
+                    url = url.split('/documents/')[1];
+                }
+                else if (url.includes('/documentsv2/')) {
+                    url = url.split('/documentsv2/')[1];
+                }
                 return url.replace('/binary', '');
             };
         ConvertibleContentViewerComponent.decorators = [