Merge branch '9.1.x' into ibarakov/issue7350-9.1.x

Author: kdinev

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -588,14 +588,12 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
 
     private addPointerListeners(selection) {
         if (selection !== GridSelectionMode.multiple) { return; }
-        this.nativeElement.addEventListener('pointerdown', this.pointerdown);
         this.nativeElement.addEventListener('pointerenter', this.pointerenter);
         this.nativeElement.addEventListener('pointerup', this.pointerup);
     }
 
     private  removePointerListeners(selection) {
         if (selection !== GridSelectionMode.multiple) { return; }
-        this.nativeElement.removeEventListener('pointerdown', this.pointerdown);
         this.nativeElement.removeEventListener('pointerenter', this.pointerenter);
         this.nativeElement.removeEventListener('pointerup', this.pointerup);
     }
@@ -606,6 +604,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     ngOnInit() {
         this.zone.runOutsideAngular(() => {
+            this.nativeElement.addEventListener('pointerdown', this.pointerdown);
             this.addPointerListeners(this.cellSelectionMode);
             // IE 11 workarounds
             if (isIE()) {
@@ -629,6 +628,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     ngOnDestroy() {
         this.zone.runOutsideAngular(() => {
+            this.nativeElement.removeEventListener('pointerdown', this.pointerdown);
             this.removePointerListeners(this.cellSelectionMode);
             if (isIE()) {
                 this.nativeElement.removeEventListener('compositionstart', this.compositionStartHandler);
@@ -755,6 +755,10 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * @internal
      */
     pointerdown = (event: PointerEvent) => {
+        if (this.cellSelectionMode !== GridSelectionMode.multiple) {
+            this.activate(event);
+            return;
+        }
         if (!isLeftClick(event)) {
             this.selectionService.addKeyboardRange();
             this.selectionService.initKeyboardState();
@@ -816,9 +820,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     @HostListener('click', ['$event'])
     public onClick(event: MouseEvent) {
-        if (this.cellSelectionMode !== GridSelectionMode.multiple) {
-            this.activate(event);
-        }
         this.grid.onCellClick.emit({
             cell: this,
             event

projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

@@ -239,9 +239,9 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
     }
 
     /**
-     * Enables/Disables the column group selection.
-     * ```html
-     * <igx-column [selected] = "true"></igx-column>
+     * Select/deselect the column group.
+     * ```typescript
+     * this.columnGroup.selected = true;
      * ```
      * @memberof IgxColumnGroupComponent
      */

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -294,10 +294,10 @@ export class IgxColumnComponent implements AfterContentInit {
     }
 
     /**
-     * Enables/Disables column selection.
+     * Select/deselect a column.
      * Default value is `false`.
-     * ```html
-     * <igx-column [selected] = "true"></igx-column>
+     * ```typescript
+     * this.column.selected = true;
      * ```
      * @memberof IgxColumnComponent
      */

projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts

@@ -663,7 +663,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
         it('should toggle expand/collapse state of group row with ArrowRight/ArrowLeft key.', () => {
             const gRow = grid.groupsRowList.toArray()[0];
             const gRowElement = GridFunctions.getGroupedRows(fix)[0];
-            gRowElement.triggerEventHandler('click', {});
+            gRowElement.triggerEventHandler('pointerdown', {});
             fix.detectChanges();
             expect(gRow.expanded).toBe(true);
 
@@ -680,7 +680,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
         it('should toggle expand/collapse state of group row with ArrowUp/ArrowDown key.', () => {
             const gRow = grid.groupsRowList.toArray()[0];
             const gRowElement = GridFunctions.getGroupedRows(fix)[0];
-            gRowElement.triggerEventHandler('click', {});
+            gRowElement.triggerEventHandler('pointerdown', {});
             fix.detectChanges();
 
             expect(gRow.expanded).toBe(true);
@@ -704,7 +704,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             let groupedRowsCount = grid.groupsRowList.length;
             let groupRow = grid.groupsRowList.toArray()[groupedRowsCount - 1];
             const groupRowElement = GridFunctions.getGroupedRows(fix)[groupedRowsCount - 1];
-            groupRowElement.triggerEventHandler('click', null);
+            groupRowElement.triggerEventHandler('pointerdown', null);
             fix.detectChanges();
 
             GridFunctions.verifyGroupRowIsFocused(groupRow);
@@ -737,7 +737,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             expect(grid.groupsRowList.last.expanded).toBeTruthy();
 
             const groupRowIndex = grid.groupsRowList.last.index;
-            grid.groupsRowList.last.nativeElement.dispatchEvent(new Event('click'));
+            grid.groupsRowList.last.nativeElement.dispatchEvent(new Event('pointerdown'));
             await wait();
             fix.detectChanges();
             UIInteractions.triggerEventHandlerKeyDown('arrowDown', gridContent);
@@ -762,7 +762,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             fix.detectChanges();
 
             let row = grid.getRowByIndex(1);
-            row.nativeElement.dispatchEvent(new Event('click'));
+            row.nativeElement.dispatchEvent(new Event('pointerdown'));
             await wait();
             fix.detectChanges();
 
@@ -916,7 +916,7 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             await wait(DEBOUNCETIME);
             fix.detectChanges();
 
-            grid.navigateTo(9, -1, (args) => { args.target.nativeElement.click(); });
+            grid.navigateTo(9, -1, (args) => { args.target.nativeElement.dispatchEvent(new Event('pointerdown')); });
             await wait(100);
             fix.detectChanges();
             await wait(100);

projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts

@@ -160,7 +160,7 @@ export class IgxGridGroupByRowComponent {
     }
 
 
-    @HostListener('click')
+    @HostListener('pointerdown')
     public activate() {
         this.grid.navigation.activeNode ? this.grid.navigation.activeNode.row = this.index :
             this.grid.navigation.activeNode = {row: this.index};

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());
     }
 
     /**
@@ -135,7 +146,16 @@ export class IgxIconComponent implements OnInit {
     }
 
     /**
-     * An accessor that returns the value of the font property.
+     * @hidden
+     * @internal
+     */
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+
+    /**
+     *  An accessor that returns the value of the font property.
      * @example
      * ```typescript
      *  @ViewChild("MyIcon")

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();
@@ -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})`);
                 }