support inner links in truncated string component

frontend/src/app/shared/components/truncate/truncate.component.html

@@ -1,9 +1,19 @@
 <span class="truncate" [style.max-width]="maxWidth ? maxWidth + 'px' : null">
-    <ng-container *ngIf="!rtl">
-      <span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span>
+    <ng-container *ngIf="link">
+      <a [routerLink]="link" class="truncate-link">
+        <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
+      </a>
     </ng-container>
-    <ng-container *ngIf="rtl">
-      <span class="first">{{text.slice(lastChars)}}</span><span class="last-four">{{text.slice(0,lastChars)}}</span>
+    <ng-container *ngIf="!link">
+      <ng-container *ngIf="rtl; then rtlTruncated; else ltrTruncated;"></ng-container>
     </ng-container>
     <ng-content></ng-content>
 </span>
+
+<ng-template #ltrTruncated>
+  <span class="first">{{text.slice(0,-lastChars)}}</span><span class="last-four">{{text.slice(-lastChars)}}</span>
+</ng-template>
+
+<ng-template #rtlTruncated>
+  <span class="first">{{text.slice(lastChars)}}</span><span class="last-four">{{text.slice(0,lastChars)}}</span>
+</ng-template>

frontend/src/app/shared/components/truncate/truncate.component.scss

@@ -4,6 +4,14 @@
   flex-direction: row;
   align-items: baseline;
 
+  .truncate-link {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    flex-shrink: 1;
+    overflow: hidden;
+  }
+
   .first {
     flex-grow: 0;
     flex-shrink: 1;

frontend/src/app/shared/components/truncate/truncate.component.ts

@@ -7,6 +7,7 @@ import { Component, Input, Inject, LOCALE_ID } from '@angular/core';
 })
 export class TruncateComponent {
   @Input() text: string;
+  @Input() link: any = null;
   @Input() lastChars: number = 4;
   @Input() maxWidth: number = null;
   rtl: boolean;