New Angular UI from 1806

Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

3 files changed, 88 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/components/model-information/model-information.component.ts b/vid-webpack-master/src/app/shared/components/model-information/model-information.component.ts
new file mode 100644
index 000000000..fea4c44c7
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/model-information/model-information.component.ts
@@ -0,0 +1,42 @@
+import {Component, Input} from '@angular/core';
+import * as _ from 'lodash';
+
+@Component({
+  selector: 'model-information',
+  templateUrl: 'model-information.html',
+  styleUrls: ['model-information.scss']
+})
+
+export class ModelInformationComponent {
+  private _modelInformationItems: Array<ModelInformationItem>;
+
+
+  get modelInformationItems(): Array<ModelInformationItem> {
+    return this._modelInformationItems;
+  }
+
+  @Input()
+  set modelInformationItems(_modelInformationItems: Array<ModelInformationItem>) {
+    if (_modelInformationItems) {
+      this._modelInformationItems = _modelInformationItems.filter(x => x.mandatory || (!_.isEmpty(x.values) && !_.isEmpty(x.values[0])));
+    }
+  }
+}
+
+
+export class ModelInformationItem {
+  label: string;
+  testsId: string;
+  values: Array<string>;
+  toolTipText: string;
+  mandatory: boolean;
+
+  constructor(label: string, testsId: string, values: Array<any>, toolTipText: string = "", mandatory: boolean = false,nested:boolean=false) {
+    this.label = label;
+    this.testsId = testsId;
+    this.values = values;
+    this.toolTipText = toolTipText;
+    this.mandatory = mandatory;
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/model-information/model-information.html b/vid-webpack-master/src/app/shared/components/model-information/model-information.html
new file mode 100644
index 000000000..456dfdee4
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/model-information/model-information.html
@@ -0,0 +1,12 @@
+<div id="model-information">
+  <div *ngFor="let item of modelInformationItems" class="item" attr.data-tests-id="model-item-{{item.label}}">
+    <tooltip-content #a>
+      <span> {{item.toolTipText}}</span>
+    </tooltip-content>
+
+    <div class="wrapper" [tooltip]="a" [tooltipDisabled]="!item.toolTipText" tooltipPlacement="top" [tooltipAnimation]="false">
+      <label attr.data-tests-id="model-item-label-{{item.testsId}}">{{item.label}}</label>
+      <div *ngFor="let value of item.values" attr.data-tests-id="model-item-value-{{item.testsId}}">{{value}}</div>
+    </div>
+  </div>
+</div>
diff --git a/vid-webpack-master/src/app/shared/components/model-information/model-information.scss b/vid-webpack-master/src/app/shared/components/model-information/model-information.scss
new file mode 100644
index 000000000..cd42136ed
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/model-information/model-information.scss
@@ -0,0 +1,34 @@
+#model-information {
+  overflow: auto;
+
+}
+
+tooltip-content span {
+  font-family: OpenSans-Regular;
+  font-size: 12px;
+  color: #FFFFFF;
+  letter-spacing: 0;
+  line-height: 16px;
+}
+
+.item {
+  display: block;
+
+  .wrapper {
+
+    display: inline-block;
+    margin-bottom: 25px;
+
+    label {
+      font-family: OpenSans-Semibold;
+      font-size: 12px;
+    }
+
+    div {
+      font-family: OpenSans-Regular;
+      font-size: 14px;
+    }
+  }
+}
+
+