Move onap UI loader and icons to VID

Issue-ID: VID-748

Change-Id: If79180e55651ad29bd2771a35855209419d1a0f5
Signed-off-by: Yoav Schneiderman <yoav.schneiderman@intl.att.com>

5 files changed, 352 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.html b/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.html
new file mode 100644
index 000000000..999d5d3f9
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.html
@@ -0,0 +1,15 @@
+<div>
+  <div class="custom-loader-wrapper" *ngIf="!global" [attr.data-tests-id]="testId">
+    <div class="custom-loader-background" *ngIf="active"
+         [style.top]="offset.top" [style.left]="offset.left" [style.width]="offset.width"
+         [style.height]="offset.height">
+      <div class="custom-loader {{ size }}" *ngIf="active"></div>
+    </div>
+    <ng-content></ng-content>
+  </div>
+  <div *ngIf="global && active" [attr.data-tests-id]="testId">
+    <div class="custom-loader-global-wrapper custom-loader-background">
+      <div class="custom-loader {{ size }}"></div>
+    </div>
+  </div>
+</div>
diff --git a/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.scss b/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.scss
new file mode 100644
index 000000000..7572c6e11
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.scss
@@ -0,0 +1,222 @@
+.custom-loader-background {
+  background-color: #000000;
+  position: absolute;
+  z-index: 9999;
+  opacity: 0.5;
+  display: flex;
+  justify-content: center;
+  align-items: center; }
+
+.sdc-loader-wrapper-absolute {
+  position: absolute;
+  top: 0; }
+
+.custom-loader {
+  z-index: 10002; }
+
+.custom-loader-global-wrapper {
+  position: fixed;
+  width: 100%;
+  height: 100%; }
+
+.loader-fixed {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%; }
+@keyframes fadein {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.8; } }
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.8; } }
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.8; } }
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.8; } }
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 0.8; } }
+
+@keyframes fadeout {
+  from {
+    opacity: 0.8; }
+  to {
+    opacity: 0; } }
+
+/* Firefox < 16 */
+@-moz-keyframes fadeout {
+  from {
+    opacity: 0.8; }
+  to {
+    opacity: 0; } }
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeout {
+  from {
+    opacity: 0.8; }
+  to {
+    opacity: 0; } }
+
+/* Internet Explorer */
+@-ms-keyframes fadeout {
+  from {
+    opacity: 0.8; }
+  to {
+    opacity: 0; } }
+
+/* Opera < 12.1 */
+@-o-keyframes fadeout {
+  from {
+    opacity: 0.8; }
+  to {
+    opacity: 0; } }
+
+.custom-loader {
+  height: 63px;
+  width: 63px;
+  position: absolute; }
+
+.custom-loader.small {
+  transform: scale(0.26); }
+
+.custom-loader.medium {
+  transform: scale(0.5); }
+
+.custom-loader.large {
+  transform: scale(1); }
+
+.custom-loader::before {
+  background-color: #eaeaea;
+  border-radius: 50%;
+  box-shadow: 21px 21px 0px 0px #eaeaea, 0px 42px 0px 0px #eaeaea, -21px 21px 0px 0px #eaeaea;
+  content: '';
+  display: block;
+  height: 21px;
+  width: 21px;
+  position: absolute;
+  left: 50%;
+  margin-left: -10.5px; }
+
+.custom-loader::after {
+  border-radius: 50%;
+  content: '';
+  display: block;
+  position: absolute;
+  height: 21px;
+  width: 21px;
+  animation: dot-move-2 4.5s infinite ease-in; }
+
+@keyframes dot-move {
+  0% {
+    background-color: #1eb9f3;
+    left: 21px;
+    top: 0; }
+  25% {
+    background-color: #ffb81c;
+    left: 42px;
+    top: 21px; }
+  50% {
+    background-color: #caa2dd;
+    left: 21px;
+    top: 42px; }
+  75% {
+    background-color: #f6c632;
+    left: 0;
+    top: 21px; }
+  100% {
+    background-color: #1eb9f3;
+    left: 21px;
+    top: 0; } }
+
+@keyframes dot-move-2 {
+  0% {
+    background-color: #1eb9f3;
+    left: 21px;
+    top: 0; }
+  6.25% {
+    background-color: #1eb9f3;
+    left: 42px;
+    top: 21px; }
+  12.5% {
+    background-color: #1eb9f3;
+    left: 21px;
+    top: 42px; }
+  18.75% {
+    background-color: #1eb9f3;
+    left: 0;
+    top: 21px; }
+  25% {
+    background-color: #ffb81c;
+    left: 21px;
+    top: 0; }
+  31.25% {
+    background-color: #ffb81c;
+    left: 42px;
+    top: 21px; }
+  37.5% {
+    background-color: #ffb81c;
+    left: 21px;
+    top: 42px; }
+  43.75% {
+    background-color: #ffb81c;
+    left: 0;
+    top: 21px; }
+  50% {
+    background-color: #caa2dd;
+    left: 21px;
+    top: 0; }
+  56.25% {
+    background-color: #caa2dd;
+    left: 42px;
+    top: 21px; }
+  62.5% {
+    background-color: #caa2dd;
+    left: 21px;
+    top: 42px; }
+  68.75% {
+    background-color: #caa2dd;
+    left: 0;
+    top: 21px; }
+  75% {
+    background-color: #f6c632;
+    left: 21px;
+    top: 0; }
+  81.25% {
+    background-color: #f6c632;
+    left: 42px;
+    top: 21px; }
+  87.5% {
+    background-color: #f6c632;
+    left: 21px;
+    top: 42px; }
+  93.75% {
+    background-color: #f6c632;
+    left: 0;
+    top: 21px; }
+  100% {
+    background-color: #1eb9f3;
+    left: 21px;
+    top: 0; } }
diff --git a/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.ts b/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.ts
new file mode 100644
index 000000000..98bcce1a1
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.component.ts
@@ -0,0 +1,76 @@
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewContainerRef} from "@angular/core";
+import {LoaderSize} from "./models/loader-size.model";
+import {LoaderService} from "./custom-loader.service";
+
+@Component({
+  selector: "custom-loader",
+  templateUrl: './custom-loader.component.html',
+  styleUrls: ['./custom-loader.component.scss']
+
+})
+
+export class LoaderComponent implements OnInit, OnDestroy {
+  @Input() active: number;
+  @Input() size?: LoaderSize;
+  @Input() global?: boolean;
+  @Input() name?: string;
+  @Input() testId: string;
+  @Input() relative: boolean;
+  @Output() activeChange: EventEmitter<number> = new EventEmitter<number>();
+  private offset : {
+    top: string;
+    left: string;
+    width: string;
+    height: string;
+  };
+
+  constructor(private loaderService: LoaderService, private viewContainerRef: ViewContainerRef) {
+    this.active = 0;
+    this.size = LoaderSize.large;
+    this.global = false;
+  }
+
+  public ngOnInit(): void {
+    if (this.name !== undefined) {
+      this.loaderService.register(this.name, this);
+    }
+    this.setLoaderPlace();
+  }
+
+  public ngOnDestroy(): void {
+    if (this.name !== undefined) {
+      this.loaderService.unregister(this.name);
+    }
+  }
+
+  public activate() {
+    this.active++;
+    this.activeChange.emit(this.active);
+  }
+
+  public deactivate() {
+    if (this.active > 0) {
+      this.active--;
+      this.activeChange.emit(this.active);
+    }
+  }
+  public setLoaderPlace = () => {
+    if (this.relative === true) {
+      let parentElement = this.viewContainerRef.element.nativeElement.parentElement;
+      this.offset = {
+        left: (parentElement.offsetLeft !== undefined) ? parentElement.offsetLeft + "px" : undefined,
+        top: (parentElement.offsetTop !== undefined) ? parentElement.offsetTop + "px" : undefined,
+        width: (parentElement.offsetWidth !== undefined) ? parentElement.offsetWidth + "px" : undefined,
+        height: (parentElement.offsetHeight !== undefined) ? parentElement.offsetHeight + "px" : undefined
+      };
+    } else {
+      this.offset = {
+        left: '0px',
+        top: '0px',
+        width: '100%',
+        height: '100%'
+      }
+    }
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.service.ts b/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.service.ts
new file mode 100644
index 000000000..398eac233
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customLoader/custom-loader.service.ts
@@ -0,0 +1,34 @@
+import {Injectable} from "@angular/core";
+import {LoaderComponent} from "./custom-loader.component";
+
+@Injectable()
+export class LoaderService {
+
+  private mainLoaderName = 'general';
+  public registeredLoaders = {};
+
+  register(name: string, loader: LoaderComponent) {
+    if (!this.registeredLoaders[name]) {
+      this.registeredLoaders[name] = loader;
+    }
+  }
+
+  unregister(name: string) {
+    if (this.registeredLoaders[name]) {
+      delete this.registeredLoaders[name];
+    }
+  }
+
+  activate(name: string = this.mainLoaderName) {
+    if (this.registeredLoaders[name]) {
+      this.registeredLoaders[name].activate();
+    }
+  }
+
+  deactivate(name: string = this.mainLoaderName) {
+    if (this.registeredLoaders[name]) {
+      this.registeredLoaders[name].deactivate();
+    }
+  }
+
+}
diff --git a/vid-webpack-master/src/app/shared/components/customLoader/models/loader-size.model.ts b/vid-webpack-master/src/app/shared/components/customLoader/models/loader-size.model.ts
new file mode 100644
index 000000000..d5400efb5
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customLoader/models/loader-size.model.ts
@@ -0,0 +1,5 @@
+export enum LoaderSize {
+  large = 'large',
+  medium = 'medium',
+  small = 'small',
+}