RED-8183: close user assignment box when clicking outside.

apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html

@@ -26,6 +26,7 @@
         *ngIf="editingReviewer"
         [options]="_usersOptions()"
         [value]="file.assignee"
+        iqserStopPropagation
     ></redaction-assign-user-dropdown>
 
     <div *ngIf="!editingReviewer && _canAssign()" class="assign-actions-wrapper">

apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed } from '@angular/core';
+import { Component, computed, HostListener } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { LoadingService, Toaster } from '@iqser/common-ui';
 import { getCurrentUser } from '@iqser/common-ui/lib/users';
@@ -40,8 +40,8 @@ export class UserManagementComponent {
         return file.isUnderApproval
             ? _('dossier-overview.assign-approver')
             : file.assignee
-            ? _('file-preview.change-reviewer')
+              ? _('file-preview.change-reviewer')
-            : _('file-preview.assign-reviewer');
+              : _('file-preview.assign-reviewer');
     });
     editingReviewer = false;
 
@@ -75,6 +75,13 @@ export class UserManagementComponent {
         this.editingReviewer = false;
     }
 
+    @HostListener('document:click', ['$event'])
+    clickOutside($event: MouseEvent) {
+        if (this.editingReviewer) {
+            this.editingReviewer = false;
+        }
+    }
+
     #customSort(ids: string[]) {
         let sorted = [...ids].sort((a, b) => this.userService.getName(a).localeCompare(this.userService.getName(b)));
         sorted = moveElementInArray(sorted, this._currentUserId, 0);

apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html

@@ -31,6 +31,7 @@
                 class="ml-8"
                 icon="red:extract"
                 tooltipPosition="below"
+                iqserDisableStopPropagation
             ></iqser-circle-button>
 
             <redaction-file-actions
@@ -39,6 +40,7 @@
                 [helpModeKeyPrefix]="'editor'"
                 [minWidth]="width"
                 type="file-preview"
+                iqserDisableStopPropagation
             ></redaction-file-actions>
 
             <iqser-circle-button
@@ -47,6 +49,7 @@
                 [icon]="'red:csv'"
                 [tooltip]="'file-preview.get-tables' | translate"
                 class="ml-2"
+                iqserDisableStopPropagation
             ></iqser-circle-button>
 
             <iqser-circle-button
@@ -55,6 +58,7 @@
                 [icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'"
                 [tooltip]="'file-preview.fullscreen' | translate"
                 class="ml-2"
+                iqserDisableStopPropagation
             ></iqser-circle-button>
 
             <!-- Dev Mode Features-->
@@ -65,6 +69,7 @@
                 [type]="circleButtonTypes.primary"
                 class="ml-8"
                 icon="iqser:download"
+                iqserDisableStopPropagation
             ></iqser-circle-button>
 
             <!-- End Dev Mode Features-->
@@ -76,6 +81,7 @@
                 [tooltip]="'common.close' | translate"
                 class="ml-8"
                 icon="iqser:close"
+                iqserDisableStopPropagation
             ></iqser-circle-button>
         </div>
     </div>
@@ -88,7 +94,7 @@
         </div>
 
         <div class="right-container">
-            <redaction-file-preview-right-container></redaction-file-preview-right-container>
+            <redaction-file-preview-right-container iqserDisableStopPropagation></redaction-file-preview-right-container>
         </div>
     </div>
 </section>

apps/red-ui/src/app/modules/file-preview/file-preview.module.ts

@@ -8,6 +8,7 @@ import {
     CapitalizePipe,
     CircleButtonComponent,
     DetailsRadioComponent,
+    DisableStopPropagationDirective,
     DynamicInputComponent,
     EditableInputComponent,
     EmptyStateComponent,
@@ -152,6 +153,7 @@ const components = [
         IqserDenyDirective,
         LogPipe,
         ReplaceNbspPipe,
+        DisableStopPropagationDirective,
     ],
     providers: [FilePreviewDialogService, ManualRedactionService, DocumentUnloadedGuard, TablesService],
 })

apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html

@@ -5,7 +5,7 @@
                 <mat-select-trigger>
                     <ng-container *ngTemplateOutlet="avatar; context: getContext(value)"></ng-container>
                 </mat-select-trigger>
-                <mat-option *ngFor="let user of options" [id]="'assignee-option-' + user" [value]="user">
+                <mat-option *ngFor="let user of options" [id]="'assignee-option-' + user" [value]="user" iqserStopPropagation>
                     <ng-container *ngTemplateOutlet="avatar; context: getContext(user)"></ng-container>
                 </mat-option>
             </mat-select>
@@ -20,6 +20,7 @@
         class="pl-1"
         icon="iqser:check"
         tooltipPosition="below"
+        iqserStopPropagation
     ></iqser-circle-button>
 
     <iqser-circle-button