@hmcts/media-viewer 2.7.9 → 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

@@ -5121,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 */
@@ -5317,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 */
@@ -5465,6 +5474,15 @@
         /**
          * @return {?}
          */
+        RedactionToolbarComponent.prototype.toggleRedactBar = /**
+         * @return {?}
+         */
+            function () {
+                this.toolbarEventService.toggleRedactionMode();
+            };
+        /**
+         * @return {?}
+         */
         RedactionToolbarComponent.prototype.ngOnDestroy = /**
          * @return {?}
          */
@@ -5474,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 */
@@ -7465,7 +7483,7 @@
             this.toolbarEvents = toolbarEvents;
             this.showCommentSummaryDialog = new i0.EventEmitter();
             this.tabs = [];
-            this.tabSelected = 'comments';
+            this.tabSelected = '';
         }
         /**
          * @return {?}
@@ -7519,6 +7537,15 @@
         /**
          * @return {?}
          */
+        CommentSetHeaderComponent.prototype.toggleCommentsPanel = /**
+         * @return {?}
+         */
+            function () {
+                this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
+            };
+        /**
+         * @return {?}
+         */
         CommentSetHeaderComponent.prototype.ngOnDestroy = /**
          * @return {?}
          */
@@ -7528,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    </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
                     }] }
         ];