@hmcts/media-viewer 3.1.1 → 3.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4783,7 +4783,8 @@ class BookmarksComponent {
4783
4783
  this._bookmarkNodes = [];
4784
4784
  // expansion model tracks expansion state
4785
4785
  this.expansionModel = new SelectionModel(true);
4786
- this.dragging = false;
4786
+ this.isDraggingOn = false;
4787
+ this.isUserdragging = false;
4787
4788
  this.expandDelay = 1000;
4788
4789
  this.pageLookup = {};
4789
4790
  this.BOOKMARK_CHAR_LIMIT = 30;
@@ -4900,12 +4901,14 @@ class BookmarksComponent {
4900
4901
  }
4901
4902
  positionSortBookmarks() {
4902
4903
  this.bookmarkNodes.sort((a, b) => a.pageNumber === b.pageNumber ? a.yCoordinate - b.yCoordinate : a.pageNumber - b.pageNumber);
4904
+ this.isDraggingOn = false;
4903
4905
  this.rebuildTreeForData(this.bookmarkNodes);
4904
4906
  }
4905
4907
  customSortBookmarks() {
4906
4908
  if (this.bookmarkNodes.length > 1) {
4907
4909
  this.bookmarkNodes.sort((a, b) => a.index - b.index);
4908
4910
  }
4911
+ this.isDraggingOn = true;
4909
4912
  this.rebuildTreeForData(this.bookmarkNodes);
4910
4913
  }
4911
4914
  scaledY(yCoordinate, height, page) {
@@ -5008,13 +5011,13 @@ class BookmarksComponent {
5008
5011
  dragStart() {
5009
5012
  this.dragNodeInsertToParent = false;
5010
5013
  this.hoveredNode = null;
5011
- this.dragging = true;
5014
+ this.isUserdragging = true;
5012
5015
  }
5013
5016
  dragEnd() {
5014
- this.dragging = false;
5017
+ this.isUserdragging = false;
5015
5018
  }
5016
5019
  dragHover(event, node) {
5017
- if (this.dragging) {
5020
+ if (this.isUserdragging) {
5018
5021
  const newEvent = event;
5019
5022
  const percentageX = newEvent.offsetX / newEvent.target.clientWidth;
5020
5023
  if (percentageX > .55) {
@@ -5025,19 +5028,14 @@ class BookmarksComponent {
5025
5028
  this.hoveredNode = null;
5026
5029
  this.dragNodeInsertToParent = false;
5027
5030
  }
5028
- clearTimeout(this.expandTimeout);
5029
- this.expandTimeout = setTimeout(() => {
5030
- this.treeControl.expand(node);
5031
- }, this.expandDelay);
5032
5031
  }
5033
5032
  }
5034
5033
  dragHoverEnd(event, node) {
5035
- if (this.dragging) {
5034
+ if (this.isUserdragging) {
5036
5035
  if (!node || this.hoveredNode?.id !== node.id) {
5037
5036
  this.dragNodeInsertToParent = false;
5038
5037
  this.hoveredNode = null;
5039
5038
  }
5040
- clearTimeout(this.expandTimeout);
5041
5039
  }
5042
5040
  }
5043
5041
  onNodeExpand(node) {
@@ -5090,10 +5088,10 @@ class BookmarksComponent {
5090
5088
  }
5091
5089
  }
5092
5090
  /** @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 });
5093
- /** @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"] }] });
5091
+ /** @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"] }] });
5094
5092
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BookmarksComponent, decorators: [{
5095
5093
  type: Component,
5096
- 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" }]
5094
+ 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" }]
5097
5095
  }], ctorParameters: function () { return [{ type: i1.Store }]; }, propDecorators: { bookmarkNodes: [{
5098
5096
  type: Input
5099
5097
  }], zoom: [{