@hmcts/media-viewer 3.1.1 → 3.1.4

package/fesm2015/hmcts-media-viewer.mjs

@@ -1918,7 +1918,9 @@ class IcpUpdateService {
     }
     removeParticipant(participantId) {
         this.socket.emit(IcpEvents.REMOVE_PARTICIPANT, {
-            participantId: participantId, caseId: this.session.caseId
+            participantId: participantId,
+            caseId: this.session.caseId,
+            documentId: this.session.documentId
         });
     }
     participantListUpdated() {
@@ -1931,7 +1933,11 @@ class IcpUpdateService {
         return this.socket.listen(IcpEvents.PRESENTER_UPDATED);
     }
     updateScreen(screen) {
-        const update = { body: screen, caseId: this.session.caseId };
+        const update = {
+            body: screen,
+            caseId: this.session.caseId,
+            documentId: this.session.documentId
+        };
         this.socket.emit(IcpEvents.UPDATE_SCREEN, update);
     }
     screenUpdated() {
@@ -2053,8 +2059,9 @@ class IcpService {
         this.subscription = this.store.pipe(select(getCaseId), filter(value => !!value)).subscribe(caseId => {
             this.caseId = caseId;
         });
+        this.subscription.add(this.store.pipe(select(getDocumentId)).subscribe(docId => this.documentId = docId));
         this.subscription.add(this.toolbarEvents.icp.sessionLaunch.subscribe(() => {
-            if (this.caseId) {
+            if (this.caseId && this.documentId) {
                 this.launchSession();
             }
         }));
@@ -2064,7 +2071,7 @@ class IcpService {
         this.subscription.unsubscribe();
     }
     launchSession() {
-        this.store.dispatch(new LoadIcpSession(this.caseId));
+        this.store.dispatch(new LoadIcpSession({ caseId: this.caseId, documentId: this.documentId }));
         this.subscription.add(this.store.pipe(select(getIcpSession), filter(value => !!value && Object.keys(value).length > 1), take(1)).subscribe(() => { this.setUpSessionSubscriptions(); }));
     }
     setUpSessionSubscriptions() {
@@ -4478,7 +4485,8 @@ class BookmarksComponent {
         this._bookmarkNodes = [];
         // expansion model tracks expansion state
         this.expansionModel = new SelectionModel(true);
-        this.dragging = false;
+        this.isDraggingOn = false;
+        this.isUserdragging = false;
         this.expandDelay = 1000;
         this.pageLookup = {};
         this.BOOKMARK_CHAR_LIMIT = 30;
@@ -4590,12 +4598,14 @@ class BookmarksComponent {
     }
     positionSortBookmarks() {
         this.bookmarkNodes.sort((a, b) => a.pageNumber === b.pageNumber ? a.yCoordinate - b.yCoordinate : a.pageNumber - b.pageNumber);
+        this.isDraggingOn = false;
         this.rebuildTreeForData(this.bookmarkNodes);
     }
     customSortBookmarks() {
         if (this.bookmarkNodes.length > 1) {
             this.bookmarkNodes.sort((a, b) => a.index - b.index);
         }
+        this.isDraggingOn = true;
         this.rebuildTreeForData(this.bookmarkNodes);
     }
     scaledY(yCoordinate, height, page) {
@@ -4694,13 +4704,13 @@ class BookmarksComponent {
     dragStart() {
         this.dragNodeInsertToParent = false;
         this.hoveredNode = null;
-        this.dragging = true;
+        this.isUserdragging = true;
     }
     dragEnd() {
-        this.dragging = false;
+        this.isUserdragging = false;
     }
     dragHover(event, node) {
-        if (this.dragging) {
+        if (this.isUserdragging) {
             const newEvent = event;
             const percentageX = newEvent.offsetX / newEvent.target.clientWidth;
             if (percentageX > .55) {
@@ -4711,20 +4721,15 @@ class BookmarksComponent {
                 this.hoveredNode = null;
                 this.dragNodeInsertToParent = false;
             }
-            clearTimeout(this.expandTimeout);
-            this.expandTimeout = setTimeout(() => {
-                this.treeControl.expand(node);
-            }, this.expandDelay);
         }
     }
     dragHoverEnd(event, node) {
         var _a;
-        if (this.dragging) {
+        if (this.isUserdragging) {
             if (!node || ((_a = this.hoveredNode) === null || _a === void 0 ? void 0 : _a.id) !== node.id) {
                 this.dragNodeInsertToParent = false;
                 this.hoveredNode = null;
             }
-            clearTimeout(this.expandTimeout);
         }
     }
     onNodeExpand(node) {
@@ -4777,10 +4782,10 @@ class BookmarksComponent {
     }
 }
 /** @nocollapse */ BookmarksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksComponent, deps: [{ token: i1.Store }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ BookmarksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BookmarksComponent, selector: "mv-bookmarks", inputs: { bookmarkNodes: "bookmarkNodes", zoom: "zoom", rotate: "rotate" }, outputs: { goToDestination: "goToDestination" }, ngImport: i0, template: "<a *ngIf=\"bookmarkNodes?.length === 0\" class=\"highlightedOutlineItem\"\n  >No bookmarks created yet</a\n>\n<cdk-tree\n  cdkDropList\n  class=\"bookmarks-tree\"\n  *ngIf=\"datasource\"\n  [dataSource]=\"datasource\"\n  [treeControl]=\"treeControl\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <!-- This is the tree node template for leaf nodes -->\n  <cdk-nested-tree-node class=\"node-wrapper\" *cdkTreeNodeDef=\"let node\">\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n  </cdk-nested-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <cdk-nested-tree-node\n    class=\"node-wrapper\"\n    *cdkTreeNodeDef=\"let node; when: hasChild\"\n  >\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark2\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <span\n            cdkTreeNodeToggle\n            class=\"toggle-children-wrapper\"\n            [ngClass]=\"onNodeExpand(node)\"\n            ><span class=\"toggle-children\"></span\n          ></span>\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark2>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n    <div class=\"nested-tree-node-children\" *ngIf=\"treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkNestedTreeNode, selector: "cdk-nested-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i3.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i3.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i3.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i3.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "directive", type: i4$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
+/** @nocollapse */ BookmarksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BookmarksComponent, selector: "mv-bookmarks", inputs: { bookmarkNodes: "bookmarkNodes", zoom: "zoom", rotate: "rotate" }, outputs: { goToDestination: "goToDestination" }, ngImport: i0, template: "<a *ngIf=\"bookmarkNodes?.length === 0\" class=\"highlightedOutlineItem\"\n  >No bookmarks created yet</a\n>\n<cdk-tree\n  cdkDropList\n  [cdkDropListDisabled]=\"!isDraggingOn\"\n  class=\"bookmarks-tree\"\n  *ngIf=\"datasource\"\n  [dataSource]=\"datasource\"\n  [treeControl]=\"treeControl\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <!-- This is the tree node template for leaf nodes -->\n  <cdk-nested-tree-node class=\"node-wrapper\" *cdkTreeNodeDef=\"let node\">\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n  </cdk-nested-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <cdk-nested-tree-node\n    class=\"node-wrapper\"\n    *cdkTreeNodeDef=\"let node; when: hasChild\"\n  >\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark2\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <span\n            cdkTreeNodeToggle\n            class=\"toggle-children-wrapper\"\n            [ngClass]=\"onNodeExpand(node)\"\n            ><span class=\"toggle-children\"></span\n          ></span>\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark2>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n    <div class=\"nested-tree-node-children\" *ngIf=\"treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n", dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkNestedTreeNode, selector: "cdk-nested-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i3.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "directive", type: i3.CdkTreeNodeToggle, selector: "[cdkTreeNodeToggle]", inputs: ["cdkTreeNodeToggleRecursive"] }, { kind: "component", type: i3.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "trackBy"], exportAs: ["cdkTree"] }, { kind: "directive", type: i3.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "directive", type: i4$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-bookmarks', template: "<a *ngIf=\"bookmarkNodes?.length === 0\" class=\"highlightedOutlineItem\"\n  >No bookmarks created yet</a\n>\n<cdk-tree\n  cdkDropList\n  class=\"bookmarks-tree\"\n  *ngIf=\"datasource\"\n  [dataSource]=\"datasource\"\n  [treeControl]=\"treeControl\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <!-- This is the tree node template for leaf nodes -->\n  <cdk-nested-tree-node class=\"node-wrapper\" *cdkTreeNodeDef=\"let node\">\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n  </cdk-nested-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <cdk-nested-tree-node\n    class=\"node-wrapper\"\n    *cdkTreeNodeDef=\"let node; when: hasChild\"\n  >\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark2\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <span\n            cdkTreeNodeToggle\n            class=\"toggle-children-wrapper\"\n            [ngClass]=\"onNodeExpand(node)\"\n            ><span class=\"toggle-children\"></span\n          ></span>\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark2>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n    <div class=\"nested-tree-node-children\" *ngIf=\"treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n" }]
+            args: [{ selector: 'mv-bookmarks', template: "<a *ngIf=\"bookmarkNodes?.length === 0\" class=\"highlightedOutlineItem\"\n  >No bookmarks created yet</a\n>\n<cdk-tree\n  cdkDropList\n  [cdkDropListDisabled]=\"!isDraggingOn\"\n  class=\"bookmarks-tree\"\n  *ngIf=\"datasource\"\n  [dataSource]=\"datasource\"\n  [treeControl]=\"treeControl\"\n  (cdkDropListDropped)=\"drop($event)\"\n>\n  <!-- This is the tree node template for leaf nodes -->\n  <cdk-nested-tree-node class=\"node-wrapper\" *cdkTreeNodeDef=\"let node\">\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n  </cdk-nested-tree-node>\n  <!-- This is the tree node template for expandable nodes -->\n  <cdk-nested-tree-node\n    class=\"node-wrapper\"\n    *cdkTreeNodeDef=\"let node; when: hasChild\"\n  >\n    <div *ngIf=\"node.id !== editableBookmark; else inputBookmark2\">\n      <div\n        class=\"node-content-wrapper nested-tree-node\"\n        cdkDrag\n        [cdkDragData]=\"node\"\n        (mouseenter)=\"dragHover($event, node)\"\n        (mouseleave)=\"dragHoverEnd($event, node)\"\n        (cdkDragStarted)=\"dragStart()\"\n        (cdkDragReleased)=\"dragEnd()\"\n      >\n        <div class=\"outlineItem\">\n          <span\n            cdkTreeNodeToggle\n            class=\"toggle-children-wrapper\"\n            [ngClass]=\"onNodeExpand(node)\"\n            ><span class=\"toggle-children\"></span\n          ></span>\n          <a (click)=\"goToBookmark(node)\">\n            {{ node.name }}\n          </a>\n        </div>\n        <button\n          class=\"bookmark__rename\"\n          (click)=\"editBookmark(node.id)\"\n        ></button>\n        <button\n          class=\"bookmark__delete\"\n          (click)=\"deleteBookmark2(node)\"\n        ></button>\n      </div>\n      <div class=\"node-drop-slot\"></div>\n    </div>\n    <ng-template #inputBookmark2>\n      <input\n        #bookmarkName\n        class=\"bookmark__input\"\n        [value]=\"node.name\"\n        [maxLength]=\"BOOKMARK_CHAR_LIMIT\"\n      />\n      <button\n        class=\"bookmark__save\"\n        (click)=\"updateBookmark(node, bookmarkName.value)\"\n      ></button>\n    </ng-template>\n    <div class=\"nested-tree-node-children\" *ngIf=\"treeControl.isExpanded(node)\">\n      <ng-container cdkTreeNodeOutlet></ng-container>\n    </div>\n  </cdk-nested-tree-node>\n</cdk-tree>\n" }]
         }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { bookmarkNodes: [{
                 type: Input
             }], zoom: [{
@@ -6538,9 +6543,9 @@ class IcpSessionApiService {
         this.httpClient = httpClient;
         this.ICP_SESSION_API = '/icp/sessions';
     }
-    loadSession(caseId) {
+    loadSession(payload) {
         return this.httpClient
-            .get(`${this.ICP_SESSION_API}/${caseId}`, { observe: 'response', withCredentials: true })
+            .get(`${this.ICP_SESSION_API}/${payload.caseId}/${payload.documentId}`, { observe: 'response', withCredentials: true })
             .pipe(map(response => response.body));
     }
 }
@@ -6810,7 +6815,7 @@ class IcpEffects {
         this.actions$ = actions$;
         this.icpApiService = icpApiService;
         this.icpUpdateService = icpUpdateService;
-        this.loadIcpSession$ = createEffect(() => this.actions$.pipe(ofType(LOAD_ICP_SESSION), map((action) => action.payload), exhaustMap((caseId) => this.icpApiService.loadSession(caseId)
+        this.loadIcpSession$ = createEffect(() => this.actions$.pipe(ofType(LOAD_ICP_SESSION), map((action) => action.payload), exhaustMap((payload) => this.icpApiService.loadSession(payload)
             .pipe(map(res => new JoinIcpSocketSession(res)), catchError(error => of(new LoadIcpSessionFailure(error)))))));
         this.joinIcpSocketSession$ = createEffect(() => this.actions$.pipe(ofType(JOIN_ICP_SOCKET_SESSION), map((action) => action.payload), switchMap((res) => this.icpUpdateService.joinSession(res.username, res.session)
             .pipe(map(participants => new IcpSocketSessionJoined({ session: res.session, participantInfo: participants }))))));