Merge branch '9.0.x' into dmdimitrov/issue7343-9.0.x

Author: kdinev

projects/igniteui-angular/src/lib/icon/icon.component.ts

@@ -1,5 +1,7 @@
-import { Component, ElementRef, HostBinding, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnInit, TemplateRef, ViewChild, ChangeDetectorRef, OnDestroy } from '@angular/core';
 import { IgxIconService } from './icon.service';
+import { first, takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 
 /**
  * Icon provides a way to include material icons to markup
@@ -29,8 +31,7 @@ let NEXT_ID = 0;
     selector: 'igx-icon',
     templateUrl: 'icon.component.html'
 })
-
-export class IgxIconComponent implements OnInit {
+export class IgxIconComponent implements OnInit, OnDestroy {
     @ViewChild('noLigature', { read: TemplateRef, static: true })
     private noLigature: TemplateRef<HTMLElement>;
 
@@ -40,6 +41,8 @@ export class IgxIconComponent implements OnInit {
     @ViewChild('svgImage', { read: TemplateRef, static: true })
     private svgImage: TemplateRef<HTMLElement>;
 
+    private destroy$ = new Subject<void>();
+
     /**
      *  This allows you to change the value of `class.igx-icon`. By default it's `igx-icon`.
      *
@@ -120,10 +123,18 @@ export class IgxIconComponent implements OnInit {
      */
     public el: ElementRef;
 
-    constructor(private _el: ElementRef, private iconService: IgxIconService) {
+    constructor(
+            private _el: ElementRef,
+            private iconService: IgxIconService,
+            private ref: ChangeDetectorRef) {
         this.el = _el;
         this.font = this.iconService.defaultFontSet;
         this.iconService.registerFontSetAlias('material', 'material-icons');
+        this.iconService.iconLoaded.pipe(
+            first(e => e.name === this.iconName && e.fontSet === this.font),
+            takeUntil(this.destroy$)
+        )
+        .subscribe(_ => this.ref.detectChanges());
     }
 
     /**
@@ -134,6 +145,15 @@ export class IgxIconComponent implements OnInit {
         this.updateIconClass();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
     /**
      *  An accessor that returns the value of the font property.
      * @example

projects/igniteui-angular/src/lib/icon/icon.service.spec.ts

@@ -3,6 +3,7 @@ import { IgxIconService } from './icon.service';
 import { DOCUMENT } from '@angular/common';
 
 import { configureTestSuite } from '../test-utils/configure-suite';
+import { first } from 'rxjs/operators';
 
 describe('Icon Service', () => {
     configureTestSuite();
@@ -21,38 +22,38 @@ describe('Icon Service', () => {
     });
 
     it('should set the default icon set', () => {
-        const iconService = TestBed.get(IgxIconService);
+        const iconService = TestBed.inject(IgxIconService);
 
         expect(() => {
             iconService.defaultFontSet = MY_FONT;
         }).not.toThrow();
     });
 
     it('should get the default icon set', () => {
-        const iconService = TestBed.get(IgxIconService);
+        const iconService = TestBed.inject(IgxIconService);
         iconService.defaultFontSet = MY_FONT;
 
         expect(iconService.defaultFontSet).toBe(MY_FONT);
     });
 
     it('should associate alias name with icon set name', () => {
-        const iconService = TestBed.get(IgxIconService);
+        const iconService = TestBed.inject(IgxIconService);
 
         expect(() => {
             iconService.registerFontSetAlias(ALIAS, MY_FONT);
         }).not.toThrow();
     });
 
     it('should get icon set name from alias name', () => {
-        const iconService = TestBed.get(IgxIconService);
+        const iconService = TestBed.inject(IgxIconService);
         iconService.registerFontSetAlias(ALIAS, MY_FONT);
 
         expect(iconService.fontSetClassName(ALIAS)).toBe(MY_FONT);
     });
 
     it('should add custom svg icon from url', () => {
-        const iconService = TestBed.get(IgxIconService) as IgxIconService;
-        const document = TestBed.get(DOCUMENT);
+        const iconService = TestBed.inject(IgxIconService) as IgxIconService;
+        const document = TestBed.inject(DOCUMENT);
 
         const iconName = 'test';
         const fontSet = 'svg-icons';
@@ -71,8 +72,8 @@ describe('Icon Service', () => {
     });
 
     it('should add custom svg icon from text', () => {
-        const iconService = TestBed.get(IgxIconService) as IgxIconService;
-        const document = TestBed.get(DOCUMENT);
+        const iconService = TestBed.inject(IgxIconService) as IgxIconService;
+        const document = TestBed.inject(DOCUMENT);
 
         const iconName = 'test';
         const fontSet = 'svg-icons';
@@ -86,4 +87,28 @@ describe('Icon Service', () => {
         const svgElement = document.querySelector(`svg[id='${iconKey}']`);
         expect(svgElement).toBeDefined();
     });
+
+    it('should emit loading event for a custom svg icon from url', done => {
+        const iconService = TestBed.inject(IgxIconService) as IgxIconService;
+
+        iconService.iconLoaded.pipe(first()).subscribe(event => {
+            expect(event.name).toMatch('test');
+            expect(event.fontSet).toMatch('svg-icons');
+            done();
+        });
+
+        const iconName = 'test';
+        const fontSet = 'svg-icons';
+
+        spyOn(XMLHttpRequest.prototype, 'open').and.callThrough();
+        spyOn(XMLHttpRequest.prototype, 'send').and.callFake(() => {
+            (iconService as any)._iconLoaded.next({
+                name: iconName,
+                value: svgText,
+                fontSet: fontSet
+            });
+        });
+
+        iconService.addSvgIcon(iconName, 'test.svg', fontSet);
+    });
 });

projects/igniteui-angular/src/lib/icon/icon.service.ts

@@ -1,6 +1,20 @@
 import { Injectable, SecurityContext, Inject } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { DOCUMENT } from '@angular/common';
+import { Subject } from 'rxjs';
+
+/**
+ * Event emitted when a SVG icon is loaded through
+ * a HTTP request.
+ */
+export interface IgxIconLoadedEvent {
+    /** Name of the icon */
+    name: string;
+    /** The actual SVG text */
+    value: string;
+    /** The fontSet for the icon. Defaults to material. */
+    fontSet: string;
+}
 
 /**
  * **Ignite UI for Angular Icon Service** -
@@ -14,16 +28,25 @@ import { DOCUMENT } from '@angular/common';
  * this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');
  * ```
  */
-
 @Injectable({
     providedIn: 'root'
 })
-
 export class IgxIconService {
     private _fontSet = 'material-icons';
     private _fontSetAliases = new Map<string, string>();
     private _svgContainer: HTMLElement;
     private _cachedSvgIcons: Set<string> = new Set<string>();
+    private _iconLoaded = new Subject<IgxIconLoadedEvent>();
+
+    /**
+     * Observable that emits when an icon is successfully loaded
+     * through a HTTP request.
+     * @example
+     * ```typescript
+     * this.service.iconLoaded.subscribe((ev: IgxIconLoadedEvent) => ...);
+     * ```
+     */
+    public iconLoaded = this._iconLoaded.asObservable();
 
     constructor(private _sanitizer: DomSanitizer, @Inject(DOCUMENT) private _document: any) { }
 
@@ -143,6 +166,7 @@ export class IgxIconService {
                 const request = event.target as XMLHttpRequest;
                 if (request.status === 200) {
                     instance.cacheSvgIcon(iconName, request.responseText, fontSet);
+                    instance._iconLoaded.next({ name: iconName, value: request.responseText, fontSet });
                 } else {
                     throw new Error(`Could not fetch SVG from url: ${url}; error: ${request.status} (${request.statusText})`);
                 }