Merge branch 'master' into angular-11

Lipata · web-flow · commit d2a69cca9ab5 · 2020-11-06T12:40:16.000+02:00
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts b/projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts
@@ -6,8 +6,14 @@ import {
     ChangeDetectorRef,
     OnDestroy,
     Directive,
-    AfterViewInit
+    AfterViewInit,
+    Inject,
+    NgZone
 } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Subject } from 'rxjs';
+import { takeUntil, throttleTime } from 'rxjs/operators';
+import { resizeObservable, isIE } from '../../core/utils';
 
 @Directive({
     selector: '[igxVirtualHelperBase]'
@@ -21,16 +27,25 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
 
     private _afterViewInit = false;
     private _scrollNativeSize: number;
+    private _detached = false;
+    protected destroy$ = new Subject<any>();
+
 
     ngAfterViewInit() {
         this._afterViewInit = true;
+        const delayTime = isIE() ? 40 : 0;
+        this._zone.runOutsideAngular(() => {
+            resizeObservable(this.nativeElement).pipe(
+                throttleTime(delayTime),
+                takeUntil(this.destroy$)).subscribe((event) => this.handleMutations(event));
+        });
     }
 
     @HostListener('scroll', ['$event'])
     onScroll(event) {
         this.scrollAmount = event.target.scrollTop || event.target.scrollLeft;
     }
-    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
+    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef, protected _zone: NgZone, @Inject(DOCUMENT) public document) {
         this._scrollNativeSize = this.calculateScrollNativeSize();
      }
 
@@ -40,6 +55,8 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
 
     public ngOnDestroy() {
         this.destroyed = true;
+        this.destroy$.next(true);
+        this.destroy$.complete();
     }
 
     public set size(value) {
@@ -60,6 +77,23 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
         return this._scrollNativeSize;
     }
 
+    protected get isAttachedToDom(): boolean {
+        return this.document.body.contains(this.nativeElement);
+    }
+
+    protected handleMutations(event) {
+        const hasSize = !(event[0].contentRect.height === 0 && event[0].contentRect.width === 0);
+        if (!hasSize && !this.isAttachedToDom) {
+            // scroll bar detached from DOM
+            this._detached = true;
+        } else if (this._detached && hasSize && this.isAttachedToDom) {
+            // attached back now.
+            this.restoreScroll();
+        }
+    }
+
+    protected restoreScroll() {}
+
     public calculateScrollNativeSize() {
         const div = document.createElement('div');
         const style = div.style;
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/horizontal.virtual.helper.component.ts b/projects/igniteui-angular/src/lib/directives/for-of/horizontal.virtual.helper.component.ts
@@ -1,5 +1,6 @@
-import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, Inject, NgZone } from '@angular/core';
 import { VirtualHelperBaseDirective } from './base.helper.component';
+import { DOCUMENT } from '@angular/common';
 
 /**
  * @hidden
@@ -14,7 +15,11 @@ export class HVirtualHelperComponent extends VirtualHelperBaseDirective {
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--horizontal';
 
-    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
-        super(elementRef, cdr);
-     }
+    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef, protected _zone: NgZone, @Inject(DOCUMENT) public document) {
+        super(elementRef, cdr, _zone, document);
+    }
+
+    protected restoreScroll() {
+        this.nativeElement.scrollLeft = this.scrollAmount;
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts b/projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts
@@ -1,6 +1,7 @@
 import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef,
-     ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
+     ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone } from '@angular/core';
 import { VirtualHelperBaseDirective } from './base.helper.component';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
     selector: 'igx-virtual-helper',
@@ -20,11 +21,15 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--vertical';
 
-    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef) {
-        super(elementRef, cdr);
+    constructor(public elementRef: ElementRef, public cdr: ChangeDetectorRef, protected _zone: NgZone, @Inject(DOCUMENT) public document) {
+        super(elementRef, cdr, _zone, document);
     }
 
     ngOnInit() {
         this.scrollWidth = this.scrollNativeSize;
     }
+
+    protected restoreScroll() {
+        this.nativeElement.scrollTop = this.scrollAmount;
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -1990,6 +1990,39 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(parseInt(window.getComputedStyle(gridBody.nativeElement).height, 10)).toBe(expectedHeight);
             expect(parseInt(window.getComputedStyle(grid.nativeElement).height, 10)).toBe(300);
         });
+
+        it('IgxTabs: should persist scroll position after changing tabs.', async () => {
+            const grid = fix.componentInstance.grid2;
+            fix.detectChanges();
+            const tab = fix.componentInstance.tabs;
+
+            tab.tabs.toArray()[1].select();
+            await wait(100);
+            fix.detectChanges();
+
+            grid.navigateTo(grid.data.length - 1, grid.columns.length - 1);
+            await wait(100);
+            fix.detectChanges();
+
+            const scrTop = grid.verticalScrollContainer.getScroll().scrollTop;
+            const scrLeft = grid.dataRowList.first.virtDirRow.getScroll().scrollLeft;
+
+            expect(scrTop).not.toBe(0);
+            expect(scrLeft).not.toBe(0);
+
+            tab.tabs.toArray()[0].select();
+            await wait(100);
+            fix.detectChanges();
+
+            tab.tabs.toArray()[1].select();
+            await wait(100);
+            fix.detectChanges();
+            await wait(100);
+
+            // check scrollTop/scrollLeft was persisted.
+            expect(grid.verticalScrollContainer.getScroll().scrollTop).toBe(scrTop);
+            expect(grid.dataRowList.first.virtDirRow.getScroll().scrollLeft).toBe(scrLeft);
+        });
     });
 
     describe('IgxGrid - footer section', () => {
diff --git a/src/app/tabs/tabs.sample.html b/src/app/tabs/tabs.sample.html
@@ -59,6 +59,10 @@ <h3>Tab 3 Content</h3>
                         sit amet nulla at consequat. Duis volutpat tristique luctus.</p>
                 </div>
             </igx-tabs-group>
+            <igx-tabs-group label="Tab with Grid" icon="folder">
+                <igx-grid #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [autoGenerate]='true'>
+                </igx-grid>
+            </igx-tabs-group>
             <igx-tabs-group label="Tab 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="folder">
                 <div class="my-tab-content">
                     <h3>Tab 4 Content</h3>
diff --git a/src/app/tabs/tabs.sample.ts b/src/app/tabs/tabs.sample.ts
@@ -8,6 +8,37 @@ import {Component, ViewEncapsulation} from '@angular/core';
 })
 export class TabsSampleComponent {
 
+    public data = [
+        // tslint:disable:max-line-length
+        { 'ID': 'ALFKI', 'CompanyName': 'Alfreds Futterkiste', 'ContactName': 'Maria Anders', 'ContactTitle': 'Sales Representative', 'Address': 'Obere Str. 57', 'City': 'Berlin', 'Region': null, 'PostalCode': '12209', 'Country': 'Germany', 'Phone': '030-0074321', 'Fax': '030-0076545' },
+        { 'ID': 'ANATR', 'CompanyName': 'Ana Trujillo Emparedados y helados', 'ContactName': 'Ana Trujillo', 'ContactTitle': 'Owner', 'Address': 'Avda. de la Constitución 2222', 'City': 'México D.F.', 'Region': null, 'PostalCode': '05021', 'Country': 'Mexico', 'Phone': '(5) 555-4729', 'Fax': '(5) 555-3745' },
+        { 'ID': 'ANTON', 'CompanyName': 'Antonio Moreno Taquería', 'ContactName': 'Antonio Moreno', 'ContactTitle': 'Owner', 'Address': 'Mataderos 2312', 'City': 'México D.F.', 'Region': null, 'PostalCode': '05023', 'Country': 'Mexico', 'Phone': '(5) 555-3932', 'Fax': null },
+        { 'ID': 'AROUT', 'CompanyName': 'Around the Horn', 'ContactName': 'Thomas Hardy', 'ContactTitle': 'Sales Representative', 'Address': '120 Hanover Sq.', 'City': 'London', 'Region': null, 'PostalCode': 'WA1 1DP', 'Country': 'UK', 'Phone': '(171) 555-7788', 'Fax': '(171) 555-6750' },
+        { 'ID': 'BERGS', 'CompanyName': 'Berglunds snabbköp', 'ContactName': 'Christina Berglund', 'ContactTitle': 'Order Administrator', 'Address': 'Berguvsvägen 8', 'City': 'Luleå', 'Region': null, 'PostalCode': 'S-958 22', 'Country': 'Sweden', 'Phone': '0921-12 34 65', 'Fax': '0921-12 34 67' },
+        { 'ID': 'BLAUS', 'CompanyName': 'Blauer See Delikatessen', 'ContactName': 'Hanna Moos', 'ContactTitle': 'Sales Representative', 'Address': 'Forsterstr. 57', 'City': 'Mannheim', 'Region': null, 'PostalCode': '68306', 'Country': 'Germany', 'Phone': '0621-08460', 'Fax': '0621-08924' },
+        { 'ID': 'BLONP', 'CompanyName': 'Blondesddsl père et fils', 'ContactName': 'Frédérique Citeaux', 'ContactTitle': 'Marketing Manager', 'Address': '24, place Kléber', 'City': 'Strasbourg', 'Region': null, 'PostalCode': '67000', 'Country': 'France', 'Phone': '88.60.15.31', 'Fax': '88.60.15.32' },
+        { 'ID': 'BOLID', 'CompanyName': 'Bólido Comidas preparadas', 'ContactName': 'Martín Sommer', 'ContactTitle': 'Owner', 'Address': 'C/ Araquil, 67', 'City': 'Madrid', 'Region': null, 'PostalCode': '28023', 'Country': 'Spain', 'Phone': '(91) 555 22 82', 'Fax': '(91) 555 91 99' },
+        { 'ID': 'BONAP', 'CompanyName': 'Bon app\'', 'ContactName': 'Laurence Lebihan', 'ContactTitle': 'Owner', 'Address': '12, rue des Bouchers', 'City': 'Marseille', 'Region': null, 'PostalCode': '13008', 'Country': 'France', 'Phone': '91.24.45.40', 'Fax': '91.24.45.41' },
+        { 'ID': 'BOTTM', 'CompanyName': 'Bottom-Dollar Markets', 'ContactName': 'Elizabeth Lincoln', 'ContactTitle': 'Accounting Manager', 'Address': '23 Tsawassen Blvd.', 'City': 'Tsawassen', 'Region': 'BC', 'PostalCode': 'T2F 8M4', 'Country': 'Canada', 'Phone': '(604) 555-4729', 'Fax': '(604) 555-3745' },
+        { 'ID': 'BSBEV', 'CompanyName': 'B\'s Beverages', 'ContactName': 'Victoria Ashworth', 'ContactTitle': 'Sales Representative', 'Address': 'Fauntleroy Circus', 'City': 'London', 'Region': null, 'PostalCode': 'EC2 5NT', 'Country': 'UK', 'Phone': '(171) 555-1212', 'Fax': null },
+        { 'ID': 'CACTU', 'CompanyName': 'Cactus Comidas para llevar', 'ContactName': 'Patricio Simpson', 'ContactTitle': 'Sales Agent', 'Address': 'Cerrito 333', 'City': 'Buenos Aires', 'Region': null, 'PostalCode': '1010', 'Country': 'Argentina', 'Phone': '(1) 135-5555', 'Fax': '(1) 135-4892' },
+        { 'ID': 'CENTC', 'CompanyName': 'Centro comercial Moctezuma', 'ContactName': 'Francisco Chang', 'ContactTitle': 'Marketing Manager', 'Address': 'Sierras de Granada 9993', 'City': 'México D.F.', 'Region': null, 'PostalCode': '05022', 'Country': 'Mexico', 'Phone': '(5) 555-3392', 'Fax': '(5) 555-7293' },
+        { 'ID': 'CHOPS', 'CompanyName': 'Chop-suey Chinese', 'ContactName': 'Yang Wang', 'ContactTitle': 'Owner', 'Address': 'Hauptstr. 29', 'City': 'Bern', 'Region': null, 'PostalCode': '3012', 'Country': 'Switzerland', 'Phone': '0452-076545', 'Fax': null },
+        { 'ID': 'COMMI', 'CompanyName': 'Comércio Mineiro', 'ContactName': 'Pedro Afonso', 'ContactTitle': 'Sales Associate', 'Address': 'Av. dos Lusíadas, 23', 'City': 'Sao Paulo', 'Region': 'SP', 'PostalCode': '05432-043', 'Country': 'Brazil', 'Phone': '(11) 555-7647', 'Fax': null },
+        { 'ID': 'CONSH', 'CompanyName': 'Consolidated Holdings', 'ContactName': 'Elizabeth Brown', 'ContactTitle': 'Sales Representative', 'Address': 'Berkeley Gardens 12 Brewery', 'City': 'London', 'Region': null, 'PostalCode': 'WX1 6LT', 'Country': 'UK', 'Phone': '(171) 555-2282', 'Fax': '(171) 555-9199' },
+        { 'ID': 'DRACD', 'CompanyName': 'Drachenblut Delikatessen', 'ContactName': 'Sven Ottlieb', 'ContactTitle': 'Order Administrator', 'Address': 'Walserweg 21', 'City': 'Aachen', 'Region': null, 'PostalCode': '52066', 'Country': 'Germany', 'Phone': '0241-039123', 'Fax': '0241-059428' },
+        { 'ID': 'DUMON', 'CompanyName': 'Du monde entier', 'ContactName': 'Janine Labrune', 'ContactTitle': 'Owner', 'Address': '67, rue des Cinquante Otages', 'City': 'Nantes', 'Region': null, 'PostalCode': '44000', 'Country': 'France', 'Phone': '40.67.88.88', 'Fax': '40.67.89.89' },
+        { 'ID': 'EASTC', 'CompanyName': 'Eastern Connection', 'ContactName': 'Ann Devon', 'ContactTitle': 'Sales Agent', 'Address': '35 King George', 'City': 'London', 'Region': null, 'PostalCode': 'WX3 6FW', 'Country': 'UK', 'Phone': '(171) 555-0297', 'Fax': '(171) 555-3373' },
+        { 'ID': 'ERNSH', 'CompanyName': 'Ernst Handel', 'ContactName': 'Roland Mendel', 'ContactTitle': 'Sales Manager', 'Address': 'Kirchgasse 6', 'City': 'Graz', 'Region': null, 'PostalCode': '8010', 'Country': 'Austria', 'Phone': '7675-3425', 'Fax': '7675-3426' },
+        { 'ID': 'FAMIA', 'CompanyName': 'Familia Arquibaldo', 'ContactName': 'Aria Cruz', 'ContactTitle': 'Marketing Assistant', 'Address': 'Rua Orós, 92', 'City': 'Sao Paulo', 'Region': 'SP', 'PostalCode': '05442-030', 'Country': 'Brazil', 'Phone': '(11) 555-9857', 'Fax': null },
+        { 'ID': 'FISSA', 'CompanyName': 'FISSA Fabrica Inter. Salchichas S.A.', 'ContactName': 'Diego Roel', 'ContactTitle': 'Accounting Manager', 'Address': 'C/ Moralzarzal, 86', 'City': 'Madrid', 'Region': null, 'PostalCode': '28034', 'Country': 'Spain', 'Phone': '(91) 555 94 44', 'Fax': '(91) 555 55 93' },
+        { 'ID': 'FOLIG', 'CompanyName': 'Folies gourmandes', 'ContactName': 'Martine Rancé', 'ContactTitle': 'Assistant Sales Agent', 'Address': '184, chaussée de Tournai', 'City': 'Lille', 'Region': null, 'PostalCode': '59000', 'Country': 'France', 'Phone': '20.16.10.16', 'Fax': '20.16.10.17' },
+        { 'ID': 'FOLKO', 'CompanyName': 'Folk och fä HB', 'ContactName': 'Maria Larsson', 'ContactTitle': 'Owner', 'Address': 'Åkergatan 24', 'City': 'Bräcke', 'Region': null, 'PostalCode': 'S-844 67', 'Country': 'Sweden', 'Phone': '0695-34 67 21', 'Fax': null },
+        { 'ID': 'FRANK', 'CompanyName': 'Frankenversand', 'ContactName': 'Peter Franken', 'ContactTitle': 'Marketing Manager', 'Address': 'Berliner Platz 43', 'City': 'München', 'Region': null, 'PostalCode': '80805', 'Country': 'Germany', 'Phone': '089-0877310', 'Fax': '089-0877451' },
+        { 'ID': 'FRANR', 'CompanyName': 'France restauration', 'ContactName': 'Carine Schmitt', 'ContactTitle': 'Marketing Manager', 'Address': '54, rue Royale', 'City': 'Nantes', 'Region': null, 'PostalCode': '44000', 'Country': 'France', 'Phone': '40.32.21.21', 'Fax': '40.32.21.20' },
+        { 'ID': 'FRANS', 'CompanyName': 'Franchi S.p.A.', 'ContactName': 'Paolo Accorti', 'ContactTitle': 'Sales Representative', 'Address': 'Via Monte Bianco 34', 'City': 'Torino', 'Region': null, 'PostalCode': '10100', 'Country': 'Italy', 'Phone': '011-4988260', 'Fax': '011-4988261' }
+    ];
+
     contacts: any[] = [{
         avatar: 'assets/images/avatar/1.jpg',
         favorite: true,
