Merge "Move onap UI loader and icons to VID"

1 files changed, 85 insertions, 0 deletions

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(" ");
+  }
+}