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;
+    }
+  }
+}