diff options
Diffstat (limited to 'src/angular/svg-icon/svg-icon.component.ts')
-rw-r--r-- | src/angular/svg-icon/svg-icon.component.ts | 51 |
1 files changed, 24 insertions, 27 deletions
diff --git a/src/angular/svg-icon/svg-icon.component.ts b/src/angular/svg-icon/svg-icon.component.ts index d53981d..f41b206 100644 --- a/src/angular/svg-icon/svg-icon.component.ts +++ b/src/angular/svg-icon/svg-icon.component.ts @@ -1,8 +1,8 @@ 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'; +import { Mode, Size, BackgroundShape, BackgroundColor } from "../common/enums"; +import { iconsMap } from 'onap-ui-common'; +import { template } from './svg-icon.component.html'; @Component({ selector: 'svg-icon', @@ -16,35 +16,37 @@ import template from './svg-icon.component.html'; export class SvgIconComponent implements OnChanges { @Input() public name: string; + @Input() public category: 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; - + public svgIconContent: string; public svgIconContentSafeHtml: SafeHtml; public svgIconCustomClassName: string; - private classes: string; + public classes: string; constructor(protected domSanitizer: DomSanitizer) { this.size = Size.medium; this.disabled = false; + this.category = this.category || "common"; } - static get Icons(): {[key: string]: string} { + static Icons(): { [key: string]: string } { return iconsMap; } public ngOnChanges(changes: SimpleChanges) { - if (changes.name) { - this.updateSvgIconByName(); - this.buildClasses(); - } + this.updateSvgIconByName(); + this.buildClasses(); } protected updateSvgIconByName() { - this.svgIconContent = SvgIconComponent.Icons[this.name] || null; + this.svgIconContent = iconsMap[this.category][this.name] || null; if (this.svgIconContent) { this.svgIconContentSafeHtml = this.domSanitizer.bypassSecurityTrustHtml(this.svgIconContent); this.svgIconCustomClassName = '__' + this.name.replace(/\s+/g, '_'); @@ -55,22 +57,17 @@ export class SvgIconComponent implements OnChanges { } 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); + const _classes = ['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); } + 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(" "); } |