New Angular UI from 1806

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

4 files changed, 149 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html
new file mode 100644
index 000000000..cb11feea8
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.html
@@ -0,0 +1,2 @@
+<div *ngIf="show"
+     class="spinner"></div>
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss
new file mode 100644
index 000000000..d31dfed80
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.scss
@@ -0,0 +1,87 @@
+.spinner {
+  height: 150px;
+  width: 150px;
+  margin: 0 auto;
+  -webkit-animation: rotation .6s infinite linear;
+  animation: rotation .6s infinite linear;
+  border: 6px solid rgba(0, 174, 239, 0.01);
+  border-radius: 100%;
+  position: absolute;
+  z-index: 1000;
+  left: 50%;
+  right: 50%;
+  top: 50%;
+  bottom: 50%;
+}
+
+
+
+.spinner:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -6px;
+  height: 100%;
+  width: 100%;
+  border-top: 6px solid #009fdb;
+  border-left: 6px solid transparent;
+  border-bottom: 6px solid #c3161600;
+  border-right: 6px solid transparent;
+  border-radius: 100%;
+}
+
+@-webkit-keyframes rotation {
+  from {-webkit-transform: rotate(0deg);}
+  to {-webkit-transform: rotate(359deg);}
+}
+@-moz-keyframes rotation {
+  from {-moz-transform: rotate(0deg);}
+  to {-moz-transform: rotate(359deg);}
+}
+@-o-keyframes rotation {
+  from {-o-transform: rotate(0deg);}
+  to {-o-transform: rotate(359deg);}
+}
+@keyframes rotation {
+  from {transform: rotate(0deg);}
+  to {transform: rotate(359deg);}
+}
+
+.spinner-sm {
+  height:16px;
+  width:16px;
+}
+
+.spinner-md {
+  height:40px;
+  width:40px;
+}
+
+.spinner-lr {
+  height:150px;
+  width:150px;
+}
+
+.spinner-red {
+  border:6px solid rgba(216, 27, 34, .15);
+}
+
+.spinner-red:before {
+  border-top:6px solid rgba(216, 27, 34, 1);
+}
+
+.spinner-green {
+  border:6px solid rgba(40, 183, 121, .15);
+}
+
+.spinner-green:before {
+  border-top:6px solid rgba(40, 183, 121, 1);
+}
+
+.spinner-grey {
+  border:6px solid rgba(139, 146, 154, .15);
+}
+
+.spinner-grey:before {
+  border-top:6px solid rgba(139, 146, 154, 1);
+}
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts
new file mode 100644
index 000000000..531ee8c62
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.spec.ts
@@ -0,0 +1,42 @@
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {HttpClientTestingModule} from '@angular/common/http/testing';
+import { SpinnerComponent } from './spinner.component';
+
+describe('Spinner component', () => {
+  let component: SpinnerComponent;
+  let fixture: ComponentFixture<SpinnerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [],
+      declarations: [SpinnerComponent ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('component should be defined', () => {
+    expect(component).toBeDefined();
+  });
+
+
+  it('component constructor should subscribe of showSpinner event with true', ()=> {
+    SpinnerComponent.showSpinner.next(true);
+    expect(component.show).toBeTruthy();
+  });
+
+  it('component constructor should subscribe of showSpinner event with false', ()=> {
+    SpinnerComponent.showSpinner.next(false);
+    expect(component.show).toBeFalsy();
+  });
+
+
+
+
+});
diff --git a/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts
new file mode 100644
index 000000000..0ce5d2074
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/spinner/spinner.component.ts
@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Component({
+  selector : 'spinner-component',
+  templateUrl : './spinner.component.html',
+  styleUrls : ['./spinner.component.scss']
+})
+export class SpinnerComponent {
+  show : boolean = false;
+  static showSpinner: Subject<boolean> = new Subject<boolean>();
+
+  constructor(){
+    SpinnerComponent.showSpinner.subscribe((status) => {
+      this.show = status;
+    })
+  }
+}