merge from ecomp a88f0072 - Modern UI

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

3 files changed, 28 insertions, 12 deletions

diff --git a/vid-webpack-master/src/app/shared/components/popover/popover.component.html b/vid-webpack-master/src/app/shared/components/popover/popover.component.html
index c5515596c..4dc8096dc 100644
--- a/vid-webpack-master/src/app/shared/components/popover/popover.component.html
+++ b/vid-webpack-master/src/app/shared/components/popover/popover.component.html
@@ -2,7 +2,10 @@
   triggers="mouseenter:mouseleave"
   popover="{{value}}"
   [hidden]="value == null"
-  container="body">
+  container="body"
+  containerClass="{{popoverType}}"
+  placement="{{placement}}"
+  [attr.data-tests-id]="'popover-test-id'">
   <ng-content ></ng-content>
 </div>
 
diff --git a/vid-webpack-master/src/app/shared/components/popover/popover.component.scss b/vid-webpack-master/src/app/shared/components/popover/popover.component.scss
index ca2800a27..946b62d30 100644
--- a/vid-webpack-master/src/app/shared/components/popover/popover.component.scss
+++ b/vid-webpack-master/src/app/shared/components/popover/popover.component.scss
@@ -1,4 +1,5 @@
 .popover.popover-top.top {
   color : green !important;
   font-size: 10px;
+  word-wrap: break-word;
 }
diff --git a/vid-webpack-master/src/app/shared/components/popover/popover.component.ts b/vid-webpack-master/src/app/shared/components/popover/popover.component.ts
index d6a4c3ae1..9dbbe63a5 100644
--- a/vid-webpack-master/src/app/shared/components/popover/popover.component.ts
+++ b/vid-webpack-master/src/app/shared/components/popover/popover.component.ts
@@ -1,17 +1,29 @@
 import {Component, Input} from "@angular/core";
-
 @Component({
   selector: 'custom-popover',
-  templateUrl: 'popover.component.html',
-  styles: [`
-        :host >>> .popover {
-          font-size: 13px;
-          text-align: left;
-          z-index: 10000;
-        }
-    `]
+  templateUrl: 'popover.component.html'
 })
 
-export class PopoverComponent {
-  @Input() value: String;
+export class PopoverComponent{
+  @Input() value: string;
+  @Input() extraStyle : string;
+  @Input() placement : string = PopoverPlacement.LEFT;
+  @Input() popoverType : string = PopoverType.CUSTOM;
+
+}
+
+export enum PopoverPlacement{
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  LEFT = 'left',
+  RIGHT = 'right',
+  AUTO ='auto',
 }
+
+export enum PopoverType {
+  ERROR  = 'error',
+  WARNING = 'warning',
+  SUCCESS = 'success',
+  CUSTOM = 'custom'
+}
+