From ca07790597c17ac4b7c4755bbc583af0a24b3bac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 3 Nov 2020 12:57:30 +0200
Subject: [PATCH 1/3] Clear toasts on navigation events

---
 .../src/app/notification/notification.service.ts    | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/apps/red-ui/src/app/notification/notification.service.ts b/apps/red-ui/src/app/notification/notification.service.ts
index 319c1d1ff..edf75d17a 100644
--- a/apps/red-ui/src/app/notification/notification.service.ts
+++ b/apps/red-ui/src/app/notification/notification.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActiveToast, ToastrService } from 'ngx-toastr';
 import { IndividualConfig } from 'ngx-toastr/toastr/toastr-config';
+import { NavigationStart, Router } from '@angular/router';
 
 export enum NotificationType {
     SUCCESS = 'SUCCESS',
@@ -19,7 +20,17 @@ export class Action {
     providedIn: 'root'
 })
 export class NotificationService {
-    constructor(private readonly _snackBar: MatSnackBar, private readonly _toastr: ToastrService) {}
+    constructor(
+        private readonly _snackBar: MatSnackBar,
+        private readonly _toastr: ToastrService,
+        private readonly _router: Router
+    ) {
+        _router.events.subscribe((event) => {
+            if (event instanceof NavigationStart) {
+                this._toastr.clear();
+            }
+        });
+    }
 
     showToastNotification(
         message: string,

From 6733c4e7a838f69c4be4d051e11ddb39499910e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 3 Nov 2020 13:38:12 +0200
Subject: [PATCH 2/3] Style tooltips

---
 .../initials-avatar.component.html            |   2 +-
 .../file-preview-screen.component.html        |   1 +
 .../project-listing-screen.component.html     |   4 +
 .../project-overview-screen.component.html    | 104 ++++++++++--------
 .../upload-status-overlay.component.html      |  43 +++++---
 apps/red-ui/src/assets/styles/red-theme.scss  |   1 +
 .../src/assets/styles/red-tooltips.scss       |  28 +++++
 7 files changed, 118 insertions(+), 65 deletions(-)
 create mode 100644 apps/red-ui/src/assets/styles/red-tooltips.scss

diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
index 858e82d99..8b3416dd2 100644
--- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
+++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
@@ -1,4 +1,4 @@
-<div class="flex-row" [matTooltip]="username">
+<div [matTooltipPosition]="'above'" [matTooltip]="username" class="flex-row">
     <div [className]="colorClass + ' oval ' + size">{{ initials }}</div>
     <div *ngIf="withName" class="clamp-2">
         {{ username || ('initials-avatar.unassigned.label' | translate) }}
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
index 3f73c2bc2..7c2c5a804 100644
--- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
@@ -47,6 +47,7 @@
                             : 'project-overview.under-approval'
                         ) | translate
                     "
+                    [matTooltipPosition]="'above'"
                 >
                     <mat-icon svgIcon="red:check-alt"></mat-icon>
                 </button>
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index f60684eb6..d3468fce3 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -167,6 +167,7 @@
                         <button
                             (click)="openDeleteProjectDialog($event, pw.project)"
                             [matTooltip]="'project-listing.delete.action.label' | translate"
+                            [matTooltipPosition]="'above'"
                             *ngIf="userService.isManager(user)"
                             color="accent"
                             mat-icon-button
@@ -178,6 +179,7 @@
                             (click)="downloadRedactionReport($event, pw.project)"
                             *ngIf="userService.isManager(user)"
                             [matTooltip]="'project-listing.report.action.label' | translate"
+                            [matTooltipPosition]="'above'"
                             color="accent"
                         >
                             <mat-icon svgIcon="red:report"></mat-icon>
@@ -185,6 +187,7 @@
                         <button
                             (click)="openAssignProjectOwnerDialog($event, pw.project)"
                             [matTooltip]="'project-listing.assign.action.label' | translate"
+                            [matTooltipPosition]="'above'"
                             *ngIf="userService.isManager(user)"
                             color="accent"
                             mat-icon-button
@@ -197,6 +200,7 @@
                             (click)="reanalyseProject($event, pw.project)"
                             mat-icon-button
                             [matTooltip]="'project-listing.reanalyse.action.label' | translate"
+                            [matTooltipPosition]="'above'"
                         >
                             <mat-icon svgIcon="red:refresh"></mat-icon>
                         </button>
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 705dab213..c9e18a25e 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -11,28 +11,28 @@
     <div class="filters flex-row">
         <div translate="filters.filter-by.label"></div>
         <redaction-filter
-            [filters]="statusFilters"
+            (filtersChanged)="filtersChanged()"
             [filterLabel]="'filters.status.label'"
+            [filters]="statusFilters"
             [hasArrow]="false"
             [icon]="'red:status'"
-            (filtersChanged)="filtersChanged()"
         ></redaction-filter>
         <redaction-filter
-            [filters]="peopleFilters"
+            (filtersChanged)="filtersChanged()"
             [filterLabel]="'filters.people.label'"
+            [filters]="peopleFilters"
             [hasArrow]="false"
             [icon]="'red:user'"
-            (filtersChanged)="filtersChanged()"
         ></redaction-filter>
         <!--        <button mat-button translate="filters.due-date.label">-->
         <!--            <mat-icon svgIcon="red:lightning"></mat-icon>-->
         <!--        </button>-->
         <redaction-filter
-            [filters]="addedDateFilters"
+            (filtersChanged)="filtersChanged()"
             [filterLabel]="'filters.created-on.label'"
+            [filters]="addedDateFilters"
             [hasArrow]="false"
             [icon]="'red:calendar'"
-            (filtersChanged)="filtersChanged()"
         ></redaction-filter>
         <!--        <button mat-button translate="filters.project.label">-->
         <!--            <mat-icon svgIcon="red:folder"></mat-icon>-->
@@ -61,10 +61,10 @@
         <div class="table-header">
             <div class="select-all-container">
                 <div
-                    *ngIf="bulkSelectActive"
-                    class="select-oval"
-                    [class.active]="areAllFilesSelected()"
                     (click)="toggleSelectAll()"
+                    *ngIf="bulkSelectActive"
+                    [class.active]="areAllFilesSelected()"
+                    class="select-oval"
                 ></div>
                 <span class="all-caps-label">
                     {{
@@ -76,10 +76,10 @@
             </div>
             <div class="actions">
                 <div
-                    translate="project-overview.table-header.bulk-select.label"
-                    class="pointer"
-                    [class.active]="bulkSelectActive"
                     (click)="toggleBulkSelect()"
+                    [class.active]="bulkSelectActive"
+                    class="pointer"
+                    translate="project-overview.table-header.bulk-select.label"
                 ></div>
                 <redaction-sorting
                     #sortingComponent
@@ -89,24 +89,24 @@
             </div>
         </div>
 
-        <div class="grid-container" [class.bulk-select]="bulkSelectActive">
+        <div [class.bulk-select]="bulkSelectActive" class="grid-container">
             <!--      Table column names-->
-            <div class="select-oval-placeholder" *ngIf="bulkSelectActive"></div>
+            <div *ngIf="bulkSelectActive" class="select-oval-placeholder"></div>
 
             <redaction-table-col-name
-                label="project-overview.table-col-names.name.label"
-                column="filename"
+                (toggleSort)="sortingComponent.toggleSort($event)"
                 [activeSortingOption]="sortingOption"
                 [withSort]="true"
-                (toggleSort)="sortingComponent.toggleSort($event)"
+                column="filename"
+                label="project-overview.table-col-names.name.label"
             ></redaction-table-col-name>
 
             <redaction-table-col-name
-                label="project-overview.table-col-names.added-on.label"
-                column="added"
+                (toggleSort)="sortingComponent.toggleSort($event)"
                 [activeSortingOption]="sortingOption"
                 [withSort]="true"
-                (toggleSort)="sortingComponent.toggleSort($event)"
+                column="added"
+                label="project-overview.table-col-names.added-on.label"
             ></redaction-table-col-name>
 
             <redaction-table-col-name
@@ -118,12 +118,12 @@
             ></redaction-table-col-name>
 
             <redaction-table-col-name
-                label="project-overview.table-col-names.status.label"
-                class="flex-end"
-                column="status"
+                (toggleSort)="sortingComponent.toggleSort($event)"
                 [activeSortingOption]="sortingOption"
                 [withSort]="true"
-                (toggleSort)="sortingComponent.toggleSort($event)"
+                class="flex-end"
+                column="status"
+                label="project-overview.table-col-names.status.label"
             ></redaction-table-col-name>
 
             <div
@@ -133,12 +133,11 @@
             ></div>
 
             <div
-                class="table-item"
-                [class.pointer]="canOpenFile(fileStatus)"
                 *ngFor="
                     let fileStatus of displayedFiles
                         | sortBy: sortingOption.order:sortingOption.column
                 "
+                [class.pointer]="canOpenFile(fileStatus)"
                 [routerLink]="
                     canOpenFile(fileStatus)
                         ? [
@@ -149,21 +148,25 @@
                           ]
                         : []
                 "
+                class="table-item"
             >
-                <div class="pr-0" *ngIf="bulkSelectActive">
+                <div *ngIf="bulkSelectActive" class="pr-0">
                     <div
-                        class="select-oval"
-                        [class.active]="isFileSelected(fileStatus)"
                         (click)="toggleFileSelected($event, fileStatus)"
+                        [class.active]="isFileSelected(fileStatus)"
+                        class="select-oval"
                     ></div>
                 </div>
 
-                <div [matTooltip]="'[' + fileStatus.status + '] ' + fileStatus.filename">
+                <div
+                    [matTooltipPosition]="'above'"
+                    [matTooltip]="'[' + fileStatus.status + '] ' + fileStatus.filename"
+                >
                     <div class="filename-wrapper">
                         <div
-                            class="table-item-title"
                             [class.disabled]="isPending(fileStatus) || isProcessing(fileStatus)"
                             [class.error]="isError(fileStatus)"
+                            class="table-item-title"
                         >
                             {{ fileStatus.filename }}
                         </div>
@@ -182,12 +185,12 @@
                 </div>
 
                 <div>
-                    <div class="small-label" [class.error]="isError(fileStatus)">
+                    <div [class.error]="isError(fileStatus)" class="small-label">
                         {{ fileStatus.added | date: 'd MMM. yyyy, hh:mm a' }}
                     </div>
                 </div>
 
-                <div class="needs-work" *ngIf="!isError(fileStatus)">
+                <div *ngIf="!isError(fileStatus)" class="needs-work">
                     <redaction-annotation-icon
                         *ngIf="fileStatus.hasRedactions"
                         [typeValue]="appStateService.getDictionaryTypeValue('redaction')"
@@ -202,27 +205,27 @@
                     ></redaction-annotation-icon>
                 </div>
 
-                <div class="assigned-to" *ngIf="!isError(fileStatus)">
+                <div *ngIf="!isError(fileStatus)" class="assigned-to">
                     <redaction-initials-avatar
-                        withName="true"
                         [userId]="fileStatus.currentReviewer"
+                        withName="true"
                     ></redaction-initials-avatar>
                 </div>
 
-                <div class="status-container" [class.extend-cols]="isError(fileStatus)">
+                <div [class.extend-cols]="isError(fileStatus)" class="status-container">
                     <div
                         *ngIf="isError(fileStatus)"
                         class="small-label error"
                         translate="project-overview.file-listing.file-entry.file-error.label"
                     ></div>
                     <div
-                        class="small-label"
                         *ngIf="isPending(fileStatus)"
+                        class="small-label"
                         translate="project-overview.file-listing.file-entry.file-pending.label"
                     ></div>
                     <div
-                        class="small-label"
                         *ngIf="isProcessing(fileStatus)"
+                        class="small-label"
                         translate="processing"
                     ></div>
                     <redaction-status-bar
@@ -242,58 +245,63 @@
                     <div class="action-buttons">
                         <button
                             (click)="openDeleteFileDialog($event, fileStatus)"
-                            color="accent"
                             *ngIf="
                                 userService.isManager(user) || appStateService.isActiveProjectOwner
                             "
-                            mat-icon-button
                             [matTooltip]="'project-overview.delete.action.label' | translate"
+                            [matTooltipPosition]="'above'"
+                            color="accent"
+                            mat-icon-button
                         >
                             <mat-icon svgIcon="red:trash"></mat-icon>
                         </button>
                         <button
                             (click)="downloadFileRedactionReport($event, fileStatus)"
+                            [matTooltip]="'project-overview.report.action.label' | translate"
+                            [matTooltipPosition]="'above'"
                             color="accent"
                             mat-icon-button
-                            [matTooltip]="'project-overview.report.action.label' | translate"
                         >
                             <mat-icon svgIcon="red:report"></mat-icon>
                         </button>
                         <button
                             (click)="assignReviewer($event, fileStatus)"
-                            color="accent"
                             *ngIf="
                                 appStateService.isActiveProjectMember &&
                                 !isApprovedOrUnderApproval(fileStatus)
                             "
-                            mat-icon-button
                             [matTooltip]="'project-overview.assign.action.label' | translate"
+                            [matTooltipPosition]="'above'"
+                            color="accent"
+                            mat-icon-button
                         >
                             <mat-icon svgIcon="red:assign"></mat-icon>
                         </button>
                         <button
-                            *ngIf="!isApprovedOrUnderApproval(fileStatus)"
                             (click)="reanalyseFile($event, fileStatus)"
+                            *ngIf="!isApprovedOrUnderApproval(fileStatus)"
+                            [matTooltip]="'project-overview.reanalyse.action.label' | translate"
+                            [matTooltipPosition]="'above'"
                             color="accent"
                             mat-icon-button
-                            [matTooltip]="'project-overview.reanalyse.action.label' | translate"
                         >
                             <mat-icon svgIcon="red:refresh"></mat-icon>
                         </button>
                         <button
+                            (click)="requestApprovalOrApproveFile($event, fileStatus)"
                             *ngIf="
                                 canApprove(fileStatus) &&
                                 appStateService.isActiveProjectOwnerAndManager
                             "
-                            (click)="requestApprovalOrApproveFile($event, fileStatus)"
-                            color="accent"
-                            mat-icon-button
                             [matTooltip]="
                                 (fileStatus.status === 'UNDER_APPROVAL'
                                     ? 'project-overview.approve'
                                     : 'project-overview.under-approval'
                                 ) | translate
                             "
+                            [matTooltipPosition]="'above'"
+                            color="accent"
+                            mat-icon-button
                         >
                             <mat-icon svgIcon="red:check-alt"></mat-icon>
                         </button>
diff --git a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
index fe8922229..5526ff1ae 100644
--- a/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
+++ b/apps/red-ui/src/app/upload/upload-status-dialog/upload-status-overlay.component.html
@@ -1,12 +1,12 @@
 <section class="red-upload-overlay mat-elevation-z4">
-    <div class="red-upload-header" (click)="collapsed = !collapsed">
+    <div (click)="collapsed = !collapsed" class="red-upload-header">
         <div class="title">
             {{ 'upload-status.dialog.title.label' | translate: { p1: uploadService.files.length } }}
         </div>
-        <div class="collapse-icon" *ngIf="!collapsed">
+        <div *ngIf="!collapsed" class="collapse-icon">
             <mat-icon svgIcon="red:arrow-down"></mat-icon>
         </div>
-        <div class="collapse-icon" *ngIf="collapsed">
+        <div *ngIf="collapsed" class="collapse-icon">
             <mat-icon svgIcon="red:arrow-up"></mat-icon>
         </div>
         <div (click)="closeDialog()" class="close-icon">
@@ -17,49 +17,60 @@
         <div class="upload-list">
             <div *ngFor="let model of uploadService.files" class="upload-list-item">
                 <div class="upload-line">
-                    <div class="upload-file-name" [matTooltip]="model.file?.name">
+                    <div
+                        [matTooltipPosition]="'above'"
+                        [matTooltip]="model.file?.name"
+                        class="upload-file-name"
+                    >
                         {{ model.file?.name }}
                     </div>
-                    <div class="upload-progress" *ngIf="!model.completed && model.progress < 100">
+                    <div *ngIf="!model.completed && model.progress < 100" class="upload-progress">
                         {{ model.progress }}%
                     </div>
-                    <div class="upload-progress error" *ngIf="model.completed && model.error">
+                    <div *ngIf="model.completed && model.error" class="upload-progress error">
                         <mat-icon svgIcon="red:error"></mat-icon>
                     </div>
-                    <div class="upload-progress ok" *ngIf="model.completed && !model.error">
+                    <div *ngIf="model.completed && !model.error" class="upload-progress ok">
                         <mat-icon svgIcon="red:check"></mat-icon>
                     </div>
                 </div>
-                <div class="upload-line" *ngIf="model.completed && model.error">
-                    <div class="upload-file-name error" [matTooltip]="model.error.message">
+                <div *ngIf="model.completed && model.error" class="upload-line">
+                    <div
+                        [matTooltipPosition]="'above'"
+                        [matTooltip]="model.error.message"
+                        class="upload-file-name error"
+                    >
                         {{ model.error.message }}
                     </div>
 
                     <div class="upload-progress">
                         <div
-                            class="error-action"
                             (click)="uploadItem(model)"
                             [matTooltip]="
                                 'upload-status.dialog.actions.re-upload.label' | translate
                             "
+                            [matTooltipPosition]="'above'"
+                            class="error-action"
                         >
-                            <mat-icon svgIcon="red:refresh"></mat-icon>key
+                            <mat-icon svgIcon="red:refresh"></mat-icon>
+                            key
                         </div>
                         <div
-                            class="error-action"
                             (click)="cancelItem(model)"
                             [matTooltip]="'upload-status.dialog.actions.cancel.label' | translate"
+                            [matTooltipPosition]="'above'"
+                            class="error-action"
                         >
                             <mat-icon svgIcon="red:close"></mat-icon>
                         </div>
                     </div>
                 </div>
-                <div mat-line *ngIf="!model.completed" class="upload-progress">
+                <div *ngIf="!model.completed" class="upload-progress" mat-line>
                     <mat-progress-bar
-                        mode="determinate"
-                        color="primary"
-                        [value]="model.progress"
                         *ngIf="model.progress !== 100"
+                        [value]="model.progress"
+                        color="primary"
+                        mode="determinate"
                     ></mat-progress-bar>
                 </div>
             </div>
diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss
index b45176af5..8c13d84fc 100644
--- a/apps/red-ui/src/assets/styles/red-theme.scss
+++ b/apps/red-ui/src/assets/styles/red-theme.scss
@@ -18,3 +18,4 @@
 @import 'red-controls';
 @import 'red-logo';
 @import 'red-toasts';
+@import 'red-tooltips';
diff --git a/apps/red-ui/src/assets/styles/red-tooltips.scss b/apps/red-ui/src/assets/styles/red-tooltips.scss
new file mode 100644
index 000000000..efe8a669b
--- /dev/null
+++ b/apps/red-ui/src/assets/styles/red-tooltips.scss
@@ -0,0 +1,28 @@
+@import 'red-variables';
+
+.mat-tooltip {
+    background-color: $accent;
+    border-radius: 3px;
+    padding: 10px;
+    font-family: Inter, sans-serif;
+    font-size: 11px;
+    line-height: 14px;
+    color: white;
+    position: relative;
+    overflow: visible !important;
+    text-align: center;
+}
+
+.mat-tooltip:after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    width: 0;
+    height: 0;
+    border-top: solid 6px $accent;
+    border-left: solid 5px transparent;
+    border-right: solid 5px transparent;
+    z-index: 3000;
+}

From bf01364cf349423698e91cd31027a2689bc075b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 3 Nov 2020 13:51:58 +0200
Subject: [PATCH 3/3] Remove toast clear in project overview

---
 apps/red-ui/src/app/notification/notification.service.ts    | 3 +--
 .../project-overview-screen.component.ts                    | 6 +-----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/red-ui/src/app/notification/notification.service.ts b/apps/red-ui/src/app/notification/notification.service.ts
index edf75d17a..ef6615075 100644
--- a/apps/red-ui/src/app/notification/notification.service.ts
+++ b/apps/red-ui/src/app/notification/notification.service.ts
@@ -32,7 +32,7 @@ export class NotificationService {
         });
     }
 
