Add text truncation component

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

@@ -0,0 +1,5 @@
+<span class="truncate" [class.rtl]="rtl" [style.max-width]="maxWidth ? maxWidth + 'px' : null">
+  <span class="first">{{text.slice(0,-lastChars)}}</span>
+  <span class="last-four">{{text.slice(-lastChars)}}</span>
+  <ng-content></ng-content>
+</span>

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

@@ -0,0 +1,22 @@
+.truncate {
+  text-overflow: unset;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+
+  &.rtl {
+    flex-direction: row-reverse;
+  }
+
+  .first {
+    flex-grow: 0;
+    flex-shrink: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .last-four {
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+}

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

@@ -0,0 +1,21 @@
+import { Component, Input, Inject, LOCALE_ID } from '@angular/core';
+
+@Component({
+  selector: 'app-truncate',
+  templateUrl: './truncate.component.html',
+  styleUrls: ['./truncate.component.scss']
+})
+export class TruncateComponent {
+  @Input() text: string;
+  @Input() lastChars: number = 4;
+  @Input() maxWidth: number = null;
+  rtl: boolean;
+
+  constructor(
+    @Inject(LOCALE_ID) private locale: string,
+  ) {
+    if (this.locale.startsWith('ar') || this.locale.startsWith('fa') || this.locale.startsWith('he')) {
+      this.rtl = true;
+    }
+  }
+}

frontend/src/app/shared/shared.module.ts

@@ -77,6 +77,7 @@ import { IndexingProgressComponent } from '../components/indexing-progress/index
 import { SvgImagesComponent } from '../components/svg-images/svg-images.component';
 import { ChangeComponent } from '../components/change/change.component';
 import { SatsComponent } from './components/sats/sats.component';
+import { TruncateComponent } from './components/truncate/truncate.component';
 import { SearchResultsComponent } from '../components/search-form/search-results/search-results.component';
 import { TimestampComponent } from './components/timestamp/timestamp.component';
 import { ToggleComponent } from './components/toggle/toggle.component';
@@ -152,6 +153,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     SvgImagesComponent,
     ChangeComponent,
     SatsComponent,
+    TruncateComponent,
     SearchResultsComponent,
     TimestampComponent,
     ToggleComponent,
@@ -252,6 +254,7 @@ import { GeolocationComponent } from '../shared/components/geolocation/geolocati
     SvgImagesComponent,
     ChangeComponent,
     SatsComponent,
+    TruncateComponent,
     SearchResultsComponent,
     TimestampComponent,
     ToggleComponent,