summaryrefslogtreecommitdiffstats
path: root/src/angular/svg-icon/svg-icon.component.ts
blob: d53981d03c331c96eef461483a44281ffa31492d (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
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(" ");
    }
}