summaryrefslogtreecommitdiffstats
path: root/src/angular/svg-icon
diff options
context:
space:
mode:
Diffstat (limited to 'src/angular/svg-icon')
-rw-r--r--src/angular/svg-icon/svg-icon-label.component.html.ts6
-rw-r--r--src/angular/svg-icon/svg-icon-label.component.ts26
-rw-r--r--src/angular/svg-icon/svg-icon.component.html.ts3
-rw-r--r--src/angular/svg-icon/svg-icon.component.ts77
-rw-r--r--src/angular/svg-icon/svg-icon.module.ts21
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 {
+}