merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

1 files changed, 23 insertions, 5 deletions

diff --git a/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts b/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts
index fd58b6507..bce06953c 100644
--- a/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts
+++ b/vid-webpack-master/src/app/shared/components/ellipsis/ellipsis.component.ts
@@ -1,12 +1,17 @@
-import { Component, Input } from '@angular/core';
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {HighlightPipe} from "../../pipes/highlight/highlight-filter.pipe";
+import * as _ from 'lodash';
 
 @Component({
   selector : 'custom-ellipsis',
   template: `
-    <span 
+    <span
+          sdc-tooltip
           class="ellipsis"
           id="{{id}}"
-          tooltip="{{value}}">{{value}}</span>`,
+          [innerHtml]="displayValue | safe : 'html'"
+          [tooltip-text]="value">
+      </span>`,
   styles : [
     `
       .ellipsis {
@@ -18,10 +23,23 @@ import { Component, Input } from '@angular/core';
         text-align: left;
       }
     `
-  ]
+  ],
+  providers : [HighlightPipe]
 })
-export class EllipsisComponent {
+export class EllipsisComponent implements OnChanges{
   @Input() value : string;
   @Input() id : string;
+  @Input() hightlight : string;
 
+  displayValue : string;
+  constructor(private _highlightPipe : HighlightPipe){
+    this.displayValue = this.value;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.displayValue = this.value;
+    if(!_.isNil(this.hightlight)){
+      this.displayValue = this._highlightPipe.transform(this.value ,this.hightlight ? this.hightlight : '');
+    }
+  }
 }