-    showToastNotification(
+    public showToastNotification(
         message: string,
         title?: string,
         notificationType: NotificationType = NotificationType.INFO,
@@ -43,7 +43,6 @@ export class NotificationService {
                 return this._toastr.error(message, title, options);
             case NotificationType.SUCCESS:
                 return this._toastr.success(message, title, options);
-                break;
             case NotificationType.WARNING:
                 return this._toastr.warning(message, title, options);
             case NotificationType.INFO:
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
index c4f21c77d..62831d654 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@@ -43,7 +43,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
 
     @ViewChild('sortingComponent', { static: true }) public sortingComponent: SortingComponent;
     public sortingOption: SortingOption = { column: 'added', order: 'desc' };
-    private _rulesChangedToast: ActiveToast<any>;
 
     constructor(
         public readonly appStateService: AppStateService,
@@ -79,9 +78,6 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
 
     ngOnDestroy(): void {
         this._fileDropOverlayService.cleanupFileDropHandling();
-        if (this._rulesChangedToast && this._rulesChangedToast.toastRef) {
-            this._rulesChangedToast.toastRef.close();
-        }
     }
 
     public get user() {
@@ -116,7 +112,7 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
             return;
         }
 
-        this._rulesChangedToast = this._notificationService.showToastNotification(
+        this._notificationService.showToastNotification(
             `${this._translateService.instant(
                 'project-overview.new-rule.toast.message.label'
             )} <span class="pill">${this._translateService.instant(