@hmcts/media-viewer 3.0.4 → 3.1.1

package/fesm2015/hmcts-media-viewer.mjs

@@ -28,8 +28,11 @@ import * as i6 from '@angular/cdk/overlay';
 import { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay';
 import * as i4$2 from 'mutable-div';
 import { MutableDivModule } from 'mutable-div';
-import * as i3 from '@circlon/angular-tree-component';
-import { TreeComponent, TreeModule } from '@circlon/angular-tree-component';
+import { SelectionModel, ArrayDataSource } from '@angular/cdk/collections';
+import * as i3 from '@angular/cdk/tree';
+import { NestedTreeControl, CdkTreeModule } from '@angular/cdk/tree';
+import * as i4$3 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import 'hammerjs';
 import * as i5$2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -4458,17 +4461,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class BookmarksComponent {
+    set bookmarkNodes(value) {
+        this.rebuildTreeForData(value);
+        if (this._bookmarkNodes && this.sortMode !== this.customSort) {
+            this.sortBookmarks();
+        }
+    }
+    ;
+    get bookmarkNodes() {
+        return this._bookmarkNodes;
+    }
+    ;
     constructor(store) {
         this.store = store;
         this.goToDestination = new EventEmitter();
+        this._bookmarkNodes = [];
+        // expansion model tracks expansion state
+        this.expansionModel = new SelectionModel(true);
+        this.dragging = false;
+        this.expandDelay = 1000;
         this.pageLookup = {};
         this.BOOKMARK_CHAR_LIMIT = 30;
+        this.dragNodeExpandOverWaitTimeMs = 300;
         this.options = {
             allowDrag: true,
             allowDrop: true
         };
         this._customSort = 'CUSTOM';
         this._positionSort = 'POSITION';
+        this.hasChild = (_, node) => {
+            return node.children && node.children.length > 0;
+        };
     }
     ngOnInit() {
         this.sortMode = this.customSort;
@@ -4481,11 +4504,6 @@ class BookmarksComponent {
             });
         }));
     }
-    ngOnChanges(changes) {
-        if (changes.bookmarkNodes && this.sortMode !== this.customSort) {
-            this.sortBookmarks();
-        }
-    }
     ngOnDestroy() {
         this.$subscription.unsubscribe();
     }
@@ -4498,33 +4516,18 @@ class BookmarksComponent {
             this.store.dispatch(new CreateBookmark(Object.assign(Object.assign({}, bookmarkInfo), { name: '', id: uuid$1() })));
         });
     }
