@hmcts/media-viewer 2.7.7 → 2.7.11

package/fesm2015/hmcts-media-viewer.js

@@ -842,357 +842,166 @@ const defaultUnsupportedOptions = {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-// TODO: replace by NgRx
-class CommentService {
-    constructor() {
-        this.unsavedChanges = new Subject();
-    }
-    /**
-     * @param {?} commentSetComponent
-     * @return {?}
-     */
-    setCommentSet(commentSetComponent) {
-        this.commentSetComponent = commentSetComponent;
-    }
-    /**
-     * @param {?} changes
-     * @return {?}
-     */
-    onCommentChange(changes) {
-        this.unsavedChanges.next(changes);
-    }
-    /**
-     * @return {?}
-     */
-    getUnsavedChanges() {
-        return this.unsavedChanges.asObservable();
-    }
-    /**
-     * @param {?} annotation
-     * @return {?}
-     */
-    hasUnsavedComments(annotation) {
-        if (annotation.comments.length > 0) {
-            /** @type {?} */
-            const comment = this.getComment(annotation);
-            return comment.hasUnsavedChanges;
-        }
-        return false;
-    }
-    /**
-     * @param {?} annotation
-     * @param {?} hasUnsavedChanges
-     * @return {?}
-     */
-    updateUnsavedCommentsStatus(annotation, hasUnsavedChanges) {
-        /** @type {?} */
-        const comment = this.getComment(annotation);
-        comment.hasUnsavedChanges = hasUnsavedChanges;
-        this.allCommentsSaved();
-    }
-    /**
-     * @param {?} annotation
-     * @return {?}
-     */
-    getComment(annotation) {
-        return this.commentSetComponent.commentComponents
-            .find((/**
-         * @param {?} c
-         * @return {?}
-         */
-        c => c.comment.annotationId === annotation.comments[0].annotationId));
-    }
-    /**
-     * @return {?}
-     */
-    resetCommentSet() {
-        this.commentSetComponent = null;
-    }
-    /**
-     * @return {?}
-     */
-    allCommentsSaved() {
-        this.onCommentChange(this.commentSetComponent.commentComponents.some((/**
-         * @param {?} comment
-         * @return {?}
-         */
-        comment => comment.hasUnsavedChanges === true)));
-    }
-}
-CommentService.decorators = [
-    { type: Injectable }
-];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class CommentSetRenderService {
-    /**
-     * @param {?} commentComponents
-     * @param {?} pageHeights
-     * @param {?} rotate
-     * @param {?} zoom
-     * @return {?}
-     */
-    redrawComponents(commentComponents, pageHeights, rotate, zoom) {
-        /** @type {?} */
-        let prevComment;
-        this.sortComponents(commentComponents, pageHeights, rotate, zoom).forEach((/**
-         * @param {?} comment
-         * @return {?}
-         */
-        (comment) => {
-            this.adjustIfOverlapping(comment, prevComment, zoom);
-            prevComment = comment;
-        }));
-    }
-    /**
-     * @param {?} commentComponents
-     * @param {?} pageHeights
-     * @param {?} rotate
-     * @param {?} zoom
-     * @return {?}
-     */
-    sortComponents(commentComponents, pageHeights, rotate, zoom) {
-        return commentComponents.sort((/**
-         * @param {?} a
-         * @param {?} b
-         * @return {?}
-         */
-        (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);
-        }));
-    }
-    /**
-     * @private
-     * @param {?} comment
-     * @param {?} prevComment
-     * @param {?} zoom
-     * @return {?}
-     */
-    adjustIfOverlapping(comment, prevComment, zoom) {
-        if (prevComment) {
-            /** @type {?} */
-            const endOfPrevComment = prevComment.commentTop + this.height(prevComment);
-            if (comment.commentTop <= endOfPrevComment) {
-                comment.rectTop = (endOfPrevComment - comment.totalPreviousPagesHeight) / zoom;
-            }
-        }
-    }
-    /**
-     * @private
-     * @param {?} a
-     * @param {?} b
-     * @return {?}
-     */
-    processSort(a, b) {
-        if (this.onSameLine(a, b)) {
-            return a.rectLeft >= b.rectLeft ? 1 : -1;
-        }
-        return a.commentTop >= b.commentTop ? 1 : -1;
-    }
-    /**
-     * @private
-     * @param {?} a
-     * @param {?} b
-     * @return {?}
-     */
-    onSameLine(a, b) {
-        return this.difference(a.commentTop, b.commentTop) === 0;
-    }
-    /**
-     * @private
-     * @param {?} rectangle
-     * @param {?} height
-     * @param {?} rotate
-     * @param {?} zoom
-     * @return {?}
-     */
-    top(rectangle, height, rotate, zoom) {
-        /** @type {?} */
-        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;
-        }
-    }
-    /**
-     * @private
-     * @param {?} element
-     * @return {?}
-     */
-    height(element) {
-        return element.form.nativeElement.getBoundingClientRect().height;
-    }
-    /**
-     * @private
-     * @param {?} a
-     * @param {?} b
-     * @return {?}
-     */
-    difference(a, b) { return Math.abs(a - b); }
-}
-CommentSetRenderService.decorators = [
-    { type: Injectable }
-];
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const LOAD_ANNOTATION_SET = '[Annotations] Load Annotation Set';
 /** @type {?} */
-const LOAD_ANNOTATION_SET_SUCCESS = '[Annotations] Load Annotation Set Success';
+const SET_DOCUMENT_ID = '[Document] Set Document Id';
 /** @type {?} */
-const LOAD_ANNOTATION_SET_FAIL = '[Annotations] Load Annotation Set Fail';
+const POSITION_UPDATED = '[Document] Position Updated';
 /** @type {?} */
-const SAVE_ANNOTATION = '[Annotations] Save Annotation';
+const ADD_PAGES = '[Document] Add Pages';
 /** @type {?} */
-const SAVE_ANNOTATION_SUCCESS = '[Annotations] Save Annotation Success';
+const CONVERT = '[Document] Convert';
 /** @type {?} */
-const SAVE_ANNOTATION_FAIL = '[Annotations] Save Annotation Fail';
+const CONVERT_SUCCESS = '[Document] Convert Success';
 /** @type {?} */
-const ADD_OR_EDIT_COMMENT = '[Annotations] Add or Edit Comment';
+const CONVERT_FAIL = '[Document] Convert Fail';
 /** @type {?} */
-const DELETE_ANNOTATION = '[Annotations] Delete Annotation';
+const CLEAR_CONVERT_DOC_URL = '[Document] Clear Convert Doc Url';
 /** @type {?} */
-const DELETE_ANNOTATION_SUCCESS = '[Annotations] Delete Annotation Success';
+const LOAD_ROTATION = '[Document] Load Rotation';
 /** @type {?} */
-const DELETE_ANNOTATION_FAIL = '[Annotations] Delete Annotation Fail';
+const LOAD_ROTATION_SUCCESS = '[Document] Load Rotation Success';
 /** @type {?} */
-const SELECT_ANNOTATION = '[Annotations] Select Annotation';
+const LOAD_ROTATION_FAIL = '[Document] Load Rotation Fail';
 /** @type {?} */
-const SEARCH_COMMENT = '[Comments] Search Comments';
+const SAVE_ROTATION = '[Document] Save Rotation';
 /** @type {?} */
-const APPLY_COMMENT_SUMMARY_FILTER = '[Comments] Apply Comment Summary Filter';
+const SAVE_ROTATION_SUCCESS = '[Document] Save Rotation Success';
 /** @type {?} */
-const CLEAR_COMMENT_SUMMARY_FILTER = '[Comments] Clear Comment Summary Filter';
-class LoadAnnotationSet {
+const SAVE_ROTATION_FAIL = '[Document] Save Rotation Fail';
+class SetDocumentId {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = LOAD_ANNOTATION_SET;
+        this.type = SET_DOCUMENT_ID;
     }
 }
-class LoadAnnotationSetSucess {
+class AddPages {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = LOAD_ANNOTATION_SET_SUCCESS;
+        this.type = ADD_PAGES;
     }
 }
-class LoadAnnotationSetFail {
+class PdfPositionUpdate {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = LOAD_ANNOTATION_SET_FAIL;
+        this.type = POSITION_UPDATED;
     }
 }
-class SaveAnnotation {
+class Convert {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = SAVE_ANNOTATION;
+        this.type = CONVERT;
     }
 }
-class SaveAnnotationSuccess {
+class ConvertSuccess {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = SAVE_ANNOTATION_SUCCESS;
+        this.type = CONVERT_SUCCESS;
     }
 }
-class SaveAnnotationFail {
+class ConvertFailure {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = SAVE_ANNOTATION_FAIL;
+        this.type = CONVERT_FAIL;
     }
 }
-class AddOrEditComment {
-    /**
+class ClearConvertDocUrl {
+    constructor() {
+        this.type = CLEAR_CONVERT_DOC_URL;
+    }
+}
+class LoadRotation {
+    /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = ADD_OR_EDIT_COMMENT;
+        this.type = LOAD_ROTATION;
     }
 }
-class DeleteAnnotation {
+class LoadRotationSuccess {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = DELETE_ANNOTATION;
+        this.type = LOAD_ROTATION_SUCCESS;
     }
 }
-class DeleteAnnotationSuccess {
+class LoadRotationFailure {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = DELETE_ANNOTATION_SUCCESS;
+        this.type = LOAD_ROTATION_FAIL;
     }
 }
-class DeleteAnnotationFail {
+class SaveRotation {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = DELETE_ANNOTATION_FAIL;
+        this.type = SAVE_ROTATION;
     }
 }
-class SelectedAnnotation {
+class SaveRotationSuccess {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = SELECT_ANNOTATION;
+        this.type = SAVE_ROTATION_SUCCESS;
     }
 }
-class SearchComment {
+class SaveRotationFailure {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = SEARCH_COMMENT;
+        this.type = SAVE_ROTATION_FAIL;
     }
 }
-class ApplyCommentSymmaryFilter {
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const ADD_FILTER_TAGS = '[Tags] Add Filter Tags';
+/** @type {?} */
+const CLEAR_FILTER_TAGS = '[Tags] Clear Filter Tags';
+class AddFilterTags {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = APPLY_COMMENT_SUMMARY_FILTER;
+        this.type = ADD_FILTER_TAGS;
     }
 }
-class ClearCommentSummaryFilters {
+class ClearFilterTags {
     constructor() {
-        this.type = CLEAR_COMMENT_SUMMARY_FILTER;
+        this.type = CLEAR_FILTER_TAGS;
     }
 }
 
@@ -1201,142 +1010,87 @@ class ClearCommentSummaryFilters {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
-const SET_DOCUMENT_ID = '[Document] Set Document Id';
-/** @type {?} */
-const POSITION_UPDATED = '[Document] Position Updated';
-/** @type {?} */
-const ADD_PAGES = '[Document] Add Pages';
-/** @type {?} */
-const CONVERT = '[Document] Convert';
-/** @type {?} */
-const CONVERT_SUCCESS = '[Document] Convert Success';
-/** @type {?} */
-const CONVERT_FAIL = '[Document] Convert Fail';
+const SET_CASE_ID = '[Icp] Set Case Id';
 /** @type {?} */
-const CLEAR_CONVERT_DOC_URL = '[Document] Clear Convert Doc Url';
+const LOAD_ICP_SESSION = '[Icp] Load Session';
 /** @type {?} */
-const LOAD_ROTATION = '[Document] Load Rotation';
+const LOAD_ICP_SESSION_FAIL = '[Icp] Load Session Failure';
 /** @type {?} */
-const LOAD_ROTATION_SUCCESS = '[Document] Load Rotation Success';
+const JOIN_ICP_SOCKET_SESSION = '[Icp] Join Socket Session';
 /** @type {?} */
-const LOAD_ROTATION_FAIL = '[Document] Load Rotation Fail';
+const ICP_SOCKET_SESSION_JOINED = '[Icp] Socket Session Joined';
 /** @type {?} */
-const SAVE_ROTATION = '[Document] Save Rotation';
+const LEAVE_ICP_SOCKET_SESSION = '[Icp] Leave Socket Session';
 /** @type {?} */
-const SAVE_ROTATION_SUCCESS = '[Document] Save Rotation Success';
+const ICP_PRESENTER_UPDATED = '[Icp] Presenter Updated';
 /** @type {?} */
-const SAVE_ROTATION_FAIL = '[Document] Save Rotation Fail';
-class SetDocumentId {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = SET_DOCUMENT_ID;
-    }
-}
-class AddPages {
+const ICP_PARTICIPANT_LIST_UPDATED = '[Icp] Participant List Updated';
+class SetCaseId {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = ADD_PAGES;
+        this.type = SET_CASE_ID;
     }
 }
-class PdfPositionUpdate {
+class LoadIcpSession {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = POSITION_UPDATED;
+        this.type = LOAD_ICP_SESSION;
     }
 }
-class Convert {
+class LoadIcpSessionFailure {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = CONVERT;
+        this.type = LOAD_ICP_SESSION_FAIL;
     }
 }
-class ConvertSuccess {
+class JoinIcpSocketSession {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = CONVERT_SUCCESS;
+        this.type = JOIN_ICP_SOCKET_SESSION;
     }
 }
-class ConvertFailure {
+class IcpSocketSessionJoined {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = CONVERT_FAIL;
+        this.type = ICP_SOCKET_SESSION_JOINED;
     }
 }
-class ClearConvertDocUrl {
+class LeaveIcpSocketSession {
     constructor() {
-        this.type = CLEAR_CONVERT_DOC_URL;
-    }
-}
-class LoadRotation {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = LOAD_ROTATION;
-    }
-}
-class LoadRotationSuccess {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = LOAD_ROTATION_SUCCESS;
-    }
-}
-class LoadRotationFailure {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = LOAD_ROTATION_FAIL;
-    }
-}
-class SaveRotation {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = SAVE_ROTATION;
+        this.type = LEAVE_ICP_SOCKET_SESSION;
     }
 }
-class SaveRotationSuccess {
+class IcpPresenterUpdated {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = SAVE_ROTATION_SUCCESS;
+        this.type = ICP_PRESENTER_UPDATED;
     }
 }
