Merge "Move onap UI loader and icons to VID"

6 files changed, 410 insertions, 0 deletions

diff --git a/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.html b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.html
new file mode 100644
index 000000000..0ac56d2d2
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.html
@@ -0,0 +1,2 @@
+<div [ngClass]="classes" [attr.disabled]="disabled || undefined" [innerHtml]="svgIconContentSafeHtml"
+     [attr.data-tests-id]="testId"></div>
diff --git a/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.scss b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.scss
new file mode 100644
index 000000000..54b375702
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.scss
@@ -0,0 +1,297 @@
+@import 'node_modules/onap-ui-common/lib/scss/variables.scss';
+
+:host {
+  display: inline-flex;
+}
+
+@mixin color-icon($primary-color) {
+  color: $primary-color;
+  fill: $primary-color;
+}
+
+@mixin color-icon-hover($secondary-color) {
+  &.clickable {
+    cursor: pointer;
+    &:not([disabled]):hover, &:active, &:focus {
+      @include color-icon($secondary-color);
+    }
+  }
+}
+
+@mixin color-icon-label($primary-color) {
+  @include color-icon($primary-color);
+
+  .custom-icon {
+    @include color-icon($primary-color);
+  }
+}
+
+@mixin color-icon-label-hover($secondary-color) {
+  &.clickable {
+    &:not([disabled]):hover, &:active, &:focus {
+      @include color-icon-label($secondary-color);
+    }
+  }
+}
+
+/deep/ .custom-icon {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  box-sizing: content-box;
+
+  & > svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  &[disabled] {
+    opacity: 0.7;
+  }
+
+  &.mode-primary {
+    @include color-icon($blue);
+    @include color-icon-hover($light-blue);
+  }
+
+  &.mode-primary2 {
+    @include color-icon($dark-gray);
+    @include color-icon-hover($light-blue);
+  }
+
+  &.mode-secondary {
+    @include color-icon($gray);
+    @include color-icon-hover($dark-gray);
+  }
+
+  &.mode-success {
+    @include color-icon($green);
+  }
+
+  &.mode-error {
+    @include color-icon($red);
+  }
+
+  &.mode-warning {
+    @include color-icon($yellow);
+  }
+
+  &.mode-info {
+    @include color-icon($text-black);
+    @include color-icon-hover($dark-blue);
+  }
+
+  &.mode-white {
+    @include color-icon($white);
+    @include color-icon-hover($light-gray);
+  }
+
+  &.size-x_small {
+    width: 8px;
+    height: 8px;
+  }
+
+  &.size-small {
+    width: 12px;
+    height: 12px;
+  }
+
+  &.size-medium {
+    width: 16px;
+    height: 16px;
+  }
+
+  &.size-large {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.size-x_large {
+    width: 36px;
+    height: 36px;
+  }
+
+  &.size-x_x_large {
+    width: 48px;
+    height: 48px;
+  }
+
+  &.bg-type-circle {
+    border-radius: 50%;
+    padding: 6px;
+  }
+
+  &.bg-type-rectangle {
+    padding: 6px;
+  }
+
+  &.bg-color-purple {
+    background-color: $purple;
+  }
+
+  &.bg-color-light-blue {
+    background-color: $light-blue;
+  }
+
+  &.bg-color-green {
+    background-color: $green;
+  }
+
+  &.bg-color-red {
+    background-color: $red;
+  }
+
+  &.bg-color-yellow {
+    background-color: $yellow;
+  }
+
+  &.bg-color-blue {
+    background-color: $blue;
+  }
+
+  &.bg-color-lightBlue {
+    background-color: $light-blue;
+  }
+
+  &.bg-color-darkBlue {
+    background-color: $dark-blue;
+  }
+
+  &.bg-color-darkBlue2 {
+    background-color: $dark-blue2;
+  }
+
+  &.bg-color-disabledBlue {
+    background-color: $disabled-blue;
+  }
+
+  &.bg-color-gray {
+    background-color: $gray;
+  }
+
+  &.bg-color-white {
+    background-color: $white;
+  }
+
+  &.bg-color-transparent {
+    background-color:transparent;
+  }
+  &.bg-color-silver {
+    background-color: $light-silver;
+  }
+}
+
+.custom-icon-wrapper {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  &.custom-icon-label {
+  }
+
+  &.custom-icon {
+  }
+
+  &[disabled] {
+    opacity: 0.7;
+  }
+
+  &.label-placement-bottom {
+    flex-direction: column;
+    .custom-icon-label {
+      margin-top: 0.25em;
+    }
+  }
+
+  &.label-placement-right {
+    .custom-icon-label {
+      margin-left: 0.25em;
+    }
+  }
+
+  &.label-placement-top {
+    flex-direction: column-reverse;
+    .custom-icon-label {
+      margin-bottom: 0.25em;
+    }
+  }
+
+  &.label-placement-left {
+    flex-direction: row-reverse;
+    .custom-icon-label {
+      margin-right: 0.25em;
+    }
+  }
+
+  &.mode-primary {
+    @include color-icon-label($blue);
+    @include color-icon-label-hover($light-blue);
+  }
+
+  &.mode-secondary {
+    @include color-icon-label($gray);
+    @include color-icon-label-hover($light-blue);
+  }
+
+  &.mode-success {
+    @include color-icon-label($green);
+  }
+
+  &.mode-error {
+    @include color-icon-label($red);
+  }
+
+  &.mode-warning {
+    @include color-icon-label($yellow);
+  }
+
+  &.mode-info {
+    @include color-icon-label($text-black);
+    @include color-icon-label-hover($light-blue);
+  }
+
+  &.size-x_small {
+    font-size: 8px;
+    line-height: 10px;
+
+    .custom-icon {
+      @extend .custom-icon.size-x_small;
+    }
+  }
+
+  &.size-small {
+    font-size: 12px;
+    line-height: 14px;
+
+    .custom-icon {
+      @extend .custom-icon.size-small;
+    }
+  }
+
+  &.size-medium {
+    font-size: 16px;
+    line-height: 20px;
+
+    .custom-icon {
+      @extend .custom-icon.size-medium;
+    }
+  }
+
+  &.size-large {
+    font-size: 24px;
+    line-height: 28px;
+
+    .custom-icon {
+      @extend .custom-icon.size-large;
+    }
+  }
+
+  &.size-x_large {
+    font-size: 34px;
+    line-height: 40px;
+
+    .custom-icon {
+      @extend .custom-icon.size-x_large;
+    }
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.ts b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.ts
new file mode 100644
index 000000000..c59bc5945
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customIcon/custom-icon.component.ts
@@ -0,0 +1,85 @@
+import {Component, Input, OnChanges, SimpleChanges} from "@angular/core";
+import {Mode} from "../customButton/models/mode.model";
+import {Size} from "./models/icon-size.model";
+import {BackgroundShape} from "./models/background-shape.model";
+import {BackgroundColor} from "./models/background-color.model";
+import {DomSanitizer, SafeHtml} from "@angular/platform-browser";
+import {iconsMap} from 'onap-ui-common';
+
+@Component({
+  selector: 'custom-icon',
+  templateUrl: './custom-icon.component.html',
+  styleUrls: ['./custom-icon.component.scss'],
+})
+export class SvgIconComponent implements OnChanges {
+
+  @Input() public name: string;
+  @Input() public type: string;
+  @Input() public mode: Mode;
+  @Input() public size: Size;
+  @Input() public backgroundShape: BackgroundShape;
+  @Input() public backgroundColor: BackgroundColor;
+  @Input() public disabled: boolean;
+  @Input() public clickable: boolean;
+  @Input() public className: any;
+  @Input() public testId: string;
+
+  public svgIconContent: string;
+  public svgIconContentSafeHtml: SafeHtml;
+  public svgIconCustomClassName: string;
+  public classes: string;
+
+  constructor(protected domSanitizer: DomSanitizer) {
+    this.size = Size.medium;
+    this.disabled = false;
+    this.type = this.type || "common";
+  }
+
+  static Icons(): { [key: string]: string } {
+    return iconsMap;
+  }
+
+  public ngOnChanges(changes: SimpleChanges) {
+    this.updateSvgIconByName();
+    this.buildClasses();
+  }
+
+  protected updateSvgIconByName() {
+    this.svgIconContent = iconsMap[this.type][this.name] || null;
+    if (this.svgIconContent) {
+      this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.svgIconContent);
+      this.svgIconCustomClassName = '__' + this.name.replace(/\s+/g, '_');
+    } else {
+      this.svgIconContentSafeHtml = null;
+      this.svgIconCustomClassName = 'missing';
+    }
+  }
+
+  private buildClasses = (): void => {
+    const _classes = ['svg-icon'];
+    if (this.mode) {
+      _classes.push('mode-' + this.mode);
+    }
+    if (this.size) {
+      _classes.push('size-' + this.size);
+    }
+    if (this.clickable) {
+      !this.disabled && _classes.push('clickable');
+    }
+    if (this.svgIconCustomClassName) {
+      _classes.push(this.svgIconCustomClassName);
+    }
+    if (this.className) {
+      _classes.push(this.className);
+    }
+    if (this.backgroundShape) {
+      _classes.push('bg-type-' + this.backgroundShape);
+    }
+    if (this.backgroundShape && this.backgroundColor) {
+      _classes.push('bg-color-' + this.backgroundColor);
+    } else if (this.backgroundShape && !this.backgroundColor) {
+      _classes.push('bg-color-primary');
+    }
+    this.classes = _classes.join(" ");
+  }
+}
diff --git a/vid-webpack-master/src/app/shared/components/customIcon/models/background-color.model.ts b/vid-webpack-master/src/app/shared/components/customIcon/models/background-color.model.ts
new file mode 100644
index 000000000..324f51ba4
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customIcon/models/background-color.model.ts
@@ -0,0 +1,15 @@
+export enum BackgroundColor {
+  gray = 'gray',
+  purple = 'purple',
+  blue = 'blue',
+  lightBlue = 'light-blue',
+  darkBlue = 'dark-blue',
+  darkBlue2 = 'dark-blue2',
+  disabledBlue = 'disabled-blue',
+  white = 'white',
+  transparent = 'transparent',
+  green = 'green',
+  red = 'red',
+  yellow = 'yellow',
+  silver ='silver'
+}
diff --git a/vid-webpack-master/src/app/shared/components/customIcon/models/background-shape.model.ts b/vid-webpack-master/src/app/shared/components/customIcon/models/background-shape.model.ts
new file mode 100644
index 000000000..924ce3da1
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customIcon/models/background-shape.model.ts
@@ -0,0 +1,4 @@
+export enum BackgroundShape {
+  circle = 'circle',
+  rectangle = 'rectangle'
+}
diff --git a/vid-webpack-master/src/app/shared/components/customIcon/models/icon-size.model.ts b/vid-webpack-master/src/app/shared/components/customIcon/models/icon-size.model.ts
new file mode 100644
index 000000000..a6cd9f537
--- /dev/null
+++ b/vid-webpack-master/src/app/shared/components/customIcon/models/icon-size.model.ts
@@ -0,0 +1,7 @@
+export enum Size {
+  x_large = 'x_large',
+  large = 'large',
+  medium = 'medium',
+  small = 'small',
+  x_small = 'x_small'
+}