@hmcts/media-viewer 2.7.19 → 2.7.21

package/fesm5/hmcts-media-viewer.js

@@ -3815,7 +3815,7 @@ var ImageViewerComponent = /** @class */ (function () {
     ImageViewerComponent.decorators = [
         { type: Component, args: [{
                     selector: 'mv-image-viewer',
-                    template: "<mv-comment-set-header [ngClass]=\"{'show-comments-panel': showCommentsPanel}\"\n                       [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n                       (showCommentSummaryDialog)=\"toggleCommentsSummary()\">\n</mv-comment-set-header>\n<div mvGrabNDrag [dragX]=\"imageContainer\" [dragEnabled]=\"enableGrabNDrag\"\n     id=\"viewer-wrapper\"\n     [ngStyle]=\"{ height: height }\"\n     [ngClass]=\"{ 'grabNDrag': enableGrabNDrag }\"\n     *ngIf=\"url && !errorMessage\">\n  <div #imageContainer id=\"image-container\"\n       [ngClass]=\"{ 'image-container': true, 'annotations': enableAnnotations, 'show-comments-panel': showCommentsPanel }\"\n       [style.height.px]=\"imageHeight\">\n    <img #img\n         [src]=\"url\"\n         [ngClass]=\"'rot' + rotation\"\n         (error)=\"onLoadError(url)\"\n         (load)=\"onLoad(img)\"/>\n    <mv-redactions *ngIf=\"(toolbarEvents.redactionMode | async);else annotationTemplate\"\n                   [zoom]=\"zoom\"\n                   [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer *ngIf=\"enableAnnotations && annotationSet\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-metadata-layer>\n    </ng-template>\n  </div>\n\n  <div class=\"comments\" [style.height.px]=\"imageHeight\">\n    <mv-comment-set *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                    [annotationSet]=\"annotationSet\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotation\"\n                    [height]=\"imageHeight\">\n    </mv-comment-set>\n  </div>\n</div>\n"
+                    template: "<mv-comment-set-header [ngClass]=\"{'show-comments-panel': showCommentsPanel}\"\n                       [showCommentSummary]=\"toolbarButtons.showCommentSummary\"\n                       (showCommentSummaryDialog)=\"toggleCommentsSummary()\">\n</mv-comment-set-header>\n<div mvGrabNDrag [dragX]=\"imageContainer\" [dragEnabled]=\"enableGrabNDrag\"\n     id=\"viewer-wrapper\"\n     [ngStyle]=\"{ height: height }\"\n     [ngClass]=\"{ 'grabNDrag': enableGrabNDrag }\"\n     *ngIf=\"url && !errorMessage\">\n  <div #imageContainer mvCreateTextHighlight id=\"image-container\"\n       [ngClass]=\"{ 'image-container': true, 'annotations': enableAnnotations, 'show-comments-panel': showCommentsPanel }\"\n       [style.height.px]=\"imageHeight\">\n    <img #img\n         [src]=\"url\"\n         [ngClass]=\"'rot' + rotation\"\n         (error)=\"onLoadError(url)\"\n         (load)=\"onLoad(img)\"/>\n    <mv-redactions *ngIf=\"(toolbarEvents.redactionMode | async);else annotationTemplate\"\n                   [zoom]=\"zoom\"\n                   [rotate]=\"rotation\"\n    ></mv-redactions>\n    <ng-template #annotationTemplate>\n      <mv-metadata-layer *ngIf=\"enableAnnotations && annotationSet\"\n                         [zoom]=\"zoom\"\n                         [rotate]=\"rotation\">\n      </mv-metadata-layer>\n    </ng-template>\n  </div>\n\n  <div class=\"comments\" [style.height.px]=\"imageHeight\">\n    <mv-comment-set *ngIf=\"enableAnnotations && annotationSet && !(toolbarEvents.redactionMode | async)\"\n                    [annotationSet]=\"annotationSet\"\n                    [zoom]=\"zoom\"\n                    [rotate]=\"rotation\"\n                    [height]=\"imageHeight\">\n    </mv-comment-set>\n  </div>\n</div>\n"
                 }] }
     ];
     /** @nocollapse */
@@ -5222,10 +5222,19 @@ var SearchBarComponent = /** @class */ (function () {
      * @return {?}
      */
     function (results) {
+        var _this = this;
         this.resultCount = results.total;
         this.resultsText = this.resultCount > 0
             ? "Found " + results.current + " of " + results.total
             : 'No results found';
+        if (this.resultCount && this.resultCount > 0) {
+            setTimeout((/**
+             * @return {?}
+             */
+            function () {
+                _this.findNext.nativeElement.focus();
+            }), 200);
+        }
     };
     /**
      * @param {?} e
@@ -5270,7 +5279,7 @@ var SearchBarComponent = /** @class */ (function () {
     SearchBarComponent.decorators = [
         { type: Component, args: [{
                     selector: 'mv-search-bar',
-                    template: "<div class=\"searchbar govuk-!-padding-3\" [hidden]=\"toolbarEvents.searchBarHidden | async\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <input class=\"govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-5 govuk-!-margin-top-5\"\n        type=\"text\" aria-label=\"Find in document\" #findInput [(ngModel)]=\"searchText\" (keydown.escape)=\"onEscapeKeyPress($event)\" (keydown.enter)=\"onEnterKeyPress($event)\" title=\"Find in document\"\n        placeholder=\"Find in document\u2026\" tabindex=\"0\" data-l10n-id=\"find_input\" />\n      <button class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\" data-module=\"govuk-button\"\n        (click)=\"search()\" style=\" position: absolute; top: 40px; right: 10px; \">\n        Search\n      </button>\n      <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button searchbar-button--close\" title=\"Close Search\" data-l10n-id=\"mvRedactBtn\"\n        (click)=\"toggleSearchBar()\">\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span id=\"findResultsCount\" class=\"govuk-!-display-inline-block govuk-!-margin-right-4\">{{resultsText}}</span>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\" title=\"Find the previous occurrence of the phrase\" data-l10n-id=\"find_previous\">Prev</a>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\" data-l10n-id=\"find_next\">Next</a>\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"toggleAdvancedSearch()\" title=\"Advanced\"\n        data-l10n-id=\"find_advanced\" style=\" position: absolute; top: 95px; right: 15px; \">Advanced</a>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\" *ngIf=\"advancedSearchVisible\">\n    <div class=\"govuk-grid-column-full\">\n      <div class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findHighlightAll\" name=\"findHighlightAll\" type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\" [checked]=\"highlightAll\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findHighlightAll\" data-l10n-id=\"find_highlight\">\n                Highlight all\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findMatchCase\" name=\"findMatchCase\" type=\"checkbox\"\n                (change)=\"matchCase = !matchCase; search()\" [checked]=\"matchCase\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findMatchCase\"\n                data-l10n-id=\"find_match_case_label\">\n                Match text (exact case)\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findEntireWord\" name=\"findMatchCase\" type=\"checkbox\"\n                (change)=\"wholeWord = !wholeWord; search()\" [checked]=\"wholeWord\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findEntireWord\"\n                data-l10n-id=\"find_entire_word_label\">\n                Match whole words or sentences\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                    template: "<div class=\"searchbar govuk-!-padding-3\" [hidden]=\"toolbarEvents.searchBarHidden | async\">\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-full\">\n      <input class=\"govuk-input govuk-!-display-inline-block govuk-!-width-three-quarters govuk-!-margin-bottom-5 govuk-!-margin-top-5\"\n        type=\"text\" aria-label=\"Find in document\" #findInput [(ngModel)]=\"searchText\" (keydown.escape)=\"onEscapeKeyPress($event)\" (keydown.enter)=\"onEnterKeyPress($event)\" title=\"Find in document\"\n        placeholder=\"Find in document\u2026\" tabindex=\"0\" data-l10n-id=\"find_input\" />\n      <button class=\"govuk-button govuk-!-display-inline-block govuk-!-margin-bottom-4\" data-module=\"govuk-button\"\n        (click)=\"search()\" style=\" position: absolute; top: 40px; right: 10px; \">\n        Search\n      </button>\n      <button id=\"mvCloseBtn\" #mvCloseBtn class=\"mv-button searchbar-button--close\" title=\"Close Search\" data-l10n-id=\"mvRedactBtn\"\n        (click)=\"toggleSearchBar()\">\n      </button>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\">\n    <div class=\"govuk-grid-column-three-quarters\">\n      <span id=\"findResultsCount\" class=\"govuk-!-display-inline-block govuk-!-margin-right-4\">{{resultsText}}</span>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state govuk-!-margin-right-2\"\n        (click)=\"searchPrev()\" title=\"Find the previous occurrence of the phrase\" data-l10n-id=\"find_previous\">Prev</a>\n      <a *ngIf=\"resultCount > 0\" [routerLink]=\"\" #findNext class=\"govuk-link govuk-link--no-visited-state\" (click)=\"searchNext()\"\n        title=\"Find the next occurrence of the phrase\" data-l10n-id=\"find_next\">Next</a>\n    </div>\n    <div class=\"govuk-grid-column-one-quarter\">\n      <a [routerLink]=\"\" class=\"govuk-link govuk-link--no-visited-state\" (click)=\"toggleAdvancedSearch()\" title=\"Advanced\"\n        data-l10n-id=\"find_advanced\" style=\" position: absolute; top: 95px; right: 15px; \">Advanced</a>\n    </div>\n  </div>\n\n  <div class=\"govuk-grid-row\" *ngIf=\"advancedSearchVisible\">\n    <div class=\"govuk-grid-column-full\">\n      <div class=\"govuk-form-group govuk-!-margin-top-3 govuk-!-margin-bottom-1\">\n        <fieldset class=\"govuk-fieldset\" aria-describedby=\"advanced\">\n          <div class=\"govuk-checkboxes\">\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findHighlightAll\" name=\"findHighlightAll\" type=\"checkbox\"\n                (change)=\"highlightAll = !highlightAll; search()\" [checked]=\"highlightAll\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findHighlightAll\" data-l10n-id=\"find_highlight\">\n                Highlight all\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findMatchCase\" name=\"findMatchCase\" type=\"checkbox\"\n                (change)=\"matchCase = !matchCase; search()\" [checked]=\"matchCase\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findMatchCase\"\n                data-l10n-id=\"find_match_case_label\">\n                Match text (exact case)\n              </label>\n            </div>\n            <div class=\"govuk-checkboxes__item\">\n              <input class=\"govuk-checkboxes__input\" id=\"findEntireWord\" name=\"findMatchCase\" type=\"checkbox\"\n                (change)=\"wholeWord = !wholeWord; search()\" [checked]=\"wholeWord\">\n              <label class=\"govuk-label govuk-checkboxes__label\" for=\"findEntireWord\"\n                data-l10n-id=\"find_entire_word_label\">\n                Match whole words or sentences\n              </label>\n            </div>\n          </div>\n        </fieldset>\n      </div>\n    </div>\n  </div>\n</div>\n"
                 }] }
     ];
     /** @nocollapse */
@@ -5280,6 +5289,7 @@ var SearchBarComponent = /** @class */ (function () {
     ]; };
     SearchBarComponent.propDecorators = {
         findInput: [{ type: ViewChild, args: ['findInput',] }],
+        findNext: [{ type: ViewChild, args: ['findNext',] }],
         onWindowKeyDown: [{ type: HostListener, args: ['window:keydown', ['$event'],] }]
     };
     return SearchBarComponent;
@@ -8955,7 +8965,7 @@ var SideBarComponent = /** @class */ (function () {
          * @return {?}
          */
         function (bookmarkInfo) {
-            _this.store.dispatch(new CreateBookmark((/** @type {?} */ (__assign({}, bookmarkInfo, { name: 'new bookmark', id: uuid$1() })))));
+            _this.store.dispatch(new CreateBookmark((/** @type {?} */ (__assign({}, bookmarkInfo, { name: '', id: uuid$1() })))));
         }));
     };
     SideBarComponent.decorators = [
@@ -10863,8 +10873,10 @@ var BookmarksComponent = /** @class */ (function () {
     function (bookmark, name) {
         /** @type {?} */
         var editedBookmark = __assign({}, bookmark, { name: name });
-        this.store.dispatch(new UpdateBookmark(editedBookmark));
-        this.editableBookmark = undefined;
+        if (name) {
+            this.store.dispatch(new UpdateBookmark(editedBookmark));
+            this.editableBookmark = undefined;
+        }
     };
     /**
      * @param {?} bookmark
@@ -11408,7 +11420,9 @@ var HighlightCreateDirective = /** @class */ (function () {
      */
     function (event) {
         this.store.dispatch(new SelectedAnnotation({
-            annotationId: '', selected: false, editable: false
+            annotationId: '',
+            selected: false,
+            editable: false,
         }));
         this.viewerEvents.clearCtxToolbar();
     };
@@ -11445,10 +11459,22 @@ var HighlightCreateDirective = /** @class */ (function () {
                     var parentRect = localElement.parentElement.getBoundingClientRect();
                     /** @type {?} */
                     var selectionRectangles = [];
-                    for (var i = 0; i < clientRects.length; i++) {
+                    var _loop_1 = function (i) {
                         /** @type {?} */
-                        var selectionRectangle = this.createTextRectangle(clientRects[i], parentRect);
-                        selectionRectangles.push(selectionRectangle);
+                        var selectionRectangle = this_1.createTextRectangle(clientRects[i], parentRect);
+                        /** @type {?} */
+                        var findSelecttionRectangle = selectionRectangles.find((/**
+                         * @param {?} rect
+                         * @return {?}
+                         */
+                        function (rect) { return rect.width === selectionRectangle.width && rect.x === selectionRectangle.x; }));
+                        if (!findSelecttionRectangle) {
+                            selectionRectangles.push(selectionRectangle);
+                        }
+                    };
+                    var this_1 = this;
+                    for (var i = 0; i < clientRects.length; i++) {
+                        _loop_1(i);
                     }
                     return selectionRectangles;
                 }