@hmcts/media-viewer 2.10.0 → 2.10.1-RC.1

package/fesm2020/hmcts-media-viewer.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewChild, HostListener, Input, NgModule, Directive, ViewEncapsulation, Pipe, EventEmitter, Output, ViewChildren } from '@angular/core';
+import { Injectable, Component, ViewChild, HostListener, Directive, Input, ViewEncapsulation, Pipe, EventEmitter, Output, ViewChildren, NgModule } from '@angular/core';
 import * as i4 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
+import { DatePipe, CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { FormsModule, UntypedFormControl, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormControl, FormsModule, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms';
 import * as i1$1 from '@angular/common/http';
 import { HttpClientModule } from '@angular/common/http';
 import { BehaviorSubject, Subject, of, combineLatest, asyncScheduler } from 'rxjs';
@@ -16,12 +16,12 @@ import * as pdfjsViewer from 'pdfjs-dist/web/pdf_viewer';
 import * as pdfjsLib from 'pdfjs-dist';
 import 'pdfjs-dist/build/pdf.worker';
 import uuid$1, { v4 } from 'uuid';
-import * as i6 from '@angular/cdk/overlay';
-import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
-import * as i5 from '@angular/router';
-import { RouterModule } from '@angular/router';
 import * as i4$1 from 'ngx-chips';
 import { TagInputModule } from 'ngx-chips';
+import * as i5 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i6 from '@angular/cdk/overlay';
+import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
 import * as i4$2 from 'mutable-div';
 import { MutableDivModule } from 'mutable-div';
 import * as i3 from '@circlon/angular-tree-component';
@@ -2473,47 +2473,101 @@ const getFilteredAnnotations = createSelector(getAnnotationEntities, getTagFilte
         .filter(annotation => annotation.comments && annotation.comments.length > 0);
 });
 
-/**
- * Number Helper Service
- * */
-class NumberHelperService {
-    constructor() { }
-    isNumber(value) {
-        return (value !== null
-            && value !== undefined
-            && value !== ''
-            && !isNaN(Number(value.toString())));
+class HighlightCreateService {
+    constructor(toolBarEvents, store) {
+        this.toolBarEvents = toolBarEvents;
+        this.store = store;
+    }
+    saveAnnotation(rectangles, page) {
+        this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
+            const anno = {
+                id: v4(),
+                color: 'FFFF00',
+                comments: [],
+                page: page,
+                rectangles: rectangles,
+                type: 'highlight',
+                ...anoSetDocId,
+                createdBy: '',
+                createdByDetails: undefined,
+                createdDate: moment.utc().tz('Europe/London').toISOString(),
+                lastModifiedBy: '',
+                lastModifiedByDetails: undefined,
+                lastModifiedDate: '',
+                tags: [],
+            };
+            this.store.dispatch(new SaveAnnotation(anno));
+        });
+    }
+    applyRotation(pageHeight, pageWidth, offsetHeight, offsetWidth, offsetTop, offsetLeft, rotate, zoom) {
+        const { x, y, width, height } = {
+            x: +(offsetLeft / zoom).toFixed(2),
+            y: +(offsetTop / zoom).toFixed(2),
+            width: +(offsetWidth / zoom).toFixed(2),
+            height: +(offsetHeight / zoom).toFixed(2)
+        };
+        const rectangle = { x, y, width, height };
+        switch (rotate) {
+            case 90:
+                rectangle.width = height;
+                rectangle.height = width;
+                rectangle.x = y;
+                rectangle.y = +(pageWidth / zoom - x - width).toFixed(2);
+                break;
+            case 180:
+                rectangle.x = +(pageWidth / zoom - x - width).toFixed(2);
+                rectangle.y = +(pageHeight / zoom - y - height).toFixed(2);
+                break;
+            case 270:
+                rectangle.width = height;
+                rectangle.height = width;
+                rectangle.x = +(pageHeight / zoom - y - height).toFixed(2);
+                rectangle.y = x;
+                break;
+        }
+        return rectangle;
+    }
+    resetHighlight() {
+        window.getSelection().removeAllRanges();
+        this.toolBarEvents.highlightModeSubject.next(false);
     }
 }
-/** @nocollapse */ NumberHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumberHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ NumberHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumberHelperService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumberHelperService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
+/** @nocollapse */ HighlightCreateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HighlightCreateService, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ HighlightCreateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HighlightCreateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HighlightCreateService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: i1.Store }]; } });
 
