blob: c59bc59459f57db26a584baca0de0d23f4514815 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
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(" ");
}
}
|
