Added color to call direction icons (#126)

src/app/components/call-icon/call-icon.component.html

@@ -1,18 +1,30 @@
-<svg version="1.1" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" fill="currentcolor">
+<svg version="1.1" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
+  [class]="direction()"
+>
   <!-- phone -->
   <path
     d="M 19.144531,4.6015625 C 15.114427,6.3876567 11.049772,8.0941046 6.9921875,9.8164062 3.5619317,13.622053 3.5864623,19.210975 4.6105119,23.944144 c 2.075615,9.020269 7.0133191,17.082033 12.4719501,24.43904 9.158417,12.100861 20.454546,22.680916 33.467511,30.534976 6.174111,3.561584 12.924663,6.686961 20.145764,7.069208 3.359065,0.07865 7.106582,-0.606441 9.529713,-3.100529 1.828522,-4.289377 3.662924,-8.593074 5.528456,-12.873167 -5.987917,-3.531281 -11.957039,-7.094321 -17.945312,-10.625 -4.55007,2.437579 -9.053275,4.986777 -13.684274,7.258752 -3.057726,1.072284 -6.481234,-0.351707 -8.396696,-2.840819 C 38.642774,56.683031 31.468683,49.643506 24.454906,42.45215 22.43858,39.913371 22.647777,36.134688 24.488283,33.560854 26.53224,29.75574 28.585827,25.955747 30.607422,22.138672 27.033754,16.196567 23.54759,10.202301 19.964844,4.265625 19.691406,4.3776042 19.417969,4.4895833 19.144531,4.6015625 Z"
   />
-  <!-- out arrow -->
-  <path *ngIf="direction === 'out'"
-    d="m 67.886471,28.136289 9.994141,9.996092 6.160156,-32.4433581 -32.445313,6.1562501 9.996094,9.998047 -16.513672,16.511718 6.294922,6.294922 z"
-  />
-  <!-- in arrow -->
-  <path *ngIf="direction === 'in'"
-    d="M 63.03125,20.675781 53.037109,10.679688 46.876953,43.123047 79.322266,36.966797 69.326172,26.96875 85.839844,10.457031 79.544922,4.1621094 Z"
-  />
-  <!-- conference -->
-  <path *ngIf="direction === 'conference'"
-    d="m 66.044551,42.850114 c 3.748591,-0.03163 7.557379,-0.966734 10.715137,-3.028716 0.570893,-1.679533 -0.962708,-3.703184 -1.93459,-4.866888 -0.893779,-0.560716 -1.733648,0.359354 -2.509309,0.706574 -2.740009,1.347205 -5.956882,1.79093 -8.939926,1.099101 -2.71214,-0.742027 -4.856109,-2.964209 -5.79473,-5.578885 -1.203506,-3.132977 -1.181879,-6.669731 -0.225961,-9.863792 0.927062,-2.84601 3.15012,-5.429257 6.142972,-6.13969 2.707823,-0.681544 5.594359,-0.220956 8.159112,0.788365 0.777467,0.31878 1.48821,0.780151 2.211957,1.192204 1.663805,-0.402114 2.76529,-2.683573 3.245776,-4.106962 0.011,-1.048866 -1.141713,-1.457489 -1.922103,-1.85576 -4.610208,-2.2121609 -10.111884,-2.8264809 -14.981842,-1.108614 -3.701978,1.360116 -6.772761,4.309949 -8.284306,7.952986 -1.865762,4.30793 -2.037987,9.265757 -0.774035,13.762663 1.137424,3.892339 3.723543,7.458112 7.388427,9.308296 2.304863,1.193624 4.91363,1.761245 7.503421,1.739118 z"
-  />
+  @switch (direction()) {
+
+    @case ('out') {
+      <!-- out arrow -->
+      <path
+        d="m 67.886471,28.136289 9.994141,9.996092 6.160156,-32.4433581 -32.445313,6.1562501 9.996094,9.998047 -16.513672,16.511718 6.294922,6.294922 z"
+      />
+    }
+    @case ('in') {
+      <!-- in arrow -->
+      <path
+        d="M 63.03125,20.675781 53.037109,10.679688 46.876953,43.123047 79.322266,36.966797 69.326172,26.96875 85.839844,10.457031 79.544922,4.1621094 Z"
+      />
+    }
+    @default {
+      <!-- conference -->
+      <path
+        d="m 66.044551,42.850114 c 3.748591,-0.03163 7.557379,-0.966734 10.715137,-3.028716 0.570893,-1.679533 -0.962708,-3.703184 -1.93459,-4.866888 -0.893779,-0.560716 -1.733648,0.359354 -2.509309,0.706574 -2.740009,1.347205 -5.956882,1.79093 -8.939926,1.099101 -2.71214,-0.742027 -4.856109,-2.964209 -5.79473,-5.578885 -1.203506,-3.132977 -1.181879,-6.669731 -0.225961,-9.863792 0.927062,-2.84601 3.15012,-5.429257 6.142972,-6.13969 2.707823,-0.681544 5.594359,-0.220956 8.159112,0.788365 0.777467,0.31878 1.48821,0.780151 2.211957,1.192204 1.663805,-0.402114 2.76529,-2.683573 3.245776,-4.106962 0.011,-1.048866 -1.141713,-1.457489 -1.922103,-1.85576 -4.610208,-2.2121609 -10.111884,-2.8264809 -14.981842,-1.108614 -3.701978,1.360116 -6.772761,4.309949 -8.284306,7.952986 -1.865762,4.30793 -2.037987,9.265757 -0.774035,13.762663 1.137424,3.892339 3.723543,7.458112 7.388427,9.308296 2.304863,1.193624 4.91363,1.761245 7.503421,1.739118 z"
+      />
+    }
+
+  }
 </svg>

src/app/components/call-icon/call-icon.component.scss

@@ -0,0 +1,11 @@
+.in {
+  fill: #3171e0;
+}
+
+.out {
+  fill: #00C853;
+}
+
+.conference {
+  fill: currentcolor;
+}

src/app/components/call-icon/call-icon.component.ts

@@ -1,15 +1,17 @@
 import { CallDirection } from 'src/app/models/BcrRecordingMetadata';
 import { NgIf } from '@angular/common';
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
   selector: 'app-call-icon',
   templateUrl: './call-icon.component.html',
+  styleUrl: './call-icon.component.scss',
   standalone: true,
   imports: [ NgIf ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CallIconComponent {
 
-  @Input({ required: true }) direction: CallDirection = '';
+  public direction = input.required<CallDirection>();
 
 }