-class SaveRotationFailure {
+class IcpParticipantListUpdated {
     /**
      * @param {?} payload
      */
     constructor(payload) {
         this.payload = payload;
-        this.type = SAVE_ROTATION_FAIL;
+        this.type = ICP_PARTICIPANT_LIST_UPDATED;
     }
 }
 
@@ -1508,76 +1262,231 @@ const getConvertedDocument = (/**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/*
-  @dynamic
-  marking class as dynamic to stop compiler throwing error for lambda in static function
-  see https://github.com/angular/angular/issues/19698#issuecomment-338340211
- */
-class StoreUtils {
+/** @type {?} */
+const LOAD_ANNOTATION_SET = '[Annotations] Load Annotation Set';
+/** @type {?} */
+const LOAD_ANNOTATION_SET_SUCCESS = '[Annotations] Load Annotation Set Success';
+/** @type {?} */
+const LOAD_ANNOTATION_SET_FAIL = '[Annotations] Load Annotation Set Fail';
+/** @type {?} */
+const SAVE_ANNOTATION = '[Annotations] Save Annotation';
+/** @type {?} */
+const SAVE_ANNOTATION_SUCCESS = '[Annotations] Save Annotation Success';
+/** @type {?} */
+const SAVE_ANNOTATION_FAIL = '[Annotations] Save Annotation Fail';
+/** @type {?} */
+const ADD_OR_EDIT_COMMENT = '[Annotations] Add or Edit Comment';
+/** @type {?} */
+const DELETE_ANNOTATION = '[Annotations] Delete Annotation';
+/** @type {?} */
+const DELETE_ANNOTATION_SUCCESS = '[Annotations] Delete Annotation Success';
+/** @type {?} */
+const DELETE_ANNOTATION_FAIL = '[Annotations] Delete Annotation Fail';
+/** @type {?} */
+const SELECT_ANNOTATION = '[Annotations] Select Annotation';
+/** @type {?} */
+const SEARCH_COMMENT = '[Comments] Search Comments';
+/** @type {?} */
+const APPLY_COMMENT_SUMMARY_FILTER = '[Comments] Apply Comment Summary Filter';
+/** @type {?} */
+const CLEAR_COMMENT_SUMMARY_FILTER = '[Comments] Clear Comment Summary Filter';
+class LoadAnnotationSet {
     /**
-     * @param {?} annotations
-     * @param {?} key
-     * @return {?}
+     * @param {?} payload
      */
-    static groupByKeyEntities(annotations, key) {
-        return annotations.reduce((/**
-         * @param {?} h
-         * @param {?} obj
-         * @return {?}
-         */
-        (h, obj) => Object.assign(h, { [obj[key]]: (h[obj[key]] || []).concat(obj) })), {});
+    constructor(payload) {
+        this.payload = payload;
+        this.type = LOAD_ANNOTATION_SET;
     }
+}
+class LoadAnnotationSetSucess {
     /**
-     * @param {?} annotations
-     * @return {?}
+     * @param {?} payload
      */
-    static generateCommentsEntities(annotations) {
-        return annotations.reduce((/**
-         * @param {?} commentEntities
-         * @param {?} annotation
-         * @return {?}
-         */
-        (commentEntities, annotation) => {
-            if (annotation.comments.length) {
-                /** @type {?} */
-                const comment = Object.assign({}, annotation.comments[0] || '', { tags: [...annotation.tags || []] });
-                return Object.assign({}, commentEntities, { [annotation.id]: comment });
-            }
-            return Object.assign({}, commentEntities);
-        }), {});
+    constructor(payload) {
+        this.payload = payload;
+        this.type = LOAD_ANNOTATION_SET_SUCCESS;
     }
+}
+class LoadAnnotationSetFail {
     /**
-     * @param {?} annotations
-     * @return {?}
+     * @param {?} payload
      */
-    static genTagNameEntities(annotations) {
-        /** @type {?} */
-        const filterAnnoWithoutCommentsTags = annotations.filter((/**
-         * @param {?} a
-         * @return {?}
-         */
-        a => (a.comments.length && a.tags.length)));
-        /** @type {?} */
-        const allTags = filterAnnoWithoutCommentsTags.map((/**
-         * @param {?} anno
-         * @return {?}
-         */
-        anno => this.groupByKeyEntities(anno.tags, 'name')));
-        /** @type {?} */
-        const groupedByName = allTags.reduce((/**
-         * @param {?} tagEntitiy
-         * @param {?} tagItem
-         * @return {?}
-         */
-        (tagEntitiy, tagItem) => {
-            return Object.assign({}, tagEntitiy, tagItem);
-        }), {});
-        return this.genNameEnt(annotations, groupedByName);
+    constructor(payload) {
+        this.payload = payload;
+        this.type = LOAD_ANNOTATION_SET_FAIL;
     }
+}
+class SaveAnnotation {
     /**
-     * @param {?} annos
-     * @param {?} groupedByName
-     * @return {?}
+     * @param {?} payload
+     */
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SAVE_ANNOTATION;
+    }
+}
+class SaveAnnotationSuccess {
+    /**
+     * @param {?} payload
+     */
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SAVE_ANNOTATION_SUCCESS;
+    }
+}
+class SaveAnnotationFail {
+    /**
+     * @param {?} payload
+     */
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SAVE_ANNOTATION_FAIL;
+    }
+}
+class AddOrEditComment {
+    /**
+     * @param {?} payload
+     */
+    constructor(payload) {
+        this.payload = payload;
+        this.type = ADD_OR_EDIT_COMMENT;
+    }
+}
+class DeleteAnnotation {
+    /**
+     * @param {?} payload
+     */
+    constructor(payload) {
+        this.payload = payload;
+        this.type = DELETE_ANNOTATION;
+    }
+}
+class DeleteAnnotationSuccess {
+    /**
+     * @param {?} payload
+     */
+    constructor(payload) {
+        this.payload = payload;
+        this.type = DELETE_ANNOTATION_SUCCESS;
+    }
+}
+class DeleteAnnotationFail {
+    /**
+     * @param {?} payload
+     */
+    constructor(payload) {
+        this.payload = payload;
+        this.type = DELETE_ANNOTATION_FAIL;
+    }
+}
+class SelectedAnnotation {
+    /**
+     * @param {?} payload
+     */
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SELECT_ANNOTATION;
+    }
+}
+class SearchComment {
+    /**
+     * @param {?} payload
+     */
+    constructor(payload) {
+        this.payload = payload;
+        this.type = SEARCH_COMMENT;
+    }
+}
+class ApplyCommentSymmaryFilter {
+    /**
+     * @param {?} payload
+     */
+    constructor(payload) {
+        this.payload = payload;
+        this.type = APPLY_COMMENT_SUMMARY_FILTER;
+    }
+}
+class ClearCommentSummaryFilters {
+    constructor() {
+        this.type = CLEAR_COMMENT_SUMMARY_FILTER;
+    }
+}
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/*
+  @dynamic
+  marking class as dynamic to stop compiler throwing error for lambda in static function
+  see https://github.com/angular/angular/issues/19698#issuecomment-338340211
+ */
+class StoreUtils {
+    /**
+     * @param {?} annotations
+     * @param {?} key
+     * @return {?}
+     */
+    static groupByKeyEntities(annotations, key) {
+        return annotations.reduce((/**
+         * @param {?} h
+         * @param {?} obj
+         * @return {?}
+         */
+        (h, obj) => Object.assign(h, { [obj[key]]: (h[obj[key]] || []).concat(obj) })), {});
+    }
+    /**
+     * @param {?} annotations
+     * @return {?}
+     */
+    static generateCommentsEntities(annotations) {
+        return annotations.reduce((/**
+         * @param {?} commentEntities
+         * @param {?} annotation
+         * @return {?}
+         */
+        (commentEntities, annotation) => {
+            if (annotation.comments.length) {
+                /** @type {?} */
+                const comment = Object.assign({}, annotation.comments[0] || '', { tags: [...annotation.tags || []] });
+                return Object.assign({}, commentEntities, { [annotation.id]: comment });
+            }
+            return Object.assign({}, commentEntities);
+        }), {});
+    }
+    /**
+     * @param {?} annotations
+     * @return {?}
+     */
+    static genTagNameEntities(annotations) {
+        /** @type {?} */
+        const filterAnnoWithoutCommentsTags = annotations.filter((/**
+         * @param {?} a
+         * @return {?}
+         */
+        a => (a.comments.length && a.tags.length)));
+        /** @type {?} */
+        const allTags = filterAnnoWithoutCommentsTags.map((/**
+         * @param {?} anno
+         * @return {?}
+         */
+        anno => this.groupByKeyEntities(anno.tags, 'name')));
+        /** @type {?} */
+        const groupedByName = allTags.reduce((/**
+         * @param {?} tagEntitiy
+         * @param {?} tagItem
+         * @return {?}
+         */
+        (tagEntitiy, tagItem) => {
+            return Object.assign({}, tagEntitiy, tagItem);
+        }), {});
+        return this.genNameEnt(annotations, groupedByName);
+    }
+    /**
+     * @param {?} annos
+     * @param {?} groupedByName
+     * @return {?}
      */
     static genNameEnt(annos, groupedByName) {
         return Object.keys(groupedByName).reduce((/**
@@ -1941,29 +1850,6 @@ const getSummaryFilters = (/**
  */
 (state) => state.commentSummaryFilters);
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const ADD_FILTER_TAGS = '[Tags] Add Filter Tags';
-/** @type {?} */
-const CLEAR_FILTER_TAGS = '[Tags] Clear Filter Tags';
-class AddFilterTags {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = ADD_FILTER_TAGS;
-    }
-}
-class ClearFilterTags {
-    constructor() {
-        this.type = CLEAR_FILTER_TAGS;
-    }
-}
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -2798,157 +2684,68 @@ const getRedactedDocInfo = (/**
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 /** @type {?} */
-const SET_CASE_ID = '[Icp] Set Case Id';
-/** @type {?} */
-const LOAD_ICP_SESSION = '[Icp] Load Session';
+const initialIcpSessionState = {
+    session: null,
+    presenter: null,
+    client: null,
+    participants: []
+};
+/**
+ * @param {?=} state
+ * @param {?=} action
+ * @return {?}
+ */
+function icpReducer(state = initialIcpSessionState, action) {
+    switch (action.type) {
+        case SET_CASE_ID: {
+            /** @type {?} */
+            const caseId = action.payload;
+            /** @type {?} */
+            const session = Object.assign({}, state.session, { caseId });
+            return Object.assign({}, state, { session });
+        }
+        case ICP_SOCKET_SESSION_JOINED: {
+            /** @type {?} */
+            const session = action.payload.session;
+            /** @type {?} */
+            const participantInfo = action.payload.participantInfo;
+            return Object.assign({}, state, { session, client: participantInfo.client, presenter: participantInfo.presenter });
+        }
+        case ICP_PARTICIPANT_LIST_UPDATED: {
+            /** @type {?} */
+            const updatedParticipants = action.payload;
+            /** @type {?} */
+            const participants = Object.keys(updatedParticipants)
+                .map((/**
+             * @param {?} id
+             * @return {?}
+             */
+            id => ({ id: id, username: updatedParticipants[id] })));
+            return Object.assign({}, state, { participants });
+        }
+        case ICP_PRESENTER_UPDATED: {
+            /** @type {?} */
+            const presenter = action.payload;
+            return Object.assign({}, state, { presenter });
+        }
+        case LEAVE_ICP_SOCKET_SESSION: {
+            return Object.assign({}, state, initialIcpSessionState);
+        }
+    }
+    return state;
+}
 /** @type {?} */
-const LOAD_ICP_SESSION_FAIL = '[Icp] Load Session Failure';
+const getIcpSession = (/**
+ * @param {?} state
+ * @return {?}
+ */
+(state) => state.session);
 /** @type {?} */
-const JOIN_ICP_SOCKET_SESSION = '[Icp] Join Socket Session';
-/** @type {?} */
-const ICP_SOCKET_SESSION_JOINED = '[Icp] Socket Session Joined';
-/** @type {?} */
-const LEAVE_ICP_SOCKET_SESSION = '[Icp] Leave Socket Session';
-/** @type {?} */
-const ICP_PRESENTER_UPDATED = '[Icp] Presenter Updated';
-/** @type {?} */
-const ICP_PARTICIPANT_LIST_UPDATED = '[Icp] Participant List Updated';
-class SetCaseId {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = SET_CASE_ID;
-    }
-}
-class LoadIcpSession {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = LOAD_ICP_SESSION;
-    }
-}
-class LoadIcpSessionFailure {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = LOAD_ICP_SESSION_FAIL;
-    }
-}
-class JoinIcpSocketSession {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = JOIN_ICP_SOCKET_SESSION;
-    }
-}
-class IcpSocketSessionJoined {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = ICP_SOCKET_SESSION_JOINED;
-    }
-}
-class LeaveIcpSocketSession {
-    constructor() {
-        this.type = LEAVE_ICP_SOCKET_SESSION;
-    }
-}
-class IcpPresenterUpdated {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = ICP_PRESENTER_UPDATED;
-    }
-}
-class IcpParticipantListUpdated {
-    /**
-     * @param {?} payload
-     */
-    constructor(payload) {
-        this.payload = payload;
-        this.type = ICP_PARTICIPANT_LIST_UPDATED;
-    }
-}
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const initialIcpSessionState = {
-    session: null,
-    presenter: null,
-    client: null,
-    participants: []
-};
-/**
- * @param {?=} state
- * @param {?=} action
- * @return {?}
- */
-function icpReducer(state = initialIcpSessionState, action) {
-    switch (action.type) {
-        case SET_CASE_ID: {
-            /** @type {?} */
-            const caseId = action.payload;
-            /** @type {?} */
-            const session = Object.assign({}, state.session, { caseId });
-            return Object.assign({}, state, { session });
-        }
-        case ICP_SOCKET_SESSION_JOINED: {
-            /** @type {?} */
-            const session = action.payload.session;
-            /** @type {?} */
-            const participantInfo = action.payload.participantInfo;
-            return Object.assign({}, state, { session, client: participantInfo.client, presenter: participantInfo.presenter });
-        }
-        case ICP_PARTICIPANT_LIST_UPDATED: {
-            /** @type {?} */
-            const updatedParticipants = action.payload;
-            /** @type {?} */
-            const participants = Object.keys(updatedParticipants)
-                .map((/**
-             * @param {?} id
-             * @return {?}
-             */
-            id => ({ id: id, username: updatedParticipants[id] })));
-            return Object.assign({}, state, { participants });
-        }
-        case ICP_PRESENTER_UPDATED: {
-            /** @type {?} */
-            const presenter = action.payload;
-            return Object.assign({}, state, { presenter });
-        }
-        case LEAVE_ICP_SOCKET_SESSION: {
-            return Object.assign({}, state, initialIcpSessionState);
-        }
-    }
-    return state;
-}
-/** @type {?} */
-const getIcpSession = (/**
- * @param {?} state
- * @return {?}
- */
-(state) => state.session);
-/** @type {?} */
-const getPresenter = (/**
- * @param {?} state
- * @return {?}
- */
-(state) => state.presenter);
+const getPresenter = (/**
+ * @param {?} state
+ * @return {?}
+ */
+(state) => state.presenter);
 /** @type {?} */
 const getClient = (/**
  * @param {?} state
@@ -2978,40 +2775,6 @@ const reducers = {
 /** @type {?} */
 const getMVState = createFeatureSelector('media-viewer');
 
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-/** @type {?} */
-const getTagsRootState = createSelector(getMVState, (/**
- * @param {?} state
- * @return {?}
- */
-(state) => state.tags));
-/** @type {?} */
-const getTagEntities = createSelector(getTagsRootState, getTagNameEnt);
-/** @type {?} */
-const getTagFilters = createSelector(getTagsRootState, getFilters);
-/** @type {?} */
-const getTagFiltered = createSelector(getTagsRootState, getFilteredComments);
-/** @type {?} */
-const getFilteredPageEntities = createSelector(getTagsRootState, getFilteredPageEnt);
-/** @type {?} */
-const getAllTagsArr = createSelector(getTagEntities, (/**
- * @param {?} tagEnt
- * @return {?}
- */
-(tagEnt) => Object.keys(tagEnt).map((/**
- * @param {?} key
- * @return {?}
- */
-key => {
-    return {
-        key,
-        length: Object.keys(tagEnt[key]).length
-    };
-}))));
-
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -3047,378 +2810,51 @@ const rotationLoaded$1 = createSelector(getDocumentState, rotationLoaded);
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** @type {?} */
-const getAnnotationsSetState = createSelector(getMVState, (/**
- * @param {?} state
- * @return {?}
- */
-(state) => state.annotations));
-/** @type {?} */
-const getAnnotationEntities = createSelector(getAnnotationsSetState, getAnnoEnt);
-/** @type {?} */
-const getSet = createSelector(getAnnotationsSetState, getAnnoSet);
-/** @type {?} */
-const getDocumentIdSetId = createSelector(getSet, (/**
- * @param {?} annoSet
- * @return {?}
- */
-(annoSet) => {
-    return {
-        documentId: annoSet.documentId,
-        annotationSetId: annoSet.id
-    };
-}));
-/** @type {?} */
-const getAnnotationSet = createSelector(getAnnotationEntities, getSet, (/**
- * @param {?} entities
- * @param {?} set
- * @return {?}
- */
-(entities, set) => {
-    return Object.assign({}, set, { annotations: Object.keys(entities).map((/**
-         * @param {?} key
-         * @return {?}
-         */
-        key => entities[key])) });
-}));
-/** @type {?} */
-const getSelectedAnnotation = createSelector(getAnnotationsSetState, getSelectedAnno);
-/** @type {?} */
-const getCommentEntities = createSelector(getAnnotationsSetState, getCommentEnts);
-/** @type {?} */
-const getPageEntities = createSelector(getAnnotationsSetState, getAnnoPageEnt);
-/** @type {?} */
-const getComponentSearchQueries = createSelector(getAnnotationsSetState, commentSearchQ);
-/** @type {?} */
-const getComponentSearchText = createSelector(getComponentSearchQueries, (/**
- * @param {?} queries
- * @return {?}
- */
-(queries) => queries.commentSearch));
-/** @type {?} */
-const getCommentSummaryFilters = createSelector(getAnnotationsSetState, getSummaryFilters);
-/** @type {?} */
-const getAnnoPerPage = createSelector(getPages, getPageEntities, getFilteredPageEntities, (/**
- * @param {?} pages
- * @param {?} pageEnt
- * @param {?} filteredPageEnt
- * @return {?}
- */
-(pages, pageEnt, filteredPageEnt) => {
-    /** @type {?} */
-    const isFiltered = !!Object.keys(filteredPageEnt).length;
-    /** @type {?} */
-    const entities = isFiltered ? filteredPageEnt : pageEnt;
-    if (pages) {
-        /** @type {?} */
-        const arr = [];
-        Object.keys(pages).forEach((/**
-         * @param {?} key
-         * @return {?}
-         */
-        key => {
-            arr.push({
-                anno: entities[key] ? entities[key] : [],
-                styles: pages[key].styles
-            });
-        }));
-        return arr;
-    }
-}));
-/** @type {?} */
-const getCommentsArray = createSelector(getCommentEntities, getPages, getAnnotationEntities, getTagFiltered, (/**
- * @param {?} commentEnts
- * @param {?} pages
- * @param {?} annoEnts
- * @param {?} filtered
- * @return {?}
- */
-(commentEnts, pages, annoEnts, filtered) => {
-    if (commentEnts && annoEnts && pages[1]) {
-        /** @type {?} */
-        const isFiltered = !!Object.keys(filtered).length;
-        /** @type {?} */
-        const com = isFiltered ? filtered : commentEnts;
-        return Object.keys(com).map((/**
-         * @param {?} key
-         * @return {?}
-         */
-        key => {
-            /** @type {?} */
-            const page = annoEnts[key].page;
-            return Object.assign({}, commentEnts[key], { page,
-                pages });
-        }));
-    }
-}));
-/** @type {?} */
-const getCommentSummary = createSelector(getCommentsArray, getCommentSummaryFilters, (/**
- * @param {?=} commentSummary
- * @param {?=} filters
- * @return {?}
- */
-(commentSummary = [], filters) => {
-    /** @type {?} */
-    const comments = StoreUtils.filterCommentsSummary(commentSummary, filters.filters);
-    if (comments.length) {
-        return comments.map((/**
-         * @param {?} comment
-         * @return {?}
-         */
-        (comment) => {
-            return {
-                page: comment.page,
-                user: comment.createdByDetails.forename.concat(' ').concat(comment.createdByDetails.surname),
-                date: moment(comment.lastModifiedDate).format('D MMMM YYYY'),
-                tags: comment.tags,
-                comment: comment.content
-            };
-        }));
-    }
-    return [''];
-}));
-/** @type {?} */
-const getFilteredAnnotations = createSelector(getAnnotationEntities, getTagFiltered, (/**
- * @param {?} annoEnt
- * @param {?} filters
- * @return {?}
- */
-(annoEnt, filters) => {
-    /** @type {?} */
-    const isFiltered = !!Object.keys(filters).length;
-    /** @type {?} */
-    const anno = isFiltered ? filters : annoEnt;
-    return Object.keys(anno).map((/**
-     * @param {?} key
-     * @return {?}
-     */
-    key => annoEnt[key]))
-        .filter((/**
-     * @param {?} annotation
-     * @return {?}
-     */
-    annotation => annotation.comments && annotation.comments.length > 0));
-}));
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class CommentSetComponent {
-    /**
-     * @param {?} store
-     * @param {?} commentService
-     * @param {?} renderService
-     * @param {?} toolbarEvents
-     */
-    constructor(store, commentService, renderService, toolbarEvents) {
-        this.store = store;
-        this.commentService = commentService;
-        this.renderService = renderService;
-        this.toolbarEvents = toolbarEvents;
-        this.pageHeights = [];
-        this.subscriptions = [];
-        this.clearSelection();
-    }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        this.comments$ = this.store.pipe(select(getCommentsArray));
-        this.annoEntities$ = this.store.pipe(select(getAnnotationEntities));
-        this.subscriptions.push(this.toolbarEvents.commentsPanelVisible.subscribe((/**
-         * @param {?} toggle
-         * @return {?}
-         */
-        toggle => {
-            this.redrawComments();
-            this.showCommentsPanel = toggle;
-        })));
-    }
-    /**
-     * @param {?} changes
-     * @return {?}
-     */
-    ngOnChanges(changes) {
-        if (changes.annotationSet) {
-            this.commentService.setCommentSet(this);
-        }
-    }
-    /**
-     * @return {?}
-     */
-    ngOnDestroy() {
-        if (this.subscriptions.length > 0) {
-            this.subscriptions.forEach((/**
-             * @param {?} subscription
-             * @return {?}
-             */
-            subscription => subscription.unsubscribe()));
-        }
-    }
-    /**
-     * @param {?} annotationId
-     * @return {?}
-     */
-    onSelect(annotationId) {
-        this.store.dispatch(new SelectedAnnotation(annotationId));
-    }
-    /**
-     * @param {?} comment
-     * @return {?}
-     */
-    onCommentDelete(comment) {
-        /** @type {?} */
-        const annotation = this.annotationSet.annotations.find((/**
-         * @param {?} anno
-         * @return {?}
-         */
-        anno => anno.id === comment.annotationId));
-        /** @type {?} */
-        const comments = [];
-        /** @type {?} */
-        const annot = Object.assign({}, annotation, { comments });
-        this.onAnnotationUpdate(annot);
-        this.redrawComments();
-    }
-    /**
-     * @return {?}
-     */
-    redrawComments() {
-        setTimeout((/**
-         * @return {?}
-         */
-        () => {
-            /** @type {?} */
-            const componentList = this.commentComponents.map((/**
-             * @param {?} comment
-             * @return {?}
-             */
-            comment => comment));
-            this.renderService.redrawComponents(componentList, this.pageHeights, this.rotate, this.zoom);
-        }), 0);
-    }
-    /**
-     * @param {?} payload
-     * @return {?}
-     */
-    onCommentUpdate(payload) {
-        /** @type {?} */
-        const annotation = this.annotationSet.annotations.find((/**
-         * @param {?} anno
-         * @return {?}
-         */
-        anno => anno.id === payload.comment.annotationId));
-        /** @type {?} */
-        const comments = [payload.comment];
-        /** @type {?} */
-        const tags = payload.tags;
-        /** @type {?} */
-        const annot = Object.assign({}, annotation, { comments,
-            tags });
-        this.onAnnotationUpdate(annot);
-    }
-    /**
-     * @param {?} annotation
-     * @return {?}
-     */
-    onAnnotationUpdate(annotation) {
-        this.store.dispatch(new SaveAnnotation(annotation));
-    }
-    /**
-     * @param {?} e
-     * @return {?}
-     */
-    onContainerClick(e) {
-        if (e.path && e.path[0] === this.container.nativeElement) {
-            this.clearSelection();
-        }
-    }
-    /**
-     * @return {?}
-     */
-    clearSelection() {
-        this.store.dispatch(new SelectedAnnotation({ annotationId: '', editable: false, selected: false }));
-    }
-    /**
-     * @return {?}
-     */
-    allCommentsSaved() {
-        this.commentService.allCommentsSaved();
-    }
-}
-CommentSetComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mv-comment-set',
-                template: "<div #container\n     [ngClass]=\"{ 'comments-panel comment-container': true, 'expanded': showCommentsPanel }\"\n     [style.height.px]=\"height\"\n     (click)=\"onContainerClick($event)\">\n  <ng-container *ngFor=\"let comment of (comments$ | async); let i = index;\">\n    <mv-anno-comment\n      [ngStyle]=\"showCommentsPanel ? {} : {'display':'none'}\"\n      #commentComponent\n      (commentClick)=\"onSelect($event)\"\n      (delete)=\"onCommentDelete($event)\"\n      (updated)=\"onCommentUpdate($event)\"\n      (changes)=\"allCommentsSaved()\"\n      [zoom]=\"zoom\"\n      [rotate]=\"rotate\"\n      [index]=\"i\"\n      [page]=\"comment.page\"\n      [comment]=\"comment\"\n      [annotation]=\"(annoEntities$ | async)[comment.annotationId]\"\n      (renderComments)=\"redrawComments()\">\n    </mv-anno-comment>\n  </ng-container>\n</div>\n"
-            }] }
-];
-/** @nocollapse */
-CommentSetComponent.ctorParameters = () => [
-    { type: Store },
-    { type: CommentService },
-    { type: CommentSetRenderService },
-    { type: ToolbarEventService }
-];
-CommentSetComponent.propDecorators = {
-    annotationSet: [{ type: Input }],
-    zoom: [{ type: Input }],
-    rotate: [{ type: Input }],
-    height: [{ type: Input }],
-    pageHeights: [{ type: Input }],
-    container: [{ type: ViewChild, args: ['container',] }],
-    commentComponents: [{ type: ViewChildren, args: ['commentComponent',] }]
-};
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
- */
-class ViewerEventService {
-    constructor() {
-        this.textHighlight = new Subject();
-        this.boxHighlight = new Subject();
-        this.ctxToolbarCleared = new Subject();
-        this.navigationEvent = new Subject();
-    }
-    /**
-     * @param {?} selectionData
-     * @return {?}
-     */
-    textSelected(selectionData) {
-        this.textHighlight.next(selectionData);
-    }
-    /**
-     * @param {?} selectionData
-     * @return {?}
-     */
-    boxSelected(selectionData) {
-        this.boxHighlight.next(selectionData);
-    }
-    /**
-     * @return {?}
-     */
-    clearCtxToolbar() {
-        this.ctxToolbarCleared.next();
-    }
-    /**
-     * @param {?} destination
-     * @return {?}
-     */
-    goToDestination(destination) {
-        this.navigationEvent.next(destination);
-    }
-}
-ViewerEventService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-/** @nocollapse */
-ViewerEventService.ctorParameters = () => [];
-/** @nocollapse */ ViewerEventService.ngInjectableDef = defineInjectable({ factory: function ViewerEventService_Factory() { return new ViewerEventService(); }, token: ViewerEventService, providedIn: "root" });
-
-/**
- * @fileoverview added by tsickle
- * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+class ViewerEventService {
+    constructor() {
+        this.textHighlight = new Subject();
+        this.boxHighlight = new Subject();
+        this.ctxToolbarCleared = new Subject();
+        this.navigationEvent = new Subject();
+    }
+    /**
+     * @param {?} selectionData
+     * @return {?}
+     */
+    textSelected(selectionData) {
+        this.textHighlight.next(selectionData);
+    }
+    /**
+     * @param {?} selectionData
+     * @return {?}
+     */
+    boxSelected(selectionData) {
+        this.boxHighlight.next(selectionData);
+    }
+    /**
+     * @return {?}
+     */
+    clearCtxToolbar() {
+        this.ctxToolbarCleared.next();
+    }
+    /**
+     * @param {?} destination
+     * @return {?}
+     */
+    goToDestination(destination) {
+        this.navigationEvent.next(destination);
+    }
+}
+ViewerEventService.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
+/** @nocollapse */
+ViewerEventService.ctorParameters = () => [];
+/** @nocollapse */ ViewerEventService.ngInjectableDef = defineInjectable({ factory: function ViewerEventService_Factory() { return new ViewerEventService(); }, token: ViewerEventService, providedIn: "root" });
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 class PdfViewerComponent {
     /**
@@ -3534,14 +2970,6 @@ class PdfViewerComponent {
              */
             toggle => {
                 this.showCommentsPanel = toggle;
-                if (toggle) {
-                    setTimeout((/**
-                     * @return {?}
-                     */
-                    () => {
-                        this.scrollTwo.nativeElement.scrollBy(0, this.viewerContainer.nativeElement.scrollTop);
-                    }));
-                }
             })));
             this.$subscription.add(this.viewerEvents.navigationEvent.subscribe((/**
              * @param {?} dest
@@ -3686,9 +3114,6 @@ class PdfViewerComponent {
     rotateDocument(rotation) {
         /** @type {?} */
         const pageNumber = this.pdfWrapper.getPageNumber();
-        if (this.commentsPanel) {
-            this.commentsPanel.container.nativeElement.style.height = 0;
-        }
         this.pdfWrapper.rotate(rotation);
         this.pdfWrapper.setPageNumber(pageNumber);
         this.rotation = (this.rotation + rotation) % 360;
@@ -3766,7 +3191,7 @@ class PdfViewerComponent {
 PdfViewerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mv-pdf-viewer',
-                template: "<mv-side-bar *ngIf=\"toolbarEvents.sidebarOpen\"\n             id=\"sidebarContainer\"\n             [url]=\"url\"\n             [zoom]=\"zoom\"\n             [rotate]=\"rotation\"\n             [outline]=\"documentOutline\"\n             [annotationsEnabled]=\"enableAnnotations\">\n</mv-side-bar>\n\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{'show-comments-panel': showCommentsPanel}\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\">\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n\n<div\n     class=\"pdfContainer\"\n     [ngStyle]=\"{ height: height }\"\n     [ngClass]=\"{ 'pdfContainer': true, hidden: errorMessage }\">\n\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    (scroll)=\"scrollTwo.scrollTop = viewerContainer.scrollTop\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"(showCommentsPanel || showIcpParticipantsList) && !(toolbarEvents.redactionMode | async)\"\n    [class.grabNDrag]=\"enableGrabNDrag\">\n\n    <div #pdfViewer\n         class=\"pdfViewer\"\n         mvCreateTextHighlight\n         [ngClass]=\"{ hidden: loadingDocument, highlightMode: highlightMode | async, drawMode: drawMode | async }\">\n    </div>\n\n    <mv-redactions *ngIf=\"(toolbarEvents.redactionMode | async); else annotationTemplate\"\n                   [zoom]=\"zoom\"\n                   [rotate]=\"rotation\"\n    ></mv-redactions>\n\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\">\n      </mv-metadata-layer>\n\n      <mv-bookmark-icons [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-bookmark-icons>\n    </ng-template>\n  </div>\n\n  <div #scrollTwo [ngClass]=\"{'comments': showCommentsPanel}\">\n    <mv-comment-set #commentsPanel\n                    *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                    [annotationSet]=\"annotationSet\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotation\"\n                    [height]=\"pdfViewer.offsetHeight\"\n                    [pageHeights]=\"pageHeights\">\n    </mv-comment-set>\n  </div>\n\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">Loading...{{ loadingDocumentProgress ? loadingDocumentProgress + '%' : '' }}</h3>\n  </div>\n</div>\n",
+                template: "<mv-side-bar *ngIf=\"toolbarEvents.sidebarOpen\"\n             id=\"sidebarContainer\"\n             [url]=\"url\"\n             [zoom]=\"zoom\"\n             [rotate]=\"rotation\"\n             [outline]=\"documentOutline\"\n             [annotationsEnabled]=\"enableAnnotations\">\n</mv-side-bar>\n<mv-comment-set-header\n  *ngIf=\"enableAnnotations\"\n  [ngClass]=\"{'show-comments-panel': showCommentsPanel}\"\n  [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n  (showCommentSummaryDialog)=\"toggleCommentsSummary()\">\n</mv-comment-set-header>\n<mv-participants-list></mv-participants-list>\n<div\n     class=\"pdfContainer\"\n     [ngStyle]=\"{ height: height }\"\n     [ngClass]=\"{ 'pdfContainer': true, hidden: errorMessage }\">\n  <div\n    #viewerContainer\n    mvGrabNDrag\n    [dragX]=\"viewerContainer\"\n    [dragEnabled]=\"enableGrabNDrag\"\n    id=\"viewerContainer\"\n    class=\"viewer-container\"\n    [class.annotations]=\"enableAnnotations\"\n    [class.show-comments-panel]=\"(showCommentsPanel || showIcpParticipantsList) && !(toolbarEvents.redactionMode | async)\"\n    [class.grabNDrag]=\"enableGrabNDrag\">\n    <div #pdfViewer\n         class=\"pdfViewer\"\n         mvCreateTextHighlight\n         [ngClass]=\"{ hidden: loadingDocument, highlightMode: highlightMode | async, drawMode: drawMode | async }\">\n    </div>\n    <mv-redactions *ngIf=\"(toolbarEvents.redactionMode | async); else annotationTemplate\"\n                   [zoom]=\"zoom\"\n                   [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer\n        *ngIf=\"enableAnnotations && annotationSet\"\n        [zoom]=\"zoom\"\n        [rotate]=\"rotation\">\n      </mv-metadata-layer>\n      <mv-bookmark-icons [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-bookmark-icons>\n    </ng-template>\n  </div>\n  <mv-comment-set [contentScrollTop]=\"viewerContainer.scrollTop\"\n                  *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                  [annotationSet]=\"annotationSet\"\n                  [zoom]=\"zoom\"\n                  [rotate]=\"rotation\"\n                  [height]=\"pdfViewer.offsetHeight\"\n                  [pageHeights]=\"pageHeights\">\n  </mv-comment-set>\n  <div class=\"loadingMessage\" *ngIf=\"loadingDocument\">\n    <h3 class=\"govuk-heading-m\">Loading...{{ loadingDocumentProgress ? loadingDocumentProgress + '%' : '' }}</h3>\n  </div>\n</div>\n",
                 encapsulation: ViewEncapsulation.None
             }] }
 ];
