Merge branch '9.1.x' into rkaraivanov/rename-barrel-files

zdrawku · web-flow · commit ccab4afeb0db · 2020-06-05T11:05:24.000+03:00
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ master ]
+    branches: [ master, 9.1.x ]
   pull_request:
-    branches: [ master ]
+    branches: [ master, 9.1.x ]
 
 jobs:
   build:
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/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
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts b/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
      */
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/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
      */
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -2524,6 +2524,25 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(GridFunctions.getFilterCell(fix, 'ReleaseDate').query(By.css('.custom-filter'))).not.toBeNull(
                 '\`ReleaseDate\` customer filter template was not found.');
         }));
+
+        it('Should close default filter template when clicking on a column with custom one.', fakeAsync(() => {
+            // Click on a column with default filter
+            GridFunctions.clickFilterCellChip(fix, 'Licensed');
+            fix.detectChanges();
+
+            // Verify filter row is visible
+            let filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            expect(filterUIRow).not.toBeNull();
+
+            // Click on a column with custom filter
+            const header = GridFunctions.getColumnHeaderByIndex(fix, 1);
+            header.click();
+            fix.detectChanges();
+
+            // Expect the filter row is closed
+            filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
+            expect(filterUIRow).toBeNull('Default filter template was found on a column with custom filtering.');
+        }));
     });
 });
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts b/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);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/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};
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts
@@ -162,7 +162,13 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
     @HostListener('click', ['$event'])
     public onClick(event) {
         if (!this.colResizingService.isColumnResizing) {
+
             if (this.grid.filteringService.isFilterRowVisible) {
+                if (this.column.filterCellTemplate) {
+                    this.grid.filteringRow.close();
+                    return;
+                }
+
                 if (this.column.filterable && !this.column.columnGroup &&
                     !this.grid.filteringService.isFilterComplex(this.column.field)) {
                     this.grid.filteringService.filteredColumn = this.column;
diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.ts b/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")
diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.spec.ts b/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);
+    });
 });
diff --git a/projects/igniteui-angular/src/lib/icon/icon.service.ts b/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})`);
                 }
diff --git a/projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts b/projects/igniteui-angular/src/lib/select/select-positioning-strategy.ts
@@ -32,6 +32,7 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
 
     /** @inheritdoc */
     position(contentElement: HTMLElement, size: Size, document?: Document, initialCall?: boolean): void {
+        this.select.scrollContainer.scrollTop = 0;
         const rects = super.calculateElementRectangles(contentElement);
         // selectFit obj, to be used for both cases of initialCall and !initialCall(page scroll/overlay repositionAll)
         const selectFit: SelectFit = {
diff --git a/projects/igniteui-angular/src/lib/select/select.component.html b/projects/igniteui-angular/src/lib/select/select.component.html
@@ -36,7 +36,8 @@
         <ng-content *ngTemplateOutlet="headerTemplate"></ng-content>
     </div>
 
-    <div #scrollContainer class="igx-drop-down__list-scroll" [style.maxHeight]="maxHeight" [attr.id]="this.listId" role="listbox">
+    <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->
+    <div #scrollContainer class="igx-drop-down__list-scroll" unselectable="on" [style.maxHeight]="maxHeight" [attr.id]="this.listId" role="listbox">
         <ng-content select="igx-select-item, igx-select-item-group"></ng-content>
     </div>
 
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -1159,6 +1159,9 @@ export class IgxGridFilteringESFTemplatesComponent extends BasicGridComponent {
         <igx-column width="100px" [field]="'ReleaseDate'" [header]="'ReleaseDate'" headerClasses="header-release-date"
                     [filterable]="filterable" [resizable]="resizable" dataType="date" [filterCellTemplate]="filterTemplate">
         </igx-column>
+        <igx-column width="100px" field="Licensed" [filterable]="filterable"
+                    [resizable]="resizable" dataType="boolean">
+        </igx-column>
     </igx-grid>
     <ng-template #filterTemplate igxFilterCellTemplate let-column="column">
         <div class="custom-filter" style="flex-grow: 1;">

Original file line number	Diff line number	Diff line change
`@@ -160,7 +160,7 @@ export class IgxGridGroupByRowComponent {`
`160`	`160`	`}`
`161`	`161`
`162`	`162`
`163`		`- @HostListener('click')`
	`163`	`+ @HostListener('pointerdown')`
`164`	`164`	`public activate() {`
`165`	`165`	`this.grid.navigation.activeNode ? this.grid.navigation.activeNode.row = this.index :`
`166`	`166`	`this.grid.navigation.activeNode = {row: this.index};`