-    onBookmarkMove({ node, from, to }) {
-        let movedBookmarks = [Object.assign(Object.assign({}, node), { previous: to.index > 0 ? to.parent.children[to.index - 1].id : undefined, parent: to.parent.documentId ? to.parent.id : undefined })];
-        let fromNext = this.getSibling(from, from.index);
-        fromNext = fromNext && fromNext.id === node.previous ? this.getSibling(from, from.index + 1) : fromNext;
-        if (fromNext) {
-            movedBookmarks = [...movedBookmarks, Object.assign(Object.assign({}, fromNext), { previous: node.previous })];
-        }
-        const toNext = this.getSibling(to, to.index + 1);
-        if (toNext) {
-            movedBookmarks = [...movedBookmarks, Object.assign(Object.assign({}, toNext), { previous: node.id })];
-        }
-        this.store.dispatch(new MoveBookmark(movedBookmarks));
-    }
-    deleteBookmark(node) {
+    deleteBookmark2(node) {
         this.customSortBookmarks();
         let next;
-        node = this.tree.treeModel.getNodeById(node.id);
-        if (!node.parent) {
-            node.parent = this.tree.treeModel.virtualRoot;
-        }
-        const siblings = node.parent.children;
-        if (siblings.length > node.index + 1) {
-            next = siblings[node.index + 1].data;
-            next.previous = node.data.previous;
+        const changedData = JSON.parse(JSON.stringify(this.bookmarkNodes));
+        const siblings = this.findNodeSiblings(changedData, node.id);
+        if (siblings && siblings.length > node.index + 1) {
+            next = siblings[node.index + 1];
+            next.previous = node.previous;
         }
+        const toDelete = [node.id, ...getBookmarkChildren(node.children)];
         this.store.dispatch(new DeleteBookmark({
-            deleted: [node.data.id, ...getBookmarkChildren(node.data.children)], updated: next
+            deleted: toDelete, updated: next
         }));
     }
     updateBookmark(bookmark, name) {
@@ -4587,33 +4590,197 @@ class BookmarksComponent {
     }
     positionSortBookmarks() {
         this.bookmarkNodes.sort((a, b) => a.pageNumber === b.pageNumber ? a.yCoordinate - b.yCoordinate : a.pageNumber - b.pageNumber);
-        this.tree.treeModel.update();
-        this.setDragNDrop(false);
+        this.rebuildTreeForData(this.bookmarkNodes);
     }
     customSortBookmarks() {
-        this.bookmarkNodes.sort((a, b) => a.index - b.index);
-        this.tree.treeModel.update();
-        this.setDragNDrop(true);
-    }
-    setDragNDrop(enabled) {
-        this.options = {
-            allowDrag: enabled,
-            allowDrop: enabled
-        };
-    }
-    getSibling(node, index) {
-        return node.parent.children.length > index ? node.parent.children[index] : undefined;
+        if (this.bookmarkNodes.length > 1) {
+            this.bookmarkNodes.sort((a, b) => a.index - b.index);
+        }
+        this.rebuildTreeForData(this.bookmarkNodes);
     }
     scaledY(yCoordinate, height, page) {
         const viewportScale = page.viewportScale / this.zoom;
         return ((height / this.zoom) - yCoordinate) / viewportScale;
     }
+    getNode(bookmarks, parentId) {
+        if (typeof bookmarks !== 'undefined') {
+            for (let i = 0; i < bookmarks.length; i++) {
+                if (bookmarks[i].id === parentId) {
+                    return [bookmarks[i]];
+                }
+                const a = this.getNode(bookmarks[i].children, parentId);
+                if (a !== null) {
+                    return a;
+                }
+            }
+        }
+        return null;
+    }
+    drop(event) {
+        if (!event.isPointerOverContainer || (event.previousIndex === event.currentIndex))
+            return;
+        const hasMovedUpTheTree = event.previousIndex > event.currentIndex;
+        const bookmarkNodesString = JSON.stringify(this._bookmarkNodes);
+        const changedData = JSON.parse(bookmarkNodesString);
+        const visibleNodes = this.visibleNodes(this._bookmarkNodes);
+        const toNode = visibleNodes[event.currentIndex];
+        const toNodeSiblings = this.findNodeSiblings(changedData, toNode.id);
+        const toNodeParent = toNodeSiblings[0].parent;
+        const toIndex = toNodeSiblings.findIndex(s => s.id === toNode.id);
+        const fromNode = event.item.data;
+        const fromNodeSiblings = this.findNodeSiblings(changedData, fromNode.id);
+        const fromIndex = fromNodeSiblings.findIndex(n => n.id === fromNode.id);
+        if (this.isToNodeChildOfFromNode(fromNode === null || fromNode === void 0 ? void 0 : fromNode.children, toNode))
+            return;
+        if (this.dragNodeInsertToParent) {
+            const indexOfParent = toNodeSiblings.findIndex(element => element.id === toNode.id);
+            const parentNode = toNodeSiblings[indexOfParent];
+            const firstChild = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.children) && (parentNode === null || parentNode === void 0 ? void 0 : parentNode.children.length) > 0 ? parentNode.children[0] : null;
+            let movedBookmarksWithParent = [Object.assign(Object.assign({}, fromNode), { parent: parentNode.id, previous: null })];
+            if (firstChild) {
+                movedBookmarksWithParent = [...movedBookmarksWithParent, Object.assign(Object.assign({}, firstChild), { previous: fromNode.id })];
+            }
+            let fromNodeSibling = this.getSiblingFromAllSibliings(fromNodeSiblings, fromIndex + 1);
+            const nextFromindexforParent = fromIndex + 1;
+            fromNodeSibling = fromNodeSibling && fromNodeSibling.id === fromNode.previous ? this.getSiblingFromAllSibliings(fromNodeSiblings, nextFromindexforParent + 1) : fromNodeSibling;
+            if (fromNodeSibling && fromNodeSibling.id !== parentNode.id) {
+                movedBookmarksWithParent = [...movedBookmarksWithParent, Object.assign(Object.assign({}, fromNodeSibling), { previous: fromNode.previous })];
+            }
+            let previousSiblingForParentIndex = toIndex - 1;
+            let parentNodeSibling = this.getSiblingFromAllSibliings(toNodeSiblings, previousSiblingForParentIndex);
+            if (parentNodeSibling && parentNodeSibling.id == fromNode.id) {
+                previousSiblingForParentIndex = previousSiblingForParentIndex - 1;
+                if (previousSiblingForParentIndex >= 0) {
+                    parentNodeSibling = this.getSiblingFromAllSibliings(toNodeSiblings, previousSiblingForParentIndex);
+                }
+                else {
+                    parentNodeSibling = null;
+                }
+            }
+            movedBookmarksWithParent = [...movedBookmarksWithParent, Object.assign(Object.assign({}, parentNode), { previous: parentNodeSibling === null || parentNodeSibling === void 0 ? void 0 : parentNodeSibling.id })];
+            const hasParentDups = movedBookmarksWithParent.map(x => x.id).some(function (value, index, array) {
+                return array.indexOf(value) !== array.lastIndexOf(value); // comparing first and last indexes of the same value
+            });
+            if (hasParentDups || movedBookmarksWithParent && movedBookmarksWithParent.length <= 1)
+                return;
+            this.store.dispatch(new MoveBookmark(movedBookmarksWithParent));
+            return;
+        }
+        if (!toNodeSiblings)
+            return;
+        const fromNodePrevious = hasMovedUpTheTree ? toNode.previous : toNode.id;
+        let movedBookmarks = [Object.assign(Object.assign({}, fromNode), { previous: toNode.index > 0 ? fromNodePrevious : undefined, parent: toNodeParent })];
+        let fromNodeSibling = this.getSiblingFromAllSibliings(fromNodeSiblings, fromIndex + 1);
+        const nextFromindex = fromIndex + 1;
+        fromNodeSibling = fromNodeSibling && fromNodeSibling.id === fromNode.previous ? this.getSiblingFromAllSibliings(fromNodeSiblings, nextFromindex + 1) : fromNodeSibling;
+        if (fromNodeSibling) {
+            movedBookmarks = [...movedBookmarks, Object.assign(Object.assign({}, fromNodeSibling), { previous: fromNode.previous })];
+        }
+        let toNodeSiblingIndex = hasMovedUpTheTree ? toIndex : toIndex + 1;
+        let toNodeSibling = this.getSiblingFromAllSibliings(toNodeSiblings, toNodeSiblingIndex);
+        if (toNodeSibling) {
+            movedBookmarks = [...movedBookmarks, Object.assign(Object.assign({}, toNodeSibling), { previous: fromNode.id })];
+        }
+        const hasDups = movedBookmarks.map(x => x.id).some(function (value, index, array) {
+            return array.indexOf(value) !== array.lastIndexOf(value); // comparing first and last indexes of the same value
+        });
+        if (hasDups || movedBookmarks && movedBookmarks.length <= 1)
+            return;
+        this.store.dispatch(new MoveBookmark(movedBookmarks));
+    }
+    getSiblingFromAllSibliings(sibling, index) {
+        return sibling.length > index ? sibling[index] : undefined;
+    }
+    dragStart() {
+        this.dragNodeInsertToParent = false;
+        this.hoveredNode = null;
+        this.dragging = true;
+    }
+    dragEnd() {
+        this.dragging = false;
+    }
+    dragHover(event, node) {
+        if (this.dragging) {
+            const newEvent = event;
+            const percentageX = newEvent.offsetX / newEvent.target.clientWidth;
+            if (percentageX > .55) {
+                this.hoveredNode = node;
+                this.dragNodeInsertToParent = true;
+            }
+            else {
+                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 (!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) {
+        const isExpanded = this.treeControl.isExpanded(node);
+        return isExpanded ? "toggle-children-wrapper-expanded" : "toggle-children-wrapper-collapsed";
+    }
+    visibleNodes(bookmarks) {
+        const result = [];
+        function addExpandedChildren(node, expanded) {
+            result.push(node);
+            if (expanded.some(bookmark => bookmark && bookmark.id === node.id) && node.children) {
+                node.children.map((child) => addExpandedChildren(child, expanded));
+            }
+        }
+        bookmarks.forEach((node) => {
+            addExpandedChildren(node, this.treeControl.expansionModel.selected);
+        });
+        return result;
+    }
+    findNodeSiblings(arr, id) {
+        let result, subResult;
+        arr.forEach((item, i) => {
+            if (item.id === id) {
+                result = arr;
+            }
+            else if (item === null || item === void 0 ? void 0 : item.children) {
+                subResult = this.findNodeSiblings(item.children, id);
+                if (subResult)
+                    result = subResult;
+            }
+        });
+        return result;
+    }
+    rebuildTreeForData(data) {
+        this._bookmarkNodes = data !== null && data !== void 0 ? data : [];
+        this.datasource = new ArrayDataSource(this._bookmarkNodes);
+        this.treeControl = new NestedTreeControl(node => node.children);
+        this.treeControl.dataNodes = this._bookmarkNodes;
+        this.expansionModel.selected.forEach((bookmark) => {
+            const node = this.treeControl.dataNodes.find((n) => n.id === bookmark.id);
+            this.treeControl.expand(node);
+        });
+    }
+    isToNodeChildOfFromNode(fromNodeChildren, toNode) {
+        if (!fromNodeChildren) {
+            return false;
+        }
+        const result = this.getNode(fromNodeChildren, toNode.id);
+        return result ? true : false;
+    }
 }
 /** @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" }, viewQueries: [{ propertyName: "tree", first: true, predicate: TreeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<a *ngIf=\"bookmarkNodes?.length === 0\" class=\"highlightedOutlineItem\">No bookmarks created yet</a>\n<tree-root [nodes]=\"bookmarkNodes\" class=\"bookmarks-tree\" [options]=\"options\" (moveNode)=\"onBookmarkMove($event)\">\n  <ng-template #treeNodeTemplate let-node let-index=\"index\">\n    <div class=\"outlineItem\" *ngIf=\"node.data.id !== editableBookmark; else inputBookmark\">\n      <a (click)=\"goToBookmark(node.data)\">\n        {{ node.data.name }}\n      </a>\n      <button class=\"bookmark__rename\" (click)=\"editBookmark(node.data.id)\"></button>\n      <button class=\"bookmark__delete\" (click)=\"deleteBookmark(node)\"></button>\n    </div>\n    <ng-template #inputBookmark>\n      <input #bookmarkName class=\"bookmark__input\" [value]=\"node.data.name\" [maxLength]=\"BOOKMARK_CHAR_LIMIT\">\n      <button class=\"bookmark__save\" (click)=\"updateBookmark(node.data, bookmarkName.value)\"></button>\n    </ng-template>\n  </ng-template>\n</tree-root>\n", dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.TreeComponent, selector: "Tree, tree-root", inputs: ["nodes", "options", "focused", "state"], outputs: ["toggleExpanded", "activate", "deactivate", "nodeActivate", "nodeDeactivate", "select", "deselect", "focus", "blur", "updateData", "initialized", "moveNode", "copyNode", "loadNodeChildren", "changeFilter", "event", "stateChange"] }] });
+/** @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"] }] });
 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\">No bookmarks created yet</a>\n<tree-root [nodes]=\"bookmarkNodes\" class=\"bookmarks-tree\" [options]=\"options\" (moveNode)=\"onBookmarkMove($event)\">\n  <ng-template #treeNodeTemplate let-node let-index=\"index\">\n    <div class=\"outlineItem\" *ngIf=\"node.data.id !== editableBookmark; else inputBookmark\">\n      <a (click)=\"goToBookmark(node.data)\">\n        {{ node.data.name }}\n      </a>\n      <button class=\"bookmark__rename\" (click)=\"editBookmark(node.data.id)\"></button>\n      <button class=\"bookmark__delete\" (click)=\"deleteBookmark(node)\"></button>\n    </div>\n    <ng-template #inputBookmark>\n      <input #bookmarkName class=\"bookmark__input\" [value]=\"node.data.name\" [maxLength]=\"BOOKMARK_CHAR_LIMIT\">\n      <button class=\"bookmark__save\" (click)=\"updateBookmark(node.data, bookmarkName.value)\"></button>\n    </ng-template>\n  </ng-template>\n</tree-root>\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  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: [{
@@ -4622,9 +4789,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], goToDestination: [{
                 type: Output
-            }], tree: [{
-                type: ViewChild,
-                args: [TreeComponent]
             }] } });
 
 class OutlineItemComponent {
@@ -6685,8 +6849,9 @@ class MediaViewerModule {
         TagInputModule,
         FormsModule,
         ReactiveFormsModule,
-        RouterModule, i1.StoreFeatureModule, i1$2.EffectsFeatureModule, TreeModule,
-        MutableDivModule, i5.RpxTranslationModule], exports: [MediaViewerComponent] });
+        RouterModule, i1.StoreFeatureModule, i1$2.EffectsFeatureModule, MutableDivModule,
+        CdkTreeModule,
+        DragDropModule, i5.RpxTranslationModule], exports: [MediaViewerComponent] });
 /** @nocollapse */ MediaViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MediaViewerModule, providers: [
         PdfJsWrapperFactory,
         CommentService,
@@ -6710,8 +6875,9 @@ class MediaViewerModule {
         RouterModule,
         StoreModule.forFeature('media-viewer', reducers),
         EffectsModule.forFeature(effects),
-        TreeModule,
         MutableDivModule,
+        CdkTreeModule,
+        DragDropModule,
         RpxTranslationModule.forChild()] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MediaViewerModule, decorators: [{
             type: NgModule,
@@ -6727,8 +6893,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         RouterModule,
                         StoreModule.forFeature('media-viewer', reducers),
                         EffectsModule.forFeature(effects),
-                        TreeModule,
                         MutableDivModule,
+                        CdkTreeModule,
+                        DragDropModule,
                         RpxTranslationModule.forChild()
                     ],
                     declarations: [