-class SearchBarComponent {
-    constructor(toolbarButtons, toolbarEvents) {
+class RedactionSearchBarComponent {
+    constructor(store, toolbarButtons, toolbarEvents, highlightService) {
+        this.store = store;
         this.toolbarButtons = toolbarButtons;
         this.toolbarEvents = toolbarEvents;
+        this.highlightService = highlightService;
         this.highlightAll = true;
         this.matchCase = false;
         this.wholeWord = false;
         this.resultsText = '';
         this.searchText = '';
         this.resultCount = 0;
-        this.subscriptions = [];
+        this.redactElements = [];
         this.advancedSearchVisible = false;
     }
     ngOnInit() {
-        this.subscriptions.push(this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results)));
+        this.subscription = this.toolbarEvents.redactionSerachSubject.subscribe((results) => this.redactAllSearched(results));
+        this.subscription.add(this.store.pipe(select(getDocumentId)).subscribe(docId => this.documentId = docId));
+        this.subscription.add(this.store.pipe(select(getPages)).subscribe((pages) => {
+            if (pages[1]) {
+                this.allPages = pages;
+            }
+        }));
+        this.subscription.add(this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results)));
+        this.subscription.add(this.toolbarEvents.openRedactionSearch.subscribe(isOpen => this.openSearchModal = isOpen));
+        this.subscription.add(this.toolbarEvents.redactAllInProgressSubject
+            .subscribe(inProgress => this.redactAllInProgress = inProgress));
     }
     ngOnDestroy() {
-        for (const subscription of this.subscriptions) {
-            subscription.unsubscribe();
-        }
+        this.subscription.unsubscribe();
     }
     onWindowKeyDown(e) {
         if (e.code === 'F3' || (e.ctrlKey && e.code === 'KeyF')) {
@@ -2522,1534 +2576,1480 @@ class SearchBarComponent {
             setTimeout(() => this.findInput.nativeElement.focus(), 200);
         }
     }
-    searchNext() {
+    search(reset = true) {
+        this.redactAll = !reset;
+        if (this.redactAll) {
+            this.toolbarEvents.redactAllInProgressSubject.next(true);
+        }
+        if (reset) {
+            this.redactElements = [];
+        }
         this.toolbarEvents.search({
             searchTerm: this.searchText,
             highlightAll: this.highlightAll,
             matchCase: this.matchCase,
             wholeWord: this.wholeWord,
             previous: false,
-            reset: false
+            reset
         });
     }
-    searchPrev() {
-        this.toolbarEvents.search({
-            searchTerm: this.searchText,
-            highlightAll: this.highlightAll,
-            matchCase: this.matchCase,
-            wholeWord: this.wholeWord,
-            previous: true,
-            reset: false
+    saveRedaction(redactRectangle) {
+        const redaction = redactRectangle.map(ele => {
+            return { page: ele.page, rectangles: ele.rectangles, redactionId: uuid$1(), documentId: this.documentId };
         });
+        this.store.dispatch(new SaveBulkRedaction({ searchRedactions: redaction }));
     }
-    search() {
-        this.toolbarEvents.search({
-            searchTerm: this.searchText,
-            highlightAll: this.highlightAll,
-            matchCase: this.matchCase,
-            wholeWord: this.wholeWord,
-            previous: false,
-            reset: true
-        });
+    existInRedactElements(pageNumber, matechedIndex, rectangles) {
+        if (this.redactElements && this.redactElements.length > 0) {
+            const pagesFound = this.redactElements.find(re => re.page === pageNumber && re.matchedIndex === matechedIndex);
+            const pageRectangles = pagesFound?.rectangles;
+            if (!pageRectangles || pageRectangles.length <= 0) {
+                return false;
+            }
+            let matchesRectangles = 0;
+            for (let rectIndx = 0; rectIndx < pageRectangles.length; rectIndx++) {
+                const rectangle = pageRectangles[rectIndx];
+                const foundRectangle = rectangles.find(re => re.width === rectangle.width &&
+                    re.height === rectangle.height && re.x === rectangle.x && re.y === rectangle.y);
+                if (foundRectangle) {
+                    matchesRectangles++;
+                }
+            }
+            return pageRectangles.length === matchesRectangles;
+        }
+        return false;
+    }
+    onCloseSearchModal() {
+        this.toolbarEvents.openRedactionSearch.next(false);
     }
     setSearchResultsCount(results) {
         this.resultCount = results.total;
         this.resultsText = this.resultCount > 0
-            ? `Found ${results.current} of ${results.total}`
+            ? `${results.total} results founds`
             : 'No results found';
-        if (this.resultCount && this.resultCount > 0) {
-            setTimeout(() => {
-                this.findNext.nativeElement.focus();
-            }, 1000);
+    }
+    redactAllSearched(results) {
+        const $this = this;
+        const intervalId = setInterval(() => {
+            const highlightElement = document.getElementsByClassName('highlight selected');
+            if (highlightElement && highlightElement.length > 0) {
+                clearInterval(intervalId);
+                $this.redactAllSearchedTick(results);
+            }
+        }, 100);
+    }
+    redactAllSearchedTick(results) {
+        const highlightElement = document.getElementsByClassName('highlight selected');
+        if (highlightElement && highlightElement.length > 0) {
+            this.resultCount = results.matchesCount;
+            const pageNumber = results.page + 1;
+            const rectangles = this.getRectangles(pageNumber);
+            if (rectangles && this.redactElements.length <= this.resultCount
+                && !this.existInRedactElements(pageNumber, results.matchedIndex, rectangles)) {
+                this.redactElements.push({ page: pageNumber, matchedIndex: results?.matchedIndex, rectangles });
+                this.CreateRedactAllText();
+            }
+            if (this.redactAll && this.resultCount && this.resultCount > 0
+                && rectangles && this.redactElements.length < this.resultCount) {
+                this.search(false);
+            }
+            if (this.redactAll && this.resultCount && this.redactElements.length === this.resultCount) {
+                this.redactAll = false;
+                this.redactAllText = null;
+                this.saveRedaction(this.redactElements);
+            }
         }
     }
+    CreateRedactAllText() {
+        this.redactAllText = `${this.redactElements.length} of ${this.resultCount}`;
+    }
     onEscapeKeyPress(e) {
         this.toolbarEvents.searchBarHidden.next(true);
     }
     onEnterKeyPress(e) {
         this.search();
     }
-    toggleAdvancedSearch() {
-        this.advancedSearchVisible = !this.advancedSearchVisible;
-    }
     toggleSearchBar() {
         this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
     }
+    getRectangles(page) {
+        this.pageHeight = this.allPages[page].styles.height;
+        this.pageWidth = this.allPages[page].styles.width;
+        this.zoom = parseFloat(this.allPages[page].scaleRotation.scale);
+        this.rotate = parseInt(this.allPages[page].scaleRotation.rotation, 10);
+        const selectedHighLightedElements = document.getElementsByClassName('highlight selected');
+        if (selectedHighLightedElements && selectedHighLightedElements.length > 0) {
+            const docRange = document.createRange();
+            docRange.selectNodeContents(selectedHighLightedElements[0]);
+            const selection = window.getSelection();
+            selection?.removeAllRanges();
+            selection?.addRange(docRange);
+            if (selection.rangeCount && !selection.isCollapsed) {
+                const range = selection.getRangeAt(0).cloneRange();
+                const clientRects = range.getClientRects();
+                if (clientRects) {
+                    const parentRect = selectedHighLightedElements[0].parentElement.parentElement.getBoundingClientRect();
+                    const selectionRectangles = [];
+                    for (let i = 0; i < clientRects.length; i++) {
+                        const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
+                        const findSelecttionRectangle = selectionRectangles.find((rect) => rect.width === selectionRectangle.width && rect.x === selectionRectangle.x);
+                        if (!findSelecttionRectangle) {
+                            selectionRectangles.push(selectionRectangle);
+                        }
+                    }
+                    return selectionRectangles;
+                }
+            }
+        }
+    }
+    createTextRectangle(rect, parentRect) {
+        const height = rect.bottom - rect.top;
+        const width = rect.right - rect.left;
+        const top = rect.top - parentRect.top;
+        const left = rect.left - parentRect.left;
+        let rectangle = this.highlightService.applyRotation(this.pageHeight, this.pageWidth, height, width, top, left, this.rotate, this.zoom);
+        rectangle = { id: uuid$1(), ...rectangle };
+        return rectangle;
+    }
 }
-/** @nocollapse */ SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SearchBarComponent, deps: [{ token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SearchBarComponent, selector: "mv-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }, { propertyName: "findNext", first: true, predicate: ["findNext"], descendants: true }], ngImport: i0, 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-5 govuk-!-margin-top-5\"\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()\" style=\" position: absolute; top: 40px; right: 10px; \">\n        Search\n      </button>\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>\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]=\"[]\" #findNext 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\" style=\" position: absolute; top: 95px; right: 15px; \">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\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 case)\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 whole words or sentences\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SearchBarComponent, decorators: [{
+/** @nocollapse */ RedactionSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RedactionSearchBarComponent, deps: [{ token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ RedactionSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }], ngImport: i0, template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Find in document\"\n        #findInput\n        title=\"Find in document\"\n        placeholder=\"Redact from search...\"\n        tabindex=\"0\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          Search\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          Redact all\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            Redacting in progress\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RedactionSearchBarComponent, decorators: [{
             type: 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-5 govuk-!-margin-top-5\"\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()\" style=\" position: absolute; top: 40px; right: 10px; \">\n        Search\n      </button>\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>\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]=\"[]\" #findNext 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\" style=\" position: absolute; top: 95px; right: 15px; \">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\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 case)\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 whole words or sentences\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }]; }, propDecorators: { findInput: [{
+            args: [{ selector: 'mv-redaction-search-bar', template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Find in document\"\n        #findInput\n        title=\"Find in document\"\n        placeholder=\"Redact from search...\"\n        tabindex=\"0\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          Search\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          Redact all\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            Redacting in progress\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }, { type: HighlightCreateService }]; }, propDecorators: { findInput: [{
                 type: ViewChild,
                 args: ['findInput', { static: true }]
-            }], findNext: [{
-                type: ViewChild,
-                args: ['findNext', { static: false }]
             }], onWindowKeyDown: [{
                 type: HostListener,
                 args: ['window:keydown', ['$event']]
             }] } });
 
-class MainToolbarComponent {
-    constructor(toolbarEvents, toolbarButtons, cdr, numberHelper) {
-        this.toolbarEvents = toolbarEvents;
-        this.toolbarButtons = toolbarButtons;
-        this.cdr = cdr;
-        this.numberHelper = numberHelper;
-        this.enableAnnotations = false;
-        this.enableRedactions = false;
-        this.enableICP = false;
-        this.contentType = null;
-        this.subscriptions = [];
-        this.icpEnabled = false;
-        this.redactionEnabled = false;
-        this.pageNumber = 1;
-        this.pageCount = 0;
-        this.isDropdownMenuOpen = false;
-        this.dropdownMenuPositions = [
-            new ConnectionPositionPair({
-                originX: 'end',
-                originY: 'bottom'
-            }, {
-                overlayX: 'end',
-                overlayY: 'top'
-            }, 0, 3)
-        ];
-        this.zoomScales = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2.5, 3, 5];
-        this.allButtonsWidth = 0;
-        this.widthRequiredForBtn = {};
-    }
-    ngOnInit() {
-        this.subscriptions.push(this.toolbarEvents.setCurrentPageSubject.subscribe(pageNumber => this.setCurrentPage(pageNumber)), this.toolbarEvents.setCurrentPageInputValueSubject.subscribe(pageNumber => this.pageNumber = pageNumber), this.toolbarEvents.getPageCount().subscribe(count => this.pageCount = count), this.toolbarEvents.icp.enabled.subscribe(enabled => {
-            this.icpEnabled = enabled;
-            if (this.icpEnabled) {
-                this.toolbarEvents.toggleCommentsPanel(!enabled);
-                this.toolbarEvents.sidebarOpen.next(false);
-            }
-        }), this.toolbarEvents.redactionMode.subscribe(enabled => {
-            this.redactionEnabled = enabled;
-        }), this.toolbarEvents.redactAllInProgressSubject.subscribe(disable => {
-            this.redactAllInProgress = disable;
-        }));
+// TODO: replace by NgRx
+class CommentService {
+    constructor() {
+        this.unsavedChanges = new Subject();
+        this.marginToCommentEmitter = new BehaviorSubject(false);
     }
-    ngOnDestroy() {
-        for (const subscription of this.subscriptions) {
-            subscription.unsubscribe();
-        }
+    setCommentSet(commentSetComponent) {
+        this.commentSetComponent = commentSetComponent;
     }
-    ngAfterViewInit() {
-        Array.from(this.mvToolbarMain.nativeElement.children).forEach(button => {
-            this.allButtonsWidth += button.getBoundingClientRect().width;
-            this.widthRequiredForBtn[button.id] = this.allButtonsWidth;
-        });
-        this.cdr.detectChanges();
+    onCommentChange(changes) {
+        this.unsavedChanges.next(changes);
     }
-    onResize() {
-        this.cdr.detectChanges();
+    getUnsavedChanges() {
+        return this.unsavedChanges.asObservable();
     }
-    onControlPrint(event) {
-        event.preventDefault();
-        this.printFile();
+    hasUnsavedComments(annotation) {
+        if (annotation.comments.length > 0) {
+            const comment = this.getComment(annotation);
+            return comment.hasUnsavedChanges;
+        }
+        return false;
     }
-    onClickHighlightToggle() {
-        this.toolbarEvents.toggleHighlightMode();
+    updateUnsavedCommentsStatus(annotation, hasUnsavedChanges) {
+        const comment = this.getComment(annotation);
+        comment.hasUnsavedChanges = hasUnsavedChanges;
+        this.allCommentsSaved();
     }
-    onClickDrawToggle() {
-        this.toolbarEvents.toggleDrawMode();
+    getComment(annotation) {
+        return this.commentSetComponent.commentComponents
+            .find(c => c.comment.annotationId === annotation.comments[0].annotationId);
     }
-    toggleIndexSideBar() {
-        const sidebarOpen = this.toolbarEvents.sidebarOpen.getValue();
-        const sidebarView = this.toolbarEvents.sidebarOutlineView.getValue();
-        if (!(sidebarOpen && !sidebarView)) {
-            this.toolbarEvents.toggleSideBar(!sidebarOpen);
-        }
-        this.toolbarEvents.toggleSideBarView(true);
+    resetCommentSet() {
+        this.commentSetComponent = null;
     }
-    toggleBookmarksSideBar() {
-        const sidebarOpen = this.toolbarEvents.sidebarOpen.getValue();
-        const sidebarView = this.toolbarEvents.sidebarOutlineView.getValue();
-        if (!(sidebarOpen && sidebarView)) {
-            this.toolbarEvents.toggleSideBar(!sidebarOpen);
-        }
-        this.toolbarEvents.toggleSideBarView(false);
+    allCommentsSaved() {
+        this.onCommentChange(this.commentSetComponent.commentComponents.some(comment => comment.hasUnsavedChanges === true));
     }
-    togglePresentBar() {
-        this.toolbarEvents.searchBarHidden.next(true);
-        this.toolbarEvents.icp.enable();
+    createMarginToCommentEvent(margin) {
+        this.marginToCommentEmitter.next(margin);
     }
-    increasePageNumber() {
-        this.toolbarEvents.incrementPage(1);
+}
+/** @nocollapse */ CommentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ CommentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentService, decorators: [{
+            type: Injectable
+        }] });
+
+class CommentSetRenderService {
+    redrawComponents(commentComponents, pageHeights, rotate, zoom) {
+        let prevComment;
+        this.sortComponents(commentComponents, pageHeights, rotate, zoom).forEach((comment) => {
+            this.adjustIfOverlapping(comment, prevComment, zoom);
+            prevComment = comment;
+        });
     }
-    decreasePageNumber() {
-        this.toolbarEvents.incrementPage(-1);
+    sortComponents(commentComponents, pageHeights, rotate, zoom) {
+        return commentComponents.sort((a, b) => {
+            a.rectTop = this.top(a._rectangle, pageHeights[a.page - 1], rotate, zoom);
+            b.rectTop = this.top(b._rectangle, pageHeights[b.page - 1], rotate, zoom);
+            return this.processSort(a, b);
+        });
     }
-    onPageNumberInputChange(pageNumber) {
-        if (Number(pageNumber) < 1) {
-            pageNumber = '1';
+    adjustIfOverlapping(comment, prevComment, zoom) {
+        if (prevComment) {
+            const endOfPrevComment = prevComment.commentTop + this.height(prevComment);
+            if (comment.commentTop <= endOfPrevComment) {
+                comment.rectTop = (endOfPrevComment - comment.totalPrevPagesHeight) / zoom;
+            }
         }
-        if (Number(pageNumber) > this.pageCount) {
-            pageNumber = this.pageCount.toString();
+    }
+    processSort(a, b) {
+        if (this.onSameLine(a, b)) {
+            return a.rectLeft >= b.rectLeft ? 1 : -1;
         }
-        this.toolbarEvents.setPage(Number.parseInt(pageNumber, 10));
+        return a.commentTop >= b.commentTop ? 1 : -1;
     }
-    setCurrentPage(pageNumber) {
-        this.pageNumber = pageNumber;
+    onSameLine(a, b) {
+        return this.difference(a.commentTop, b.commentTop) === 0;
     }
-    rotate(rotation) {
-        this.toolbarEvents.rotate(rotation);
+    top(rectangle, height, rotate, zoom) {
+        const actualHeight = height / zoom;
+        switch (rotate) {
+            case 90: return rectangle.x;
+            case 180: return actualHeight - (rectangle.y + rectangle.height);
+            case 270: return actualHeight - (rectangle.x + rectangle.width);
+            default: return rectangle.y;
+        }
     }
-    printFile() {
-        this.toolbarEvents.print();
+    height(element) {
+        return element.form.nativeElement.getBoundingClientRect().height;
     }
-    downloadFile() {
-        this.toolbarEvents.download();
+    difference(a, b) { return Math.abs(a - b); }
+}
+/** @nocollapse */ CommentSetRenderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetRenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ CommentSetRenderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetRenderService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetRenderService, decorators: [{
+            type: Injectable
+        }] });
+
+class TagsServices {
+    constructor(http) {
+        this.http = http;
+        this.snakeCase = string => {
+            // transform string_to_snake_case
+            return string.replace(/ +/g, ' ') // find space
+                .split(/ |\B(?=[A-Z])/) // split it into array
+                .map(word => word.toLowerCase()) // transform to lover case
+                .join('_'); // trun array into sting using _
+        };
     }
-    zoom(zoomFactor) {
-        this.toolbarEvents.zoom(+zoomFactor);
+    getAllTags(createdBy) {
+        const url = `/em-anno/tags/${createdBy}`;
+        return this.http.get(url);
     }
-    stepZoom(zoomFactor) {
-        this.toolbarEvents.stepZoom(zoomFactor);
-        this.zoomSelect.nativeElement.selected = 'selected';
+    // @TODO: Move everything below this to NgRx store
+    getNewTags(annoid) {
+        return this.tagItems ? this.tagItems[annoid] : [];
     }
-    toggleCommentsPanel() {
-        this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
+    updateTagItems(items, annoId) {
+        const snakeCased = items.map(item => {
+            return {
+                ...item,
+                name: this.snakeCase(item.name)
+            };
+        });
+        this.tagItems = {
+            ...this.tagItems,
+            [annoId]: snakeCased
+        };
     }
-    toggleRedactBar() {
-        this.toolbarEvents.toggleRedactionMode();
+}
+/** @nocollapse */ TagsServices.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsServices, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ TagsServices.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsServices });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsServices, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+
+class TextHighlightDirective {
+    constructor(element) {
+        this.element = element;
     }
-    toggleGrabNDrag() {
-        this.toolbarEvents.toggleGrabNDrag();
+    ngAfterViewChecked() {
+        if (this.textToHighlight) {
+            this.highlightInputText(this.textToHighlight);
+        }
     }
-    isPdf() {
-        return this.contentType === 'pdf';
+    highlightInputText(textToHighlight) {
+        this.resetHighlight();
+        this.textToHighlight = textToHighlight;
+        const searchPattern = new RegExp(textToHighlight, 'gi');
+        const hostElement = this.element.nativeElement;
+        if (hostElement.innerHTML.match(searchPattern)) {
+            hostElement.innerHTML = hostElement.innerHTML
+                .replace(searchPattern, this.highlightPattern('$&'));
+        }
+        this.textToHighlight = undefined;
     }
-    toggleSearchBar() {
-        this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
+    resetHighlight() {
+        const hostElement = this.element.nativeElement;
+        const searchPattern = new RegExp(this.highlightPattern('(.*?)'), 'gi');
+        while (hostElement.innerHTML.match(searchPattern)) {
+            const matchGroups = searchPattern.exec(hostElement.innerHTML);
+            if (matchGroups) {
+                hostElement.innerHTML = hostElement.innerHTML.replace(matchGroups[0], matchGroups[1]);
+            }
+        }
     }
-    toggleMoreOptions() {
-        this.isDropdownMenuOpen = !this.isDropdownMenuOpen;
-        setTimeout(() => {
-            if (this.mvMenuItems) {
-                this.mvMenuItems.nativeElement.focus();
-            }
-        }, 100);
+    highlightPattern(dynamicText) {
+        return '<span class="mvTextHighlight">' + dynamicText + '</span>';
     }
 }
-/** @nocollapse */ MainToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MainToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i0.ChangeDetectorRef }, { token: NumberHelperService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MainToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MainToolbarComponent, selector: "mv-main-toolbar", inputs: { enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", contentType: "contentType" }, host: { listeners: { "window:resize": "onResize()", "document:keydown.control.p": "onControlPrint($event)", "document:keydown.meta.p": "onControlPrint($event)" } }, viewQueries: [{ propertyName: "zoomSelect", first: true, predicate: ["zoomSelect"], descendants: true }, { propertyName: "mvToolbarMain", first: true, predicate: ["mvToolbarMain"], descendants: true }, { propertyName: "mvMenuItems", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, 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\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\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\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\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          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Index</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Bookmarks</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDrawButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDrawBtn\"\n            #mvDrawBtn\n            class=\"mv-button mv-toolbar__menu-button--draw\"\n            title=\"Draw a box\"\n            tabindex=\"-1\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n            aria-hidden=\"true\"\n            aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\"\n            (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">Draw a box</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            tabindex=\"0\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\"\n            aria-hidden=\"true\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">Highlight</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>Page</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span></span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span></span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>Rotate</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">Present</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Redact</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>Grab and drag</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\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\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SearchBarComponent, selector: "mv-search-bar" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MainToolbarComponent, decorators: [{
-            type: 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\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\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\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\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          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Index</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Bookmarks</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDrawButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDrawBtn\"\n            #mvDrawBtn\n            class=\"mv-button mv-toolbar__menu-button--draw\"\n            title=\"Draw a box\"\n            tabindex=\"-1\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n            aria-hidden=\"true\"\n            aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\"\n            (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">Draw a box</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            tabindex=\"0\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\"\n            aria-hidden=\"true\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">Highlight</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>Page</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span></span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span></span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>Rotate</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">Present</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Redact</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>Grab and drag</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\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\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i0.ChangeDetectorRef }, { type: NumberHelperService }]; }, propDecorators: { enableAnnotations: [{
-                type: Input
-            }], enableRedactions: [{
-                type: Input
-            }], enableICP: [{
-                type: Input
-            }], contentType: [{
+/** @nocollapse */ TextHighlightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextHighlightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ TextHighlightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: { textToHighlight: "textToHighlight" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextHighlightDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mvTextHighlight]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { textToHighlight: [{
                 type: Input
-            }], zoomSelect: [{
-                type: ViewChild,
-                args: ['zoomSelect', { static: false }]
-            }], mvToolbarMain: [{
-                type: ViewChild,
-                args: ['mvToolbarMain', { static: false }]
-            }], mvMenuItems: [{
-                type: ViewChild,
-                args: ['dropdownMenu', { static: false }]
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize', []]
-            }], onControlPrint: [{
-                type: HostListener,
-                args: ['document:keydown.control.p', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['document:keydown.meta.p', ['$event']]
             }] } });
 
-const getRedactionState = createSelector(getMVState, (state) => state.redactions);
-const getRedactionPages = createSelector(getRedactionState, getPageEnt);
-const getSelected = createSelector(getRedactionState, getSelectedRedaction);
-const getRedactedDocumentInfo = createSelector(getRedactionState, getRedactedDocInfo);
-const getRedactionEnt = createSelector(getRedactionState, getRedactionEnt$1);
-const getRedactionArray = createSelector(getRedactionEnt, getDocumentId, (ent, documentId) => {
-    const redactions = Object.keys(ent).map(key => ent[key]);
-    return { redactions, documentId };
-});
-const getRedactionsPerPage = createSelector(getPages, getRedactionPages, (pages, pageEnt) => {
-    if (pages && pageEnt) {
-        const arr = [];
-        Object.keys(pages).forEach(key => {
-            arr.push({
-                anno: pageEnt[key] ? pageEnt[key] : [],
-                styles: pages[key].styles
-            });
-        });
-        return arr;
-    }
-});
-
-class RedactionToolbarComponent {
-    constructor(toolbarEventService, toolbarButtons, store) {
-        this.toolbarEventService = toolbarEventService;
-        this.toolbarButtons = toolbarButtons;
-        this.store = store;
-        this.preview = false;
-        this.hasRedactions = false;
-        this.subscriptions = [];
-    }
-    ngOnInit() {
-        this.subscriptions.push(this.store.pipe(select(getRedactionArray)).subscribe(redactions => {
-            this.hasRedactions = !!redactions.redactions.length;
-        }));
-        this.subscriptions.push(this.toolbarEventService.redactAllInProgressSubject.subscribe(inprogress => {
-            this.redactionAllInProgress = inprogress;
-        }));
-    }
-    onRedactAllSearch() {
-        this.toolbarEventService.openRedactionSearch.next(true);
-    }
-    toggleTextRedactionMode() {
-        this.toolbarEventService.highlightModeSubject.next(true);
+class TextareaAutoExpandDirective {
+    constructor(el) {
+        this.el = el;
     }
-    toggleDrawMode() {
-        this.toolbarEventService.drawModeSubject.next(true);
+    ngAfterContentChecked() {
+        this.adjustHeight();
     }
-    togglePreview() {
-        this.preview = !this.preview;
-        this.toolbarEventService.toggleRedactionPreview(this.preview);
+    onMouseDown() {
+        this.adjustHeight();
     }
-    unmarkAll() {
-        this.toolbarEventService.unmarkAll();
+    adjustHeight() {
+        const nativeElement = this.el.nativeElement;
+        nativeElement.style.overflow = 'hidden';
+        nativeElement.style.height = 'auto';
+        nativeElement.style.height = nativeElement.scrollHeight - 5 + 'px';
     }
-    redact() {
-        this.toolbarEventService.applyRedactionToDocument();
+}
+/** @nocollapse */ TextareaAutoExpandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextareaAutoExpandDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ TextareaAutoExpandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]", host: { listeners: { "input": "onMouseDown()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextareaAutoExpandDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mvTextAreaAutoExpand]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onMouseDown: [{
+                type: HostListener,
+                args: ['input']
+            }] } });
+
+class TagsComponent {
+    constructor(tagsServices) {
+        this.tagsServices = tagsServices;
+        this.validators = [this.minLength, this.maxLength20];
+        this.errorMessages = {
+            'minLength': 'Minimum of 2 characters',
+            'maxLength20': 'Maximum of 20 characters'
+        };
+        this.requestAutocompleteItems = (text) => {
+            return this.tagsServices.getAllTags(this.userId);
+        };
     }
-    toggleRedactBar() {
-        this.toolbarEventService.toggleRedactionMode();
+    onUpdateTags(value) {
+        this.tagsServices.updateTagItems(value, this.annoId);
     }
-    redactPage() {
-        this.toolbarEventService.drawModeSubject.next(true);
-        this.toolbarEventService.redactPage();
+    minLength(control) {
+        if (control.value.length < 2) {
+            return {
+                'minLength': true
+            };
+        }
+        return null;
     }
-    ngOnDestroy() {
-        for (const subscription of this.subscriptions) {
-            subscription.unsubscribe();
+    maxLength20(control) {
+        if (control.value.length >= 20) {
+            return {
+                'maxLength20': true
+            };
         }
+        return null;
     }
 }
-/** @nocollapse */ RedactionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RedactionToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ RedactionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RedactionToolbarComponent, selector: "mv-redaction-toolbar", inputs: { showRedactSearch: "showRedactSearch" }, ngImport: i0, template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >Redaction options</label\n  >\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw\"\n    title=\"Draw a box\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n  </button>\n\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page\"\n    title=\"Redact Page\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">Redact page</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    title=\"From search\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >From search</span\n    >\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\"\n    aria-pressed=\"false\"\n    title=\"Redact text\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear\"\n    aria-pressed=\"false\"\n    title=\"Clear all\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">Clear all</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    title=\"Preview\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\"\n      >Hide preview</span\n    >\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download\"\n    aria-pressed=\"false\"\n    title=\"Redact\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">Save document</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"Close Redaction\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">Close Redaction</span>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RedactionToolbarComponent, decorators: [{
+/** @nocollapse */ TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsComponent, deps: [{ token: TagsServices }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TagsComponent, selector: "mv-tags", inputs: { tagItems: "tagItems", userId: "userId", editable: "editable", annoId: "annoId" }, ngImport: i0, template: "<div class=\"tags\">\n  <tag-input\n    *ngIf=\"editable\" class=\"tags__edit\"\n    [maxItems]=\"10\"\n    [(ngModel)]=\"tagItems\"\n    (ngModelChange)=\"onUpdateTags($event)\"\n    [ngModelOptions]=\"{standalone:true}\"\n    [placeholder]=\"'Add tag'\"\n    [displayBy]=\"'label'\"\n    [identifyBy]=\"'name'\"\n    [onTextChangeDebounce]=\"250\"\n    [secondaryPlaceholder]=\"'Search or add tags'\"\n    [validators]=\"validators\"\n    [errorMessages]=\"errorMessages\"\n    [onlyFromAutocomplete]=\"false\">\n    <tag-input-dropdown\n      [autocompleteObservable]=\"requestAutocompleteItems\"\n      [displayBy]=\"'label'\"\n      [identifyBy]=\"'name'\"\n      [zIndex]=\"10000\"\n      [minimumTextLength]=\"2\">\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.label }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n\n  <div class=\"tags__renderer\" *ngIf=\"!editable && (tagItems && tagItems.length)\">\n    <span *ngFor=\"let tag of tagItems\" class=\"tags__item hmcts-badge\">\n      {{tag.label}}\n    </span>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration", "inputText"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { kind: "component", type: i4$1.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems", "autocompleteObservable"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-redaction-toolbar', template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >Redaction options</label\n  >\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw\"\n    title=\"Draw a box\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n  </button>\n\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page\"\n    title=\"Redact Page\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">Redact page</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    title=\"From search\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >From search</span\n    >\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\"\n    aria-pressed=\"false\"\n    title=\"Redact text\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear\"\n    aria-pressed=\"false\"\n    title=\"Clear all\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">Clear all</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    title=\"Preview\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\"\n      >Hide preview</span\n    >\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download\"\n    aria-pressed=\"false\"\n    title=\"Redact\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">Save document</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"Close Redaction\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">Close Redaction</span>\n  </button>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i1.Store }]; }, propDecorators: { showRedactSearch: [{
+            args: [{ selector: 'mv-tags', encapsulation: ViewEncapsulation.None, template: "<div class=\"tags\">\n  <tag-input\n    *ngIf=\"editable\" class=\"tags__edit\"\n    [maxItems]=\"10\"\n    [(ngModel)]=\"tagItems\"\n    (ngModelChange)=\"onUpdateTags($event)\"\n    [ngModelOptions]=\"{standalone:true}\"\n    [placeholder]=\"'Add tag'\"\n    [displayBy]=\"'label'\"\n    [identifyBy]=\"'name'\"\n    [onTextChangeDebounce]=\"250\"\n    [secondaryPlaceholder]=\"'Search or add tags'\"\n    [validators]=\"validators\"\n    [errorMessages]=\"errorMessages\"\n    [onlyFromAutocomplete]=\"false\">\n    <tag-input-dropdown\n      [autocompleteObservable]=\"requestAutocompleteItems\"\n      [displayBy]=\"'label'\"\n      [identifyBy]=\"'name'\"\n      [zIndex]=\"10000\"\n      [minimumTextLength]=\"2\">\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.label }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n\n  <div class=\"tags__renderer\" *ngIf=\"!editable && (tagItems && tagItems.length)\">\n    <span *ngFor=\"let tag of tagItems\" class=\"tags__item hmcts-badge\">\n      {{tag.label}}\n    </span>\n  </div>\n</div>\n\n" }]
+        }], ctorParameters: function () { return [{ type: TagsServices }]; }, propDecorators: { tagItems: [{
+                type: Input
+            }], userId: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], annoId: [{
                 type: Input
             }] } });
 
-class IcpToolbarComponent {
-    constructor(toolbarEventService, store) {
-        this.toolbarEventService = toolbarEventService;
+/**
+ * A moment timezone pipe to support parsing based on time zone abbreviations
+ * covers all cases of offset variation due to daylight saving.
+ *
+ * Same API as DatePipe with additional timezone abbreviation support
+ * Official date pipe dropped support for abbreviations names from Angular V5
+ */
+class MomentDatePipe extends DatePipe {
+    transform(value, format = 'mediumDate', timezone = 'Europe/London') {
+        const timezoneOffset = moment(value).tz(timezone).format('Z');
+        return super.transform(value, format, timezoneOffset);
+    }
+}
+/** @nocollapse */ MomentDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MomentDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ MomentDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MomentDatePipe, name: "momentDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MomentDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'momentDate'
+                }]
+        }] });
+
+class CommentComponent {
+    constructor(store, commentService, tagsServices) {
         this.store = store;
+        this.commentService = commentService;
+        this.tagsServices = tagsServices;
+        this.CHAR_LIMIT = 5000;
+        this.totalPrevPagesHeight = 0;
+        this.hasUnsavedChanges = false;
+        this.commentClick = new EventEmitter();
+        this.renderComments = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.updated = new EventEmitter();
+        this.changes = new EventEmitter();
+        this.rotate = 0;
+        this.zoom = 1;
     }
     ngOnInit() {
-        this.$subscription = this.store.pipe(select(isPresenter))
-            .subscribe(isPresenter => this.isPresenter = isPresenter);
-        this.$subscription.add(this.store.pipe(select(getPresenterName))
-            .subscribe(name => this.presenterName = name));
+        this.subscriptions = this.store.select(getComponentSearchText)
+            .pipe(distinctUntilChanged()).subscribe(searchString => this.searchString = searchString);
+        this.reRenderComments();
+        this.marginToComment$ = this.commentService.marginToCommentEmitter.asObservable();
+    }
+    ngAfterContentInit() {
+        if (this.tagItems && this.tagItems.length) {
+            this.tagsServices.updateTagItems(this.tagItems, this._comment.annotationId);
+        }
     }
     ngOnDestroy() {
-        this.$subscription.unsubscribe();
+        this.subscriptions.unsubscribe();
     }
-    present() {
-        this.toolbarEventService.icp.becomePresenter();
+    set comment(comment) {
+        this._comment = { ...comment };
+        this.page = this._comment.page;
+        this.lastUpdate = comment.lastModifiedDate ? comment.lastModifiedDate : comment.createdDate;
+        this.author = comment.createdByDetails;
+        this.createdBy = comment.createdBy;
+        this.editor = comment.lastModifiedByDetails;
+        this.originalComment = comment.content;
+        this.fullComment = this.originalComment;
+        this.selected = this._comment.selected;
+        this._editable = this._comment.editable;
+        this.tagItems = this._comment.tags;
+        const pageMarginBottom = 10;
+        this.totalPrevPagesHeight = 0;
+        for (let i = 0; i < this.page - 1; i++) {
+            const height = this._comment.pages[i + 1] ? this._comment.pages[i + 1].styles.height : undefined;
+            if (height) {
+                this.totalPrevPagesHeight += height + pageMarginBottom;
+            }
+        }
     }
-    stopPresenting() {
-        this.toolbarEventService.icp.stopPresenting();
+    get comment() {
+        return this._comment;
     }
-    leaveIcpSession() {
-        this.toolbarEventService.icp.leaveSession();
-    }
-    showParticipantsList() {
-        this.toolbarEventService.toggleParticipantsList(!this.toolbarEventService.icp.participantsListVisible.getValue());
-    }
-}
-/** @nocollapse */ IcpToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IcpToolbarComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ IcpToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IcpToolbarComponent, selector: "mv-icp-toolbar", ngImport: i0, template: "<div id=\"icp-toolbar\" class=\"icpMode\">\n  <div id=\"toolbar-title\">\n    <label class=\"govuk-label\" data-l10n-id=\"digitalEvidence_label\">Digital evidence presentation</label>\n  </div>\n\n  <div id=\"presentation-mode\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" data-l10n-id=\"icpInfo_label\">You are in presentation mode</label>\n    </div>\n    <div class=\"item-button\">\n      <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" tabindex=\"0\"\n        title=\"Leave presentation\" (click)=\"leaveIcpSession()\">\n        <span data-l10n-id=\"icp-leave-presentation_label\">Leave presentation</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"presenter-info\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" *ngIf=\"!presenterName\" data-l10n-id=\"noPresenter_label\">Waiting for presenter</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && isPresenter\" data-l10n-id=\"isPresenter_label\">You are\n        presenting</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && !isPresenter\"\n        data-l10n-id=\"otherPresenter_label\">{{ presenterName | titlecase }}\n        is presenting</label>\n    </div>\n    <div class=\"item-button\">\n      <button *ngIf=\"!presenterName\" class=\"govuk-button\" id=\"icp-present\" tabindex=\"0\" title=\"Present\"\n        (click)=\"present()\">\n        <span data-l10n-id=\"icp-present_label\">Start presenting</span>\n      </button>\n      <button *ngIf=\"isPresenter\" class=\"govuk-button  govuk-button--warning\" id=\"icp-stop-presenting\" tabindex=\"0\"\n        title=\"Stop presenting\" (click)=\"stopPresenting()\">\n        <span data-l10n-id=\"icp-stop-presenting_label\">Stop Presenting</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"participant-list\">\n    <button class=\"govuk-button govuk-button--secondary\" id=\"icp-participants-list\" tabindex=\"0\"\n      title=\"Participants list\" (click)=\"showParticipantsList()\">\n      <span\n        data-l10n-id=\"icp-stop-presenting_label\">{{(toolbarEventService.icp.participantsListVisible | async) ? 'Hide': 'Show'}}\n        participants</span>\n    </button>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IcpToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mv-icp-toolbar', template: "<div id=\"icp-toolbar\" class=\"icpMode\">\n  <div id=\"toolbar-title\">\n    <label class=\"govuk-label\" data-l10n-id=\"digitalEvidence_label\">Digital evidence presentation</label>\n  </div>\n\n  <div id=\"presentation-mode\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" data-l10n-id=\"icpInfo_label\">You are in presentation mode</label>\n    </div>\n    <div class=\"item-button\">\n      <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" tabindex=\"0\"\n        title=\"Leave presentation\" (click)=\"leaveIcpSession()\">\n        <span data-l10n-id=\"icp-leave-presentation_label\">Leave presentation</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"presenter-info\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" *ngIf=\"!presenterName\" data-l10n-id=\"noPresenter_label\">Waiting for presenter</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && isPresenter\" data-l10n-id=\"isPresenter_label\">You are\n        presenting</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && !isPresenter\"\n        data-l10n-id=\"otherPresenter_label\">{{ presenterName | titlecase }}\n        is presenting</label>\n    </div>\n    <div class=\"item-button\">\n      <button *ngIf=\"!presenterName\" class=\"govuk-button\" id=\"icp-present\" tabindex=\"0\" title=\"Present\"\n        (click)=\"present()\">\n        <span data-l10n-id=\"icp-present_label\">Start presenting</span>\n      </button>\n      <button *ngIf=\"isPresenter\" class=\"govuk-button  govuk-button--warning\" id=\"icp-stop-presenting\" tabindex=\"0\"\n        title=\"Stop presenting\" (click)=\"stopPresenting()\">\n        <span data-l10n-id=\"icp-stop-presenting_label\">Stop Presenting</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"participant-list\">\n    <button class=\"govuk-button govuk-button--secondary\" id=\"icp-participants-list\" tabindex=\"0\"\n      title=\"Participants list\" (click)=\"showParticipantsList()\">\n      <span\n        data-l10n-id=\"icp-stop-presenting_label\">{{(toolbarEventService.icp.participantsListVisible | async) ? 'Hide': 'Show'}}\n        participants</span>\n    </button>\n  </div>\n</div>" }]
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: i1.Store }]; } });
-
-class ToolbarModule {
-}
-/** @nocollapse */ ToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ ToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ToolbarModule, declarations: [SearchBarComponent,
-        MainToolbarComponent,
-        RedactionToolbarComponent,
-        IcpToolbarComponent,
-        RedactionSearchBarComponent], imports: [CommonModule,
-        FormsModule,
-        OverlayModule,
-        RouterModule], exports: [MainToolbarComponent,
-        SearchBarComponent,
-        RedactionToolbarComponent,
-        IcpToolbarComponent,
-        RedactionSearchBarComponent] });
-/** @nocollapse */ ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToolbarModule, providers: [
-        ToolbarButtonVisibilityService,
-        ToolbarEventService
-    ], imports: [CommonModule,
-        FormsModule,
-        OverlayModule,
-        RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToolbarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        SearchBarComponent,
-                        MainToolbarComponent,
-                        RedactionToolbarComponent,
-                        IcpToolbarComponent,
-                        RedactionSearchBarComponent
-                    ],
-                    providers: [
-                        ToolbarButtonVisibilityService,
-                        ToolbarEventService
-                    ],
-                    exports: [
-                        MainToolbarComponent,
-                        SearchBarComponent,
-                        RedactionToolbarComponent,
-                        IcpToolbarComponent,
-                        RedactionSearchBarComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        OverlayModule,
-                        RouterModule
-                    ]
-                }]
-        }] });
-
-class HighlightCreateService {
-    constructor(toolBarEvents, store) {
-        this.toolBarEvents = toolBarEvents;
-        this.store = store;
-    }
-    saveAnnotation(rectangles, page) {
-        this.store.pipe(select(getDocumentIdSetId), take(1)).subscribe(anoSetDocId => {
-            const anno = {
-                id: v4(),
-                color: 'FFFF00',
-                comments: [],
-                page: page,
-                rectangles: rectangles,
-                type: 'highlight',
-                ...anoSetDocId,
-                createdBy: '',
-                createdByDetails: undefined,
-                createdDate: moment.utc().tz('Europe/London').toISOString(),
-                lastModifiedBy: '',
-                lastModifiedByDetails: undefined,
-                lastModifiedDate: '',
-                tags: [],
-            };
-            this.store.dispatch(new SaveAnnotation(anno));
-        });
-    }
-    applyRotation(pageHeight, pageWidth, offsetHeight, offsetWidth, offsetTop, offsetLeft, rotate, zoom) {
-        const { x, y, width, height } = {
-            x: +(offsetLeft / zoom).toFixed(2),
-            y: +(offsetTop / zoom).toFixed(2),
-            width: +(offsetWidth / zoom).toFixed(2),
-            height: +(offsetHeight / zoom).toFixed(2)
-        };
-        const rectangle = { x, y, width, height };
-        switch (rotate) {
+    set annotation(annotation) {
+        this._rectangle = annotation.rectangles
+            .reduce((prev, current) => prev.y < current.y ? prev : current);
+        const actualHeight = this._comment.pages[this.page].styles.height / this.zoom;
+        switch (this.rotate) {
             case 90:
-                rectangle.width = height;
-                rectangle.height = width;
-                rectangle.x = y;
-                rectangle.y = +(pageWidth / zoom - x - width).toFixed(2);
+                this.rectTop = this._rectangle.x;
                 break;
             case 180:
-                rectangle.x = +(pageWidth / zoom - x - width).toFixed(2);
-                rectangle.y = +(pageHeight / zoom - y - height).toFixed(2);
+                this.rectTop = actualHeight - (this._rectangle.y + this._rectangle.height);
                 break;
             case 270:
-                rectangle.width = height;
-                rectangle.height = width;
-                rectangle.x = +(pageHeight / zoom - y - height).toFixed(2);
-                rectangle.y = x;
+                this.rectTop = actualHeight - (this._rectangle.x + this._rectangle.width);
                 break;
+            default: this.rectTop = this._rectangle.y;
         }
-        return rectangle;
-    }
-    resetHighlight() {
-        window.getSelection().removeAllRanges();
-        this.toolBarEvents.highlightModeSubject.next(false);
-    }
-}
-/** @nocollapse */ HighlightCreateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HighlightCreateService, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ HighlightCreateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HighlightCreateService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: HighlightCreateService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: i1.Store }]; } });
-
-class RedactionSearchBarComponent {
-    constructor(store, toolbarButtons, toolbarEvents, highlightService) {
-        this.store = store;
-        this.toolbarButtons = toolbarButtons;
-        this.toolbarEvents = toolbarEvents;
-        this.highlightService = highlightService;
-        this.highlightAll = true;
-        this.matchCase = false;
-        this.wholeWord = false;
-        this.resultsText = '';
-        this.searchText = '';
-        this.resultCount = 0;
-        this.redactElements = [];
-        this.advancedSearchVisible = false;
-    }
-    ngOnInit() {
-        this.subscription = this.toolbarEvents.redactionSerachSubject.subscribe((results) => this.redactAllSearched(results));
-        this.subscription.add(this.store.pipe(select(getDocumentId)).subscribe(docId => this.documentId = docId));
-        this.subscription.add(this.store.pipe(select(getPages)).subscribe((pages) => {
-            if (pages[1]) {
-                this.allPages = pages;
-            }
-        }));
-        this.subscription.add(this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results)));
-        this.subscription.add(this.toolbarEvents.openRedactionSearch.subscribe(isOpen => this.openSearchModal = isOpen));
-        this.subscription.add(this.toolbarEvents.redactAllInProgressSubject
-            .subscribe(inProgress => this.redactAllInProgress = inProgress));
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-    }
-    onWindowKeyDown(e) {
-        if (e.code === 'F3' || (e.ctrlKey && e.code === 'KeyF')) {
-            e.preventDefault();
-            this.toolbarEvents.searchBarHidden.next(false);
-            setTimeout(() => this.findInput.nativeElement.focus(), 200);
-        }
-    }
-    search(reset = true) {
-        this.redactAll = !reset;
-        if (this.redactAll) {
-            this.toolbarEvents.redactAllInProgressSubject.next(true);
-        }
-        if (reset) {
-            this.redactElements = [];
-        }
-        this.toolbarEvents.search({
-            searchTerm: this.searchText,
-            highlightAll: this.highlightAll,
-            matchCase: this.matchCase,
-            wholeWord: this.wholeWord,
-            previous: false,
-            reset
-        });
-    }
-    saveRedaction(redactRectangle) {
-        const redaction = redactRectangle.map(ele => {
-            return { page: ele.page, rectangles: ele.rectangles, redactionId: uuid$1(), documentId: this.documentId };
-        });
-        this.store.dispatch(new SaveBulkRedaction({ searchRedactions: redaction }));
-    }
-    existInRedactElements(pageNumber, matechedIndex, rectangles) {
-        if (this.redactElements && this.redactElements.length > 0) {
-            const pagesFound = this.redactElements.find(re => re.page === pageNumber && re.matchedIndex === matechedIndex);
-            const pageRectangles = pagesFound?.rectangles;
-            if (!pageRectangles || pageRectangles.length <= 0) {
-                return false;
-            }
-            let matchesRectangles = 0;
-            for (let rectIndx = 0; rectIndx < pageRectangles.length; rectIndx++) {
-                const rectangle = pageRectangles[rectIndx];
-                const foundRectangle = rectangles.find(re => re.width === rectangle.width &&
-                    re.height === rectangle.height && re.x === rectangle.x && re.y === rectangle.y);
-                if (foundRectangle) {
-                    matchesRectangles++;
-                }
-            }
-            return pageRectangles.length === matchesRectangles;
-        }
-        return false;
-    }
-    onCloseSearchModal() {
-        this.toolbarEvents.openRedactionSearch.next(false);
-    }
-    setSearchResultsCount(results) {
-        this.resultCount = results.total;
-        this.resultsText = this.resultCount > 0
-            ? `${results.total} results founds`
-            : 'No results found';
-    }
-    redactAllSearched(results) {
-        const $this = this;
-        const intervalId = setInterval(() => {
-            const highlightElement = document.getElementsByClassName('highlight selected');
-            if (highlightElement && highlightElement.length > 0) {
-                clearInterval(intervalId);
-                $this.redactAllSearchedTick(results);
-            }
-        }, 100);
-    }
-    redactAllSearchedTick(results) {
-        const highlightElement = document.getElementsByClassName('highlight selected');
-        if (highlightElement && highlightElement.length > 0) {
-            this.resultCount = results.matchesCount;
-            const pageNumber = results.page + 1;
-            const rectangles = this.getRectangles(pageNumber);
-            if (rectangles && this.redactElements.length <= this.resultCount
-                && !this.existInRedactElements(pageNumber, results.matchedIndex, rectangles)) {
-                this.redactElements.push({ page: pageNumber, matchedIndex: results?.matchedIndex, rectangles });
-                this.CreateRedactAllText();
-            }
-            if (this.redactAll && this.resultCount && this.resultCount > 0
-                && rectangles && this.redactElements.length < this.resultCount) {
-                this.search(false);
-            }
-            if (this.redactAll && this.resultCount && this.redactElements.length === this.resultCount) {
-                this.redactAll = false;
-                this.redactAllText = null;
-                this.saveRedaction(this.redactElements);
-            }
-        }
-    }
-    CreateRedactAllText() {
-        this.redactAllText = `${this.redactElements.length} of ${this.resultCount}`;
-    }
-    onEscapeKeyPress(e) {
-        this.toolbarEvents.searchBarHidden.next(true);
+        this.rectLeft = this._rectangle.x;
     }
-    onEnterKeyPress(e) {
-        this.search();
+    get editable() {
+        return this._editable;
     }
-    toggleSearchBar() {
-        this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
+    onCommentChange(updatedComment) {
+        this.hasUnsavedChanges =
+            this.originalComment.substring(0, this.CHAR_LIMIT) !== updatedComment.substring(0, this.CHAR_LIMIT);
+        this.commentService.onCommentChange(this.hasUnsavedChanges);
     }
-    getRectangles(page) {
-        this.pageHeight = this.allPages[page].styles.height;
-        this.pageWidth = this.allPages[page].styles.width;
-        this.zoom = parseFloat(this.allPages[page].scaleRotation.scale);
-        this.rotate = parseInt(this.allPages[page].scaleRotation.rotation, 10);
-        const selectedHighLightedElements = document.getElementsByClassName('highlight selected');
-        if (selectedHighLightedElements && selectedHighLightedElements.length > 0) {
-            const docRange = document.createRange();
-            docRange.selectNodeContents(selectedHighLightedElements[0]);
-            const selection = window.getSelection();
-            selection?.removeAllRanges();
-            selection?.addRange(docRange);
-            if (selection.rangeCount && !selection.isCollapsed) {
-                const range = selection.getRangeAt(0).cloneRange();
-                const clientRects = range.getClientRects();
-                if (clientRects) {
-                    const parentRect = selectedHighLightedElements[0].parentElement.parentElement.getBoundingClientRect();
-                    const selectionRectangles = [];
-                    for (let i = 0; i < clientRects.length; i++) {
-                        const selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
-                        const findSelecttionRectangle = selectionRectangles.find((rect) => rect.width === selectionRectangle.width && rect.x === selectionRectangle.x);
-                        if (!findSelecttionRectangle) {
-                            selectionRectangles.push(selectionRectangle);
-                        }
-                    }
-                    return selectionRectangles;
-                }
+    deleteOrCancel() {
+        if (!this.editable) {
+            this.delete.emit(this._comment);
+        }
+        else {
+            this.hasUnsavedChanges = false;
+            this._editable = false;
+            this.fullComment = this.originalComment;
+            this.changes.emit(false);
+            if (!this.author && !this.fullComment) {
+                this.delete.emit(this._comment);
             }
         }
     }
-    createTextRectangle(rect, parentRect) {
-        const height = rect.bottom - rect.top;
-        const width = rect.right - rect.left;
-        const top = rect.top - parentRect.top;
-        const left = rect.left - parentRect.left;
-        let rectangle = this.highlightService.applyRotation(this.pageHeight, this.pageWidth, height, width, top, left, this.rotate, this.zoom);
-        rectangle = { id: uuid$1(), ...rectangle };
-        return rectangle;
+    editOrSave() {
+        if (!this.editable) {
+            this._editable = true;
+        }
+        else {
+            this._comment.content = this.fullComment.substring(0, this.CHAR_LIMIT);
+            const tags = this.tagsServices.getNewTags(this._comment.annotationId);
+            const payload = {
+                comment: this._comment,
+                tags
+            };
+            this.updated.emit(payload);
+            this.hasUnsavedChanges = false;
+            this._editable = false;
+            this.changes.emit(false);
+        }
+    }
+    onCommentClick() {
+        if (!this.selected) {
+            this.selected = true;
+            this._editable = false;
+            this.commentClick.emit({ annotationId: this._comment.annotationId, editable: this._editable, selected: true });
+        }
+    }
+    reRenderComments() {
+        this.renderComments.emit(this._comment);
+    }
+    get commentTop() {
+        return this.totalPrevPagesHeight + (this.rectTop * this.zoom);
+    }
+    get height() {
+        return this.form.nativeElement.getBoundingClientRect().height / this.zoom;
     }
 }
-/** @nocollapse */ RedactionSearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RedactionSearchBarComponent, deps: [{ token: i1.Store }, { token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }, { token: HighlightCreateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ RedactionSearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RedactionSearchBarComponent, selector: "mv-redaction-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }], ngImport: i0, template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Find in document\"\n        #findInput\n        title=\"Find in document\"\n        placeholder=\"Redact from search...\"\n        tabindex=\"0\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          Search\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          Redact all\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            Redacting in progress\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RedactionSearchBarComponent, decorators: [{
+/** @nocollapse */ CommentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: TagsServices }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentComponent, selector: "mv-anno-comment", inputs: { rotate: "rotate", zoom: "zoom", index: "index", page: "page", comment: "comment", annotation: "annotation" }, outputs: { commentClick: "commentClick", renderComments: "renderComments", delete: "delete", updated: "updated", changes: "changes" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "editableComment", first: true, predicate: ["editableComment"], descendants: true }], ngImport: i0, template: "<div #form (click)=\"onCommentClick()\" class=\"aui-comment\"\n      [ngClass]=\"{'stylestoggle' : (marginToComment$ | async ) }\"\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", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: ["textToHighlight"] }, { kind: "directive", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]" }, { kind: "component", type: TagsComponent, selector: "mv-tags", inputs: ["tagItems", "userId", "editable", "annoId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: MomentDatePipe, name: "momentDate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-redaction-search-bar', template: "<div\n  *ngIf=\"openSearchModal\"\n  class=\"searchbar redaction-search-bar govuk-!-padding-3\"\n>\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full govuk-!-padding-right-0\">\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvCloseBtn\"\n          #mvCloseBtn\n          class=\"mv-button searchbar-button--close\"\n          title=\"Close Search\"\n          data-l10n-id=\"mvRedactBtn\"\n          (click)=\"onCloseSearchModal()\"\n        ></button>\n      </div>\n      <input\n        id=\"search_input\"\n        class=\"govuk-input govuk-!-width-three-quarters govuk-!-display-inline-block govuk-!-margin-top-5\"\n        type=\"text\"\n        aria-label=\"Find in document\"\n        #findInput\n        title=\"Find in document\"\n        placeholder=\"Redact from search...\"\n        tabindex=\"0\"\n        data-l10n-id=\"search_input\"\n        [(ngModel)]=\"searchText\"\n        (keydown.escape)=\"onEscapeKeyPress($event)\"\n        (keydown.enter)=\"onEnterKeyPress($event)\"\n      />\n      <div class=\"redaction-search-buttons-area\">\n        <button\n          id=\"mvSearchAllBtn\"\n          class=\"govuk-button govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search()\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          Search\n        </button>\n        <button\n          id=\"mvRedactAllBtn\"\n          class=\"govuk-button govuk-!-margin-left-2 govuk-!-margin-bottom-0\"\n          data-module=\"govuk-button\"\n          (click)=\"search(false)\"\n          [disabled]=\"redactAllInProgress\"\n        >\n          Redact all\n        </button>\n      </div>\n      <div\n        class=\"govuk-grid-column-three-quarters govuk-!-padding-left-0 govuk-!-padding-top-2 redaction-status-text\"\n      >\n        <span\n          id=\"findRedactResultsCount\"\n          class=\"govuk-grid-column-full govuk-!-margin-right-4 govuk-!-margin-left-0 govuk-!-padding-left-0\"\n          ><h4\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n            *ngIf=\"redactAllInProgress\"\n          >\n            Redacting in progress\n          </h4>\n          {{ redactAllInProgress ? \"\" : resultsText }}</span\n        >\n        <span>\n          <h5\n            id=\"redactAllInProgressCount\"\n            class=\"govuk-!-display-inline-block govuk-!-margin-top-0 govuk-!-margin-bottom-1\"\n          >\n            {{ redactAllInProgress ? redactAllText : \"\" }}\n          </h5>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".redaction-search-buttons-area{display:flex;flex-direction:row;padding-top:.5rem}.redaction-search-bar{width:20rem;left:73%;top:2%}.redaction-status-text{height:2.6rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }, { type: HighlightCreateService }]; }, propDecorators: { findInput: [{
+            args: [{ selector: 'mv-anno-comment', template: "<div #form (click)=\"onCommentClick()\" class=\"aui-comment\"\n      [ngClass]=\"{'stylestoggle' : (marginToComment$ | async ) }\"\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" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CommentService }, { type: TagsServices }]; }, propDecorators: { commentClick: [{
+                type: Output
+            }], renderComments: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], updated: [{
+                type: Output
+            }], changes: [{
+                type: Output
+            }], rotate: [{
+                type: Input
+            }], zoom: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], form: [{
                 type: ViewChild,
-                args: ['findInput', { static: true }]
-            }], onWindowKeyDown: [{
-                type: HostListener,
-                args: ['window:keydown', ['$event']]
+                args: ['form', { static: false }]
+            }], editableComment: [{
+                type: ViewChild,
+                args: ['editableComment', { static: false }]
+            }], comment: [{
+                type: Input
+            }], annotation: [{
+                type: Input
             }] } });
 
-// TODO: replace by NgRx
-class CommentService {
-    constructor() {
-        this.unsavedChanges = new Subject();
-        this.marginToCommentEmitter = new BehaviorSubject(false);
+class CommentSetComponent {
+    constructor(store, commentService, renderService, toolbarEvents) {
+        this.store = store;
+        this.commentService = commentService;
+        this.renderService = renderService;
+        this.toolbarEvents = toolbarEvents;
+        this.pageHeights = [];
+        this.subscriptions = [];
+        this.clearSelection();
     }
-    setCommentSet(commentSetComponent) {
-        this.commentSetComponent = commentSetComponent;
+    ngOnInit() {
+        this.comments$ = this.store.pipe(select(getCommentsArray));
+        this.annoEntities$ = this.store.pipe(select(getAnnotationEntities));
+        this.subscriptions.push(this.toolbarEvents.commentsPanelVisible.subscribe(toggle => {
+            this.redrawComments();
+            this.showCommentsPanel = toggle;
+        }));
+        this.subscriptions.push(this.toolbarEvents.rotateSubject.subscribe(rotate => this.rotateDocument()));
     }
-    onCommentChange(changes) {
-        this.unsavedChanges.next(changes);
+    ngOnChanges(changes) {
+        if (changes.annotationSet) {
+            this.commentService.setCommentSet(this);
+        }
+        if (changes.contentScrollTop) {
+            if (this.container) {
+                this.container.nativeElement.scrollTo(0, this.contentScrollTop);
+            }
+        }
     }
-    getUnsavedChanges() {
-        return this.unsavedChanges.asObservable();
+    ngOnDestroy() {
+        if (this.subscriptions.length > 0) {
+            this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        }
     }
-    hasUnsavedComments(annotation) {
-        if (annotation.comments.length > 0) {
-            const comment = this.getComment(annotation);
-            return comment.hasUnsavedChanges;
+    onSelect(annotationId) {
+        this.store.dispatch(new SelectedAnnotation(annotationId));
+    }
+    onCommentDelete(comment) {
+        const annotation = this.annotationSet.annotations.find(anno => anno.id === comment.annotationId);
+        const comments = [];
+        const annot = {
+            ...annotation,
+            comments
+        };
+        this.onAnnotationUpdate(annot);
+        this.redrawComments();
+    }
+    redrawComments() {
+        setTimeout(() => {
+            const componentList = this.commentComponents.map(comment => comment);
+            this.renderService.redrawComponents(componentList, this.pageHeights, this.rotate, this.zoom);
+        }, 0);
+    }
+    rotateDocument() {
+        if (this.panel) {
+            this.panel.nativeElement.style.height = '0';
         }
-        return false;
     }
-    updateUnsavedCommentsStatus(annotation, hasUnsavedChanges) {
-        const comment = this.getComment(annotation);
-        comment.hasUnsavedChanges = hasUnsavedChanges;
-        this.allCommentsSaved();
+    onCommentUpdate(payload) {
+        const annotation = this.annotationSet.annotations.find(anno => anno.id === payload.comment.annotationId);
+        const comments = [payload.comment];
+        const tags = payload.tags;
+        const annot = {
+            ...annotation,
+            comments,
+            tags
+        };
+        this.onAnnotationUpdate(annot);
     }
-    getComment(annotation) {
-        return this.commentSetComponent.commentComponents
-            .find(c => c.comment.annotationId === annotation.comments[0].annotationId);
+    onAnnotationUpdate(annotation) {
+        this.store.dispatch(new SaveAnnotation(annotation));
     }
-    resetCommentSet() {
-        this.commentSetComponent = null;
+    onContainerClick(e) {
+        if (e.path && e.path[0] === this.panel.nativeElement) {
+            this.clearSelection();
+        }
     }
-    allCommentsSaved() {
-        this.onCommentChange(this.commentSetComponent.commentComponents.some(comment => comment.hasUnsavedChanges === true));
+    clearSelection() {
+        this.store.dispatch(new SelectedAnnotation({ annotationId: '', editable: false, selected: false }));
     }
-    createMarginToCommentEvent(margin) {
-        this.marginToCommentEmitter.next(margin);
+    allCommentsSaved() {
+        this.commentService.allCommentsSaved();
     }
 }
-/** @nocollapse */ CommentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ CommentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentService, decorators: [{
-            type: Injectable
-        }] });
+/** @nocollapse */ CommentSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: CommentSetRenderService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CommentSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentSetComponent, selector: "mv-comment-set", inputs: { annotationSet: "annotationSet", zoom: "zoom", rotate: "rotate", height: "height", pageHeights: "pageHeights", contentScrollTop: "contentScrollTop" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "commentComponents", predicate: ["commentComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CommentComponent, selector: "mv-anno-comment", inputs: ["rotate", "zoom", "index", "page", "comment", "annotation"], outputs: ["commentClick", "renderComments", "delete", "updated", "changes"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mv-comment-set', 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" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CommentService }, { type: CommentSetRenderService }, { type: ToolbarEventService }]; }, propDecorators: { annotationSet: [{
+                type: Input
+            }], zoom: [{
+                type: Input
+            }], rotate: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], pageHeights: [{
+                type: Input
+            }], contentScrollTop: [{
+                type: Input
+            }], container: [{
+                type: ViewChild,
+                args: ['container', { static: false }]
+            }], panel: [{
+                type: ViewChild,
+                args: ['panel', { static: false }]
+            }], commentComponents: [{
+                type: ViewChildren,
+                args: ['commentComponent']
+            }] } });
 
-class CommentSetRenderService {
-    redrawComponents(commentComponents, pageHeights, rotate, zoom) {
-        let prevComment;
-        this.sortComponents(commentComponents, pageHeights, rotate, zoom).forEach((comment) => {
-            this.adjustIfOverlapping(comment, prevComment, zoom);
-            prevComment = comment;
-        });
+class CommentsNavigateComponent {
+    constructor(store, toolbarEvents) {
+        this.store = store;
+        this.toolbarEvents = toolbarEvents;
+        this.autoSelect = false;
+        this.navigationList = [];
+        this.index = 0;
     }
-    sortComponents(commentComponents, pageHeights, rotate, zoom) {
-        return commentComponents.sort((a, b) => {
-            a.rectTop = this.top(a._rectangle, pageHeights[a.page - 1], rotate, zoom);
-            b.rectTop = this.top(b._rectangle, pageHeights[b.page - 1], rotate, zoom);
-            return this.processSort(a, b);
-        });
+    ngOnChanges(changes) {
+        if (changes.annotationList) {
+            this.initNavigationList();
+        }
+    }
+    initNavigationList() {
+        this.index = 0;
+        this.navigationList = [...this.annotationList || []]
+            .map(annotation => ({
+            content: annotation.comments[0].content,
+            annotationId: annotation.id,
+            page: annotation.page,
+            rectangle: this.upperRectangle(annotation.rectangles),
+        }))
+            .sort(this.sortComments);
+        if (this.autoSelect) {
+            this.toolbarEvents.setPage(Number.parseInt(this.navigationList[0].page, 0));
+            this.store.dispatch(new SelectedAnnotation({
+                annotationId: this.navigationList[0].annotationId,
+                editable: false,
+                selected: true
+            }));
+        }
     }
-    adjustIfOverlapping(comment, prevComment, zoom) {
-        if (prevComment) {
-            const endOfPrevComment = prevComment.commentTop + this.height(prevComment);
-            if (comment.commentTop <= endOfPrevComment) {
-                comment.rectTop = (endOfPrevComment - comment.totalPrevPagesHeight) / zoom;
+    sortComments(mappedCommentA, mappedCommentB) {
+        if (mappedCommentA.page !== mappedCommentB.page) {
+            return mappedCommentA.page - mappedCommentB.page;
+        }
+        else {
+            const rectA = mappedCommentA.rectangle;
+            const rectB = mappedCommentB.rectangle;
+            if (rectA.y !== rectB.y) {
+                return rectA.y - rectB.y;
+            }
+            else {
+                return rectA.x - rectB.x;
             }
         }
     }
-    processSort(a, b) {
-        if (this.onSameLine(a, b)) {
-            return a.rectLeft >= b.rectLeft ? 1 : -1;
+    nextItem() {
+        this.index += 1;
+        if (this.index === this.annotationList.length) {
+            this.index = 0;
         }
-        return a.commentTop >= b.commentTop ? 1 : -1;
-    }
-    onSameLine(a, b) {
-        return this.difference(a.commentTop, b.commentTop) === 0;
+        this.toolbarEvents.setPage(Number.parseInt(this.navigationList[this.index].page, 0));
+        this.store.dispatch(new SelectedAnnotation({
+            annotationId: this.navigationList[this.index].annotationId, editable: false, selected: true
+        }));
     }
-    top(rectangle, height, rotate, zoom) {
-        const actualHeight = height / zoom;
-        switch (rotate) {
-            case 90: return rectangle.x;
-            case 180: return actualHeight - (rectangle.y + rectangle.height);
-            case 270: return actualHeight - (rectangle.x + rectangle.width);
-            default: return rectangle.y;
+    prevItem() {
+        this.index -= 1;
+        if (this.index < 0) {
+            this.index = this.navigationList.length - 1;
         }
+        this.toolbarEvents.setPage(Number.parseInt(this.navigationList[this.index].page, 0));
+        this.store.dispatch(new SelectedAnnotation({
+            annotationId: this.navigationList[this.index].annotationId,
+            editable: false,
+            selected: true
+        }));
     }
-    height(element) {
-        return element.form.nativeElement.getBoundingClientRect().height;
+    upperRectangle(rectangles) {
+        [...rectangles].sort((rect1, rect2) => rect1.y - rect2.y);
+        return { x: rectangles[0].x, y: rectangles[0].y };
     }
-    difference(a, b) { return Math.abs(a - b); }
 }
-/** @nocollapse */ CommentSetRenderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetRenderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ CommentSetRenderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetRenderService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetRenderService, decorators: [{
-            type: Injectable
-        }] });
+/** @nocollapse */ CommentsNavigateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentsNavigateComponent, deps: [{ token: i1.Store }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CommentsNavigateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: { annotationList: "annotationList", autoSelect: "autoSelect" }, usesOnChanges: true, ngImport: i0, template: "<p class=\"comment-search\">\n  <span class=\"comment-search__item\">\n    Showing {{ index + 1 }} of {{ navigationList.length }}\n  </span>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Previous comment\"\n     (click)=\"prevItem()\">Prev</a>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Next comment'\"\n     (click)=\"nextItem()\">Next</a>\n</p>\n", dependencies: [{ kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentsNavigateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mv-comments-navigate', encapsulation: ViewEncapsulation.None, template: "<p class=\"comment-search\">\n  <span class=\"comment-search__item\">\n    Showing {{ index + 1 }} of {{ navigationList.length }}\n  </span>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Previous comment\"\n     (click)=\"prevItem()\">Prev</a>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Next comment'\"\n     (click)=\"nextItem()\">Next</a>\n</p>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: ToolbarEventService }]; }, propDecorators: { annotationList: [{
+                type: Input
+            }], autoSelect: [{
+                type: Input
+            }] } });
 
-class TagsServices {
-    constructor(http) {
-        this.http = http;
-        this.snakeCase = string => {
-            // transform string_to_snake_case
-            return string.replace(/ +/g, ' ') // find space
-                .split(/ |\B(?=[A-Z])/) // split it into array
-                .map(word => word.toLowerCase()) // transform to lover case
-                .join('_'); // trun array into sting using _
-        };
+class CommentSearchComponent {
+    constructor(store) {
+        this.store = store;
+        this.searchResults = [];
+        this.searchIndex = 0;
     }
-    getAllTags(createdBy) {
-        const url = `/em-anno/tags/${createdBy}`;
-        return this.http.get(url);
+    ngAfterViewInit() {
+        if (this.searchInput) {
+            this.searchInput.nativeElement.focus();
+        }
     }
-    // @TODO: Move everything below this to NgRx store
-    getNewTags(annoid) {
-        return this.tagItems ? this.tagItems[annoid] : [];
+    ngOnDestroy() {
+        // TODO workaround for tab error
+        setTimeout(() => { this.store.dispatch(new SearchComment('')); }, 250);
     }
-    updateTagItems(items, annoId) {
-        const snakeCased = items.map(item => {
-            return {
-                ...item,
-                name: this.snakeCase(item.name)
-            };
-        });
-        this.tagItems = {
-            ...this.tagItems,
-            [annoId]: snakeCased
-        };
+    searchComments(searchText) {
+        this.clearSearch();
+        if (searchText.length > 2) {
+            this.searchString = searchText;
+            this.searchResults = this.annotations
+                .filter(annotation => annotation.comments.length > 0)
+                .filter(annotation => annotation.comments[0].content.toLowerCase().includes(this.searchString.toLowerCase()));
+            if (this.searchResults.length > 0) {
+                this.store.dispatch(new SearchComment(searchText));
+            }
+        }
+    }
+    clearSearch() {
+        this.searchString = undefined;
+        this.searchResults = [];
+        this.searchIndex = 0;
+        this.store.dispatch(new SearchComment(''));
     }
 }
-/** @nocollapse */ TagsServices.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsServices, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ TagsServices.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsServices });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsServices, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+/** @nocollapse */ CommentSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSearchComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CommentSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentSearchComponent, selector: "mv-comment-search", inputs: { annotations: "annotations" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<input #searchInput type=\"text\"\n       class=\"govuk-input comment-search__item\"\n       id=\"search-comments-input\" name=\"searchString\"\n       aria-label=\"search comments input\" [ngModel]=\"searchString\">\n<button type=\"button\"\n        [class.govuk-button--disabled]=\"searchInput?.value.length <= 2\"\n        class=\"govuk-button comment-search__item\"\n        (click)=\"searchComments(searchInput.value.trim())\">Search</button>\n<ng-container *ngIf=\"searchResults.length > 0\">\n  <mv-comments-navigate [annotationList]=\"searchResults\"></mv-comments-navigate>\n</ng-container>\n<ng-container *ngIf=\"searchString && searchResults?.length === 0\">\n  <p class=\"comment-search__item\">\n    No matches have been found\n  </p>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: ["annotationList", "autoSelect"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mv-comment-search', encapsulation: ViewEncapsulation.None, template: "<input #searchInput type=\"text\"\n       class=\"govuk-input comment-search__item\"\n       id=\"search-comments-input\" name=\"searchString\"\n       aria-label=\"search comments input\" [ngModel]=\"searchString\">\n<button type=\"button\"\n        [class.govuk-button--disabled]=\"searchInput?.value.length <= 2\"\n        class=\"govuk-button comment-search__item\"\n        (click)=\"searchComments(searchInput.value.trim())\">Search</button>\n<ng-container *ngIf=\"searchResults.length > 0\">\n  <mv-comments-navigate [annotationList]=\"searchResults\"></mv-comments-navigate>\n</ng-container>\n<ng-container *ngIf=\"searchString && searchResults?.length === 0\">\n  <p class=\"comment-search__item\">\n    No matches have been found\n  </p>\n</ng-container>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { annotations: [{
+                type: Input
+            }], searchInput: [{
+                type: ViewChild,
+                args: ['searchInput', { static: false }]
+            }] } });
 
-class TextHighlightDirective {
-    constructor(element) {
-        this.element = element;
-    }
-    ngAfterViewChecked() {
-        if (this.textToHighlight) {
-            this.highlightInputText(this.textToHighlight);
+class FilterPipe {
+    transform(items, searchText, fieldName) {
+        if (!items) {
+            return [];
         }
-    }
-    highlightInputText(textToHighlight) {
-        this.resetHighlight();
-        this.textToHighlight = textToHighlight;
-        const searchPattern = new RegExp(textToHighlight, 'gi');
-        const hostElement = this.element.nativeElement;
-        if (hostElement.innerHTML.match(searchPattern)) {
-            hostElement.innerHTML = hostElement.innerHTML
-                .replace(searchPattern, this.highlightPattern('$&'));
+        if (!searchText) {
+            return items;
         }
-        this.textToHighlight = undefined;
-    }
-    resetHighlight() {
-        const hostElement = this.element.nativeElement;
-        const searchPattern = new RegExp(this.highlightPattern('(.*?)'), 'gi');
-        while (hostElement.innerHTML.match(searchPattern)) {
-            const matchGroups = searchPattern.exec(hostElement.innerHTML);
-            if (matchGroups) {
-                hostElement.innerHTML = hostElement.innerHTML.replace(matchGroups[0], matchGroups[1]);
+        return items.filter(item => {
+            if (item) {
+                if (item[fieldName]) {
+                    return item[fieldName].toLowerCase().includes(searchText.toLowerCase());
+                }
+                else {
+                    return item.toLowerCase().includes(searchText.toLowerCase());
+                }
             }
-        }
+            return false;
+        });
     }
-    highlightPattern(dynamicText) {
-        return '<span class="mvTextHighlight">' + dynamicText + '</span>';
+}
+/** @nocollapse */ FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FilterPipe, name: "filter" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'filter'
+                }]
+        }] });
+
+class UnsnakePipe {
+    transform(items) {
+        return items.split('_').join(' ');
     }
 }
-/** @nocollapse */ TextHighlightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextHighlightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ TextHighlightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: { textToHighlight: "textToHighlight" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextHighlightDirective, decorators: [{
-            type: Directive,
+/** @nocollapse */ UnsnakePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UnsnakePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ UnsnakePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: UnsnakePipe, name: "unsnake" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UnsnakePipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: '[mvTextHighlight]'
+                    name: 'unsnake'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { textToHighlight: [{
-                type: Input
-            }] } });
+        }] });
 
-class TextareaAutoExpandDirective {
-    constructor(el) {
-        this.el = el;
+class CommentFilterComponent {
+    constructor(store, fb) {
+        this.store = store;
+        this.fb = fb;
+        this.isPreview = false;
     }
-    ngAfterContentChecked() {
-        this.adjustHeight();
+    ngOnInit() {
+        this.tagGroup = this.fb.group({
+            'tagFilters': this.fb.group({}),
+        });
+        this.filter$ = this.store.pipe(select(getTagFilters));
+        this.$subscriptions = this.tagGroup.valueChanges.pipe(auditTime(5)).subscribe(value => {
+            const tagFilters = value['tagFilters'];
+            this.store.dispatch(new AddFilterTags(tagFilters));
+        });
+        this.buildFrom();
+    }
+    buildFrom() {
+        const checkboxes = this.tagGroup.get('tagFilters');
+        this.allTags$ = this.store.pipe(select(getAllTagsArr)).pipe(tap(tags => {
+            this.tagGroup.reset();
+            tags.forEach((value) => {
+                checkboxes.addControl(value.key, new UntypedFormControl(false));
+            });
+        }));
+    }
+    onClearFilters() {
+        this.tagGroup.reset();
+        this.store.dispatch(new ClearFilterTags());
     }
-    onMouseDown() {
-        this.adjustHeight();
+    ngOnDestroy() {
+        this.$subscriptions.unsubscribe();
     }
-    adjustHeight() {
-        const nativeElement = this.el.nativeElement;
-        nativeElement.style.overflow = 'hidden';
-        nativeElement.style.height = 'auto';
-        nativeElement.style.height = nativeElement.scrollHeight - 5 + 'px';
+    onRemoveFilter(tagName) {
+        const checkboxes = this.tagGroup.get('tagFilters');
+        checkboxes.controls[tagName].setValue(false);
+    }
+    onToggleFilterView() {
+        this.isPreview = !this.isPreview;
     }
 }
-/** @nocollapse */ TextareaAutoExpandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextareaAutoExpandDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ TextareaAutoExpandDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]", host: { listeners: { "input": "onMouseDown()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TextareaAutoExpandDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mvTextAreaAutoExpand]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onMouseDown: [{
-                type: HostListener,
-                args: ['input']
-            }] } });
+/** @nocollapse */ CommentFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentFilterComponent, deps: [{ token: i1.Store }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CommentFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentFilterComponent, selector: "mv-comment-filter", ngImport: i0, template: "<div class=\"comment-filter\">\n  <div class=\"hmcts-filter__content\">\n    <div class=\"hmcts-filter__toggle-filters\">\n      <p class=\"hmcts-filter__toggle-filters-link\"\n         [ngClass]=\"{'govuk-accordion__section--expanded': isPreview}\"\n         (click)=\"onToggleFilterView()\"><strong >Filter options</strong><span class=\"govuk-accordion__icon\"></span></p>\n    </div>\n\n    <ng-container *ngIf=\"(filter$ | async) as filters\">\n    <div class=\"hmcts-filter__selected-heading\" *ngIf=\"filters.length\">\n      <div class=\"hmcts-filter__heading-action\">\n        <p><a (click)=\"onClearFilters()\"\n              class=\"govuk-link govuk-link--no-visited-state\"\n              [routerLink]=\"[]\">Clear filters</a></p>\n      </div>\n    </div>\n\n    <h4 class=\"govuk-heading-s govuk-!-margin-bottom-0\" *ngIf=\"filters.length\">Tag filters</h4>\n\n    <ul class=\"hmcts-filter-tags\" *ngIf=\"filters.length\">\n      <li *ngFor=\"let tagName of filters\">\n        <a class=\"hmcts-filter__tag\" [routerLink]=\"[]\" (click)=\"onRemoveFilter(tagName)\">\n          <span class=\"govuk-visually-hidden\">Remove this filter</span>{{tagName | unsnake}}</a>\n      </li>\n    </ul>\n    </ng-container >\n\n    <div class=\"hmcts-filter__options\" [ngClass]=\"{'isVisible': isPreview}\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-label--s\" for=\"keywords\">\n          Search Tags\n        </label>\n        <input class=\"govuk-input\" id=\"keywords\" name=\"keywords\" type=\"text\" [(ngModel)]=\"searchValue\">\n      </div>\n\n      <div class=\"govuk-form-group\">\n        <div [formGroup]=\"tagGroup\">\n          <fieldset class=\"govuk-fieldset\" formGroupName=\"tagFilters\">\n            <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n              Tags\n            </legend>\n            <div class=\"govuk-checkboxes--scroll\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                <div class=\"govuk-checkboxes__item\" *ngFor=\"let item of (allTags$ | async) | filter: searchValue: 'key'\">\n                  <input [formControlName]=\"item.key\" [id]=\"item.key\" class=\"govuk-checkboxes__input\" [value]=\"false\"\n                         [attr.aria-describedby]=\"item.key\" type=\"checkbox\">\n                  <label class=\"govuk-label govuk-checkboxes__label\" [for]=\"item.key\">\n                    {{ item.key | unsnake}} ({{item.length}})\n                  </label>\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: UnsnakePipe, name: "unsnake" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mv-comment-filter', encapsulation: ViewEncapsulation.None, template: "<div class=\"comment-filter\">\n  <div class=\"hmcts-filter__content\">\n    <div class=\"hmcts-filter__toggle-filters\">\n      <p class=\"hmcts-filter__toggle-filters-link\"\n         [ngClass]=\"{'govuk-accordion__section--expanded': isPreview}\"\n         (click)=\"onToggleFilterView()\"><strong >Filter options</strong><span class=\"govuk-accordion__icon\"></span></p>\n    </div>\n\n    <ng-container *ngIf=\"(filter$ | async) as filters\">\n    <div class=\"hmcts-filter__selected-heading\" *ngIf=\"filters.length\">\n      <div class=\"hmcts-filter__heading-action\">\n        <p><a (click)=\"onClearFilters()\"\n              class=\"govuk-link govuk-link--no-visited-state\"\n              [routerLink]=\"[]\">Clear filters</a></p>\n      </div>\n    </div>\n\n    <h4 class=\"govuk-heading-s govuk-!-margin-bottom-0\" *ngIf=\"filters.length\">Tag filters</h4>\n\n    <ul class=\"hmcts-filter-tags\" *ngIf=\"filters.length\">\n      <li *ngFor=\"let tagName of filters\">\n        <a class=\"hmcts-filter__tag\" [routerLink]=\"[]\" (click)=\"onRemoveFilter(tagName)\">\n          <span class=\"govuk-visually-hidden\">Remove this filter</span>{{tagName | unsnake}}</a>\n      </li>\n    </ul>\n    </ng-container >\n\n    <div class=\"hmcts-filter__options\" [ngClass]=\"{'isVisible': isPreview}\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-label--s\" for=\"keywords\">\n          Search Tags\n        </label>\n        <input class=\"govuk-input\" id=\"keywords\" name=\"keywords\" type=\"text\" [(ngModel)]=\"searchValue\">\n      </div>\n\n      <div class=\"govuk-form-group\">\n        <div [formGroup]=\"tagGroup\">\n          <fieldset class=\"govuk-fieldset\" formGroupName=\"tagFilters\">\n            <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n              Tags\n            </legend>\n            <div class=\"govuk-checkboxes--scroll\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                <div class=\"govuk-checkboxes__item\" *ngFor=\"let item of (allTags$ | async) | filter: searchValue: 'key'\">\n                  <input [formControlName]=\"item.key\" [id]=\"item.key\" class=\"govuk-checkboxes__input\" [value]=\"false\"\n                         [attr.aria-describedby]=\"item.key\" type=\"checkbox\">\n                  <label class=\"govuk-label govuk-checkboxes__label\" [for]=\"item.key\">\n                    {{ item.key | unsnake}} ({{item.length}})\n                  </label>\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.UntypedFormBuilder }]; } });
 
-class TagsComponent {
-    constructor(tagsServices) {
-        this.tagsServices = tagsServices;
-        this.validators = [this.minLength, this.maxLength20];
-        this.errorMessages = {
-            'minLength': 'Minimum of 2 characters',
-            'maxLength20': 'Maximum of 20 characters'
-        };
-        this.requestAutocompleteItems = (text) => {
-            return this.tagsServices.getAllTags(this.userId);
-        };
+class CommentSetHeaderComponent {
+    constructor(store, commentService, toolbarEvents) {
+        this.store = store;
+        this.commentService = commentService;
+        this.toolbarEvents = toolbarEvents;
+        this.showCommentSummaryDialog = new EventEmitter();
+        this.tabs = [];
+        this.tabSelected = '';
     }
-    onUpdateTags(value) {
-        this.tagsServices.updateTagItems(value, this.annoId);
+    ngOnInit() {
+        const tagFilter$ = this.store.pipe(select(getTagFilters));
+        const filteredAnnotation$ = this.store.pipe(select(getFilteredAnnotations));
+        this.$subscriptions = combineLatest([tagFilter$, filteredAnnotation$]).subscribe(([formData, filteredAnno]) => {
+            this.navigationList = filteredAnno;
+            this.tabs = this.navigationList.length > 0 ?
+                [{ label: 'comments' }, { label: 'filter' }, { label: 'search' }] : [{ label: 'comments' }];
+            this.isFiltered = !formData.length;
+            this.tabs = [...this.tabs].map((tab) => {
+                return !this.isFiltered && tab.label === 'filter' ? { ...tab, isFiltered: true } : { ...tab, isFiltered: false };
+            });
+        });
     }
-    minLength(control) {
-        if (control.value.length < 2) {
-            return {
-                'minLength': true
-            };
-        }
-        return null;
+    toggleCommentsSummary() {
+        this.showCommentSummaryDialog.emit();
     }
-    maxLength20(control) {
-        if (control.value.length >= 20) {
-            return {
-                'maxLength20': true
-            };
+    selectTab(tab) {
+        this.tabSelected = tab !== this.tabSelected ? tab : undefined;
+        if (this.tabSelected) {
+            this.marginToComment = true;
+            this.commentService.createMarginToCommentEvent(this.marginToComment);
         }
-        return null;
+        else {
+            this.marginToComment = false;
+            this.commentService.createMarginToCommentEvent(this.marginToComment);
+        }
+    }
+    toggleCommentsPanel() {
+        this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
+    }
+    ngOnDestroy() {
+        this.$subscriptions.unsubscribe();
     }
 }
-/** @nocollapse */ TagsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsComponent, deps: [{ token: TagsServices }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ TagsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: TagsComponent, selector: "mv-tags", inputs: { tagItems: "tagItems", userId: "userId", editable: "editable", annoId: "annoId" }, ngImport: i0, template: "<div class=\"tags\">\n  <tag-input\n    *ngIf=\"editable\" class=\"tags__edit\"\n    [maxItems]=\"10\"\n    [(ngModel)]=\"tagItems\"\n    (ngModelChange)=\"onUpdateTags($event)\"\n    [ngModelOptions]=\"{standalone:true}\"\n    [placeholder]=\"'Add tag'\"\n    [displayBy]=\"'label'\"\n    [identifyBy]=\"'name'\"\n    [onTextChangeDebounce]=\"250\"\n    [secondaryPlaceholder]=\"'Search or add tags'\"\n    [validators]=\"validators\"\n    [errorMessages]=\"errorMessages\"\n    [onlyFromAutocomplete]=\"false\">\n    <tag-input-dropdown\n      [autocompleteObservable]=\"requestAutocompleteItems\"\n      [displayBy]=\"'label'\"\n      [identifyBy]=\"'name'\"\n      [zIndex]=\"10000\"\n      [minimumTextLength]=\"2\">\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.label }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n\n  <div class=\"tags__renderer\" *ngIf=\"!editable && (tagItems && tagItems.length)\">\n    <span *ngFor=\"let tag of tagItems\" class=\"tags__item hmcts-badge\">\n      {{tag.label}}\n    </span>\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.TagInputComponent, selector: "tag-input", inputs: ["separatorKeys", "separatorKeyCodes", "placeholder", "secondaryPlaceholder", "maxItems", "validators", "asyncValidators", "onlyFromAutocomplete", "errorMessages", "theme", "onTextChangeDebounce", "inputId", "inputClass", "clearOnBlur", "hideForm", "addOnBlur", "addOnPaste", "pasteSplitPattern", "blinkIfDupe", "removable", "editable", "allowDupes", "modelAsStrings", "trimTags", "ripple", "tabindex", "disable", "dragZone", "onRemoving", "onAdding", "animationDuration", "inputText"], outputs: ["onAdd", "onRemove", "onSelect", "onFocus", "onBlur", "onTextChange", "onPaste", "onValidationError", "onTagEdited", "inputTextChange"] }, { kind: "component", type: i4$1.TagInputDropdown, selector: "tag-input-dropdown", inputs: ["offset", "focusFirstElement", "showDropdownIfEmpty", "minimumTextLength", "limitItemsTo", "displayBy", "identifyBy", "matchingFn", "appendToBody", "keepOpen", "dynamicUpdate", "zIndex", "autocompleteItems", "autocompleteObservable"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: TagsComponent, decorators: [{
+/** @nocollapse */ CommentSetHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetHeaderComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CommentSetHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: { showCommentSummary: "showCommentSummary" }, outputs: { showCommentSummaryDialog: "showCommentSummaryDialog" }, ngImport: i0, 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; let i = index\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a id=\"commentSubPane{{ i }}\" (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", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CommentSearchComponent, selector: "mv-comment-search", inputs: ["annotations"] }, { kind: "component", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: ["annotationList", "autoSelect"] }, { kind: "component", type: CommentFilterComponent, selector: "mv-comment-filter" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-tags', encapsulation: ViewEncapsulation.None, template: "<div class=\"tags\">\n  <tag-input\n    *ngIf=\"editable\" class=\"tags__edit\"\n    [maxItems]=\"10\"\n    [(ngModel)]=\"tagItems\"\n    (ngModelChange)=\"onUpdateTags($event)\"\n    [ngModelOptions]=\"{standalone:true}\"\n    [placeholder]=\"'Add tag'\"\n    [displayBy]=\"'label'\"\n    [identifyBy]=\"'name'\"\n    [onTextChangeDebounce]=\"250\"\n    [secondaryPlaceholder]=\"'Search or add tags'\"\n    [validators]=\"validators\"\n    [errorMessages]=\"errorMessages\"\n    [onlyFromAutocomplete]=\"false\">\n    <tag-input-dropdown\n      [autocompleteObservable]=\"requestAutocompleteItems\"\n      [displayBy]=\"'label'\"\n      [identifyBy]=\"'name'\"\n      [zIndex]=\"10000\"\n      [minimumTextLength]=\"2\">\n      <ng-template let-item=\"item\" let-index=\"index\">\n        {{ item.label }}\n      </ng-template>\n    </tag-input-dropdown>\n  </tag-input>\n\n  <div class=\"tags__renderer\" *ngIf=\"!editable && (tagItems && tagItems.length)\">\n    <span *ngFor=\"let tag of tagItems\" class=\"tags__item hmcts-badge\">\n      {{tag.label}}\n    </span>\n  </div>\n</div>\n\n" }]
-        }], ctorParameters: function () { return [{ type: TagsServices }]; }, propDecorators: { tagItems: [{
-                type: Input
-            }], userId: [{
-                type: Input
-            }], editable: [{
-                type: Input
-            }], annoId: [{
+            args: [{ selector: 'mv-comment-set-header', encapsulation: ViewEncapsulation.None, 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; let i = index\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a id=\"commentSubPane{{ i }}\" (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" }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CommentService }, { type: ToolbarEventService }]; }, propDecorators: { showCommentSummary: [{
                 type: Input
+            }], showCommentSummaryDialog: [{
+                type: Output
             }] } });
 
+const getBookmarkState = createSelector(getMVState, (state) => state.bookmarks);
+const getBookmarkPages = createSelector(getBookmarkState, getBookmarkPageEnt);
+const getBookmarkEntities = createSelector(getBookmarkState, getBookmarkEnts);
+const getBookmarkNodes = createSelector(getBookmarkEntities, (entities) => generateBookmarkNodes(entities));
+const getEditableBookmark = createSelector(getBookmarkState, getEditBookmark);
+const getBookmarkInfo = createSelector(getBookmarkNodes, getDocumentId, getPdfPosition, getPages, (bookmarkNodes, docId, pdfPosition, pages) => {
+    return {
+        pageNumber: pdfPosition.pageNumber - 1,
+        xCoordinate: pdfPosition.left,
+        yCoordinate: ((pages[pdfPosition.pageNumber].styles.height)
+            - (pdfPosition.top * (pages[pdfPosition.pageNumber].viewportScale)))
+            / parseFloat(pages[pdfPosition.pageNumber].scaleRotation.scale),
+        previous: bookmarkNodes.length > 0 ? bookmarkNodes.sort((a, b) => a.index - b.index)[bookmarkNodes.length - 1].id : undefined,
+        documentId: docId
+    };
+});
+const getBookmarksPerPage = createSelector(getPages, getBookmarkPages, (pages, pageEnt) => {
+    if (pages && pageEnt) {
+        const arr = [];
+        Object.keys(pages).forEach(key => {
+            const pageIdx = Number(key) - 1; // -1 as the thisPages array is 0 indexed
+            const thisPage = pageEnt[pageIdx];
+            arr.push({
+                bookmark: thisPage ? thisPage : [],
+                styles: pages[key].styles
+            });
+        });
+        return arr;
+    }
+});
+
 /**
- * A moment timezone pipe to support parsing based on time zone abbreviations
- * covers all cases of offset variation due to daylight saving.
- *
- * Same API as DatePipe with additional timezone abbreviation support
- * Official date pipe dropped support for abbreviations names from Angular V5
- */
-class MomentDatePipe extends DatePipe {
-    transform(value, format = 'mediumDate', timezone = 'Europe/London') {
-        const timezoneOffset = moment(value).tz(timezone).format('Z');
-        return super.transform(value, format, timezoneOffset);
+ * Number Helper Service
+ * */
+class NumberHelperService {
+    constructor() { }
+    isNumber(value) {
+        return (value !== null
+            && value !== undefined
+            && value !== ''
+            && !isNaN(Number(value.toString())));
     }
 }
-/** @nocollapse */ MomentDatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MomentDatePipe, deps: null, target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ MomentDatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: MomentDatePipe, name: "momentDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MomentDatePipe, decorators: [{
-            type: Pipe,
+/** @nocollapse */ NumberHelperService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumberHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ NumberHelperService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumberHelperService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: NumberHelperService, decorators: [{
+            type: Injectable,
             args: [{
-                    name: 'momentDate'
+                    providedIn: 'root'
                 }]
-        }] });
+        }], ctorParameters: function () { return []; } });
 
-class CommentComponent {
-    constructor(store, commentService, tagsServices) {
-        this.store = store;
-        this.commentService = commentService;
-        this.tagsServices = tagsServices;
-        this.CHAR_LIMIT = 5000;
-        this.totalPrevPagesHeight = 0;
-        this.hasUnsavedChanges = false;
-        this.commentClick = new EventEmitter();
-        this.renderComments = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.updated = new EventEmitter();
-        this.changes = new EventEmitter();
-        this.rotate = 0;
-        this.zoom = 1;
+class SearchBarComponent {
+    constructor(toolbarButtons, toolbarEvents) {
+        this.toolbarButtons = toolbarButtons;
+        this.toolbarEvents = toolbarEvents;
+        this.highlightAll = true;
+        this.matchCase = false;
+        this.wholeWord = false;
+        this.resultsText = '';
+        this.searchText = '';
+        this.resultCount = 0;
+        this.subscriptions = [];
+        this.advancedSearchVisible = false;
     }
     ngOnInit() {
-        this.subscriptions = this.store.select(getComponentSearchText)
-            .pipe(distinctUntilChanged()).subscribe(searchString => this.searchString = searchString);
-        this.reRenderComments();
-        this.marginToComment$ = this.commentService.marginToCommentEmitter.asObservable();
-    }
-    ngAfterContentInit() {
-        if (this.tagItems && this.tagItems.length) {
-            this.tagsServices.updateTagItems(this.tagItems, this._comment.annotationId);
-        }
+        this.subscriptions.push(this.toolbarEvents.searchResultsCountSubject.subscribe(results => this.setSearchResultsCount(results)));
     }
     ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-    }
-    set comment(comment) {
-        this._comment = { ...comment };
-        this.page = this._comment.page;
-        this.lastUpdate = comment.lastModifiedDate ? comment.lastModifiedDate : comment.createdDate;
-        this.author = comment.createdByDetails;
-        this.createdBy = comment.createdBy;
-        this.editor = comment.lastModifiedByDetails;
-        this.originalComment = comment.content;
-        this.fullComment = this.originalComment;
-        this.selected = this._comment.selected;
-        this._editable = this._comment.editable;
-        this.tagItems = this._comment.tags;
-        const pageMarginBottom = 10;
-        this.totalPrevPagesHeight = 0;
-        for (let i = 0; i < this.page - 1; i++) {
-            const height = this._comment.pages[i + 1] ? this._comment.pages[i + 1].styles.height : undefined;
-            if (height) {
-                this.totalPrevPagesHeight += height + pageMarginBottom;
-            }
+        for (const subscription of this.subscriptions) {
+            subscription.unsubscribe();
         }
     }
-    get comment() {
-        return this._comment;
-    }
-    set annotation(annotation) {
-        this._rectangle = annotation.rectangles
-            .reduce((prev, current) => prev.y < current.y ? prev : current);
-        const actualHeight = this._comment.pages[this.page].styles.height / this.zoom;
-        switch (this.rotate) {
-            case 90:
-                this.rectTop = this._rectangle.x;
-                break;
-            case 180:
-                this.rectTop = actualHeight - (this._rectangle.y + this._rectangle.height);
-                break;
-            case 270:
-                this.rectTop = actualHeight - (this._rectangle.x + this._rectangle.width);
-                break;
-            default: this.rectTop = this._rectangle.y;
+    onWindowKeyDown(e) {
+        if (e.code === 'F3' || (e.ctrlKey && e.code === 'KeyF')) {
+            e.preventDefault();
+            this.toolbarEvents.searchBarHidden.next(false);
+            setTimeout(() => this.findInput.nativeElement.focus(), 200);
         }
-        this.rectLeft = this._rectangle.x;
     }
-    get editable() {
-        return this._editable;
+    searchNext() {
+        this.toolbarEvents.search({
+            searchTerm: this.searchText,
+            highlightAll: this.highlightAll,
+            matchCase: this.matchCase,
+            wholeWord: this.wholeWord,
+            previous: false,
+            reset: false
+        });
     }
-    onCommentChange(updatedComment) {
-        this.hasUnsavedChanges =
-            this.originalComment.substring(0, this.CHAR_LIMIT) !== updatedComment.substring(0, this.CHAR_LIMIT);
-        this.commentService.onCommentChange(this.hasUnsavedChanges);
+    searchPrev() {
+        this.toolbarEvents.search({
+            searchTerm: this.searchText,
+            highlightAll: this.highlightAll,
+            matchCase: this.matchCase,
+            wholeWord: this.wholeWord,
+            previous: true,
+            reset: false
+        });
     }
-    deleteOrCancel() {
-        if (!this.editable) {
-            this.delete.emit(this._comment);
-        }
-        else {
-            this.hasUnsavedChanges = false;
-            this._editable = false;
-            this.fullComment = this.originalComment;
-            this.changes.emit(false);
-            if (!this.author && !this.fullComment) {
-                this.delete.emit(this._comment);
-            }
-        }
+    search() {
+        this.toolbarEvents.search({
+            searchTerm: this.searchText,
+            highlightAll: this.highlightAll,
+            matchCase: this.matchCase,
+            wholeWord: this.wholeWord,
+            previous: false,
+            reset: true
+        });
     }
-    editOrSave() {
-        if (!this.editable) {
-            this._editable = true;
-        }
-        else {
-            this._comment.content = this.fullComment.substring(0, this.CHAR_LIMIT);
-            const tags = this.tagsServices.getNewTags(this._comment.annotationId);
-            const payload = {
-                comment: this._comment,
-                tags
-            };
-            this.updated.emit(payload);
-            this.hasUnsavedChanges = false;
-            this._editable = false;
-            this.changes.emit(false);
+    setSearchResultsCount(results) {
+        this.resultCount = results.total;
+        this.resultsText = this.resultCount > 0
+            ? `Found ${results.current} of ${results.total}`
+            : 'No results found';
+        if (this.resultCount && this.resultCount > 0) {
+            setTimeout(() => {
+                this.findNext.nativeElement.focus();
+            }, 1000);
         }
     }
-    onCommentClick() {
-        if (!this.selected) {
-            this.selected = true;
-            this._editable = false;
-            this.commentClick.emit({ annotationId: this._comment.annotationId, editable: this._editable, selected: true });
-        }
+    onEscapeKeyPress(e) {
+        this.toolbarEvents.searchBarHidden.next(true);
     }
-    reRenderComments() {
-        this.renderComments.emit(this._comment);
+    onEnterKeyPress(e) {
+        this.search();
     }
-    get commentTop() {
-        return this.totalPrevPagesHeight + (this.rectTop * this.zoom);
+    toggleAdvancedSearch() {
+        this.advancedSearchVisible = !this.advancedSearchVisible;
     }
-    get height() {
-        return this.form.nativeElement.getBoundingClientRect().height / this.zoom;
+    toggleSearchBar() {
+        this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
     }
 }
-/** @nocollapse */ CommentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: TagsServices }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentComponent, selector: "mv-anno-comment", inputs: { rotate: "rotate", zoom: "zoom", index: "index", page: "page", comment: "comment", annotation: "annotation" }, outputs: { commentClick: "commentClick", renderComments: "renderComments", delete: "delete", updated: "updated", changes: "changes" }, viewQueries: [{ propertyName: "form", first: true, predicate: ["form"], descendants: true }, { propertyName: "editableComment", first: true, predicate: ["editableComment"], descendants: true }], ngImport: i0, template: "<div #form (click)=\"onCommentClick()\" class=\"aui-comment\"\n      [ngClass]=\"{'stylestoggle' : (marginToComment$ | async ) }\"\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", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: TextHighlightDirective, selector: "[mvTextHighlight]", inputs: ["textToHighlight"] }, { kind: "directive", type: TextareaAutoExpandDirective, selector: "[mvTextAreaAutoExpand]" }, { kind: "component", type: TagsComponent, selector: "mv-tags", inputs: ["tagItems", "userId", "editable", "annoId"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: MomentDatePipe, name: "momentDate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentComponent, decorators: [{
+/** @nocollapse */ SearchBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SearchBarComponent, deps: [{ token: ToolbarButtonVisibilityService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ SearchBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: SearchBarComponent, selector: "mv-search-bar", host: { listeners: { "window:keydown": "onWindowKeyDown($event)" } }, viewQueries: [{ propertyName: "findInput", first: true, predicate: ["findInput"], descendants: true, static: true }, { propertyName: "findNext", first: true, predicate: ["findNext"], descendants: true }], ngImport: i0, 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-5 govuk-!-margin-top-5\"\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()\" style=\" position: absolute; top: 40px; right: 10px; \">\n        Search\n      </button>\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>\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]=\"[]\" #findNext 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\" style=\" position: absolute; top: 95px; right: 15px; \">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\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 case)\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 whole words or sentences\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-anno-comment', template: "<div #form (click)=\"onCommentClick()\" class=\"aui-comment\"\n      [ngClass]=\"{'stylestoggle' : (marginToComment$ | async ) }\"\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" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CommentService }, { type: TagsServices }]; }, propDecorators: { commentClick: [{
-                type: Output
-            }], renderComments: [{
-                type: Output
-            }], delete: [{
-                type: Output
-            }], updated: [{
-                type: Output
-            }], changes: [{
-                type: Output
-            }], rotate: [{
-                type: Input
-            }], zoom: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], page: [{
-                type: Input
-            }], form: [{
+            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-5 govuk-!-margin-top-5\"\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()\" style=\" position: absolute; top: 40px; right: 10px; \">\n        Search\n      </button>\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>\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]=\"[]\" #findNext 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\" style=\" position: absolute; top: 95px; right: 15px; \">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\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 case)\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 whole words or sentences\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ToolbarButtonVisibilityService }, { type: ToolbarEventService }]; }, propDecorators: { findInput: [{
                 type: ViewChild,
-                args: ['form', { static: false }]
-            }], editableComment: [{
+                args: ['findInput', { static: true }]
+            }], findNext: [{
                 type: ViewChild,
-                args: ['editableComment', { static: false }]
-            }], comment: [{
-                type: Input
-            }], annotation: [{
-                type: Input
+                args: ['findNext', { static: false }]
+            }], onWindowKeyDown: [{
+                type: HostListener,
+                args: ['window:keydown', ['$event']]
             }] } });
 
-class CommentSetComponent {
-    constructor(store, commentService, renderService, toolbarEvents) {
-        this.store = store;
-        this.commentService = commentService;
-        this.renderService = renderService;
+class MainToolbarComponent {
+    constructor(toolbarEvents, toolbarButtons, cdr, numberHelper) {
         this.toolbarEvents = toolbarEvents;
-        this.pageHeights = [];
+        this.toolbarButtons = toolbarButtons;
+        this.cdr = cdr;
+        this.numberHelper = numberHelper;
+        this.enableAnnotations = false;
+        this.enableRedactions = false;
+        this.enableICP = false;
+        this.contentType = null;
         this.subscriptions = [];
-        this.clearSelection();
+        this.icpEnabled = false;
+        this.redactionEnabled = false;
+        this.pageNumber = 1;
+        this.pageCount = 0;
+        this.isDropdownMenuOpen = false;
+        this.dropdownMenuPositions = [
+            new ConnectionPositionPair({
+                originX: 'end',
+                originY: 'bottom'
+            }, {
+                overlayX: 'end',
+                overlayY: 'top'
+            }, 0, 3)
+        ];
+        this.zoomScales = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2.5, 3, 5];
+        this.allButtonsWidth = 0;
+        this.widthRequiredForBtn = {};
     }
     ngOnInit() {
-        this.comments$ = this.store.pipe(select(getCommentsArray));
-        this.annoEntities$ = this.store.pipe(select(getAnnotationEntities));
-        this.subscriptions.push(this.toolbarEvents.commentsPanelVisible.subscribe(toggle => {
-            this.redrawComments();
-            this.showCommentsPanel = toggle;
-        }));
-        this.subscriptions.push(this.toolbarEvents.rotateSubject.subscribe(rotate => this.rotateDocument()));
-    }
-    ngOnChanges(changes) {
-        if (changes.annotationSet) {
-            this.commentService.setCommentSet(this);
-        }
-        if (changes.contentScrollTop) {
-            if (this.container) {
-                this.container.nativeElement.scrollTo(0, this.contentScrollTop);
+        this.subscriptions.push(this.toolbarEvents.setCurrentPageSubject.subscribe(pageNumber => this.setCurrentPage(pageNumber)), this.toolbarEvents.setCurrentPageInputValueSubject.subscribe(pageNumber => this.pageNumber = pageNumber), this.toolbarEvents.getPageCount().subscribe(count => this.pageCount = count), this.toolbarEvents.icp.enabled.subscribe(enabled => {
+            this.icpEnabled = enabled;
+            if (this.icpEnabled) {
+                this.toolbarEvents.toggleCommentsPanel(!enabled);
+                this.toolbarEvents.sidebarOpen.next(false);
             }
-        }
+        }), this.toolbarEvents.redactionMode.subscribe(enabled => {
+            this.redactionEnabled = enabled;
+        }), this.toolbarEvents.redactAllInProgressSubject.subscribe(disable => {
+            this.redactAllInProgress = disable;
+        }));
     }
     ngOnDestroy() {
-        if (this.subscriptions.length > 0) {
-            this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        for (const subscription of this.subscriptions) {
+            subscription.unsubscribe();
         }
     }
-    onSelect(annotationId) {
-        this.store.dispatch(new SelectedAnnotation(annotationId));
+    ngAfterViewInit() {
+        Array.from(this.mvToolbarMain.nativeElement.children).forEach(button => {
+            this.allButtonsWidth += button.getBoundingClientRect().width;
+            this.widthRequiredForBtn[button.id] = this.allButtonsWidth;
+        });
+        this.cdr.detectChanges();
     }
-    onCommentDelete(comment) {
-        const annotation = this.annotationSet.annotations.find(anno => anno.id === comment.annotationId);
-        const comments = [];
-        const annot = {
-            ...annotation,
-            comments
-        };
-        this.onAnnotationUpdate(annot);
-        this.redrawComments();
+    onResize() {
+        this.cdr.detectChanges();
     }
-    redrawComments() {
-        setTimeout(() => {
-            const componentList = this.commentComponents.map(comment => comment);
-            this.renderService.redrawComponents(componentList, this.pageHeights, this.rotate, this.zoom);
-        }, 0);
+    onControlPrint(event) {
+        event.preventDefault();
+        this.printFile();
     }
-    rotateDocument() {
-        if (this.panel) {
-            this.panel.nativeElement.style.height = '0';
-        }
+    onClickHighlightToggle() {
+        this.toolbarEvents.toggleHighlightMode();
     }
-    onCommentUpdate(payload) {
-        const annotation = this.annotationSet.annotations.find(anno => anno.id === payload.comment.annotationId);
-        const comments = [payload.comment];
-        const tags = payload.tags;
-        const annot = {
-            ...annotation,
-            comments,
-            tags
-        };
-        this.onAnnotationUpdate(annot);
+    onClickDrawToggle() {
+        this.toolbarEvents.toggleDrawMode();
     }
-    onAnnotationUpdate(annotation) {
-        this.store.dispatch(new SaveAnnotation(annotation));
+    toggleIndexSideBar() {
+        const sidebarOpen = this.toolbarEvents.sidebarOpen.getValue();
+        const sidebarView = this.toolbarEvents.sidebarOutlineView.getValue();
+        if (!(sidebarOpen && !sidebarView)) {
+            this.toolbarEvents.toggleSideBar(!sidebarOpen);
+        }
+        this.toolbarEvents.toggleSideBarView(true);
     }
-    onContainerClick(e) {
-        if (e.path && e.path[0] === this.panel.nativeElement) {
-            this.clearSelection();
+    toggleBookmarksSideBar() {
+        const sidebarOpen = this.toolbarEvents.sidebarOpen.getValue();
+        const sidebarView = this.toolbarEvents.sidebarOutlineView.getValue();
+        if (!(sidebarOpen && sidebarView)) {
+            this.toolbarEvents.toggleSideBar(!sidebarOpen);
         }
+        this.toolbarEvents.toggleSideBarView(false);
     }
-    clearSelection() {
-        this.store.dispatch(new SelectedAnnotation({ annotationId: '', editable: false, selected: false }));
+    togglePresentBar() {
+        this.toolbarEvents.searchBarHidden.next(true);
+        this.toolbarEvents.icp.enable();
     }
-    allCommentsSaved() {
-        this.commentService.allCommentsSaved();
+    increasePageNumber() {
+        this.toolbarEvents.incrementPage(1);
     }
-}
-/** @nocollapse */ CommentSetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: CommentSetRenderService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentSetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentSetComponent, selector: "mv-comment-set", inputs: { annotationSet: "annotationSet", zoom: "zoom", rotate: "rotate", height: "height", pageHeights: "pageHeights", contentScrollTop: "contentScrollTop" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "commentComponents", predicate: ["commentComponent"], descendants: true }], usesOnChanges: true, ngImport: i0, 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", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CommentComponent, selector: "mv-anno-comment", inputs: ["rotate", "zoom", "index", "page", "comment", "annotation"], outputs: ["commentClick", "renderComments", "delete", "updated", "changes"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mv-comment-set', 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" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CommentService }, { type: CommentSetRenderService }, { type: ToolbarEventService }]; }, propDecorators: { annotationSet: [{
-                type: Input
-            }], zoom: [{
-                type: Input
-            }], rotate: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], pageHeights: [{
-                type: Input
-            }], contentScrollTop: [{
-                type: Input
-            }], container: [{
-                type: ViewChild,
-                args: ['container', { static: false }]
-            }], panel: [{
-                type: ViewChild,
-                args: ['panel', { static: false }]
-            }], commentComponents: [{
-                type: ViewChildren,
-                args: ['commentComponent']
-            }] } });
-
-class CommentsNavigateComponent {
-    constructor(store, toolbarEvents) {
-        this.store = store;
-        this.toolbarEvents = toolbarEvents;
-        this.autoSelect = false;
-        this.navigationList = [];
-        this.index = 0;
+    decreasePageNumber() {
+        this.toolbarEvents.incrementPage(-1);
     }
-    ngOnChanges(changes) {
-        if (changes.annotationList) {
-            this.initNavigationList();
+    onPageNumberInputChange(pageNumber) {
+        if (Number(pageNumber) < 1) {
+            pageNumber = '1';
         }
-    }
-    initNavigationList() {
-        this.index = 0;
-        this.navigationList = [...this.annotationList || []]
-            .map(annotation => ({
-            content: annotation.comments[0].content,
-            annotationId: annotation.id,
-            page: annotation.page,
-            rectangle: this.upperRectangle(annotation.rectangles),
-        }))
-            .sort(this.sortComments);
-        if (this.autoSelect) {
-            this.toolbarEvents.setPage(Number.parseInt(this.navigationList[0].page, 0));
-            this.store.dispatch(new SelectedAnnotation({
-                annotationId: this.navigationList[0].annotationId,
-                editable: false,
-                selected: true
-            }));
+        if (Number(pageNumber) > this.pageCount) {
+            pageNumber = this.pageCount.toString();
         }
+        this.toolbarEvents.setPage(Number.parseInt(pageNumber, 10));
     }
-    sortComments(mappedCommentA, mappedCommentB) {
-        if (mappedCommentA.page !== mappedCommentB.page) {
-            return mappedCommentA.page - mappedCommentB.page;
-        }
-        else {
-            const rectA = mappedCommentA.rectangle;
-            const rectB = mappedCommentB.rectangle;
-            if (rectA.y !== rectB.y) {
-                return rectA.y - rectB.y;
-            }
-            else {
-                return rectA.x - rectB.x;
-            }
-        }
+    setCurrentPage(pageNumber) {
+        this.pageNumber = pageNumber;
     }
-    nextItem() {
-        this.index += 1;
-        if (this.index === this.annotationList.length) {
-            this.index = 0;
-        }
-        this.toolbarEvents.setPage(Number.parseInt(this.navigationList[this.index].page, 0));
-        this.store.dispatch(new SelectedAnnotation({
-            annotationId: this.navigationList[this.index].annotationId, editable: false, selected: true
-        }));
+    rotate(rotation) {
+        this.toolbarEvents.rotate(rotation);
     }
-    prevItem() {
-        this.index -= 1;
-        if (this.index < 0) {
-            this.index = this.navigationList.length - 1;
-        }
-        this.toolbarEvents.setPage(Number.parseInt(this.navigationList[this.index].page, 0));
-        this.store.dispatch(new SelectedAnnotation({
-            annotationId: this.navigationList[this.index].annotationId,
-            editable: false,
-            selected: true
-        }));
+    printFile() {
+        this.toolbarEvents.print();
     }
-    upperRectangle(rectangles) {
-        [...rectangles].sort((rect1, rect2) => rect1.y - rect2.y);
-        return { x: rectangles[0].x, y: rectangles[0].y };
+    downloadFile() {
+        this.toolbarEvents.download();
     }
-}
-/** @nocollapse */ CommentsNavigateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentsNavigateComponent, deps: [{ token: i1.Store }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentsNavigateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: { annotationList: "annotationList", autoSelect: "autoSelect" }, usesOnChanges: true, ngImport: i0, template: "<p class=\"comment-search\">\n  <span class=\"comment-search__item\">\n    Showing {{ index + 1 }} of {{ navigationList.length }}\n  </span>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Previous comment\"\n     (click)=\"prevItem()\">Prev</a>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Next comment'\"\n     (click)=\"nextItem()\">Next</a>\n</p>\n", dependencies: [{ kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentsNavigateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mv-comments-navigate', encapsulation: ViewEncapsulation.None, template: "<p class=\"comment-search\">\n  <span class=\"comment-search__item\">\n    Showing {{ index + 1 }} of {{ navigationList.length }}\n  </span>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Previous comment\"\n     (click)=\"prevItem()\">Prev</a>\n  <a [routerLink]=\"[]\"\n     class=\"comment-search__item\"\n     title=\"Next comment'\"\n     (click)=\"nextItem()\">Next</a>\n</p>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: ToolbarEventService }]; }, propDecorators: { annotationList: [{
-                type: Input
-            }], autoSelect: [{
-                type: Input
-            }] } });
-
-class CommentSearchComponent {
-    constructor(store) {
-        this.store = store;
-        this.searchResults = [];
-        this.searchIndex = 0;
+    zoom(zoomFactor) {
+        this.toolbarEvents.zoom(+zoomFactor);
     }
-    ngAfterViewInit() {
-        if (this.searchInput) {
-            this.searchInput.nativeElement.focus();
-        }
+    stepZoom(zoomFactor) {
+        this.toolbarEvents.stepZoom(zoomFactor);
+        this.zoomSelect.nativeElement.selected = 'selected';
     }
-    ngOnDestroy() {
-        // TODO workaround for tab error
-        setTimeout(() => { this.store.dispatch(new SearchComment('')); }, 250);
+    toggleCommentsPanel() {
+        this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
     }
-    searchComments(searchText) {
-        this.clearSearch();
-        if (searchText.length > 2) {
-            this.searchString = searchText;
-            this.searchResults = this.annotations
-                .filter(annotation => annotation.comments.length > 0)
-                .filter(annotation => annotation.comments[0].content.toLowerCase().includes(this.searchString.toLowerCase()));
-            if (this.searchResults.length > 0) {
-                this.store.dispatch(new SearchComment(searchText));
-            }
-        }
+    toggleRedactBar() {
+        this.toolbarEvents.toggleRedactionMode();
     }
-    clearSearch() {
-        this.searchString = undefined;
-        this.searchResults = [];
-        this.searchIndex = 0;
-        this.store.dispatch(new SearchComment(''));
+    toggleGrabNDrag() {
+        this.toolbarEvents.toggleGrabNDrag();
+    }
+    isPdf() {
+        return this.contentType === 'pdf';
+    }
+    toggleSearchBar() {
+        this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
+    }
+    toggleMoreOptions() {
+        this.isDropdownMenuOpen = !this.isDropdownMenuOpen;
+        setTimeout(() => {
+            if (this.mvMenuItems) {
+                this.mvMenuItems.nativeElement.focus();
+            }
+        }, 100);
     }
 }
-/** @nocollapse */ CommentSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSearchComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentSearchComponent, selector: "mv-comment-search", inputs: { annotations: "annotations" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "<input #searchInput type=\"text\"\n       class=\"govuk-input comment-search__item\"\n       id=\"search-comments-input\" name=\"searchString\"\n       aria-label=\"search comments input\" [ngModel]=\"searchString\">\n<button type=\"button\"\n        [class.govuk-button--disabled]=\"searchInput?.value.length <= 2\"\n        class=\"govuk-button comment-search__item\"\n        (click)=\"searchComments(searchInput.value.trim())\">Search</button>\n<ng-container *ngIf=\"searchResults.length > 0\">\n  <mv-comments-navigate [annotationList]=\"searchResults\"></mv-comments-navigate>\n</ng-container>\n<ng-container *ngIf=\"searchString && searchResults?.length === 0\">\n  <p class=\"comment-search__item\">\n    No matches have been found\n  </p>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: ["annotationList", "autoSelect"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSearchComponent, decorators: [{
+/** @nocollapse */ MainToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MainToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i0.ChangeDetectorRef }, { token: NumberHelperService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MainToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MainToolbarComponent, selector: "mv-main-toolbar", inputs: { enableAnnotations: "enableAnnotations", enableRedactions: "enableRedactions", enableICP: "enableICP", contentType: "contentType" }, host: { listeners: { "window:resize": "onResize()", "document:keydown.control.p": "onControlPrint($event)", "document:keydown.meta.p": "onControlPrint($event)" } }, viewQueries: [{ propertyName: "zoomSelect", first: true, predicate: ["zoomSelect"], descendants: true }, { propertyName: "mvToolbarMain", first: true, predicate: ["mvToolbarMain"], descendants: true }, { propertyName: "mvMenuItems", first: true, predicate: ["dropdownMenu"], descendants: true }], ngImport: i0, 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\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\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\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\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          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Index</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Bookmarks</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDrawButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDrawBtn\"\n            #mvDrawBtn\n            class=\"mv-button mv-toolbar__menu-button--draw\"\n            title=\"Draw a box\"\n            tabindex=\"-1\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n            aria-hidden=\"true\"\n            aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\"\n            (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">Draw a box</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            tabindex=\"0\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\"\n            aria-hidden=\"true\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">Highlight</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>Page</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span></span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span></span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>Rotate</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">Present</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Redact</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>Grab and drag</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\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\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i6.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SearchBarComponent, selector: "mv-search-bar" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MainToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-comment-search', encapsulation: ViewEncapsulation.None, template: "<input #searchInput type=\"text\"\n       class=\"govuk-input comment-search__item\"\n       id=\"search-comments-input\" name=\"searchString\"\n       aria-label=\"search comments input\" [ngModel]=\"searchString\">\n<button type=\"button\"\n        [class.govuk-button--disabled]=\"searchInput?.value.length <= 2\"\n        class=\"govuk-button comment-search__item\"\n        (click)=\"searchComments(searchInput.value.trim())\">Search</button>\n<ng-container *ngIf=\"searchResults.length > 0\">\n  <mv-comments-navigate [annotationList]=\"searchResults\"></mv-comments-navigate>\n</ng-container>\n<ng-container *ngIf=\"searchString && searchResults?.length === 0\">\n  <p class=\"comment-search__item\">\n    No matches have been found\n  </p>\n</ng-container>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { annotations: [{
+            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\n            id=\"mvMoreOptionsBtn\"\n            class=\"mv-button mv-toolbar__menu-button--more-options\"\n            [class.mv-toolbar__menu-button--more-options__hidden]=\"\n              mvToolbar.offsetWidth >= allButtonsWidth\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleMoreOptions()\"\n            cdkOverlayOrigin\n            #trigger=\"cdkOverlayOrigin\"\n            [disabled]=\"redactAllInProgress\"\n          >\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\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\"\n            [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\"\n          >\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          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvIndexBtn\"\n            title=\"Index\"\n            data-l10n-id=\"index\"\n            #mvIndexBtn\n            class=\"mv-button mv-toolbar__menu-button--index\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\n            \"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleIndexSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Index</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showSidebar\"\n            id=\"mvBookmarksBtn\"\n            title=\"Bookmarks\"\n            data-l10n-id=\"bookmarks\"\n            #mvBookmarksBtn\n            [ngClass]=\"{\n              'mv-button mv-toolbar__menu-button--bookmarks': true,\n              'button-hidden-on-toolbar':\n                mvToolbarMain.offsetWidth <\n                widthRequiredForBtn['mvBookmarksBtn'],\n              'button-hidden-on-dropdown':\n                mvToolbarMain.offsetWidth >=\n                widthRequiredForBtn['mvBookmarksBtn']\n            }\"\n            aria-pressed=\"false\"\n            [disabled]=\"redactAllInProgress\"\n            (click)=\"toggleBookmarksSideBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Bookmarks</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDrawButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDrawBtn\"\n            #mvDrawBtn\n            class=\"mv-button mv-toolbar__menu-button--draw\"\n            title=\"Draw a box\"\n            tabindex=\"-1\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\"\n            aria-hidden=\"true\"\n            aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\"\n            (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"draw_label\">Draw a box</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showHighlightButton\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\"\n            #mvHighlightBtn\n            class=\"mv-button mv-toolbar__menu-button--highlight\"\n            title=\"Highlight\"\n            tabindex=\"0\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\n            \"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\"\n            aria-hidden=\"true\"\n            aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\"\n            data-l10n-id=\"toggleHighlightButton\"\n          >\n            <span data-l10n-id=\"highlight_label\">Highlight</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div\n              id=\"mvPageBtn\"\n              #mvPageBtn\n              class=\"mv-toolbar__menu-button--page\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\n              \"\n            >\n              <span>Page</span>\n\n              <button\n                id=\"mvUpBtn\"\n                [disabled]=\"pageNumber === 1 || redactAllInProgress\"\n                title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\"\n                data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <span></span>\n              </button>\n              <button\n                id=\"mvDownBtn\"\n                [disabled]=\"pageNumber === pageCount || redactAllInProgress\"\n                title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\"\n                data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"\n              >\n                <span></span>\n              </button>\n\n              <input\n                type=\"number\"\n                id=\"pageNumber\"\n                class=\"hmcts-toolbar-input govuk-input--width-2\"\n                title=\"Page Number\"\n                value=\"1\"\n                size=\"4\"\n                min=\"1\"\n                [value]=\"pageNumber\"\n                aria-label=\"page number\"\n                tabindex=\"0\"\n                data-l10n-id=\"page\"\n                (change)=\"onPageNumberInputChange(pageNumberInput.value)\"\n                [disabled]=\"redactAllInProgress\"\n                #pageNumberInput\n              />\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div\n              id=\"mvZoomBtn\"\n              #mvZoomBtn\n              class=\"mv-toolbar__menu-button--zoom\"\n              aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"\n                mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\n              \"\n              [class.button-hidden-on-dropdown]=\"\n                mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\n              \"\n            >\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 0.1 ||\n                  redactAllInProgress\n                \"\n                id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\"\n                title=\"Zoom Out\"\n                data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"\n              >\n                <span></span>\n              </button>\n              <select\n                id=\"scaleSelect\"\n                class=\"hmcts-toolbar-select\"\n                title=\"Zoom\"\n                tabindex=\"0\"\n                data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\"\n                aria-label=\"zoom\"\n                [disabled]=\"redactAllInProgress\"\n              >\n                <option\n                  #zoomSelect\n                  id=\"customScaleOption\"\n                  title=\"\"\n                  [value]=\"toolbarEvents.zoomValueSubject.value\"\n                >\n                  {{\n                    toolbarEvents.zoomValueSubject.value * 100\n                      | number : \"1.0-0\"\n                  }}%\n                </option>\n                <option\n                  *ngFor=\"let zoomScale of zoomScales\"\n                  title=\"\"\n                  [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale * 100\"\n                >\n                  {{ zoomScale * 100 }}%\n                </option>\n              </select>\n\n              <button\n                [disabled]=\"\n                  toolbarEvents.zoomValueSubject.value === 5 ||\n                  redactAllInProgress\n                \"\n                id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\"\n                (click)=\"stepZoom(0.1)\"\n                title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"\n              >\n                <span></span>\n              </button>\n            </div>\n          </ng-container>\n\n          <div\n            *ngIf=\"toolbarButtons.showRotate\"\n            id=\"mvRotateBtn\"\n            #mvRotateBtn\n            class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\n            \"\n          >\n            <button\n              id=\"mvRotateLeftBtn\"\n              class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\"\n              data-l10n-id=\"page_rotate_ccw\"\n              (click)=\"rotate(270)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <button\n              id=\"mvRotateRightBtn\"\n              class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\"\n              data-l10n-id=\"page_rotate_cw\"\n              (click)=\"rotate(90)\"\n              [disabled]=\"redactAllInProgress\"\n            >\n              <span></span>\n            </button>\n            <span>Rotate</span>\n          </div>\n\n          <button\n            *ngIf=\"toolbarButtons.showSearchBar\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvSearchBtn\"\n            #mvSearchBtn\n            title=\"Search\"\n            data-l10n-id=\"searchbar\"\n            class=\"mv-button mv-toolbar__menu-button--search\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n            [disabled]=\"icpEnabled || !contentType || redactionEnabled\"\n            id=\"mvPresentBtn\"\n            #mvPresentBtn\n            class=\"mv-button mv-toolbar__menu-button--present\"\n            title=\"In-Court Presentation Mode\"\n            data-l10n-id=\"icpMode_label\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"\n          >\n            <span data-l10n-id=\"icpMode_label\">Present</span>\n          </button>\n\n          <button\n            *ngIf=\"enableRedactions && toolbarButtons.showRedact\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvRedactBtn\"\n            #mvRedactBtn\n            title=\"Redact\"\n            data-l10n-id=\"redact\"\n            class=\"mv-button mv-toolbar__menu-button--redact\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\"\n          >\n            <span>Redact</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showGrabNDragButton\"\n            [disabled]=\"icpEnabled || redactAllInProgress\"\n            id=\"mvGrabBtn\"\n            #mvGrabBtn\n            class=\"mv-button mv-toolbar__menu-button--grab\"\n            title=\"Grab and drag\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\"\n          >\n            <span>Grab and drag</span>\n          </button>\n\n          <button\n            *ngIf=\"toolbarButtons.showDownload\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvDownloadBtn\"\n            #mvDownloadBtn\n            class=\"mv-button mv-toolbar__menu-button--download\"\n            title=\"Download\"\n            data-l10n-id=\"download\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"downloadFile(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"toolbarButtons.showPrint\"\n            [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvPrintBtn\"\n            #mvPrintBtn\n            title=\"Print\"\n            data-l10n-id=\"print\"\n            class=\"mv-button mv-toolbar__menu-button--print\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"printFile(); isDropdownMenuOpen = false\"\n          ></button>\n\n          <button\n            *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\"\n            [disabled]=\"redactionEnabled\"\n            id=\"mvCommentsBtn\"\n            #mvCommentsBtn\n            class=\"mv-button mv-toolbar__menu-button--comments\"\n            title=\"Comments\"\n            data-l10n-id=\"comments\"\n            [class.button-hidden-on-toolbar]=\"\n              mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\n            \"\n            [class.button-hidden-on-dropdown]=\"\n              mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\n            \"\n            aria-pressed=\"false\"\n            (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\"\n          >\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\"></div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i0.ChangeDetectorRef }, { type: NumberHelperService }]; }, propDecorators: { enableAnnotations: [{
                 type: Input
-            }], searchInput: [{
+            }], enableRedactions: [{
+                type: Input
+            }], enableICP: [{
+                type: Input
+            }], contentType: [{
+                type: Input
+            }], zoomSelect: [{
                 type: ViewChild,
-                args: ['searchInput', { static: false }]
+                args: ['zoomSelect', { static: false }]
+            }], mvToolbarMain: [{
+                type: ViewChild,
+                args: ['mvToolbarMain', { static: false }]
+            }], mvMenuItems: [{
+                type: ViewChild,
+                args: ['dropdownMenu', { static: false }]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', []]
+            }], onControlPrint: [{
+                type: HostListener,
+                args: ['document:keydown.control.p', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:keydown.meta.p', ['$event']]
             }] } });
 
-class FilterPipe {
-    transform(items, searchText, fieldName) {
-        if (!items) {
-            return [];
-        }
-        if (!searchText) {
-            return items;
-        }
-        return items.filter(item => {
-            if (item) {
-                if (item[fieldName]) {
-                    return item[fieldName].toLowerCase().includes(searchText.toLowerCase());
-                }
-                else {
-                    return item.toLowerCase().includes(searchText.toLowerCase());
-                }
-            }
-            return false;
+const getRedactionState = createSelector(getMVState, (state) => state.redactions);
+const getRedactionPages = createSelector(getRedactionState, getPageEnt);
+const getSelected = createSelector(getRedactionState, getSelectedRedaction);
+const getRedactedDocumentInfo = createSelector(getRedactionState, getRedactedDocInfo);
+const getRedactionEnt = createSelector(getRedactionState, getRedactionEnt$1);
+const getRedactionArray = createSelector(getRedactionEnt, getDocumentId, (ent, documentId) => {
+    const redactions = Object.keys(ent).map(key => ent[key]);
+    return { redactions, documentId };
+});
+const getRedactionsPerPage = createSelector(getPages, getRedactionPages, (pages, pageEnt) => {
+    if (pages && pageEnt) {
+        const arr = [];
+        Object.keys(pages).forEach(key => {
+            arr.push({
+                anno: pageEnt[key] ? pageEnt[key] : [],
+                styles: pages[key].styles
+            });
         });
+        return arr;
     }
-}
-/** @nocollapse */ FilterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ FilterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: FilterPipe, name: "filter" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FilterPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'filter'
-                }]
-        }] });
-
-class UnsnakePipe {
-    transform(items) {
-        return items.split('_').join(' ');
-    }
-}
-/** @nocollapse */ UnsnakePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UnsnakePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ UnsnakePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: UnsnakePipe, name: "unsnake" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: UnsnakePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'unsnake'
-                }]
-        }] });
+});
 
-class CommentFilterComponent {
-    constructor(store, fb) {
+class RedactionToolbarComponent {
+    constructor(toolbarEventService, toolbarButtons, store) {
+        this.toolbarEventService = toolbarEventService;
+        this.toolbarButtons = toolbarButtons;
         this.store = store;
-        this.fb = fb;
-        this.isPreview = false;
+        this.preview = false;
+        this.hasRedactions = false;
+        this.subscriptions = [];
     }
     ngOnInit() {
-        this.tagGroup = this.fb.group({
-            'tagFilters': this.fb.group({}),
-        });
-        this.filter$ = this.store.pipe(select(getTagFilters));
-        this.$subscriptions = this.tagGroup.valueChanges.pipe(auditTime(5)).subscribe(value => {
-            const tagFilters = value['tagFilters'];
-            this.store.dispatch(new AddFilterTags(tagFilters));
-        });
-        this.buildFrom();
-    }
-    buildFrom() {
-        const checkboxes = this.tagGroup.get('tagFilters');
-        this.allTags$ = this.store.pipe(select(getAllTagsArr)).pipe(tap(tags => {
-            this.tagGroup.reset();
-            tags.forEach((value) => {
-                checkboxes.addControl(value.key, new UntypedFormControl(false));
-            });
+        this.subscriptions.push(this.store.pipe(select(getRedactionArray)).subscribe(redactions => {
+            this.hasRedactions = !!redactions.redactions.length;
+        }));
+        this.subscriptions.push(this.toolbarEventService.redactAllInProgressSubject.subscribe(inprogress => {
+            this.redactionAllInProgress = inprogress;
         }));
     }
-    onClearFilters() {
-        this.tagGroup.reset();
-        this.store.dispatch(new ClearFilterTags());
+    onRedactAllSearch() {
+        this.toolbarEventService.openRedactionSearch.next(true);
     }
-    ngOnDestroy() {
-        this.$subscriptions.unsubscribe();
+    toggleTextRedactionMode() {
+        this.toolbarEventService.highlightModeSubject.next(true);
     }
-    onRemoveFilter(tagName) {
-        const checkboxes = this.tagGroup.get('tagFilters');
-        checkboxes.controls[tagName].setValue(false);
+    toggleDrawMode() {
+        this.toolbarEventService.drawModeSubject.next(true);
     }
-    onToggleFilterView() {
-        this.isPreview = !this.isPreview;
+    togglePreview() {
+        this.preview = !this.preview;
+        this.toolbarEventService.toggleRedactionPreview(this.preview);
+    }
+    unmarkAll() {
+        this.toolbarEventService.unmarkAll();
+    }
+    redact() {
+        this.toolbarEventService.applyRedactionToDocument();
+    }
+    toggleRedactBar() {
+        this.toolbarEventService.toggleRedactionMode();
+    }
+    redactPage() {
+        this.toolbarEventService.drawModeSubject.next(true);
+        this.toolbarEventService.redactPage();
+    }
+    ngOnDestroy() {
+        for (const subscription of this.subscriptions) {
+            subscription.unsubscribe();
+        }
     }
 }
-/** @nocollapse */ CommentFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentFilterComponent, deps: [{ token: i1.Store }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentFilterComponent, selector: "mv-comment-filter", ngImport: i0, template: "<div class=\"comment-filter\">\n  <div class=\"hmcts-filter__content\">\n    <div class=\"hmcts-filter__toggle-filters\">\n      <p class=\"hmcts-filter__toggle-filters-link\"\n         [ngClass]=\"{'govuk-accordion__section--expanded': isPreview}\"\n         (click)=\"onToggleFilterView()\"><strong >Filter options</strong><span class=\"govuk-accordion__icon\"></span></p>\n    </div>\n\n    <ng-container *ngIf=\"(filter$ | async) as filters\">\n    <div class=\"hmcts-filter__selected-heading\" *ngIf=\"filters.length\">\n      <div class=\"hmcts-filter__heading-action\">\n        <p><a (click)=\"onClearFilters()\"\n              class=\"govuk-link govuk-link--no-visited-state\"\n              [routerLink]=\"[]\">Clear filters</a></p>\n      </div>\n    </div>\n\n    <h4 class=\"govuk-heading-s govuk-!-margin-bottom-0\" *ngIf=\"filters.length\">Tag filters</h4>\n\n    <ul class=\"hmcts-filter-tags\" *ngIf=\"filters.length\">\n      <li *ngFor=\"let tagName of filters\">\n        <a class=\"hmcts-filter__tag\" [routerLink]=\"[]\" (click)=\"onRemoveFilter(tagName)\">\n          <span class=\"govuk-visually-hidden\">Remove this filter</span>{{tagName | unsnake}}</a>\n      </li>\n    </ul>\n    </ng-container >\n\n    <div class=\"hmcts-filter__options\" [ngClass]=\"{'isVisible': isPreview}\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-label--s\" for=\"keywords\">\n          Search Tags\n        </label>\n        <input class=\"govuk-input\" id=\"keywords\" name=\"keywords\" type=\"text\" [(ngModel)]=\"searchValue\">\n      </div>\n\n      <div class=\"govuk-form-group\">\n        <div [formGroup]=\"tagGroup\">\n          <fieldset class=\"govuk-fieldset\" formGroupName=\"tagFilters\">\n            <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n              Tags\n            </legend>\n            <div class=\"govuk-checkboxes--scroll\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                <div class=\"govuk-checkboxes__item\" *ngFor=\"let item of (allTags$ | async) | filter: searchValue: 'key'\">\n                  <input [formControlName]=\"item.key\" [id]=\"item.key\" class=\"govuk-checkboxes__input\" [value]=\"false\"\n                         [attr.aria-describedby]=\"item.key\" type=\"checkbox\">\n                  <label class=\"govuk-label govuk-checkboxes__label\" [for]=\"item.key\">\n                    {{ item.key | unsnake}} ({{item.length}})\n                  </label>\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: FilterPipe, name: "filter" }, { kind: "pipe", type: UnsnakePipe, name: "unsnake" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentFilterComponent, decorators: [{
+/** @nocollapse */ RedactionToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RedactionToolbarComponent, deps: [{ token: ToolbarEventService }, { token: ToolbarButtonVisibilityService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ RedactionToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RedactionToolbarComponent, selector: "mv-redaction-toolbar", inputs: { showRedactSearch: "showRedactSearch" }, ngImport: i0, template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >Redaction options</label\n  >\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw\"\n    title=\"Draw a box\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n  </button>\n\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page\"\n    title=\"Redact Page\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">Redact page</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    title=\"From search\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >From search</span\n    >\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\"\n    aria-pressed=\"false\"\n    title=\"Redact text\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear\"\n    aria-pressed=\"false\"\n    title=\"Clear all\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">Clear all</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    title=\"Preview\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\"\n      >Hide preview</span\n    >\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download\"\n    aria-pressed=\"false\"\n    title=\"Redact\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">Save document</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"Close Redaction\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">Close Redaction</span>\n  </button>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RedactionToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-comment-filter', encapsulation: ViewEncapsulation.None, template: "<div class=\"comment-filter\">\n  <div class=\"hmcts-filter__content\">\n    <div class=\"hmcts-filter__toggle-filters\">\n      <p class=\"hmcts-filter__toggle-filters-link\"\n         [ngClass]=\"{'govuk-accordion__section--expanded': isPreview}\"\n         (click)=\"onToggleFilterView()\"><strong >Filter options</strong><span class=\"govuk-accordion__icon\"></span></p>\n    </div>\n\n    <ng-container *ngIf=\"(filter$ | async) as filters\">\n    <div class=\"hmcts-filter__selected-heading\" *ngIf=\"filters.length\">\n      <div class=\"hmcts-filter__heading-action\">\n        <p><a (click)=\"onClearFilters()\"\n              class=\"govuk-link govuk-link--no-visited-state\"\n              [routerLink]=\"[]\">Clear filters</a></p>\n      </div>\n    </div>\n\n    <h4 class=\"govuk-heading-s govuk-!-margin-bottom-0\" *ngIf=\"filters.length\">Tag filters</h4>\n\n    <ul class=\"hmcts-filter-tags\" *ngIf=\"filters.length\">\n      <li *ngFor=\"let tagName of filters\">\n        <a class=\"hmcts-filter__tag\" [routerLink]=\"[]\" (click)=\"onRemoveFilter(tagName)\">\n          <span class=\"govuk-visually-hidden\">Remove this filter</span>{{tagName | unsnake}}</a>\n      </li>\n    </ul>\n    </ng-container >\n\n    <div class=\"hmcts-filter__options\" [ngClass]=\"{'isVisible': isPreview}\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-label--s\" for=\"keywords\">\n          Search Tags\n        </label>\n        <input class=\"govuk-input\" id=\"keywords\" name=\"keywords\" type=\"text\" [(ngModel)]=\"searchValue\">\n      </div>\n\n      <div class=\"govuk-form-group\">\n        <div [formGroup]=\"tagGroup\">\n          <fieldset class=\"govuk-fieldset\" formGroupName=\"tagFilters\">\n            <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n              Tags\n            </legend>\n            <div class=\"govuk-checkboxes--scroll\">\n              <div class=\"govuk-checkboxes govuk-checkboxes--small\">\n                <div class=\"govuk-checkboxes__item\" *ngFor=\"let item of (allTags$ | async) | filter: searchValue: 'key'\">\n                  <input [formControlName]=\"item.key\" [id]=\"item.key\" class=\"govuk-checkboxes__input\" [value]=\"false\"\n                         [attr.aria-describedby]=\"item.key\" type=\"checkbox\">\n                  <label class=\"govuk-label govuk-checkboxes__label\" [for]=\"item.key\">\n                    {{ item.key | unsnake}} ({{item.length}})\n                  </label>\n                </div>\n              </div>\n            </div>\n          </fieldset>\n        </div>\n      </div>\n    </div>\n\n\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: i2.UntypedFormBuilder }]; } });
+            args: [{ selector: 'mv-redaction-toolbar', template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\"\n    >Redaction options</label\n  >\n  <button\n    id=\"toggleDrawButton\"\n    class=\"mv-button redaction-button--draw\"\n    title=\"Draw a box\"\n    data-l10n-id=\"toggleDrawButton\"\n    (click)=\"toggleDrawMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n  </button>\n\n  <button\n    id=\"redactPageButton\"\n    class=\"mv-button redaction-button--redact-page\"\n    title=\"Redact Page\"\n    data-l10n-id=\"redactPageButton\"\n    (click)=\"redactPage()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"redactPageButton_label\">Redact page</span>\n  </button>\n  <button\n    *ngIf=\"showRedactSearch\"\n    id=\"mvRedactFromSearchBtn\"\n    title=\"From search\"\n    data-l10n-id=\"fromSearchButton\"\n    class=\"mv-button redaction-button--search\"\n    (click)=\"onRedactAllSearch()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span style=\"width: 5rem\" data-l10n-id=\"fromSearchButton_label\"\n      >From search</span\n    >\n  </button>\n\n  <button\n    *ngIf=\"toolbarButtons.showHighlightButton\"\n    id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\"\n    aria-pressed=\"false\"\n    title=\"Redact text\"\n    data-l10n-id=\"toggleTextRedactionButton\"\n    (click)=\"toggleTextRedactionMode()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvClearBtn\"\n    #mvClearBtn\n    class=\"mv-button redaction-button--clear\"\n    aria-pressed=\"false\"\n    title=\"Clear all\"\n    data-l10n-id=\"toggleClearAllButton\"\n    (click)=\"unmarkAll()\"\n  >\n    <span data-l10n-id=\"Clear all\">Clear all</span>\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvPreviewBtn\"\n    class=\"mv-button\"\n    [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\"\n    redaction-button--preview\n    aria-pressed=\"false\"\n    title=\"Preview\"\n    data-l10n-id=\"togglePreviewButton\"\n    (click)=\"togglePreview()\"\n  >\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\"\n      >Hide preview</span\n    >\n  </button>\n\n  <button\n    [disabled]=\"!hasRedactions || redactionAllInProgress\"\n    id=\"mvRedactBtn\"\n    class=\"mv-button redaction-button--download\"\n    aria-pressed=\"false\"\n    title=\"Redact\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"redact()\"\n  >\n    <span data-l10n-id=\"Save Document\">Save document</span>\n  </button>\n\n  <button\n    id=\"mvCloseBtn\"\n    #mvCloseBtn\n    class=\"mv-button redaction-button--close\"\n    title=\"Close Redaction\"\n    data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\"\n    [disabled]=\"redactionAllInProgress\"\n  >\n    <span data-l10n-id=\"Close Redaction\">Close Redaction</span>\n  </button>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: ToolbarButtonVisibilityService }, { type: i1.Store }]; }, propDecorators: { showRedactSearch: [{
+                type: Input
+            }] } });
 
-class CommentSetHeaderComponent {
-    constructor(store, commentService, toolbarEvents) {
+class IcpToolbarComponent {
+    constructor(toolbarEventService, store) {
+        this.toolbarEventService = toolbarEventService;
         this.store = store;
-        this.commentService = commentService;
-        this.toolbarEvents = toolbarEvents;
-        this.showCommentSummaryDialog = new EventEmitter();
-        this.tabs = [];
-        this.tabSelected = '';
     }
     ngOnInit() {
-        const tagFilter$ = this.store.pipe(select(getTagFilters));
-        const filteredAnnotation$ = this.store.pipe(select(getFilteredAnnotations));
-        this.$subscriptions = combineLatest([tagFilter$, filteredAnnotation$]).subscribe(([formData, filteredAnno]) => {
-            this.navigationList = filteredAnno;
-            this.tabs = this.navigationList.length > 0 ?
-                [{ label: 'comments' }, { label: 'filter' }, { label: 'search' }] : [{ label: 'comments' }];
-            this.isFiltered = !formData.length;
-            this.tabs = [...this.tabs].map((tab) => {
-                return !this.isFiltered && tab.label === 'filter' ? { ...tab, isFiltered: true } : { ...tab, isFiltered: false };
-            });
-        });
+        this.$subscription = this.store.pipe(select(isPresenter))
+            .subscribe(isPresenter => this.isPresenter = isPresenter);
+        this.$subscription.add(this.store.pipe(select(getPresenterName))
+            .subscribe(name => this.presenterName = name));
     }
-    toggleCommentsSummary() {
-        this.showCommentSummaryDialog.emit();
+    ngOnDestroy() {
+        this.$subscription.unsubscribe();
     }
-    selectTab(tab) {
-        this.tabSelected = tab !== this.tabSelected ? tab : undefined;
-        if (this.tabSelected) {
-            this.marginToComment = true;
-            this.commentService.createMarginToCommentEvent(this.marginToComment);
-        }
-        else {
-            this.marginToComment = false;
-            this.commentService.createMarginToCommentEvent(this.marginToComment);
-        }
+    present() {
+        this.toolbarEventService.icp.becomePresenter();
     }
-    toggleCommentsPanel() {
-        this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
+    stopPresenting() {
+        this.toolbarEventService.icp.stopPresenting();
     }
-    ngOnDestroy() {
-        this.$subscriptions.unsubscribe();
+    leaveIcpSession() {
+        this.toolbarEventService.icp.leaveSession();
+    }
+    showParticipantsList() {
+        this.toolbarEventService.toggleParticipantsList(!this.toolbarEventService.icp.participantsListVisible.getValue());
     }
 }
-/** @nocollapse */ CommentSetHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetHeaderComponent, deps: [{ token: i1.Store }, { token: CommentService }, { token: ToolbarEventService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CommentSetHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: CommentSetHeaderComponent, selector: "mv-comment-set-header", inputs: { showCommentSummary: "showCommentSummary" }, outputs: { showCommentSummaryDialog: "showCommentSummaryDialog" }, ngImport: i0, 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; let i = index\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a id=\"commentSubPane{{ i }}\" (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", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CommentSearchComponent, selector: "mv-comment-search", inputs: ["annotations"] }, { kind: "component", type: CommentsNavigateComponent, selector: "mv-comments-navigate", inputs: ["annotationList", "autoSelect"] }, { kind: "component", type: CommentFilterComponent, selector: "mv-comment-filter" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: CommentSetHeaderComponent, decorators: [{
+/** @nocollapse */ IcpToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IcpToolbarComponent, deps: [{ token: ToolbarEventService }, { token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ IcpToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: IcpToolbarComponent, selector: "mv-icp-toolbar", ngImport: i0, template: "<div id=\"icp-toolbar\" class=\"icpMode\">\n  <div id=\"toolbar-title\">\n    <label class=\"govuk-label\" data-l10n-id=\"digitalEvidence_label\">Digital evidence presentation</label>\n  </div>\n\n  <div id=\"presentation-mode\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" data-l10n-id=\"icpInfo_label\">You are in presentation mode</label>\n    </div>\n    <div class=\"item-button\">\n      <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" tabindex=\"0\"\n        title=\"Leave presentation\" (click)=\"leaveIcpSession()\">\n        <span data-l10n-id=\"icp-leave-presentation_label\">Leave presentation</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"presenter-info\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" *ngIf=\"!presenterName\" data-l10n-id=\"noPresenter_label\">Waiting for presenter</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && isPresenter\" data-l10n-id=\"isPresenter_label\">You are\n        presenting</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && !isPresenter\"\n        data-l10n-id=\"otherPresenter_label\">{{ presenterName | titlecase }}\n        is presenting</label>\n    </div>\n    <div class=\"item-button\">\n      <button *ngIf=\"!presenterName\" class=\"govuk-button\" id=\"icp-present\" tabindex=\"0\" title=\"Present\"\n        (click)=\"present()\">\n        <span data-l10n-id=\"icp-present_label\">Start presenting</span>\n      </button>\n      <button *ngIf=\"isPresenter\" class=\"govuk-button  govuk-button--warning\" id=\"icp-stop-presenting\" tabindex=\"0\"\n        title=\"Stop presenting\" (click)=\"stopPresenting()\">\n        <span data-l10n-id=\"icp-stop-presenting_label\">Stop Presenting</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"participant-list\">\n    <button class=\"govuk-button govuk-button--secondary\" id=\"icp-participants-list\" tabindex=\"0\"\n      title=\"Participants list\" (click)=\"showParticipantsList()\">\n      <span\n        data-l10n-id=\"icp-stop-presenting_label\">{{(toolbarEventService.icp.participantsListVisible | async) ? 'Hide': 'Show'}}\n        participants</span>\n    </button>\n  </div>\n</div>", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: IcpToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-comment-set-header', encapsulation: ViewEncapsulation.None, 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; let i = index\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a id=\"commentSubPane{{ i }}\" (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" }]
-        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CommentService }, { type: ToolbarEventService }]; }, propDecorators: { showCommentSummary: [{
-                type: Input
-            }], showCommentSummaryDialog: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'mv-icp-toolbar', template: "<div id=\"icp-toolbar\" class=\"icpMode\">\n  <div id=\"toolbar-title\">\n    <label class=\"govuk-label\" data-l10n-id=\"digitalEvidence_label\">Digital evidence presentation</label>\n  </div>\n\n  <div id=\"presentation-mode\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" data-l10n-id=\"icpInfo_label\">You are in presentation mode</label>\n    </div>\n    <div class=\"item-button\">\n      <button class=\"govuk-button govuk-button--secondary\" data-module=\"govuk-button\" tabindex=\"0\"\n        title=\"Leave presentation\" (click)=\"leaveIcpSession()\">\n        <span data-l10n-id=\"icp-leave-presentation_label\">Leave presentation</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"presenter-info\">\n    <div class=\"item-label\">\n      <label class=\"govuk-label\" *ngIf=\"!presenterName\" data-l10n-id=\"noPresenter_label\">Waiting for presenter</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && isPresenter\" data-l10n-id=\"isPresenter_label\">You are\n        presenting</label>\n      <label class=\"govuk-label\" *ngIf=\"presenterName && !isPresenter\"\n        data-l10n-id=\"otherPresenter_label\">{{ presenterName | titlecase }}\n        is presenting</label>\n    </div>\n    <div class=\"item-button\">\n      <button *ngIf=\"!presenterName\" class=\"govuk-button\" id=\"icp-present\" tabindex=\"0\" title=\"Present\"\n        (click)=\"present()\">\n        <span data-l10n-id=\"icp-present_label\">Start presenting</span>\n      </button>\n      <button *ngIf=\"isPresenter\" class=\"govuk-button  govuk-button--warning\" id=\"icp-stop-presenting\" tabindex=\"0\"\n        title=\"Stop presenting\" (click)=\"stopPresenting()\">\n        <span data-l10n-id=\"icp-stop-presenting_label\">Stop Presenting</span>\n      </button>\n    </div>\n  </div>\n\n  <div id=\"participant-list\">\n    <button class=\"govuk-button govuk-button--secondary\" id=\"icp-participants-list\" tabindex=\"0\"\n      title=\"Participants list\" (click)=\"showParticipantsList()\">\n      <span\n        data-l10n-id=\"icp-stop-presenting_label\">{{(toolbarEventService.icp.participantsListVisible | async) ? 'Hide': 'Show'}}\n        participants</span>\n    </button>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: ToolbarEventService }, { type: i1.Store }]; } });
 
-const getBookmarkState = createSelector(getMVState, (state) => state.bookmarks);
-const getBookmarkPages = createSelector(getBookmarkState, getBookmarkPageEnt);
-const getBookmarkEntities = createSelector(getBookmarkState, getBookmarkEnts);
-const getBookmarkNodes = createSelector(getBookmarkEntities, (entities) => generateBookmarkNodes(entities));
-const getEditableBookmark = createSelector(getBookmarkState, getEditBookmark);
-const getBookmarkInfo = createSelector(getBookmarkNodes, getDocumentId, getPdfPosition, getPages, (bookmarkNodes, docId, pdfPosition, pages) => {
-    return {
-        pageNumber: pdfPosition.pageNumber - 1,
-        xCoordinate: pdfPosition.left,
-        yCoordinate: ((pages[pdfPosition.pageNumber].styles.height)
-            - (pdfPosition.top * (pages[pdfPosition.pageNumber].viewportScale)))
-            / parseFloat(pages[pdfPosition.pageNumber].scaleRotation.scale),
-        previous: bookmarkNodes.length > 0 ? bookmarkNodes.sort((a, b) => a.index - b.index)[bookmarkNodes.length - 1].id : undefined,
-        documentId: docId
-    };
-});
-const getBookmarksPerPage = createSelector(getPages, getBookmarkPages, (pages, pageEnt) => {
-    if (pages && pageEnt) {
-        const arr = [];
-        Object.keys(pages).forEach(key => {
-            const pageIdx = Number(key) - 1; // -1 as the thisPages array is 0 indexed
-            const thisPage = pageEnt[pageIdx];
-            arr.push({
-                bookmark: thisPage ? thisPage : [],
-                styles: pages[key].styles
-            });
-        });
-        return arr;
-    }
-});
+class ToolbarModule {
+}
+/** @nocollapse */ ToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ ToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: ToolbarModule, declarations: [SearchBarComponent,
+        MainToolbarComponent,
+        RedactionToolbarComponent,
+        IcpToolbarComponent,
+        RedactionSearchBarComponent], imports: [CommonModule,
+        FormsModule,
+        OverlayModule,
+        RouterModule], exports: [MainToolbarComponent,
+        SearchBarComponent,
+        RedactionToolbarComponent,
+        IcpToolbarComponent,
+        RedactionSearchBarComponent] });
+/** @nocollapse */ ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToolbarModule, providers: [
+        ToolbarButtonVisibilityService,
+        ToolbarEventService
+    ], imports: [CommonModule,
+        FormsModule,
+        OverlayModule,
+        RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: ToolbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SearchBarComponent,
+                        MainToolbarComponent,
+                        RedactionToolbarComponent,
+                        IcpToolbarComponent,
+                        RedactionSearchBarComponent
+                    ],
+                    providers: [
+                        ToolbarButtonVisibilityService,
+                        ToolbarEventService
+                    ],
+                    exports: [
+                        MainToolbarComponent,
+                        SearchBarComponent,
+                        RedactionToolbarComponent,
+                        IcpToolbarComponent,
+                        RedactionSearchBarComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        OverlayModule,
+                        RouterModule
+                    ]
+                }]
+        }] });
 
 class BoxHighlightCreateComponent {
     constructor(toolbarEvents, highlightService) {