Merge branch 'master' into BPenkov/IgxTextSelectionDirective-docs

Author: Lipata

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -1481,6 +1481,27 @@ describe('igxCombo', () => {
             expectedOutput += ', ' + combo.data[9];
             expect(inputElement.value).toEqual(expectedOutput);
         }));
+
+        it('Should properly handle selection manipulation through onSelectionChange emit', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxComboSampleComponent);
+            fixture.detectChanges();
+            const combo = fixture.componentInstance.combo;
+            // override selection
+            fixture.componentInstance.onSelectionChange = (event) => {
+                event.newSelection = [];
+            };
+            combo.toggle();
+            tick();
+            // No items are initially selected
+            expect(combo.selectedItems()).toEqual([]);
+            // Select the first 5 items
+            combo.selectItems(fixture.componentInstance.initData.splice(0, 5));
+            tick();
+            fixture.detectChanges();
+            tick();
+            // onSelectionChange fires and overrides the selection to be [];
+            expect(combo.selectedItems()).toEqual([]);
+        }));
     });
 
     describe('Rendering tests: ', () => {
@@ -3057,7 +3078,8 @@ class IgxComboScrollTestComponent {
 @Component({
     template: `
 <igx-combo #combo [placeholder]="'Location'" [data]='items'
-[filterable]='true' [valueKey]="'field'" [groupKey]="'region'" [width]="'400px'" [allowCustomValues]="true">
+[filterable]='true' [valueKey]="'field'" [groupKey]="'region'" [width]="'400px'"
+(onSelectionChange)="onSelectionChange($event)" [allowCustomValues]="true">
 <ng-template #itemTemplate let-display let-key="valueKey">
 <div class="state-card--simple">
 <span class="small-red-circle"></span>

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

@@ -1065,8 +1065,8 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
             const args: IComboSelectionChangeEventArgs = { oldSelection, newSelection };
             this.onSelectionChange.emit(args);
             newSelectionAsSet = new Set();
-            for (let i = 0; i < newSelection.length; i++) {
-                newSelectionAsSet.add(newSelection[i]);
+            for (let i = 0; i < args.newSelection.length; i++) {
+                newSelectionAsSet.add(args.newSelection[i]);
             }
             this.selectionAPI.set_selection(this.id, newSelectionAsSet);
             this.value = this.dataType !== DataTypes.PRIMITIVE ?

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -240,6 +240,10 @@
         @extend %igx-grid__group-expand-btn !optional;
     }
 
+    @include e(filtering-outlet) {
+        @extend %igx-grid__filtering-outlet !optional;
+    }
+
     @for $i from 1 through 10 {
         @include e(row-indentation, $m: level-#{$i}) {
             @extend %igx-grid__row-indentation--level-#{$i} !optional;

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1295,4 +1295,8 @@
             padding-left: #{$i*map-get($grid-grouping-indicator-padding, 'compact')};
         }
     }
+
+    %igx-grid__filtering-outlet {
+        z-index: 99999;
+    }
 }

projects/igniteui-angular/src/lib/grid/grid-filtering.component.ts

@@ -16,7 +16,7 @@ import {
 } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { DataType } from '../data-operations/data-util';
-import { IgxToggleDirective } from '../directives/toggle/toggle.directive';
+import { IgxToggleDirective, IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import { IgxGridAPIService } from './api.service';
 import { IgxColumnComponent } from './column.component';
 import { FilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
@@ -248,6 +248,7 @@ export class IgxGridFilterComponent implements OnInit, OnDestroy, DoCheck {
                 this._overlaySettings.positionStrategy.settings.horizontalStartPoint = HorizontalAlignment.Left;
             }
             this._overlaySettings.positionStrategy.settings.target = eventArgs.target;
+            this._overlaySettings.outlet = grid.outletDirective;
             this.toggleDirective.toggle(this._overlaySettings);
         });
     }

projects/igniteui-angular/src/lib/grid/grid.component.html

@@ -132,3 +132,5 @@
     <span class="igx-drop-area__text">{{dropAreaMessage}}</span>
 </ng-template>
 
+<div class="igx-grid__filtering-outlet" igxOverlayOutlet></div>
+

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

@@ -51,6 +51,7 @@ import { IgxGridGroupByRowComponent } from './groupby-row.component';
 import { IgxGridRowComponent } from './row.component';
 import { DataUtil, IFilteringOperation, IFilteringExpressionsTree, FilteringExpressionsTree } from '../../public_api';
 import { IgxGridHeaderComponent } from './grid-header.component';
+import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 
 let NEXT_ID = 0;
 const DEBOUNCE_TIME = 16;
@@ -1333,6 +1334,11 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
      */
     @ViewChild('summaries')
     public summaries: ElementRef;
+    /**
+     * @hidden
+     */
+    @ViewChild(IgxOverlayOutletDirective, { read: IgxOverlayOutletDirective })
+    public outletDirective: IgxOverlayOutletDirective;
 
     /**
      * @hidden

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.spec.ts

@@ -10,6 +10,7 @@ import { Component, DebugElement, ViewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { Observable } from 'rxjs';
 import * as Infragistics from '../../public_api';
+import { wait } from '../test-utils/ui-interactions.spec';
 
 // HammerJS simulator from https://github.com/hammerjs/simulator, manual typings TODO
 declare var Simulator: any;
@@ -475,7 +476,7 @@ describe('Navigation Drawer', () => {
             });
         }));
 
-        xit('should update pin based on window width (pinThreshold)', (done) => {
+        it('should update pin based on window width (pinThreshold)', async (done) => {
             const template = `'<igx-nav-drawer [(pin)]="pin" [pinThreshold]="pinThreshold"></igx-nav-drawer>'`;
             let fixture: ComponentFixture<TestComponentPin>;
             TestBed.overrideComponent(TestComponentPin, {
@@ -484,49 +485,45 @@ describe('Navigation Drawer', () => {
             }});
 
             // compile after overrides, not in before each: https://github.com/angular/angular/issues/10712
-            TestBed.compileComponents().then(() => {
-                fixture = TestBed.createComponent(TestComponentPin);
-                expect(() => fixture.detectChanges()).not.toThrow();
-                return fixture.whenStable();
-            })
-            .then(() => {
-
-                // defaults:
-                expect(fixture.componentInstance.viewChild.pin).toBe(false, 'Should be initially unpinned');
-                expect(fixture.componentInstance.pin).toBe(false, 'Parent component pin should update initially');
-
-                this.widthSpyOverride.and.returnValue(fixture.componentInstance.pinThreshold);
-                window.dispatchEvent(new Event('resize'));
-                // wait for debounce
-                return new Promise((resolve) => {
-                    setTimeout(() => { resolve(); }, 200);
-                });
-            })
-            .then(() => {
-                expect(fixture.componentInstance.viewChild.pin).toBe(true, 'Should pin on window resize over threshold');
-                expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on window resize over threshold');
-
-                this.widthSpyOverride.and.returnValue(768);
-                window.dispatchEvent(new Event('resize'));
-                // wait for debounce
-                return new Promise((resolve) => {
-                    setTimeout(() => { resolve(); }, 200);
-                });
-            })
-            .then(() => {
-                expect(fixture.componentInstance.viewChild.pin).toBe(false, 'Should un-pin on window resize below threshold');
-                expect(fixture.componentInstance.pin).toBe(false, 'Parent pin update on window resize below threshold');
-                fixture.componentInstance.pinThreshold = 500;
-                expect(() => fixture.detectChanges()).not.toThrow();
-                return fixture.whenStable();
-            })
-            .then(() => {
-                expect(fixture.componentInstance.viewChild.pin).toBe(true, 'Should re-pin on window resize over threshold');
-                expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on re-pin');
-                done();
-            }).catch ((reason) => {
-                return Promise.reject(reason);
-            });
+            await TestBed.compileComponents();
+            fixture = TestBed.createComponent(TestComponentPin);
+            // watch for initial pin with 2-way bind expression changed errors
+            expect(() => fixture.detectChanges()).not.toThrow();
+            await fixture.whenStable();
+            // defaults:
+            expect(fixture.componentInstance.viewChild.pin).toBe(false, 'Should be initially unpinned');
+            expect(fixture.componentInstance.pin).toBe(false, 'Parent component pin should update initially');
+
+            // manual pin override
+            fixture.componentInstance.pin = true;
+            fixture.detectChanges();
+            window.dispatchEvent(new Event('resize'));
+            // wait for debounce
+            await wait(200);
+            expect(fixture.componentInstance.viewChild.pin).toBe(false, `Shouldn't change state on resize if window width is the same`);
+            expect(fixture.componentInstance.pin).toBe(true, 'Parent component pin remain on resize if window width is the same');
+            fixture.componentInstance.pin = true;
+            fixture.detectChanges();
+
+            this.widthSpyOverride.and.returnValue(fixture.componentInstance.pinThreshold);
+            window.dispatchEvent(new Event('resize'));
+            // wait for debounce
+            await wait(200);
+            expect(fixture.componentInstance.viewChild.pin).toBe(true, 'Should pin on window resize over threshold');
+            expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on window resize over threshold');
+
+            this.widthSpyOverride.and.returnValue(768);
+            window.dispatchEvent(new Event('resize'));
+            // wait for debounce
+            await wait(200);
+            expect(fixture.componentInstance.viewChild.pin).toBe(false, 'Should un-pin on window resize below threshold');
+            expect(fixture.componentInstance.pin).toBe(false, 'Parent pin update on window resize below threshold');
+            fixture.componentInstance.pinThreshold = 500;
+            expect(() => fixture.detectChanges()).not.toThrow();
+            await fixture.whenStable();
+            expect(fixture.componentInstance.viewChild.pin).toBe(true, 'Should re-pin on window resize over threshold');
+            expect(fixture.componentInstance.pin).toBe(true, 'Parent pin update on re-pin');
+            done();
         });
 
         it('should get correct window width', (done) => {

projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.ts

@@ -293,7 +293,7 @@ export class IgxNavigationDrawerComponent implements
     }
 
     private _gesturesAttached = false;
-    private _widthCache: { width: number, miniWidth: number } = { width: null, miniWidth: null };
+    private _widthCache: { width: number, miniWidth: number, windowWidth: number } = { width: null, miniWidth: null, windowWidth: null };
     private _resizeObserver: Subscription;
     private css: { [name: string]: string; } = {
         drawer: 'igx-nav-drawer__aside',
@@ -629,7 +629,7 @@ export class IgxNavigationDrawerComponent implements
         if (!this._resizeObserver) {
             this._resizeObserver = fromEvent(window, 'resize').pipe(debounce(() => interval(150)))
                 .subscribe((value) => {
-                    this.checkPinThreshold();
+                    this.checkPinThreshold(value);
                 });
         }
     }
@@ -647,6 +647,10 @@ export class IgxNavigationDrawerComponent implements
         let windowWidth;
         if (this.pinThreshold) {
             windowWidth = this.getWindowWidth();
+            if (evt && this._widthCache.windowWidth === windowWidth) {
+                return;
+            }
+            this._widthCache.windowWidth = windowWidth;
             if (!this.pin && windowWidth >= this.pinThreshold) {
                 this.pin = true;
                 this.pinChange.emit(true);