@@ -3795,8 +3220,6 @@ PdfViewerComponent.propDecorators = {
     caseId: [{ type: Input }],
     viewerContainer: [{ type: ViewChild, args: ['viewerContainer',] }],
     pdfViewer: [{ type: ViewChild, args: ['pdfViewer',] }],
-    commentsPanel: [{ type: ViewChild, args: ['commentsPanel',] }],
-    scrollTwo: [{ type: ViewChild, args: ['scrollTwo',] }],
     searchBarHidden: [{ type: Input }]
 };
 
@@ -4168,111 +3591,387 @@ class AnnotationApiService {
      * @param {?} documentId
      * @return {?}
      */
-    getAnnotationSet(documentId) {
-        // todo add model
+    getAnnotationSet(documentId) {
+        // todo add model
+        /** @type {?} */
+        const fixedUrl = `${this.annotationSetsFullUrl}/filter?documentId=${documentId}`;
+        return this.httpClient
+            .get(fixedUrl, { observe: 'response', withCredentials: true });
+    }
+    /**
+     * @param {?} body
+     * @return {?}
+     */
+    postAnnotationSet(body) {
+        return this.httpClient
+            .post(this.annotationSetsFullUrl, body, { observe: 'response', withCredentials: true })
+            .pipe(map((/**
+         * @param {?} response
+         * @return {?}
+         */
+        response => response.body)), catchError((/**
+         * @return {?}
+         */
+        () => [])));
+    }
+    /**
+     * @param {?} annotationSet
+     * @return {?}
+     */
+    getComments(annotationSet) {
+        return annotationSet
+            .pipe(map(this.sortAnnotations), map(this.extractComments));
+    }
+    /**
+     * Sort the annotations in the response by page and then y position of their first rectangle
+     * @private
+     * @param {?} r
+     * @return {?}
+     */
+    sortAnnotations(r) {
+        return r.annotations.sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        (a, b) => a.page !== b.page ? a.page - b.page : a.rectangles[0].y - b.rectangles[0].y));
+    }
+    /**
+     * @private
+     * @param {?} annotations
+     * @return {?}
+     */
+    extractComments(annotations) {
+        return [].concat(...annotations.map((/**
+         * @param {?} a
+         * @return {?}
+         */
+        a => a.comments)));
+    }
+    /**
+     * @param {?} annotationId
+     * @return {?}
+     */
+    deleteAnnotation(annotationId) {
+        /** @type {?} */
+        const url = `${this.annotationFullsUrl}/${annotationId}`;
+        return this.httpClient
+            .delete(url, { observe: 'response', withCredentials: true })
+            .pipe(map((/**
+         * @param {?} response
+         * @return {?}
+         */
+        response => response.body)));
+    }
+    /**
+     * @param {?} annotation
+     * @return {?}
+     */
+    postAnnotation(annotation) {
+        return this.httpClient
+            .post(this.annotationFullsUrl, annotation, { observe: 'response', withCredentials: true })
+            .pipe(map((/**
+         * @param {?} response
+         * @return {?}
+         */
+        response => response.body)));
+    }
+    /**
+     * @return {?}
+     */
+    get annotationSetsFullUrl() {
+        return this.annotationApiUrl + this.annotationSetBaseUrl;
+    }
+    /**
+     * @return {?}
+     */
+    get annotationFullsUrl() {
+        return this.annotationApiUrl + this.annotationBaseUrl;
+    }
+}
+AnnotationApiService.decorators = [
+    { type: Injectable }
+];
+/** @nocollapse */
+AnnotationApiService.ctorParameters = () => [
+    { type: HttpClient }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+// TODO: replace by NgRx
+class CommentService {
+    constructor() {
+        this.unsavedChanges = new Subject();
+    }
+    /**
+     * @param {?} commentSetComponent
+     * @return {?}
+     */
+    setCommentSet(commentSetComponent) {
+        this.commentSetComponent = commentSetComponent;
+    }
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    onCommentChange(changes) {
+        this.unsavedChanges.next(changes);
+    }
+    /**
+     * @return {?}
+     */
+    getUnsavedChanges() {
+        return this.unsavedChanges.asObservable();
+    }
+    /**
+     * @param {?} annotation
+     * @return {?}
+     */
+    hasUnsavedComments(annotation) {
+        if (annotation.comments.length > 0) {
+            /** @type {?} */
+            const comment = this.getComment(annotation);
+            return comment.hasUnsavedChanges;
+        }
+        return false;
+    }
+    /**
+     * @param {?} annotation
+     * @param {?} hasUnsavedChanges
+     * @return {?}
+     */
+    updateUnsavedCommentsStatus(annotation, hasUnsavedChanges) {
         /** @type {?} */
-        const fixedUrl = `${this.annotationSetsFullUrl}/filter?documentId=${documentId}`;
-        return this.httpClient
-            .get(fixedUrl, { observe: 'response', withCredentials: true });
+        const comment = this.getComment(annotation);
+        comment.hasUnsavedChanges = hasUnsavedChanges;
+        this.allCommentsSaved();
     }
     /**
-     * @param {?} body
+     * @param {?} annotation
      * @return {?}
      */
-    postAnnotationSet(body) {
-        return this.httpClient
-            .post(this.annotationSetsFullUrl, body, { observe: 'response', withCredentials: true })
-            .pipe(map((/**
-         * @param {?} response
-         * @return {?}
-         */
-        response => response.body)), catchError((/**
+    getComment(annotation) {
+        return this.commentSetComponent.commentComponents
+            .find((/**
+         * @param {?} c
          * @return {?}
          */
-        () => [])));
+        c => c.comment.annotationId === annotation.comments[0].annotationId));
     }
     /**
-     * @param {?} annotationSet
      * @return {?}
      */
