Merge branch '10.0.x' into astaev/issue7569-10.0.x

Author: DiyanDimitrov

projects/igniteui-angular/src/lib/core/setImmediate.ts

@@ -20,9 +20,10 @@
  */
 
 // Note: Originally copied from core-js-pure package and modified. (https://github.com/zloirock/core-js)
-const windowLocation = window.location;
-let counter = 0;
+
 const queue = {};
+let counter = 0;
+let eventListenerAdded = false;
 
 const run = function (id) {
     if (queue.hasOwnProperty(id)) {
@@ -36,15 +37,16 @@ const listener = function (event) {
     run(event.data);
 };
 
-if (!window.setImmediate) {
-    window.addEventListener('message', listener, false);
-}
-
 export function setImmediate(cb: any) {
     if (window.setImmediate) {
         return window.setImmediate(cb);
     }
 
+    if (!eventListenerAdded) {
+        eventListenerAdded = true;
+        window.addEventListener('message', listener, false);
+    }
+
     const args = [];
     let i = 1;
 
@@ -56,6 +58,7 @@ export function setImmediate(cb: any) {
         (typeof cb === 'function' ? cb : Function(cb)).apply(undefined, args);
     };
 
+    const windowLocation = window.location;
     window.postMessage(counter + '', windowLocation.protocol + '//' + windowLocation.host);
 
     return counter;

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -1947,7 +1947,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    @ContentChildren(IgxRowEditTabStopDirective)
+    @ContentChildren(IgxRowEditTabStopDirective, { descendants: true })
     public rowEditTabsCUSTOM: QueryList<IgxRowEditTabStopDirective>;
 
     /**
@@ -4655,14 +4655,37 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return 0;
     }
 
+    /**
+     * @hidden
+     */
+    protected getComputedHeight(elem) {
+        return elem.offsetHeight ? parseFloat(this.document.defaultView.getComputedStyle(elem).getPropertyValue('height')) : 0;
+    }
+    /**
+     * @hidden
+     */
+    protected getFooterHeight(): number {
+        return this.summariesHeight || this.getComputedHeight(this.tfoot.nativeElement);
+    }
+    /**
+     * @hidden
+     */
+    protected getTheadRowHeight(): number {
+        const height = this.getComputedHeight(this.theadRow.nativeElement);
+        return (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ?
+        height - this.getFilterCellHeight() :
+        height;
+    }
+
     /**
      * @hidden
      */
     protected getToolbarHeight(): number {
         let toolbarHeight = 0;
         if (this.showToolbar && this.toolbarHtml != null) {
+            const height = this.getComputedHeight(this.toolbarHtml.nativeElement);
             toolbarHeight = this.toolbarHtml.nativeElement.firstElementChild ?
-                this.toolbarHtml.nativeElement.offsetHeight : 0;
+            height : 0;
         }
         return toolbarHeight;
     }
@@ -4673,8 +4696,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     protected getPagingFooterHeight(): number {
         let pagingHeight = 0;
         if (this.footer) {
+            const height = this.getComputedHeight(this.footer.nativeElement);
             pagingHeight = this.footer.nativeElement.firstElementChild ?
-                this.footer.nativeElement.offsetHeight : 0;
+            height : 0;
         }
         return pagingHeight;
     }
@@ -4697,17 +4721,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (!this._height) {
             return null;
         }
-
-        const actualTheadRow = (!this.allowFiltering || (this.allowFiltering && this.filterMode !== FilterMode.quickFilter)) ?
-            this.theadRow.nativeElement.offsetHeight - this.getFilterCellHeight() :
-            this.theadRow.nativeElement.offsetHeight;
-        const footerHeight = this.summariesHeight || this.tfoot.nativeElement.offsetHeight - this.tfoot.nativeElement.clientHeight;
+        const actualTheadRow = this.getTheadRowHeight();
+        const footerHeight = this.getFooterHeight();
         const toolbarHeight = this.getToolbarHeight();
         const pagingHeight = this.getPagingFooterHeight();
         const groupAreaHeight = this.getGroupAreaHeight();
+        const scrHeight = this.getComputedHeight(this.scr.nativeElement);
         const renderedHeight = toolbarHeight + actualTheadRow +
             footerHeight + pagingHeight + groupAreaHeight +
-            this.scr.nativeElement.clientHeight;
+            scrHeight;
 
         let gridHeight = 0;
 
@@ -4718,13 +4740,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 const bodyHeight = this.getDataBasedBodyHeight();
                 return bodyHeight > 0 ? bodyHeight : null;
             }
-            gridHeight = parseInt(computed, 10);
+            gridHeight = parseFloat(computed);
         } else {
             gridHeight = parseInt(this._height, 10);
         }
         const height = Math.abs(gridHeight - renderedHeight);
 
-        if (height === 0 || isNaN(gridHeight)) {
+        if (Math.round(height) === 0 || isNaN(gridHeight)) {
             const bodyHeight = this.defaultTargetBodyHeight;
             return bodyHeight > 0 ? bodyHeight : null;
         }

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

@@ -915,7 +915,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     protected getGroupAreaHeight(): number {
-        return this.groupArea ? this.groupArea.nativeElement.offsetHeight : 0;
+        return this.groupArea ? this.getComputedHeight(this.groupArea.nativeElement) : 0;
     }
 
     /**

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

@@ -674,6 +674,36 @@ describe('IgxHierarchicalGrid selection #hGrid', () => {
             // check row is not selected
             GridSelectionFunctions.verifyRowSelected(firstRow, false);
         });
+
+        it('Should not clear root selection state when changing selection mode of child grid', () => {
+            rowIsland1.rowSelection = GridSelectionMode.multiple;
+            const firstRow = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+            const secondRow = hierarchicalGrid.getRowByIndex(1) as IgxHierarchicalRowComponent;
+            GridSelectionFunctions.clickRowCheckbox(firstRow);
+            GridSelectionFunctions.clickRowCheckbox(secondRow);
+
+            fix.detectChanges();
+            expect(hierarchicalGrid.getRowByKey('0').selected).toBeTrue();
+
+            const thirdRow = hierarchicalGrid.getRowByIndex(2) as IgxHierarchicalRowComponent;
+            thirdRow.toggle();
+            fix.detectChanges();
+
+            const childGrid = rowIsland1.rowIslandAPI.getChildGrids()[0];
+            const firstChildRow = childGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+            const secondChildRow = childGrid.getRowByIndex(1) as IgxHierarchicalRowComponent;
+            GridSelectionFunctions.clickRowCheckbox(firstChildRow);
+            GridSelectionFunctions.clickRowCheckbox(secondChildRow);
+            fix.detectChanges();
+
+            expect(hierarchicalGrid.selectedRows().length).toEqual(2);
+            expect(childGrid.selectedRows().length).toEqual(2);
+
+            rowIsland1.rowSelection = GridSelectionMode.single;
+            fix.detectChanges();
+            expect(hierarchicalGrid.selectedRows().length).toEqual(2);
+            expect(childGrid.selectedRows().length).toEqual(0);
+        });
     });
 
     describe('Row Selection CRUD', () => {

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

@@ -51,7 +51,8 @@ export interface IGridCreatedEventArgs extends IBaseEventArgs {
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-row-island',
     template: ``,
-    providers: [IgxRowIslandAPIService]
+    providers: [IgxRowIslandAPIService,
+                IgxGridSelectionService]
 })
 export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
             implements AfterContentInit, AfterViewInit, OnChanges, OnInit, OnDestroy, DoCheck {

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

@@ -495,6 +495,10 @@ export class IgxNavigationDrawerComponent implements
             this.setDrawerWidth(changes.width.currentValue);
         }
 
+        if (changes.isOpen) {
+            this.setDrawerWidth(this.isOpen ? this.width : (this.miniTemplate ? this.miniWidth : ''));
+        }
+
         if (changes.miniWidth) {
             if (!this.isOpen) {
                 this.setDrawerWidth(changes.miniWidth.currentValue);

src/app/grid-column-moving/grid-column-moving.sample.css

@@ -10,3 +10,14 @@
     margin-bottom: 16px;
     max-width: 900px;
 }
+
+.references {
+    font-size: .75em;
+}
+
+.references > p {
+    margin: 0;
+    letter-spacing: initial;
+    line-height: initial;
+    font-size: 1em;
+}

src/app/grid-column-moving/grid-column-moving.sample.html

@@ -22,7 +22,7 @@
                 [filterMode]="'excelStyleFilter'"
                 [paging]="false"
                 [width]="'900px'"
-                [height]="'800px'">
+                >
                 <igx-column *ngFor="let c of columns" [field]="c.field"
                                                     [header]="c.field"
                                                     [movable]="c.movable"
@@ -37,8 +37,9 @@
                                                     [dataType]="c.type">
                 </igx-column>
                 <igx-grid-footer>
-                    <div style='height:200px;'>
-                        Test
+                    <div class="references">
+                       <p>Test</p> 
+                       <p>Test2</p> 
                     </div>
                 </igx-grid-footer>
             </igx-grid>