@hmcts/media-viewer 3.1.0 → 3.1.2

package/fesm2020/hmcts-media-viewer.mjs

@@ -4783,7 +4783,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;
@@ -4900,12 +4901,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) {
@@ -4930,7 +4933,8 @@ class BookmarksComponent {
         if (!event.isPointerOverContainer || (event.previousIndex === event.currentIndex))
             return;
         const hasMovedUpTheTree = event.previousIndex > event.currentIndex;
-        const changedData = JSON.parse(JSON.stringify(this.bookmarkNodes));
+        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);
@@ -4939,6 +4943,8 @@ class BookmarksComponent {
         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?.children, toNode))
+            return;
         if (this.dragNodeInsertToParent) {
             const indexOfParent = toNodeSiblings.findIndex(element => element.id === toNode.id);
             const parentNode = toNodeSiblings[indexOfParent];
@@ -4947,18 +4953,29 @@ class BookmarksComponent {
             if (firstChild) {
                 movedBookmarksWithParent = [...movedBookmarksWithParent, { ...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, { ...fromNodeSibling, previous: fromNode.previous }];
+            }
             let previousSiblingForParentIndex = toIndex - 1;
-            let parentNodeSibling = this.getSiblingFromAllSibliings(fromNodeSiblings, previousSiblingForParentIndex);
-            if (parentNodeSibling.id == fromNode.id) {
+            let parentNodeSibling = this.getSiblingFromAllSibliings(toNodeSiblings, previousSiblingForParentIndex);
+            if (parentNodeSibling && parentNodeSibling.id == fromNode.id) {
                 previousSiblingForParentIndex = previousSiblingForParentIndex - 1;
-                if (previousSiblingForParentIndex > 0) {
-                    parentNodeSibling = this.getSiblingFromAllSibliings(fromNodeSiblings, previousSiblingForParentIndex);
+                if (previousSiblingForParentIndex >= 0) {
+                    parentNodeSibling = this.getSiblingFromAllSibliings(toNodeSiblings, previousSiblingForParentIndex);
                 }
                 else {
                     parentNodeSibling = null;
                 }
             }
             movedBookmarksWithParent = [...movedBookmarksWithParent, { ...parentNode, previous: 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;
         }
@@ -4971,7 +4988,8 @@ class BookmarksComponent {
                 parent: toNodeParent
             }];
         let fromNodeSibling = this.getSiblingFromAllSibliings(fromNodeSiblings, fromIndex + 1);
-        fromNodeSibling = fromNodeSibling && fromNodeSibling.id === fromNode.previous ? this.getSiblingFromAllSibliings(fromNodeSiblings, fromIndex + 1) : fromNodeSibling;
+        const nextFromindex = fromIndex + 1;
+        fromNodeSibling = fromNodeSibling && fromNodeSibling.id === fromNode.previous ? this.getSiblingFromAllSibliings(fromNodeSiblings, nextFromindex + 1) : fromNodeSibling;
         if (fromNodeSibling) {
             movedBookmarks = [...movedBookmarks, { ...fromNodeSibling, previous: fromNode.previous }];
         }
@@ -4993,13 +5011,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) {
@@ -5010,19 +5028,14 @@ class BookmarksComponent {
                 this.hoveredNode = null;
                 this.dragNodeInsertToParent = false;
             }
-            clearTimeout(this.expandTimeout);
-            this.expandTimeout = setTimeout(() => {
-                this.treeControl.expand(node);
-            }, this.expandDelay);
         }
     }
     dragHoverEnd(event, node) {
-        if (this.dragging) {
+        if (this.isUserdragging) {
             if (!node || this.hoveredNode?.id !== node.id) {
                 this.dragNodeInsertToParent = false;
                 this.hoveredNode = null;
             }
-            clearTimeout(this.expandTimeout);
         }
     }
     onNodeExpand(node) {
@@ -5048,7 +5061,7 @@ class BookmarksComponent {
             if (item.id === id) {
                 result = arr;
             }
-            else if (item.children) {
+            else if (item?.children) {
                 subResult = this.findNodeSiblings(item.children, id);
                 if (subResult)
                     result = subResult;
@@ -5066,12 +5079,19 @@ class BookmarksComponent {
             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" }, 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: [{