-    getComments(annotationSet) {
-        return annotationSet
-            .pipe(map(this.sortAnnotations), map(this.extractComments));
+    resetCommentSet() {
+        this.commentSetComponent = null;
     }
     /**
-     * Sort the annotations in the response by page and then y position of their first rectangle
-     * @private
-     * @param {?} r
      * @return {?}
      */
-    sortAnnotations(r) {
-        return r.annotations.sort((/**
-         * @param {?} a
-         * @param {?} b
+    allCommentsSaved() {
+        this.onCommentChange(this.commentSetComponent.commentComponents.some((/**
+         * @param {?} comment
          * @return {?}
          */
-        (a, b) => a.page !== b.page ? a.page - b.page : a.rectangles[0].y - b.rectangles[0].y));
+        comment => comment.hasUnsavedChanges === true)));
     }
-    /**
-     * @private
-     * @param {?} annotations
-     * @return {?}
-     */
-    extractComments(annotations) {
-        return [].concat(...annotations.map((/**
-         * @param {?} a
+}
+CommentService.decorators = [
+    { type: Injectable }
+];
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const getTagsRootState = createSelector(getMVState, (/**
+ * @param {?} state
+ * @return {?}
+ */
+(state) => state.tags));
+/** @type {?} */
+const getTagEntities = createSelector(getTagsRootState, getTagNameEnt);
+/** @type {?} */
+const getTagFilters = createSelector(getTagsRootState, getFilters);
+/** @type {?} */
+const getTagFiltered = createSelector(getTagsRootState, getFilteredComments);
+/** @type {?} */
+const getFilteredPageEntities = createSelector(getTagsRootState, getFilteredPageEnt);
+/** @type {?} */
+const getAllTagsArr = createSelector(getTagEntities, (/**
+ * @param {?} tagEnt
+ * @return {?}
+ */
+(tagEnt) => Object.keys(tagEnt).map((/**
+ * @param {?} key
+ * @return {?}
+ */
+key => {
+    return {
+        key,
+        length: Object.keys(tagEnt[key]).length
+    };
+}))));
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const getAnnotationsSetState = createSelector(getMVState, (/**
+ * @param {?} state
+ * @return {?}
+ */
+(state) => state.annotations));
+/** @type {?} */
+const getAnnotationEntities = createSelector(getAnnotationsSetState, getAnnoEnt);
+/** @type {?} */
+const getSet = createSelector(getAnnotationsSetState, getAnnoSet);
+/** @type {?} */
+const getDocumentIdSetId = createSelector(getSet, (/**
+ * @param {?} annoSet
+ * @return {?}
+ */
+(annoSet) => {
+    return {
+        documentId: annoSet.documentId,
+        annotationSetId: annoSet.id
+    };
+}));
+/** @type {?} */
+const getAnnotationSet = createSelector(getAnnotationEntities, getSet, (/**
+ * @param {?} entities
+ * @param {?} set
+ * @return {?}
+ */
+(entities, set) => {
+    return Object.assign({}, set, { annotations: Object.keys(entities).map((/**
+         * @param {?} key
          * @return {?}
          */
-        a => a.comments)));
-    }
-    /**
-     * @param {?} annotationId
-     * @return {?}
-     */
-    deleteAnnotation(annotationId) {
+        key => entities[key])) });
+}));
+/** @type {?} */
+const getSelectedAnnotation = createSelector(getAnnotationsSetState, getSelectedAnno);
+/** @type {?} */
+const getCommentEntities = createSelector(getAnnotationsSetState, getCommentEnts);
+/** @type {?} */
+const getPageEntities = createSelector(getAnnotationsSetState, getAnnoPageEnt);
+/** @type {?} */
+const getComponentSearchQueries = createSelector(getAnnotationsSetState, commentSearchQ);
+/** @type {?} */
+const getComponentSearchText = createSelector(getComponentSearchQueries, (/**
+ * @param {?} queries
+ * @return {?}
+ */
+(queries) => queries.commentSearch));
+/** @type {?} */
+const getCommentSummaryFilters = createSelector(getAnnotationsSetState, getSummaryFilters);
+/** @type {?} */
+const getAnnoPerPage = createSelector(getPages, getPageEntities, getFilteredPageEntities, (/**
+ * @param {?} pages
+ * @param {?} pageEnt
+ * @param {?} filteredPageEnt
+ * @return {?}
+ */
+(pages, pageEnt, filteredPageEnt) => {
+    /** @type {?} */
+    const isFiltered = !!Object.keys(filteredPageEnt).length;
+    /** @type {?} */
+    const entities = isFiltered ? filteredPageEnt : pageEnt;
+    if (pages) {
         /** @type {?} */
-        const url = `${this.annotationFullsUrl}/${annotationId}`;
-        return this.httpClient
-            .delete(url, { observe: 'response', withCredentials: true })
-            .pipe(map((/**
-         * @param {?} response
+        const arr = [];
+        Object.keys(pages).forEach((/**
+         * @param {?} key
          * @return {?}
          */
-        response => response.body)));
+        key => {
+            arr.push({
+                anno: entities[key] ? entities[key] : [],
+                styles: pages[key].styles
+            });
+        }));
+        return arr;
     }
-    /**
-     * @param {?} annotation
-     * @return {?}
-     */
-    postAnnotation(annotation) {
-        return this.httpClient
-            .post(this.annotationFullsUrl, annotation, { observe: 'response', withCredentials: true })
-            .pipe(map((/**
-         * @param {?} response
+}));
+/** @type {?} */
+const getCommentsArray = createSelector(getCommentEntities, getPages, getAnnotationEntities, getTagFiltered, (/**
+ * @param {?} commentEnts
+ * @param {?} pages
+ * @param {?} annoEnts
+ * @param {?} filtered
+ * @return {?}
+ */
+(commentEnts, pages, annoEnts, filtered) => {
+    if (commentEnts && annoEnts && pages[1]) {
+        /** @type {?} */
+        const isFiltered = !!Object.keys(filtered).length;
+        /** @type {?} */
+        const com = isFiltered ? filtered : commentEnts;
+        return Object.keys(com).map((/**
+         * @param {?} key
          * @return {?}
          */
-        response => response.body)));
+        key => {
+            /** @type {?} */
+            const page = annoEnts[key].page;
+            return Object.assign({}, commentEnts[key], { page,
+                pages });
+        }));
     }
-    /**
-     * @return {?}
-     */
-    get annotationSetsFullUrl() {
-        return this.annotationApiUrl + this.annotationSetBaseUrl;
+}));
+/** @type {?} */
+const getCommentSummary = createSelector(getCommentsArray, getCommentSummaryFilters, (/**
+ * @param {?=} commentSummary
+ * @param {?=} filters
+ * @return {?}
+ */
+(commentSummary = [], filters) => {
+    /** @type {?} */
+    const comments = StoreUtils.filterCommentsSummary(commentSummary, filters.filters);
+    if (comments.length) {
+        return comments.map((/**
+         * @param {?} comment
+         * @return {?}
+         */
+        (comment) => {
+            return {
+                page: comment.page,
+                user: comment.createdByDetails.forename.concat(' ').concat(comment.createdByDetails.surname),
+                date: moment(comment.lastModifiedDate).format('D MMMM YYYY'),
+                tags: comment.tags,
+                comment: comment.content
+            };
+        }));
     }
-    /**
+    return [''];
+}));
+/** @type {?} */
+const getFilteredAnnotations = createSelector(getAnnotationEntities, getTagFiltered, (/**
+ * @param {?} annoEnt
+ * @param {?} filters
+ * @return {?}
+ */
+(annoEnt, filters) => {
+    /** @type {?} */
+    const isFiltered = !!Object.keys(filters).length;
+    /** @type {?} */
+    const anno = isFiltered ? filters : annoEnt;
+    return Object.keys(anno).map((/**
+     * @param {?} key
      * @return {?}
      */
-    get annotationFullsUrl() {
-        return this.annotationApiUrl + this.annotationBaseUrl;
-    }
-}
-AnnotationApiService.decorators = [
-    { type: Injectable }
-];
-/** @nocollapse */
-AnnotationApiService.ctorParameters = () => [
-    { type: HttpClient }
-];
+    key => annoEnt[key]))
+        .filter((/**
+     * @param {?} annotation
+     * @return {?}
+     */
+    annotation => annotation.comments && annotation.comments.length > 0));
+}));
 
 /**
  * @fileoverview added by tsickle
@@ -4814,7 +4513,7 @@ class MainToolbarComponent {
 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 id=\"mvMoreOptionsBtn\" class=\"mv-button mv-toolbar__menu-button--more-options\"\n                  [class.mv-toolbar__menu-button--more-options__hidden]=\"mvToolbar.offsetWidth >= allButtonsWidth\" aria-pressed=\"false\"\n                  (click)=\"toggleMoreOptions()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n            <span>More options</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\" [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\">\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n\n          <button *ngIf=\"toolbarButtons.showSidebar\" id=\"mvIndexBtn\" title=\"Index\" data-l10n-id=\"index\" #mvIndexBtn\n                  class=\"mv-button mv-toolbar__menu-button--index\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleSideBar()\">\n            <span>Index</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showDrawButton\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDrawBtn\"\n            #mvDrawBtn class=\"mv-button mv-toolbar__menu-button--draw\" title=\"Draw a box\" tabindex=\"-1\"\n            [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\" (click)=\"onClickDrawToggle()\">\n            <span data-l10n-id=\"draw_label\">Draw a box</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showHighlightButton\" [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\" #mvHighlightBtn class=\"mv-button mv-toolbar__menu-button--highlight\" title=\"Highlight\"\n            tabindex=\"-1\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle()\" data-l10n-id=\"toggleHighlightButton\">\n            <span data-l10n-id=\"highlight_label\">Highlight</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div id=\"mvPageBtn\" #mvPageBtn class=\"mv-toolbar__menu-button--page\" aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\"\n              [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\">\n              <span>Page</span>\n\n              <button id=\"mvUpBtn\" [disabled]=\"pageNumber === 1\" title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\" data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"><span></span></button>\n              <button id=\"mvDownBtn\" [disabled]=\"pageNumber === pageCount\" title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\" data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"><span></span></button>\n\n              <input type=\"number\" id=\"pageNumber\" class=\"hmcts-toolbar-input govuk-input--width-2\" title=\"Page Number\"\n                value=\"1\" size=\"4\" min=\"1\" [value]=\"pageNumber\" aria-label=\"page number\" tabindex=\"0\"\n                data-l10n-id=\"page\" (change)=\"onPageNumberInputChange(pageNumberInput.value)\" #pageNumberInput>\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div id=\"mvZoomBtn\" #mvZoomBtn class=\"mv-toolbar__menu-button--zoom\" aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\"\n              [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\">\n              <span>Zoom</span>\n              <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 0.1\" id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\" title=\"Zoom Out\" data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"><span></span></button>\n              <select id=\"scaleSelect\" class=\"hmcts-toolbar-select\" title=\"Zoom\" tabindex=\"0\" data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\" aria-label=\"zoom\">\n                <option #zoomSelect id=\"customScaleOption\" title=\"\" [value]=\"toolbarEvents.zoomValueSubject.value\">\n                  {{(toolbarEvents.zoomValueSubject.value) * 100 | number: '1.0-0'}}%</option>\n                <option *ngFor=\"let zoomScale of zoomScales\" title=\"\" [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale*100\">{{ zoomScale *100 }}%\n                </option>\n              </select>\n\n              <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 5\" id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\" (click)=\"stepZoom(0.1)\" title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"><span></span></button>\n            </div>\n          </ng-container>\n\n          <div *ngIf=\"toolbarButtons.showRotate\" id=\"mvRotateBtn\" #mvRotateBtn class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\">\n            <button id=\"mvRotateLeftBtn\" class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\" data-l10n-id=\"page_rotate_ccw\" (click)=\"rotate(270)\"><span></span>\n            </button>\n            <button id=\"mvRotateRightBtn\" class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\" data-l10n-id=\"page_rotate_cw\" (click)=\"rotate(90)\"><span></span>\n            </button>\n            <span>Rotate</span>\n          </div>\n\n          <button *ngIf=\"toolbarButtons.showSearchBar\" [disabled]=\"icpEnabled\" id=\"mvSearchBtn\" #mvSearchBtn\n                  title=\"Search\" data-l10n-id=\"searchbar\" class=\"mv-button mv-toolbar__menu-button--search\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleSearchBar()\">\n            <span data-l10n-id=\"search_label\">Search</span>\n          </button>\n\n          <button *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n                  [disabled]=\"icpEnabled || !contentType || redactionEnabled\" id=\"mvPresentBtn\" #mvPresentBtn\n                  class=\"mv-button mv-toolbar__menu-button--present\" title=\"In-Court Presentation Mode\"\n                  data-l10n-id=\"icpMode_label\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\" aria-pressed=\"false\"\n                  (click)=\"togglePresentBar()\"><span data-l10n-id=\"icpMode_label\">Present</span>\n          </button>\n\n          <button *ngIf=\"enableRedactions && toolbarButtons.showRedact\" [disabled]=\"icpEnabled\" id=\"mvRedactBtn\"\n                  #mvRedactBtn title=\"Redact\" data-l10n-id=\"redact\" class=\"mv-button mv-toolbar__menu-button--redact\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleRedactBar()\">\n            <span>Redact</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showGrabNDragButton\" [disabled]=\"icpEnabled\" id=\"mvGrabBtn\" #mvGrabBtn\n                  class=\"mv-button mv-toolbar__menu-button--grab\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleGrabNDrag()\">\n            <span>Grab and drag</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showDownload\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDownloadBtn\"\n                  #mvDownloadBtn class=\"mv-button mv-toolbar__menu-button--download\" title=\"Download\" data-l10n-id=\"download\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\" aria-pressed=\"false\"\n                  (click)=\"downloadFile()\">\n            <span>Download</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showPrint\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvPrintBtn\"\n                  #mvPrintBtn title=\"Print\" data-l10n-id=\"print\" class=\"mv-button mv-toolbar__menu-button--print\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\" aria-pressed=\"false\"\n                  (click)=\"printFile()\">\n            <span>Print</span>\n          </button>\n\n          <button *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\" [disabled]=\"redactionEnabled\"\n                  id=\"mvCommentsBtn\" #mvCommentsBtn class=\"mv-button mv-toolbar__menu-button--comments\" title=\"Comments\"\n                  data-l10n-id=\"comments\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleCommentsPanel()\">\n            <span>Comments</span>\n          </button>\n        </ng-template>\n      </div>\n      <mv-search-bar></mv-search-bar>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\">\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                template: "<div class=\"toolbar\">\n  <div id=\"toolbarContainer\">\n    <div class=\"mv-toolbar__container\">\n      <div #mvToolbar class=\"mv-toolbar\" [class.notSupported]=\"!contentType\">\n        <!-- The mvToolbarMain div contains all toolbar buttons except the \"More options\" button. This allows for calculation of the available space to display buttons -->\n        <div id=\"mvToolbarMain\" class=\"mv-toolbar-main\" #mvToolbarMain>\n          <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n        </div>\n        <!-- The mvToolbarMoreOptions div contains the \"More options\" toolbar button (and the overlay template for the dropdown menu).\n            The space occupied by the button (if visible) is excluded from the toolbar space available calculation -->\n        <div id=\"mvToolbarMoreOptions\" class=\"mv-toolbar-more-options\">\n          <button id=\"mvMoreOptionsBtn\" class=\"mv-button mv-toolbar__menu-button--more-options\"\n                  [class.mv-toolbar__menu-button--more-options__hidden]=\"mvToolbar.offsetWidth >= allButtonsWidth\" aria-pressed=\"false\"\n                  (click)=\"toggleMoreOptions()\" cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\">\n            <span>More options</span>\n          </button>\n          <!-- This template displays the overlay content for the dropdown menu and is connected to the \"More options\" button -->\n          <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayOpen]=\"isDropdownMenuOpen\" [cdkConnectedOverlayPositions]=\"dropdownMenuPositions\">\n            <div class=\"dropdown-menu\" #dropdownMenu tabindex=\"0\">\n              <ng-container *ngTemplateOutlet=\"menuItems\"></ng-container>\n            </div>\n          </ng-template>\n        </div>\n      </div>\n\n      <div id=\"mvMenuItems\" #mvMenuItems>\n        <ng-template #menuItems>\n\n          <button *ngIf=\"toolbarButtons.showSidebar\" id=\"mvIndexBtn\" title=\"Index\" data-l10n-id=\"index\" #mvIndexBtn\n                  class=\"mv-button mv-toolbar__menu-button--index\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvIndexBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvIndexBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleSideBar(); isDropdownMenuOpen = false\">\n            <span>Index</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showDrawButton\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDrawBtn\"\n            #mvDrawBtn class=\"mv-button mv-toolbar__menu-button--draw\" title=\"Draw a box\" tabindex=\"-1\"\n            [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDrawBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDrawBtn']\"\n            [class.toggled]=\"toolbarEvents.drawModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n            data-l10n-id=\"toggleDrawButton\" (click)=\"onClickDrawToggle(); isDropdownMenuOpen = false\">\n            <span data-l10n-id=\"draw_label\">Draw a box</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showHighlightButton\" [disabled]=\"icpEnabled || redactionEnabled\"\n            id=\"mvHighlightBtn\" #mvHighlightBtn class=\"mv-button mv-toolbar__menu-button--highlight\" title=\"Highlight\"\n            tabindex=\"-1\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvHighlightBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvHighlightBtn']\"\n            [class.toggled]=\"toolbarEvents.highlightModeSubject | async\" aria-hidden=\"true\" aria-pressed=\"false\"\n            (click)=\"onClickHighlightToggle(); isDropdownMenuOpen = false\" data-l10n-id=\"toggleHighlightButton\">\n            <span data-l10n-id=\"highlight_label\">Highlight</span>\n          </button>\n\n          <ng-container *ngIf=\"toolbarButtons.showNavigation\">\n            <div id=\"mvPageBtn\" #mvPageBtn class=\"mv-toolbar__menu-button--page\" aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPageBtn']\"\n              [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPageBtn']\">\n              <span>Page</span>\n\n              <button id=\"mvUpBtn\" [disabled]=\"pageNumber === 1\" title=\"Previous Page\"\n                class=\"mv-toolbar__menu-button--up button-image\" data-l10n-id=\"previous\"\n                (click)=\"decreasePageNumber()\"><span></span></button>\n              <button id=\"mvDownBtn\" [disabled]=\"pageNumber === pageCount\" title=\"Next Page\"\n                class=\"mv-toolbar__menu-button--down button-image\" data-l10n-id=\"next\"\n                (click)=\"increasePageNumber()\"><span></span></button>\n\n              <input type=\"number\" id=\"pageNumber\" class=\"hmcts-toolbar-input govuk-input--width-2\" title=\"Page Number\"\n                value=\"1\" size=\"4\" min=\"1\" [value]=\"pageNumber\" aria-label=\"page number\" tabindex=\"0\"\n                data-l10n-id=\"page\" (change)=\"onPageNumberInputChange(pageNumberInput.value)\" #pageNumberInput>\n              <span id=\"numPages\" class=\"toolbarLabel\">/ {{ pageCount }}</span>\n            </div>\n          </ng-container>\n\n          <ng-container *ngIf=\"toolbarButtons.showZoom\">\n            <div id=\"mvZoomBtn\" #mvZoomBtn class=\"mv-toolbar__menu-button--zoom\" aria-pressed=\"false\"\n              [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvZoomBtn']\"\n              [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvZoomBtn']\">\n              <span>Zoom</span>\n              <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 0.1\" id=\"mvMinusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-out button-image\" title=\"Zoom Out\" data-l10n-id=\"zoom_out\"\n                (click)=\"stepZoom(-0.1)\"><span></span></button>\n              <select id=\"scaleSelect\" class=\"hmcts-toolbar-select\" title=\"Zoom\" tabindex=\"0\" data-l10n-id=\"zoom\"\n                (change)=\"zoom($event.target.value)\" aria-label=\"zoom\">\n                <option #zoomSelect id=\"customScaleOption\" title=\"\" [value]=\"toolbarEvents.zoomValueSubject.value\">\n                  {{(toolbarEvents.zoomValueSubject.value) * 100 | number: '1.0-0'}}%</option>\n                <option *ngFor=\"let zoomScale of zoomScales\" title=\"\" [value]=\"zoomScale\"\n                  [attr.data-l10n-id]=\"'page_scale_percent_' + zoomScale*100\">{{ zoomScale *100 }}%\n                </option>\n              </select>\n\n              <button [disabled]=\"toolbarEvents.zoomValueSubject.value == 5\" id=\"mvPlusBtn\"\n                class=\"mv-toolbar__menu-button--zoom-in button-image\" (click)=\"stepZoom(0.1)\" title=\"Zoom In\"\n                data-l10n-id=\"zoom_in\"><span></span></button>\n            </div>\n          </ng-container>\n\n          <div *ngIf=\"toolbarButtons.showRotate\" id=\"mvRotateBtn\" #mvRotateBtn class=\"mv-toolbar__menu-button--rotate\"\n            aria-pressed=\"false\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRotateBtn']\"\n            [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRotateBtn']\">\n            <button id=\"mvRotateLeftBtn\" class=\"mv-toolbar__menu-button--rotate_left button-image\"\n              title=\"Rotate Counterclockwise\" data-l10n-id=\"page_rotate_ccw\" (click)=\"rotate(270)\"><span></span>\n            </button>\n            <button id=\"mvRotateRightBtn\" class=\"mv-toolbar__menu-button--rotate_right button-image\"\n              title=\"Rotate Clockwise\" data-l10n-id=\"page_rotate_cw\" (click)=\"rotate(90)\"><span></span>\n            </button>\n            <span>Rotate</span>\n          </div>\n\n          <button *ngIf=\"toolbarButtons.showSearchBar\" [disabled]=\"icpEnabled\" id=\"mvSearchBtn\" #mvSearchBtn\n                  title=\"Search\" data-l10n-id=\"searchbar\" class=\"mv-button mv-toolbar__menu-button--search\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvSearchBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvSearchBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleSearchBar(); isDropdownMenuOpen = false\">\n            <span data-l10n-id=\"search_label\">Search</span>\n          </button>\n\n          <button *ngIf=\"enableICP && toolbarButtons.showPresentationMode && isPdf()\"\n                  [disabled]=\"icpEnabled || !contentType || redactionEnabled\" id=\"mvPresentBtn\" #mvPresentBtn\n                  class=\"mv-button mv-toolbar__menu-button--present\" title=\"In-Court Presentation Mode\"\n                  data-l10n-id=\"icpMode_label\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPresentBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPresentBtn']\" aria-pressed=\"false\"\n                  (click)=\"togglePresentBar(); isDropdownMenuOpen = false\"><span data-l10n-id=\"icpMode_label\">Present</span>\n          </button>\n\n          <button *ngIf=\"enableRedactions && toolbarButtons.showRedact\" [disabled]=\"icpEnabled\" id=\"mvRedactBtn\"\n                  #mvRedactBtn title=\"Redact\" data-l10n-id=\"redact\" class=\"mv-button mv-toolbar__menu-button--redact\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvRedactBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvRedactBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleRedactBar(); isDropdownMenuOpen = false\">\n            <span>Redact</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showGrabNDragButton\" [disabled]=\"icpEnabled\" id=\"mvGrabBtn\" #mvGrabBtn\n                  class=\"mv-button mv-toolbar__menu-button--grab\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvGrabBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvGrabBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleGrabNDrag(); isDropdownMenuOpen = false\">\n            <span>Grab and drag</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showDownload\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvDownloadBtn\"\n                  #mvDownloadBtn class=\"mv-button mv-toolbar__menu-button--download\" title=\"Download\" data-l10n-id=\"download\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvDownloadBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvDownloadBtn']\" aria-pressed=\"false\"\n                  (click)=\"downloadFile(); isDropdownMenuOpen = false\">\n            <span>Download</span>\n          </button>\n\n          <button *ngIf=\"toolbarButtons.showPrint\" [disabled]=\"icpEnabled || redactionEnabled\" id=\"mvPrintBtn\"\n                  #mvPrintBtn title=\"Print\" data-l10n-id=\"print\" class=\"mv-button mv-toolbar__menu-button--print\"\n                  [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvPrintBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvPrintBtn']\" aria-pressed=\"false\"\n                  (click)=\"printFile(); isDropdownMenuOpen = false\">\n            <span>Print</span>\n          </button>\n\n          <button *ngIf=\"enableAnnotations && toolbarButtons.showCommentSummary\" [disabled]=\"redactionEnabled\"\n                  id=\"mvCommentsBtn\" #mvCommentsBtn class=\"mv-button mv-toolbar__menu-button--comments\" title=\"Comments\"\n                  data-l10n-id=\"comments\" [class.button-hidden-on-toolbar]=\"mvToolbarMain.offsetWidth < widthRequiredForBtn['mvCommentsBtn']\"\n                  [class.button-hidden-on-dropdown]=\"mvToolbarMain.offsetWidth >= widthRequiredForBtn['mvCommentsBtn']\" aria-pressed=\"false\"\n                  (click)=\"toggleCommentsPanel(); isDropdownMenuOpen = false\">\n            <span>Comments</span>\n          </button>\n        </ng-template>\n      </div>\n      <mv-search-bar></mv-search-bar>\n    </div>\n\n    <div id=\"loadingBar\">\n      <div class=\"progress\">\n        <div class=\"glimmer\">\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n"
             }] }
 ];
 /** @nocollapse */
@@ -4958,11 +4657,17 @@ class SearchBarComponent {
     toggleAdvancedSearch() {
         this.advancedSearchVisible = !this.advancedSearchVisible;
     }
+    /**
+     * @return {?}
+     */
+    toggleSearchBar() {
+        this.toolbarEvents.searchBarHidden.next(!this.toolbarEvents.searchBarHidden.getValue());
+    }
 }
 SearchBarComponent.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-1\"\n        type=\"text\" aria-label=\"Find in document\" #findInput [(ngModel)]=\"searchText\" (keydown.escape)=\"onEscapeKeyPress($event)\" (keydown.enter)=\"onEnterKeyPress($event)\" title=\"Find in document\"\n        placeholder=\"Find in document\u2026\" tabindex=\"0\" data-l10n-id=\"find_input\" />\n      <button class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\" data-module=\"govuk-button\"\n        (click)=\"search()\">\n        Search\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span id=\"findResultsCount\" class=\"govuk-!-display-inline-block govuk-!-margin-right-4\">{{resultsText}}</span>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\" title=\"Find the previous occurrence of the phrase\" data-l10n-id=\"find_previous\">Prev</a>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\" data-l10n-id=\"find_next\">Next</a>\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"toggleAdvancedSearch()\" title=\"Advanced\"\n        data-l10n-id=\"find_advanced\">Advanced</a>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\" *ngIf=\"advancedSearchVisible\">\n    <div class=\"govuk-grid-column-full\">\n      <div class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findHighlightAll\" name=\"findHighlightAll\" type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\" [checked]=\"highlightAll\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findHighlightAll\" data-l10n-id=\"find_highlight\">\n                Highlight all (instances of matches)\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findMatchCase\" name=\"findMatchCase\" type=\"checkbox\"\n                (change)=\"matchCase = !matchCase; search()\" [checked]=\"matchCase\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findMatchCase\"\n                data-l10n-id=\"find_match_case_label\">\n                Match text (exact words)\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findEntireWord\" name=\"findMatchCase\" type=\"checkbox\"\n                (change)=\"wholeWord = !wholeWord; search()\" [checked]=\"wholeWord\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findEntireWord\"\n                data-l10n-id=\"find_entire_word_label\">\n                Match sentence (strings of words)\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>"
+                template: "<div class=\"searchbar govuk-!-padding-3\" [hidden]=\"toolbarEvents.searchBarHidden | async\">\n  <div class=\"govuk-grid-row\">\n    <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button searchbar-button--close\" title=\"Close Search\" data-l10n-id=\"mvRedactBtn\"\n      (click)=\"toggleSearchBar()\">\n    </button>\n    <div class=\"govuk-grid-column-full\">\n      <input class=\"govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-1\"\n        type=\"text\" aria-label=\"Find in document\" #findInput [(ngModel)]=\"searchText\" (keydown.escape)=\"onEscapeKeyPress($event)\" (keydown.enter)=\"onEnterKeyPress($event)\" title=\"Find in document\"\n        placeholder=\"Find in document\u2026\" tabindex=\"0\" data-l10n-id=\"find_input\" />\n      <button class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\" data-module=\"govuk-button\"\n        (click)=\"search()\">\n        Search\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span id=\"findResultsCount\" class=\"govuk-!-display-inline-block govuk-!-margin-right-4\">{{resultsText}}</span>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\" title=\"Find the previous occurrence of the phrase\" data-l10n-id=\"find_previous\">Prev</a>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\" data-l10n-id=\"find_next\">Next</a>\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"toggleAdvancedSearch()\" title=\"Advanced\"\n        data-l10n-id=\"find_advanced\">Advanced</a>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\" *ngIf=\"advancedSearchVisible\">\n    <div class=\"govuk-grid-column-full\">\n      <div class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findHighlightAll\" name=\"findHighlightAll\" type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\" [checked]=\"highlightAll\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findHighlightAll\" data-l10n-id=\"find_highlight\">\n                Highlight all\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"
             }] }
 ];
 /** @nocollapse */
@@ -5092,6 +4797,12 @@ class RedactionToolbarComponent {
     redact() {
         this.toolbarEventService.applyRedactionToDocument();
     }
+    /**
+     * @return {?}
+     */
+    toggleRedactBar() {
+        this.toolbarEventService.toggleRedactionMode();
+    }
     /**
      * @return {?}
      */
@@ -5102,7 +4813,7 @@ class RedactionToolbarComponent {
 RedactionToolbarComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mv-redaction-toolbar',
-                template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">Redaction options</label>\n  <button id=\"toggleDrawButton\" class=\"mv-button redaction-button--draw\" title=\"Draw a box\"\n    data-l10n-id=\"toggleDrawButton\" (click)=\"toggleDrawMode()\">\n    <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n  </button>\n\n  <button *ngIf=\"toolbarButtons.showHighlightButton\" id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\" aria-pressed=\"false\" title=\"Redact text\"\n    data-l10n-id=\"toggleTextRedactionButton\" (click)=\"toggleTextRedactionMode()\">\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvClearBtn\" #mvClearBtn class=\"mv-button redaction-button--clear\" aria-pressed=\"false\" title=\"Clear all\"\n    data-l10n-id=\"toggleClearAllButton\" (click)=\"unmarkAll()\">\n    <span data-l10n-id=\"Clear all\">Clear all</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvPreviewBtn\" class=\"mv-button\" [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\" redaction-button--preview aria-pressed=\"false\" title=\"Preview\"\n    data-l10n-id=\"togglePreviewButton\" (click)=\"togglePreview()\">\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">Hide preview</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvRedactBtn\" class=\"mv-button redaction-button--download\" aria-pressed=\"false\" title=\"Redact\"\n    data-l10n-id=\"mvRedactBtn\" (click)=\"redact()\">\n    <span data-l10n-id=\"Save Document\">Save document</span>\n  </button>\n\n</div>\n"
+                template: "<div class=\"redaction\">\n  <label class=\"govuk-label redaction-title\" data-l10n-id=\"redaction_options\">Redaction options</label>\n  <button id=\"toggleDrawButton\" class=\"mv-button redaction-button--draw\" title=\"Draw a box\"\n    data-l10n-id=\"toggleDrawButton\" (click)=\"toggleDrawMode()\">\n    <span data-l10n-id=\"toggleDrawButton_label\">Draw a box</span>\n  </button>\n\n  <button *ngIf=\"toolbarButtons.showHighlightButton\" id=\"toggleHighlightButton\"\n    class=\"mv-button redaction-button--redact\" aria-pressed=\"false\" title=\"Redact text\"\n    data-l10n-id=\"toggleTextRedactionButton\" (click)=\"toggleTextRedactionMode()\">\n    <span data-l10n-id=\"toggleTextRedactionButton_label\">Redact text</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvClearBtn\" #mvClearBtn class=\"mv-button redaction-button--clear\" aria-pressed=\"false\" title=\"Clear all\"\n    data-l10n-id=\"toggleClearAllButton\" (click)=\"unmarkAll()\">\n    <span data-l10n-id=\"Clear all\">Clear all</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvPreviewBtn\" class=\"mv-button\" [class.redaction-button--preview]=\"!preview\"\n    [class.redaction-button--hide-preview]=\"preview\" redaction-button--preview aria-pressed=\"false\" title=\"Preview\"\n    data-l10n-id=\"togglePreviewButton\" (click)=\"togglePreview()\">\n    <span *ngIf=\"!preview\" data-l10n-id=\"redaction-preview_label\">Preview</span>\n    <span *ngIf=\"preview\" data-l10n-id=\"redaction-hide-preview_label\">Hide preview</span>\n  </button>\n\n  <button [disabled]=\"!hasRedactions\" id=\"mvRedactBtn\" class=\"mv-button redaction-button--download\" aria-pressed=\"false\" title=\"Redact\"\n    data-l10n-id=\"mvRedactBtn\" (click)=\"redact()\">\n    <span data-l10n-id=\"Save Document\">Save document</span>\n  </button>\n\n  <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button redaction-button--close\" title=\"Close Redaction\" data-l10n-id=\"mvRedactBtn\"\n    (click)=\"toggleRedactBar()\">\n    <span data-l10n-id=\"Close Redaction\">Close Redaction</span>\n  </button>\n\n</div>\n"
             }] }
 ];
 /** @nocollapse */
