fix: added style for selection in metric card (#1690)

Co-authored-by: Ankit Das <[email protected]>
hypertrace · Jun 14, 2022 · 30fd3dd · 30fd3dd
1 parent ae08818
commit 30fd3dd
Showing 1 changed file with 10 additions and 1 deletion.
diff --git a/projects/components/src/metric-card/metric-card.component.ts b/projects/components/src/metric-card/metric-card.component.ts
@@ -7,7 +7,7 @@ import { MetricCardIndicatorType } from './metric-card';
   styleUrls: ['./metric-card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="metric-card" [style.backgroundColor]="this.backgroundColor" [style.borderColor]="this.borderColor">
+    <div class="metric-card" [ngStyle]="this.getStylesForCard()">
       <div class="indicator-and-title">
         <div class="indicator">
           <ng-container [ngSwitch]="this.indicator">
@@ -52,4 +52,13 @@ export class MetricCardComponent {
 
   @Input()
   public borderColor: Color = Color.Transparent;
+
+  @Input()
+  public isSelected: boolean = false;
+
+  public getStylesForCard(): { 'background-color': string; 'border-color': string } {
+    return this.isSelected
+      ? { 'background-color': Color.Blue1, 'border-color': Color.Blue4 }
+      : { 'background-color': this.backgroundColor, 'border-color': this.borderColor };
+  }
 }