Merge branch '9.0.x' into mkirova/fix-4993-9.0.x

ChronosSF · web-flow · commit 01b236ca3e42 · 2020-06-10T16:04:40.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -4297,9 +4297,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden
      */
-    protected getPagingHeight(): number {
+    protected getPagingFooterHeight(): number {
         let pagingHeight = 0;
-        if (this.paging && this.footer) {
+        if (this.footer) {
             pagingHeight = this.footer.nativeElement.firstElementChild ?
                 this.footer.nativeElement.offsetHeight : 0;
         }
@@ -4330,7 +4330,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                                  this.theadRow.nativeElement.offsetHeight;
         const footerHeight = this.summariesHeight || this.tfoot.nativeElement.offsetHeight - this.tfoot.nativeElement.clientHeight;
         const toolbarHeight = this.getToolbarHeight();
-        const pagingHeight = this.getPagingHeight();
+        const pagingHeight = this.getPagingFooterHeight();
         const groupAreaHeight = this.getGroupAreaHeight();
         const renderedHeight = toolbarHeight + actualTheadRow +
             footerHeight + pagingHeight + groupAreaHeight +
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
@@ -1703,6 +1703,10 @@ describe('IgxGrid Component Tests #grid', () => {
             const footerContent = footer.textContent.trim();
 
             expect(footerContent).toEqual('Custom content');
+            const grid = fix.componentInstance.grid;
+
+            const expectedHeight = parseInt(grid.height, 10) - grid.theadRow.nativeElement.offsetHeight - grid.scrollWidth - 100;
+            expect(expectedHeight - grid.calcHeight).toBeLessThanOrEqual(1);
         });
     });
 
@@ -2090,15 +2094,19 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi
 @Component({
     template:
         `<div>
-        <igx-grid #grid [data]="data" [displayDensity]="'compact'" [autoGenerate]="true"
-            [paging]="true" [perPage]="5">
+        <igx-grid #grid [data]="data" height='300px' [displayDensity]="'compact'" [autoGenerate]="true"
+            >
             <igx-grid-footer>
-            Custom content
+                <div style='height:100px;'>
+                Custom content
+                </div>
             </igx-grid-footer>
         </igx-grid>
         </div>`
 })
 export class IgxGridWithCustomFooterComponent extends IgxGridTestComponent {
+    public data = SampleTestData.foodProductData();
+    @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent;
 }
 @Component({
     template:
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -1100,11 +1100,11 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @inheritdoc
      */
     getSelectedData(formatters = false, headers = false): any[] {
-        if (this.groupingExpressions.length) {
+        if (this.groupingExpressions.length || this.hasDetails) {
             const source = [];
 
             const process = (record) => {
-                if (record.expression || record.summaries) {
+                if (record.expression || record.summaries || this.isDetailRecord(record)) {
                     source.push(null);
                     return;
                 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
-import { async, TestBed, ComponentFixture } from '@angular/core/testing';
+import { async, TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
@@ -799,10 +799,13 @@ describe('IgxGrid Master Detail #grid', () => {
         });
 
         describe('Cell Selection', () => {
-            it('Should exclude expanded detail views when doing range cell selection', () => {
+            beforeEach(fakeAsync(() => {
                 fix = TestBed.createComponent(DefaultGridMasterDetailComponent);
                 grid = fix.componentInstance.grid;
                 fix.detectChanges();
+            }));
+
+            it('Should exclude expanded detail views when doing range cell selection', fakeAsync(() => {
                 grid.expandRow(fix.componentInstance.data[2].ID);
                 const selectionChangeSpy = spyOn<any>(grid.onRangeSelection, 'emit').and.callThrough();
                 const startCell =  grid.getCellByColumn(1, 'ContactName');
@@ -837,7 +840,23 @@ describe('IgxGrid Master Detail #grid', () => {
                 expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
                 expect(selectionChangeSpy).toHaveBeenCalledWith(range);
                 expect(rowDetail.querySelector('[class*="selected"]')).toBeNull();
-            });
+            }));
+
+            it('getSelectedData should return correct values when there are master details', fakeAsync(() => {
+                const range = { rowStart: 0, rowEnd: 5, columnStart: 'ContactName', columnEnd: 'ContactName' };
+                const expectedData = [
+                    { ContactName: 'Maria Anders' },
+                    { ContactName: 'Ana Trujillo' },
+                    { ContactName: 'Antonio Moreno' }
+                ];
+                grid.expandAll();
+                tick(100);
+                fix.detectChanges();
+
+                grid.selectRange(range);
+                fix.detectChanges();
+                expect(grid.getSelectedData()).toEqual(expectedData);
+            }));
         });
 
         describe('Row Selection', () => {
@@ -1070,10 +1089,12 @@ describe('IgxGrid Master Detail #grid', () => {
         describe('GroupBy', () => {
             beforeEach(async() => {
                 fix = TestBed.createComponent(DefaultGridMasterDetailComponent);
-                fix.componentInstance.columns[0].hasSummary = true;
                 fix.detectChanges();
 
                 grid = fix.componentInstance.grid;
+                grid.getColumnByName('ContactName').hasSummary = true;
+                fix.detectChanges();
+
                 grid.summaryCalculationMode = GridSummaryCalculationMode.childLevelsOnly;
                 grid.groupingExpressions =
                 [{ fieldName: 'CompanyName', dir: SortingDirection.Asc, ignoreCase: false }];
@@ -1162,9 +1183,7 @@ describe('IgxGrid Master Detail #grid', () => {
     template: `
         <igx-grid [data]="data" [width]="width" [height]="height" [primaryKey]="'ID'" [allowFiltering]='true'
         [paging]="paging" [perPage]="perPage" [rowSelectable]="rowSelectable">
-            <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field" [width]="c.width" [dataType]='c.dataType'
-                [hidden]='c.hidden' [sortable]="c.sortable" [movable]='c.movable' [groupable]='c.groupable' [editable]="c.editable"
-                [hasSummary]="c.hasSummary" [pinned]='c.pinned'>
+            <igx-column *ngFor="let c of columns" [field]="c.field" [width]="c.width" [dataType]='c.dataType'>
             </igx-column>
 
             <ng-template igxGridDetail let-dataItem>
@@ -1203,9 +1222,7 @@ export class DefaultGridMasterDetailComponent {
     template: `
         <igx-grid [data]="data" [expansionStates]='expStates'
          [width]="width" [height]="height" [primaryKey]="'ID'" [paging]="paging" [rowSelectable]="rowSelectable">
-            <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field" [width]="c.width" [dataType]='c.dataType'
-                [hidden]='c.hidden' [sortable]="c.sortable" [movable]='c.movable' [groupable]='c.groupable' [editable]="c.editable"
-                [hasSummary]="c.hasSummary" [pinned]='c.pinned'>
+            <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field" [width]="c.width" [dataType]='c.dataType'>
             </igx-column>
 
             <ng-template igxGridDetail let-dataItem>
diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts
@@ -1,28 +1,44 @@
-import { IgxInputDirective, IgxInputState } from './../directives/input/input.directive';
 import {
-    Component, ContentChildren, forwardRef, QueryList, ViewChild, Input, ContentChild,
-    AfterContentInit, HostBinding, Directive, TemplateRef, ElementRef, ChangeDetectorRef, Optional,
-    Injector, OnInit, AfterViewInit, OnDestroy, Inject, Type
-
+    AfterContentInit,
+    AfterViewInit,
+    ChangeDetectorRef,
+    Component,
+    ContentChild,
+    ContentChildren,
+    Directive,
+    ElementRef,
+    forwardRef,
+    HostBinding,
+    Inject,
+    Injector,
+    Input,
+    OnDestroy,
+    OnInit,
+    Optional,
+    QueryList,
+    TemplateRef,
+    ViewChild
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl } from '@angular/forms';
-import { Subscription } from 'rxjs';
-
+import { AbstractControl, ControlValueAccessor, NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { Subscription, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
+import { EditorProvider } from '../core/edit-provider';
+import { IgxSelectionAPIService } from '../core/selection';
+import { CancelableEventArgs } from '../core/utils';
+import { IgxLabelDirective } from '../directives/label/label.directive';
+import { IGX_DROPDOWN_BASE, ISelectionEventArgs, Navigate } from '../drop-down/drop-down.common';
 import { IgxDropDownItemBaseDirective } from '../drop-down/index';
 import { IgxInputGroupComponent } from '../input-group/input-group.component';
-
+import { AbsoluteScrollStrategy, OverlaySettings } from '../services/index';
+import { IgxInputDirective, IgxInputState } from './../directives/input/input.directive';
 import { IgxDropDownComponent } from './../drop-down/drop-down.component';
 import { IgxSelectItemComponent } from './select-item.component';
 import { SelectPositioningStrategy } from './select-positioning-strategy';
-
-import { OverlaySettings, AbsoluteScrollStrategy } from '../services/index';
-import { IGX_DROPDOWN_BASE, ISelectionEventArgs, Navigate } from '../drop-down/drop-down.common';
-import { CancelableEventArgs } from '../core/utils';
-import { IgxLabelDirective } from '../directives/label/label.directive';
 import { IgxSelectBase } from './select.common';
-import { EditorProvider } from '../core/edit-provider';
-import { IgxSelectionAPIService } from '../core/selection';
-import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
+
+
+
 
 /** @hidden @internal */
 @Directive({
@@ -79,9 +95,9 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
     AfterContentInit, OnInit, AfterViewInit, OnDestroy, EditorProvider {
 
     private ngControl: NgControl = null;
-    private _statusChanges$: Subscription;
     private _overlayDefaults: OverlaySettings;
     private _value: any;
+    protected destroy$ = new Subject<boolean>();
 
     /** @hidden @internal do not use the drop-down container class */
     public cssClass = false;
@@ -350,11 +366,15 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
             scrollStrategy: new AbsoluteScrollStrategy(),
             excludePositionTarget: true
         };
-        this.children.changes.subscribe(() => {
+        const changes$ = this.children.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.setSelection(this.items.find(x => x.value === this.value));
             this.cdr.detectChanges();
         });
-        Promise.resolve().then(() => this.children.notifyOnChanges());
+        Promise.resolve().then(() => {
+            if (!changes$.closed) {
+                this.children.notifyOnChanges();
+            }
+        });
     }
 
     /** @hidden @internal */
@@ -393,7 +413,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
     public onBlur(): void {
         this._onTouchedCallback();
         if (this.ngControl && !this.ngControl.valid) {
-             this.input.valid = IgxInputState.INVALID;
+            this.input.valid = IgxInputState.INVALID;
         } else {
             this.input.valid = IgxInputState.INITIAL;
         }
@@ -430,7 +450,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
      */
     public ngAfterViewInit() {
         if (this.ngControl) {
-            this._statusChanges$ = this.ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
+            this.ngControl.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(this.onStatusChanged.bind(this));
             this.manageRequiredAsterisk();
         }
         this.cdr.detectChanges();
@@ -440,17 +460,16 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
      * @hidden @internal
      */
     public ngOnDestroy() {
+        this.destroy$.next(true);
+        this.destroy$.complete();
         this.selection.clear(this.id);
-        if (this._statusChanges$) {
-            this._statusChanges$.unsubscribe();
-        }
     }
 
     /**
      * @hidden @internal
      * Prevent input blur - closing the items container on Header/Footer Template click.
      */
-   public mousedownHandler(event) {
+    public mousedownHandler(event) {
         event.preventDefault();
     }
 }
diff --git a/src/app/grid-column-moving/grid-column-moving.sample.html b/src/app/grid-column-moving/grid-column-moving.sample.html
@@ -36,6 +36,11 @@
                                                     [hasSummary]="false"
                                                     [dataType]="c.type">
                 </igx-column>
+                <igx-grid-footer>
+                    <div style='height:200px;'>
+                        Test
+                    </div>
+                </igx-grid-footer>
             </igx-grid>
             Drag mode: {{ grid1.selectionService.dragMode }}
             <div class="sample-buttons">