@@ -5765,366 +5476,675 @@ TagsServices.ctorParameters = () => [
  */
 class CommentComponent {
     /**
-     * @param {?} store
-     * @param {?} commentService
-     * @param {?} tagsServices
+     * @param {?} store
+     * @param {?} commentService
+     * @param {?} tagsServices
+     */
+    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;
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+        this.subscriptions = this.store.select(getComponentSearchText)
+            .pipe(distinctUntilChanged()).subscribe((/**
+         * @param {?} searchString
+         * @return {?}
+         */
+        searchString => this.searchString = searchString));
+        this.reRenderComments();
+    }
+    /**
+     * @return {?}
+     */
+    ngAfterContentInit() {
+        if (this.tagItems && this.tagItems.length) {
+            this.tagsServices.updateTagItems(this.tagItems, this._comment.annotationId);
+        }
+    }
+    /**
+     * @return {?}
+     */
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+    }
+    /**
+     * @param {?} comment
+     * @return {?}
+     */
+    set comment(comment) {
+        this._comment = Object.assign({}, 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;
+        /** @type {?} */
+        const pageMarginBottom = 10;
+        this.totalPrevPagesHeight = 0;
+        for (let i = 0; i < this.page - 1; i++) {
+            /** @type {?} */
+            const height = this._comment.pages[i + 1] ? this._comment.pages[i + 1].styles.height : undefined;
+            if (height) {
+                this.totalPrevPagesHeight += height + pageMarginBottom;
+            }
+        }
+    }
+    /**
+     * @return {?}
+     */
+    get comment() {
+        return this._comment;
+    }
+    /**
+     * @param {?} annotation
+     * @return {?}
+     */
+    set annotation(annotation) {
+        this._rectangle = annotation.rectangles
+            .reduce((/**
+         * @param {?} prev
+         * @param {?} current
+         * @return {?}
+         */
+        (prev, current) => prev.y < current.y ? prev : current));
+        /** @type {?} */
+        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;
+        }
+        this.rectLeft = this._rectangle.x;
+    }
+    /**
+     * @return {?}
+     */
+    get editable() {
+        return this._editable;
+    }
+    /**
+     * @param {?} updatedComment
+     * @return {?}
+     */
+    onCommentChange(updatedComment) {
+        this.hasUnsavedChanges =
+            this.originalComment.substring(0, this.CHAR_LIMIT) !== updatedComment.substring(0, this.CHAR_LIMIT);
+        this.commentService.onCommentChange(this.hasUnsavedChanges);
+    }
+    /**
+     * @return {?}
+     */
+    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);
+            }
+        }
+    }
+    /**
+     * @return {?}
+     */
+    editOrSave() {
+        if (!this.editable) {
+            this._editable = true;
+        }
+        else {
+            this._comment.content = this.fullComment.substring(0, this.CHAR_LIMIT);
+            /** @type {?} */
+            const tags = this.tagsServices.getNewTags(this._comment.annotationId);
+            /** @type {?} */
+            const payload = {
+                comment: this._comment,
+                tags
+            };
+            this.updated.emit(payload);
+            this.hasUnsavedChanges = false;
+            this._editable = false;
+            this.changes.emit(false);
+        }
+    }
+    /**
+     * @return {?}
+     */
+    onCommentClick() {
+        if (!this.selected) {
+            this.selected = true;
+            this._editable = false;
+            this.commentClick.emit({ annotationId: this._comment.annotationId, editable: this._editable, selected: true });
+        }
+    }
+    /**
+     * @return {?}
+     */
+    reRenderComments() {
+        this.renderComments.emit(this._comment);
+    }
+    /**
+     * @return {?}
+     */
+    get commentTop() {
+        return this.totalPrevPagesHeight + (this.rectTop * this.zoom);
+    }
+    /**
+     * @return {?}
+     */
+    get height() {
+        return this.form.nativeElement.getBoundingClientRect().height / this.zoom;
+    }
+}
+CommentComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mv-anno-comment',
+                template: "<div #form (click)=\"onCommentClick()\" class=\"aui-comment\"\n      [style.top.px]=\"commentTop\"\n      [style.zIndex]=\"selected ? 100 : 0\">\n  <div id=\"detailsWrapper {{index}}\" class=\"aui-comment__header\">\n    <span *ngIf=\"author && !editor\" class=\"aui-comment__author\">\n      {{ author.forename }} {{ author.surname }}\n    </span>\n    <span *ngIf=\"editor\" class=\"aui-comment__author\">\n      {{ editor.forename }} {{ editor.surname }}\n    </span>\n    <time [hidden]=\"!selected && !this.editable\" class=\"aui-comment__meta\">\n      {{ lastUpdate | momentDate: 'd MMMM y h:mm a' }}\n    </time>\n  </div>\n  <mv-tags\n    [tagItems]=\"tagItems\"\n    [userId]=\"createdBy\"\n    [editable]=\"editable\"\n    [annoId]=\"_comment.annotationId\">\n  </mv-tags>\n  <textarea *ngIf=\"selected && editable\"\n            #editableComment\n            mvTextAreaAutoExpand\n            type=\"text\"\n            required\n            name=\"content\"\n            [maxlength]=\"CHAR_LIMIT\"\n            class=\"aui-comment__content form-control mimic-focus edit-mode expanded\"\n            [(ngModel)]=\"fullComment\"\n            (ngModelChange)=\"reRenderComments(); onCommentChange($event);\"\n            aria-label=\"comment\">\n  </textarea>\n  <p *ngIf=\"!editable\"\n     mvTextHighlight class=\"commentText\" [textToHighlight]=\"searchString\">\n      {{ fullComment }}\n  </p>\n  <div *ngIf=\"selected || this.editable || (!fullComment.length && (tagItems && !tagItems.length))\"\n       class=\"aui-comment__footer commentBtns\">\n    <button class=\"govuk-button\"\n            type=\"button\" role=\"button\"\n            (click)=\"editOrSave()\">\n      {{ !editable ? 'Edit' : 'Save' }}\n    </button>\n    <button type=\"button\" role=\"button\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"deleteOrCancel()\">\n      {{ !editable ? 'Delete' : 'Cancel' }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">private</span>\n</div>\n"
+            }] }
+];
+/** @nocollapse */
+CommentComponent.ctorParameters = () => [
+    { type: Store },
+    { type: CommentService },
+    { type: TagsServices }
+];
+CommentComponent.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: ['form',] }],
+    editableComment: [{ type: ViewChild, args: ['editableComment',] }],
+    comment: [{ type: Input }],
+    annotation: [{ type: Input }]
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CtxToolbarComponent {
+    constructor() {
+        this.createHighlightEvent = new EventEmitter();
+        this.deleteHighlightEvent = new EventEmitter();
+        this.addOrEditCommentEvent = new EventEmitter();
+        this.createBookmarkEvent = new EventEmitter();
+        this.defaultHeight = 70;
+        this.defaultWidth = 300;
+    }
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    ngOnChanges(changes) {
+        this.setRectangle();
+        this.top = this.popupTop();
+        this.left = this.popupLeft();
+    }
+    /**
+     * @param {?} rectangles
+     * @return {?}
      */
-    constructor(store, commentService, tagsServices) {
-        this.store = store;
-        this.commentService = commentService;
-        this.tagsServices = tagsServices;
-        this.COMMENT_CHAR_LIMIT = 5000;
-        this.totalPreviousPagesHeight = 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;
+    set rectangles(rectangles) {
+        if (rectangles) {
+            this._rectangles = rectangles;
+            this.setRectangle();
+        }
     }
     /**
      * @return {?}
      */
-    ngOnInit() {
-        this.subscriptions = this.store.select(getComponentSearchText)
-            .pipe(distinctUntilChanged()).subscribe((/**
-         * @param {?} searchString
-         * @return {?}
-         */
-        searchString => this.searchString = searchString));
-        this.reRenderComments();
+    get rectangles() {
+        return this._rectangles;
     }
     /**
      * @return {?}
      */
-    ngAfterContentInit() {
-        if (this.tagItems && this.tagItems.length) {
-            this.tagsServices.updateTagItems(this.tagItems, this._comment.annotationId);
-        }
+    createHighlight() {
+        this.createHighlightEvent.emit();
+        this.rectangle = undefined;
     }
     /**
      * @return {?}
      */
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
+    deleteHighlight() {
+        this.deleteHighlightEvent.emit();
     }
     /**
-     * @param {?} comment
      * @return {?}
      */
-    set comment(comment) {
-        this._comment = Object.assign({}, 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;
-        /** @type {?} */
-        const pageMarginBottom = 10;
-        this.totalPreviousPagesHeight = 0;
-        for (let i = 0; i < this.page - 1; i++) {
-            /** @type {?} */
-            const height = this._comment.pages[i + 1] ? this._comment.pages[i + 1].styles.height : undefined;
-            if (height) {
-                this.totalPreviousPagesHeight += height + pageMarginBottom;
-            }
-        }
+    addOrEditComment() {
+        this.addOrEditCommentEvent.emit();
     }
     /**
      * @return {?}
      */
-    get comment() {
-        return this._comment;
+    createBookmark() {
+        this.createBookmarkEvent.emit(this.rectangle);
+        this.rectangle = undefined;
     }
     /**
-     * @param {?} annotation
      * @return {?}
      */
-    set annotation(annotation) {
-        this._rectangle = annotation.rectangles
+    setRectangle() {
+        /** @type {?} */
+        const rectangle = this.rectangles
             .reduce((/**
          * @param {?} prev
          * @param {?} current
          * @return {?}
          */
         (prev, current) => prev.y < current.y ? prev : current));
-        /** @type {?} */
-        const actualHeight = this._comment.pages[this.page].styles.height / this.zoom;
+        this.rectangle = Object.assign({}, rectangle);
         switch (this.rotate) {
             case 90:
-                this.rectTop = this._rectangle.x;
+                this.rectangle.width = rectangle.height;
+                this.rectangle.height = rectangle.width;
+                this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.y - rectangle.height;
+                this.rectangle.y = rectangle.x;
                 break;
             case 180:
-                this.rectTop = actualHeight - (this._rectangle.y + this._rectangle.height);
+                this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.x - rectangle.width;
+                this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.y - rectangle.height;
                 break;
             case 270:
-                this.rectTop = actualHeight - (this._rectangle.x + this._rectangle.width);
+                this.rectangle.width = rectangle.height;
+                this.rectangle.height = rectangle.width;
+                this.rectangle.x = rectangle.y;
+                this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.x - rectangle.width;
                 break;
-            default: this.rectTop = this._rectangle.y;
         }
-        this.rectLeft = this._rectangle.x;
     }
     /**
      * @return {?}
      */
-    get editable() {
-        return this._editable;
+    popupTop() {
+        /** @type {?} */
+        const popupTop = this.rectangle.y * this.zoom - this.defaultHeight;
+        return popupTop <= 0 ? this.defaultHeight : popupTop;
     }
     /**
-     * @param {?} updatedComment
      * @return {?}
      */
-    onCommentChange(updatedComment) {
-        this.hasUnsavedChanges = this.originalComment.substring(0, this.COMMENT_CHAR_LIMIT) !==
-            updatedComment.substring(0, this.COMMENT_CHAR_LIMIT);
-        this.commentService.onCommentChange(this.hasUnsavedChanges);
+    popupLeft() {
+        /** @type {?} */
+        const popupLeft = (this.rectangle.x + (this.rectangle.width / 2)) * this.zoom - (this.defaultWidth / 2);
+        if (popupLeft <= 0) {
+            return 0;
+        }
+        else if (popupLeft >= this.pageWidth - this.defaultWidth) {
+            return this.pageWidth - this.defaultWidth;
+        }
+        else {
+            return popupLeft;
+        }
+    }
+}
+CtxToolbarComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mv-ctx-toolbar',
+                template: "<div class=\"toolbar\" *ngIf=\"rectangle\"\n     [style.top.px]=\"top\"\n     [style.left.px]=\"left\">\n  <button *ngIf=\"canHighlight\"\n          type=\"button\" title=\"Highlight\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight\"\n          (mousedown)=\"createHighlight()\">\n    <span>Highlight</span>\n  </button>\n  <button *ngIf=\"canDelete\"\n          type=\"button\" title=\"Delete\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton\"\n          (mousedown)=\"deleteHighlight()\">\n    <span>Remove</span>\n  </button>\n  <button *ngIf=\"canComment\"\n          type=\"button\" title=\"Comment\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment\"\n          (mousedown)=\"addOrEditComment()\">\n    <span>Comment</span></button>\n  <button *ngIf=\"canBookmark\"\n          type=\"button\" title=\"Bookmark\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark\"\n          id=\"bookmarkButton\"\n          (mousedown)=\"createBookmark()\">\n    <span>Bookmark</span></button>\n  <div class=\"arrow-down\">\n    <div class=\"inner-triangle\"></div>\n  </div>\n</div>\n"
+            }] }
+];
+/** @nocollapse */
+CtxToolbarComponent.ctorParameters = () => [];
+CtxToolbarComponent.propDecorators = {
+    zoom: [{ type: Input }],
+    rotate: [{ type: Input }],
+    pageHeight: [{ type: Input }],
+    pageWidth: [{ type: Input }],
+    canHighlight: [{ type: Input }],
+    canBookmark: [{ type: Input }],
+    canComment: [{ type: Input }],
+    canDelete: [{ type: Input }],
+    createHighlightEvent: [{ type: Output }],
+    deleteHighlightEvent: [{ type: Output }],
+    addOrEditCommentEvent: [{ type: Output }],
+    createBookmarkEvent: [{ type: Output }],
+    rectangles: [{ type: Input }]
+};
+
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class CommentSetRenderService {
+    /**
+     * @param {?} commentComponents
+     * @param {?} pageHeights
+     * @param {?} rotate
+     * @param {?} zoom
+     * @return {?}
+     */
+    redrawComponents(commentComponents, pageHeights, rotate, zoom) {
+        /** @type {?} */
+        let prevComment;
+        this.sortComponents(commentComponents, pageHeights, rotate, zoom).forEach((/**
+         * @param {?} comment
+         * @return {?}
+         */
+        (comment) => {
+            this.adjustIfOverlapping(comment, prevComment, zoom);
+            prevComment = comment;
+        }));
     }
     /**
+     * @param {?} commentComponents
+     * @param {?} pageHeights
+     * @param {?} rotate
+     * @param {?} zoom
      * @return {?}
      */
-    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);
-            }
-        }
+    sortComponents(commentComponents, pageHeights, rotate, zoom) {
+        return commentComponents.sort((/**
+         * @param {?} a
+         * @param {?} b
+         * @return {?}
+         */
+        (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);
+        }));
     }
     /**
+     * @private
+     * @param {?} comment
+     * @param {?} prevComment
+     * @param {?} zoom
      * @return {?}
      */
-    editOrSave() {
-        if (!this.editable) {
-            this._editable = true;
-        }
-        else {
-            this._comment.content = this.fullComment.substring(0, this.COMMENT_CHAR_LIMIT);
-            /** @type {?} */
-            const tags = this.tagsServices.getNewTags(this._comment.annotationId);
+    adjustIfOverlapping(comment, prevComment, zoom) {
+        if (prevComment) {
             /** @type {?} */
-            const payload = {
-                comment: this._comment,
-                tags
-            };
-            this.updated.emit(payload);
-            this.hasUnsavedChanges = false;
-            this._editable = false;
-            this.changes.emit(false);
+            const endOfPrevComment = prevComment.commentTop + this.height(prevComment);
+            if (comment.commentTop <= endOfPrevComment) {
+                comment.rectTop = (endOfPrevComment - comment.totalPrevPagesHeight) / zoom;
+            }
         }
     }
     /**
+     * @private
+     * @param {?} a
+     * @param {?} b
      * @return {?}
      */
-    onCommentClick() {
-        if (!this.selected) {
-            this.selected = true;
-            this._editable = false;
-            this.commentClick.emit({ annotationId: this._comment.annotationId, editable: this._editable, selected: true });
+    processSort(a, b) {
+        if (this.onSameLine(a, b)) {
+            return a.rectLeft >= b.rectLeft ? 1 : -1;
         }
+        return a.commentTop >= b.commentTop ? 1 : -1;
     }
     /**
+     * @private
+     * @param {?} a
+     * @param {?} b
      * @return {?}
      */
-    reRenderComments() {
-        this.renderComments.emit(this._comment);
+    onSameLine(a, b) {
+        return this.difference(a.commentTop, b.commentTop) === 0;
+    }
+    /**
+     * @private
+     * @param {?} rectangle
+     * @param {?} height
+     * @param {?} rotate
+     * @param {?} zoom
+     * @return {?}
+     */
+    top(rectangle, height, rotate, zoom) {
+        /** @type {?} */
+        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;
+        }
     }
     /**
+     * @private
+     * @param {?} element
      * @return {?}
      */
-    get commentTop() {
-        return this.totalPreviousPagesHeight + (this.rectTop * this.zoom);
+    height(element) {
+        return element.form.nativeElement.getBoundingClientRect().height;
     }
     /**
+     * @private
+     * @param {?} a
+     * @param {?} b
      * @return {?}
      */
-    get height() {
-        return this.form.nativeElement.getBoundingClientRect().height / this.zoom;
-    }
+    difference(a, b) { return Math.abs(a - b); }
 }
-CommentComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'mv-anno-comment',
-                template: "<div #form (click)=\"onCommentClick()\" class=\"aui-comment\"\n      [style.top.px]=\"commentTop\"\n      [style.zIndex]=\"selected ? 100 : 0\">\n  <div id=\"detailsWrapper {{index}}\" class=\"aui-comment__header\">\n    <span *ngIf=\"author && !editor\" class=\"aui-comment__author\">\n      {{ author.forename }} {{ author.surname }}\n    </span>\n    <span *ngIf=\"editor\" class=\"aui-comment__author\">\n      {{ editor.forename }} {{ editor.surname }}\n    </span>\n    <time [hidden]=\"!selected && !this.editable\" class=\"aui-comment__meta\">\n      {{ lastUpdate | momentDate: 'd MMMM y h:mm a' }}\n    </time>\n  </div>\n  <mv-tags\n    [tagItems]=\"tagItems\"\n    [userId]=\"createdBy\"\n    [editable]=\"editable\"\n    [annoId]=\"_comment.annotationId\">\n  </mv-tags>\n  <textarea *ngIf=\"selected && editable\"\n            #editableComment\n            mvTextAreaAutoExpand\n            type=\"text\"\n            required\n            name=\"content\"\n            [maxlength]=\"COMMENT_CHAR_LIMIT\"\n            class=\"aui-comment__content form-control mimic-focus edit-mode expanded\"\n            [(ngModel)]=\"fullComment\"\n            (ngModelChange)=\"reRenderComments(); onCommentChange($event);\"\n            aria-label=\"comment\">\n  </textarea>\n  <p *ngIf=\"!editable\"\n     mvTextHighlight class=\"commentText\" [textToHighlight]=\"searchString\">\n      {{ fullComment }}\n  </p>\n  <div *ngIf=\"selected || this.editable || (!fullComment.length && (tagItems && !tagItems.length))\"\n       class=\"aui-comment__footer commentBtns\">\n    <button class=\"govuk-button\"\n            type=\"button\" role=\"button\"\n            (click)=\"editOrSave()\">\n      {{ !editable ? 'Edit' : 'Save' }}\n    </button>\n    <button type=\"button\" role=\"button\"\n            class=\"govuk-button govuk-button--secondary\"\n            (click)=\"deleteOrCancel()\">\n      {{ !editable ? 'Delete' : 'Cancel' }}\n    </button>\n  </div>\n  <span class=\"aui-comment__private\">private</span>\n</div>\n"
-            }] }
-];
-/** @nocollapse */
-CommentComponent.ctorParameters = () => [
-    { type: Store },
-    { type: CommentService },
-    { type: TagsServices }
+CommentSetRenderService.decorators = [
+    { type: Injectable }
 ];
-CommentComponent.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: ['form',] }],
-    editableComment: [{ type: ViewChild, args: ['editableComment',] }],
-    comment: [{ type: Input }],
-    annotation: [{ type: Input }]
-};
 
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-class CtxToolbarComponent {
-    constructor() {
-        this.createHighlightEvent = new EventEmitter();
-        this.deleteHighlightEvent = new EventEmitter();
-        this.addOrEditCommentEvent = new EventEmitter();
-        this.createBookmarkEvent = new EventEmitter();
-        this.defaultHeight = 70;
-        this.defaultWidth = 300;
+class CommentSetComponent {
+    /**
+     * @param {?} store
+     * @param {?} commentService
+     * @param {?} renderService
+     * @param {?} toolbarEvents
+     */
+    constructor(store, commentService, renderService, toolbarEvents) {
+        this.store = store;
+        this.commentService = commentService;
+        this.renderService = renderService;
+        this.toolbarEvents = toolbarEvents;
+        this.pageHeights = [];
+        this.subscriptions = [];
+        this.clearSelection();
     }
     /**
-     * @param {?} changes
      * @return {?}
      */
-    ngOnChanges(changes) {
-        this.setRectangle();
-        this.top = this.popupTop();
-        this.left = this.popupLeft();
+    ngOnInit() {
+        this.comments$ = this.store.pipe(select(getCommentsArray));
+        this.annoEntities$ = this.store.pipe(select(getAnnotationEntities));
+        this.subscriptions.push(this.toolbarEvents.commentsPanelVisible.subscribe((/**
+         * @param {?} toggle
+         * @return {?}
+         */
+        toggle => {
+            this.redrawComments();
+            this.showCommentsPanel = toggle;
+        })));
+        this.subscriptions.push(this.toolbarEvents.rotateSubject.subscribe((/**
+         * @param {?} rotate
+         * @return {?}
+         */
+        rotate => this.rotateDocument())));
     }
     /**
-     * @param {?} rectangles
+     * @param {?} changes
      * @return {?}
      */
-    set rectangles(rectangles) {
-        if (rectangles) {
-            this._rectangles = rectangles;
-            this.setRectangle();
+    ngOnChanges(changes) {
+        if (changes.annotationSet) {
+            this.commentService.setCommentSet(this);
+        }
+        if (changes.contentScrollTop) {
+            if (this.container) {
+                this.container.nativeElement.scrollTo(0, this.contentScrollTop);
+            }
         }
     }
     /**
      * @return {?}
      */
-    get rectangles() {
-        return this._rectangles;
+    ngOnDestroy() {
+        if (this.subscriptions.length > 0) {
+            this.subscriptions.forEach((/**
+             * @param {?} subscription
+             * @return {?}
+             */
+            subscription => subscription.unsubscribe()));
+        }
     }
     /**
+     * @param {?} annotationId
      * @return {?}
      */
-    createHighlight() {
-        this.createHighlightEvent.emit();
-        this.rectangle = undefined;
+    onSelect(annotationId) {
+        this.store.dispatch(new SelectedAnnotation(annotationId));
     }
     /**
+     * @param {?} comment
      * @return {?}
      */
-    deleteHighlight() {
-        this.deleteHighlightEvent.emit();
+    onCommentDelete(comment) {
+        /** @type {?} */
+        const annotation = this.annotationSet.annotations.find((/**
+         * @param {?} anno
+         * @return {?}
+         */
+        anno => anno.id === comment.annotationId));
+        /** @type {?} */
+        const comments = [];
+        /** @type {?} */
+        const annot = Object.assign({}, annotation, { comments });
+        this.onAnnotationUpdate(annot);
+        this.redrawComments();
     }
     /**
      * @return {?}
      */
-    addOrEditComment() {
-        this.addOrEditCommentEvent.emit();
+    redrawComments() {
+        setTimeout((/**
+         * @return {?}
+         */
+        () => {
+            /** @type {?} */
+            const componentList = this.commentComponents.map((/**
+             * @param {?} comment
+             * @return {?}
+             */
+            comment => comment));
+            this.renderService.redrawComponents(componentList, this.pageHeights, this.rotate, this.zoom);
+        }), 0);
     }
     /**
+     * @private
      * @return {?}
      */
-    createBookmark() {
-        this.createBookmarkEvent.emit(this.rectangle);
-        this.rectangle = undefined;
+    rotateDocument() {
+        if (this.panel) {
+            this.panel.nativeElement.style.height = '0';
+        }
     }
     /**
+     * @param {?} payload
      * @return {?}
      */
-    setRectangle() {
+    onCommentUpdate(payload) {
         /** @type {?} */
-        const rectangle = this.rectangles
-            .reduce((/**
-         * @param {?} prev
-         * @param {?} current
+        const annotation = this.annotationSet.annotations.find((/**
+         * @param {?} anno
          * @return {?}
          */
-        (prev, current) => prev.y < current.y ? prev : current));
-        this.rectangle = Object.assign({}, rectangle);
-        switch (this.rotate) {
-            case 90:
-                this.rectangle.width = rectangle.height;
-                this.rectangle.height = rectangle.width;
-                this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.y - rectangle.height;
-                this.rectangle.y = rectangle.x;
-                break;
-            case 180:
-                this.rectangle.x = (this.pageWidth / this.zoom) - rectangle.x - rectangle.width;
-                this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.y - rectangle.height;
-                break;
-            case 270:
-                this.rectangle.width = rectangle.height;
-                this.rectangle.height = rectangle.width;
-                this.rectangle.x = rectangle.y;
-                this.rectangle.y = (this.pageHeight / this.zoom) - rectangle.x - rectangle.width;
-                break;
-        }
+        anno => anno.id === payload.comment.annotationId));
+        /** @type {?} */
+        const comments = [payload.comment];
+        /** @type {?} */
+        const tags = payload.tags;
+        /** @type {?} */
+        const annot = Object.assign({}, annotation, { comments,
+            tags });
+        this.onAnnotationUpdate(annot);
     }
     /**
+     * @param {?} annotation
      * @return {?}
      */
-    popupTop() {
-        /** @type {?} */
-        const popupTop = this.rectangle.y * this.zoom - this.defaultHeight;
-        return popupTop <= 0 ? this.defaultHeight : popupTop;
+    onAnnotationUpdate(annotation) {
+        this.store.dispatch(new SaveAnnotation(annotation));
     }
     /**
+     * @param {?} e
      * @return {?}
      */
-    popupLeft() {
-        /** @type {?} */
-        const popupLeft = (this.rectangle.x + (this.rectangle.width / 2)) * this.zoom - (this.defaultWidth / 2);
-        if (popupLeft <= 0) {
-            return 0;
-        }
-        else if (popupLeft >= this.pageWidth - this.defaultWidth) {
-            return this.pageWidth - this.defaultWidth;
-        }
-        else {
-            return popupLeft;
+    onContainerClick(e) {
+        if (e.path && e.path[0] === this.panel.nativeElement) {
+            this.clearSelection();
         }
     }
+    /**
+     * @return {?}
+     */
+    clearSelection() {
+        this.store.dispatch(new SelectedAnnotation({ annotationId: '', editable: false, selected: false }));
+    }
+    /**
+     * @return {?}
+     */
+    allCommentsSaved() {
+        this.commentService.allCommentsSaved();
+    }
 }
-CtxToolbarComponent.decorators = [
+CommentSetComponent.decorators = [
     { type: Component, args: [{
-                selector: 'mv-ctx-toolbar',
-                template: "<div class=\"toolbar\" *ngIf=\"rectangle\"\n     [style.top.px]=\"top\"\n     [style.left.px]=\"left\">\n  <button *ngIf=\"canHighlight\"\n          type=\"button\" title=\"Highlight\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton aui__toolbar-button-highlight\"\n          (mousedown)=\"createHighlight()\">\n    <span>Highlight</span>\n  </button>\n  <button *ngIf=\"canDelete\"\n          type=\"button\" title=\"Delete\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn leftButton\"\n          (mousedown)=\"deleteHighlight()\">\n    <span>Remove</span>\n  </button>\n  <button *ngIf=\"canComment\"\n          type=\"button\" title=\"Comment\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-comment\"\n          (mousedown)=\"addOrEditComment()\">\n    <span>Comment</span></button>\n  <button *ngIf=\"canBookmark\"\n          type=\"button\" title=\"Bookmark\"\n          class=\"aui__toolbar-button aui__toolbar-button--comments contextual-btn rightButton aui__toolbar-button-bookmark\"\n          id=\"bookmarkButton\"\n          (mousedown)=\"createBookmark()\">\n    <span>Bookmark</span></button>\n  <div class=\"arrow-down\">\n    <div class=\"inner-triangle\"></div>\n  </div>\n</div>\n"
+                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"
             }] }
 ];
 /** @nocollapse */
-CtxToolbarComponent.ctorParameters = () => [];
-CtxToolbarComponent.propDecorators = {
+CommentSetComponent.ctorParameters = () => [
+    { type: Store },
+    { type: CommentService },
+    { type: CommentSetRenderService },
+    { type: ToolbarEventService }
+];
+CommentSetComponent.propDecorators = {
+    annotationSet: [{ type: Input }],
     zoom: [{ type: Input }],
     rotate: [{ type: Input }],
-    pageHeight: [{ type: Input }],
-    pageWidth: [{ type: Input }],
-    canHighlight: [{ type: Input }],
-    canBookmark: [{ type: Input }],
-    canComment: [{ type: Input }],
-    canDelete: [{ type: Input }],
-    createHighlightEvent: [{ type: Output }],
-    deleteHighlightEvent: [{ type: Output }],
-    addOrEditCommentEvent: [{ type: Output }],
-    createBookmarkEvent: [{ type: Output }],
-    rectangles: [{ type: Input }]
+    height: [{ type: Input }],
+    pageHeights: [{ type: Input }],
+    contentScrollTop: [{ type: Input }],
+    container: [{ type: ViewChild, args: ['container',] }],
+    panel: [{ type: ViewChild, args: ['panel',] }],
+    commentComponents: [{ type: ViewChildren, args: ['commentComponent',] }]
 };
 
 /**
@@ -6469,7 +6489,7 @@ class CommentSetHeaderComponent {
         this.toolbarEvents = toolbarEvents;
         this.showCommentSummaryDialog = new EventEmitter();
         this.tabs = [];
-        this.tabSelected = 'comments';
+        this.tabSelected = '';
     }
     /**
      * @return {?}
@@ -6510,6 +6530,12 @@ class CommentSetHeaderComponent {
     selectTab(tab) {
         this.tabSelected = tab !== this.tabSelected ? tab : undefined;
     }
+    /**
+     * @return {?}
+     */
+    toggleCommentsPanel() {
+        this.toolbarEvents.toggleCommentsPanel(!this.toolbarEvents.commentsPanelVisible.getValue());
+    }
     /**
      * @return {?}
      */
@@ -6520,7 +6546,7 @@ class CommentSetHeaderComponent {
 CommentSetHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'mv-comment-set-header',
-                template: "<div class=\"govuk-tabs commentSummaryHeader\" [ngClass]=\"{'icp-mode': toolbarEvents.icp.enabled | async}\" data-module=\"govuk-tabs\">\n  <ul class=\"govuk-tabs__list\">\n    <li *ngFor=\"let tab of tabs\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a (click)=\"selectTab(tab.label)\" [routerLink]=\"\" [ngClass]=\"{'govuk-tabs__list-item--filtered': tab.isFiltered}\"\n         class=\"govuk-tabs__tab\">\n        {{ tab.label | titlecase }}\n      </a>\n\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" [hidden]=\"!tabSelected\">\n    <ng-container *ngIf=\"tabSelected === 'comments'\">\n      <div style=\"width: 100%\">\n        <div class=\"hmcts-banner\" *ngIf=\"navigationList?.length === 0\">\n          <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\nC13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\" /></svg>\n          <div class=\"hmcts-banner__message\">\n            <span class=\"hmcts-banner__assistive\">information</span>\n            Select text to add a comment or highlight.\n          </div>\n        </div>\n        <button type=\"button\" class=\"govuk-button\"\n                id=\"commentSummary\" tabindex=\"0\"\n                data-l10n-id=\"commentSummary\"\n                title=\"Open collate summary\"\n                (click)=\"toggleCommentsSummary()\">Collate comments</button>\n      </div>\n      <ng-container *ngIf=\"navigationList?.length > 0\">\n        <mv-comments-navigate\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </ng-container>\n      <p class=\"aui-comment__private-text\">\n        <span class=\"aui-comment__private\">private</span>\n        All comments can only be seen by you\n      </p>\n    </ng-container>\n    <div [hidden]=\"tabSelected !== 'filter'\">\n      <div class=\"govuk-tabs__panel--container\">\n        <mv-comment-filter></mv-comment-filter>\n        <mv-comments-navigate\n          *ngIf=\"navigationList?.length > 0\"\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </div>\n    </div>\n\n    <div [hidden]=\"tabSelected !== 'search'\">\n      <mv-comment-search [annotations]=\"navigationList\"></mv-comment-search>\n    </div>\n  </div>\n</div>\n",
+                template: "<div class=\"govuk-tabs commentSummaryHeader\" [ngClass]=\"{'icp-mode': toolbarEvents.icp.enabled | async}\" data-module=\"govuk-tabs\">\n  <ul class=\"govuk-tabs__list\">\n    <li *ngFor=\"let tab of tabs\" class=\"govuk-tabs__list-item govuk-tabs__list-item\"\n        [ngClass]=\"{'govuk-tabs__list-item--selected': tabSelected === tab.label}\">\n      <a (click)=\"selectTab(tab.label)\" [routerLink]=\"\" [ngClass]=\"{'govuk-tabs__list-item--filtered': tab.isFiltered}\"\n         class=\"govuk-tabs__tab\">\n        {{ tab.label | titlecase }}\n      </a>\n    </li>\n    <li>\n      <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button commentSummaryHeader-button--close\"\n        title=\"Close Comments\" (click)=\"toggleCommentsPanel()\">\n      </button>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" [hidden]=\"!tabSelected\">\n    <ng-container *ngIf=\"tabSelected === 'comments'\">\n      <div style=\"width: 100%\">\n        <div class=\"hmcts-banner\" *ngIf=\"navigationList?.length === 0\">\n          <svg class=\"hmcts-banner__icon\" fill=\"currentColor\" focusable=\"false\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 25 25\" height=\"25\" width=\"25\">\n            <path d=\"M13.7,18.5h-2.4v-2.4h2.4V18.5z M12.5,13.7c-0.7,0-1.2-0.5-1.2-1.2V7.7c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v4.8\nC13.7,13.2,13.2,13.7,12.5,13.7z M12.5,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.1,0.5,12.5,0.5z\" /></svg>\n          <div class=\"hmcts-banner__message\">\n            <span class=\"hmcts-banner__assistive\">information</span>\n            Select text to add a comment or highlight.\n          </div>\n        </div>\n        <button type=\"button\" class=\"govuk-button\"\n                id=\"commentSummary\" tabindex=\"0\"\n                data-l10n-id=\"commentSummary\"\n                title=\"Open collate summary\"\n                (click)=\"toggleCommentsSummary()\">Collate comments</button>\n      </div>\n      <ng-container *ngIf=\"navigationList?.length > 0\">\n        <mv-comments-navigate\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </ng-container>\n      <p class=\"aui-comment__private-text\">\n        <span class=\"aui-comment__private\">private</span>\n        All comments can only be seen by you\n      </p>\n    </ng-container>\n    <div [hidden]=\"tabSelected !== 'filter'\">\n      <div class=\"govuk-tabs__panel--container\">\n        <mv-comment-filter></mv-comment-filter>\n        <mv-comments-navigate\n          *ngIf=\"navigationList?.length > 0\"\n          [annotationList]=\"navigationList\">\n        </mv-comments-navigate>\n      </div>\n    </div>\n\n    <div [hidden]=\"tabSelected !== 'search'\">\n      <mv-comment-search [annotations]=\"navigationList\"></mv-comment-search>\n    </div>\n  </div>\n</div>\n",
                 encapsulation: ViewEncapsulation.None
             }] }
 ];
@@ -9609,7 +9635,12 @@ class ConvertibleContentViewerComponent {
      * @return {?}
      */
     extractDMStoreDocId(url) {
-        url = url.includes('/documents/') ? url.split('/documents/')[1] : url;
+        if (url.includes('/documents/')) {
+            url = url.split('/documents/')[1];
+        }
+        else if (url.includes('/documentsv2/')) {
+            url = url.split('/documentsv2/')[1];
+        }
         return url.replace('/binary', '');
     }
 }