init commit onap ui

Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>

5 files changed, 133 insertions, 0 deletions

diff --git a/src/angular/svg-icon/svg-icon-label.component.html.ts b/src/angular/svg-icon/svg-icon-label.component.html.ts
new file mode 100644
index 0000000..558b7c4
--- /dev/null
+++ b/src/angular/svg-icon/svg-icon-label.component.html.ts
@@ -0,0 +1,6 @@
+export default `
+<div class="svg-icon-wrapper" [ngClass]="[(mode) ? 'mode-'+mode : '', (size) ? 'size-'+size : '', (labelPlacement) ? 'label-placement-'+labelPlacement : '', (clickable) ? 'clickable' : '', className || '']" [attr.disabled]="disabled || undefined">
+    <svg-icon [name]="name" className="svg-icon"></svg-icon>
+    <span class="svg-icon-label" [ngClass]="[labelClassName || '']">{{ label }}</span>
+</div>
+`;
diff --git a/src/angular/svg-icon/svg-icon-label.component.ts b/src/angular/svg-icon/svg-icon-label.component.ts
new file mode 100644
index 0000000..5a00c3d
--- /dev/null
+++ b/src/angular/svg-icon/svg-icon-label.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input } from "@angular/core";
+import { SvgIconComponent } from './svg-icon.component';
+import { Mode, Size, Placement } from "../common/enums";
+import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import template from './svg-icon-label.component.html';
+
+@Component({
+    selector: 'svg-icon-label',
+    template: template,
+    styles: [`
+        :host {
+            display: inline-flex;
+        }
+    `]
+})
+export class SvgIconLabelComponent extends SvgIconComponent {
+
+    @Input() public label: string;
+    @Input() public labelPlacement: Placement;
+    @Input() public labelClassName: string;
+
+    constructor(protected domSanitizer: DomSanitizer) {
+        super(domSanitizer);
+        this.labelPlacement = Placement.left;
+    }
+}
diff --git a/src/angular/svg-icon/svg-icon.component.html.ts b/src/angular/svg-icon/svg-icon.component.html.ts
new file mode 100644
index 0000000..1baedbd
--- /dev/null
+++ b/src/angular/svg-icon/svg-icon.component.html.ts
@@ -0,0 +1,3 @@
+export default `
+<div [ngClass]="classes" [attr.disabled]="disabled || undefined" [innerHtml]="svgIconContentSafeHtml"></div>
+`;
diff --git a/src/angular/svg-icon/svg-icon.component.ts b/src/angular/svg-icon/svg-icon.component.ts
new file mode 100644
index 0000000..d53981d
--- /dev/null
+++ b/src/angular/svg-icon/svg-icon.component.ts
@@ -0,0 +1,77 @@
+import { Component, Input, OnChanges, SimpleChanges, HostBinding } from "@angular/core";
+import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { Mode, Size } from "../common/enums";
+import iconsMap from '../../common/icons-map';
+import template from './svg-icon.component.html';
+
+@Component({
+    selector: 'svg-icon',
+    template: template,
+    styles: [`
+        :host {
+            display: inline-flex;
+        }
+    `]
+})
+export class SvgIconComponent implements OnChanges {
+
+    @Input() public name: string;
+    @Input() public mode: Mode;
+    @Input() public size: Size;
+    @Input() public disabled: boolean;
+    @Input() public clickable: boolean;
+    @Input() public className: any;
+
+    public svgIconContent: string;
+    public svgIconContentSafeHtml: SafeHtml;
+    public svgIconCustomClassName: string;
+    private classes: string;
+
+    constructor(protected domSanitizer: DomSanitizer) {
+        this.size = Size.medium;
+        this.disabled = false;
+    }
+
+    static get Icons(): {[key: string]: string} {
+        return iconsMap;
+    }
+
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes.name) {
+            this.updateSvgIconByName();
+            this.buildClasses();
+        }
+    }
+
+    protected updateSvgIconByName() {
+        this.svgIconContent = SvgIconComponent.Icons[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 = [];
+        _classes.push('svg-icon');
+        if (this.mode) {
+            _classes.push('mode-' + this.mode);
+        }
+        if (this.size) {
+            _classes.push('size-' + this.size);
+        }
+        if (this.clickable) {
+            _classes.push('clickable');
+        }
+        if (this.svgIconCustomClassName) {
+            _classes.push(this.svgIconCustomClassName);
+        }
+        if (this.className) {
+            _classes.push(this.className);
+        }
+        this.classes = _classes.join(" ");
+    }
+}
diff --git a/src/angular/svg-icon/svg-icon.module.ts b/src/angular/svg-icon/svg-icon.module.ts
new file mode 100644
index 0000000..87a0d86
--- /dev/null
+++ b/src/angular/svg-icon/svg-icon.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { SvgIconComponent } from "./svg-icon.component";
+import { SvgIconLabelComponent } from "./svg-icon-label.component";
+
+@NgModule({
+    declarations: [
+        SvgIconComponent,
+        SvgIconLabelComponent
+    ],
+    imports: [
+        CommonModule
+    ],
+    exports: [
+        SvgIconComponent,
+        SvgIconLabelComponent
+    ],
+})
+
+export class SvgIconModule {
+}