chore(*): Merge from base.

Author: MKirova

CHANGELOG.md

@@ -33,6 +33,7 @@ All notable changes for each version of this project will be documented in this
         <igx-column field="Age"></igx-column>
     </igx-grid>
    ```
+   - Scrolling with the mouse wheel over cells with templates that include scrollable containers now correctly scroll these inner containers before the grid body scrolls.
 
 ## 13.0.5
 

README.md

@@ -218,7 +218,7 @@ You can include Ignite UI for Angular in your project as a dependency using the
 
 - [COVID-19 Dashboard](https://github.com/IgniteUI/COVID-19-Dashboard) - This dynamic dashboard was built using Indigo.Design and Ignite UI for Angular leveraging timely reports data from CSSEGISandData/COVID-19 to create an useful and impactful visualization. Built in a matter of hours, it showcases the Ignite UI Category and Data Charts, Map and List components for Angular and the how easy it is to get those quickly configured and populated with data.
 
--[Inventory Management App](https://github.com/IgniteUI/InventoryManagementApp) - The Inventory Management App consists of 2 pages: The Products Page and the Dashboard Page. The Products Page contains a grid with product information and includes a number of useful features
+- [Inventory Management App](https://github.com/IgniteUI/InventoryManagementApp) - The Inventory Management App consists of 2 pages: The Products Page and the Dashboard Page. The Products Page contains a grid with product information and includes a number of useful features
 
 ### Angular apps with ASP.NET Core Web Application
 If you consider Angular client side application with ASP.NET Core application you can check out our [ASP.NET-Core-Samples](https://github.com/IgniteUI/ASP.NET-Core-Samples)

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

@@ -577,6 +577,10 @@
             @extend %igx-grid__tr-pivot-group !optional
         }
 
+        @include e(tr-header-row) {
+            @extend %igx-grid__tr-header-row !optional;
+        }
+
         @include e(tr-pivot, $m: 'columnDimensionLeaf') {
             @extend %igx-grid__tr-pivot--columnDimensionLeaf !optional
         }

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

@@ -3002,6 +3002,14 @@
             }
         }
     }
+
+    %igx-grid__tr-header-row {
+        igx-pivot-row-dimension-header-group {
+            igx-pivot-row-dimension-header {
+                align-items: center;
+            }
+        }
+    }
     // Pivot grid END
 }
 

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -414,7 +414,10 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
         if (this.igxForScrollOrientation === 'vertical') {
             this.dc.instance._viewContainer.element.nativeElement.style.top = '0px';
-            this.scrollComponent = vc.createComponent(VirtualHelperComponent).instance;
+            this.scrollComponent = this.syncScrollService.getScrollMaster(this.igxForScrollOrientation);
+            if (!this.scrollComponent || !this.document.contains(this.scrollComponent.elementRef.nativeElement)) {
+                this.scrollComponent = vc.createComponent(VirtualHelperComponent).instance
+            }
             this._maxHeight = this._calcMaxBrowserHeight();
             this.scrollComponent.size = this.igxForOf ? this._calcHeight() : 0;
             this.syncScrollService.setScrollMaster(this.igxForScrollOrientation, this.scrollComponent);
@@ -721,6 +724,34 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         return scroll;
     }
 
+    /**
+     * Returns the index of the element at the specified offset.
+     * ```typescript
+     * this.parentVirtDir.getIndexAtScroll(100);
+     * ```
+     */
+    public getIndexAtScroll(scrollOffset: number) {
+        return this.getIndexAt(scrollOffset, this.sizesCache);
+    }
+    /**
+     * Returns whether the target index is outside the view.
+     * ```typescript
+     * this.parentVirtDir.isIndexOutsideView(10);
+     * ```
+     */
+    public isIndexOutsideView(index: number) {
+        const targetNode = index >= this.state.startIndex && index <= this.state.startIndex + this.state.chunkSize ?
+        this._embeddedViews.map(view =>
+            view.rootNodes.find(node => node.nodeType === Node.ELEMENT_NODE) || view.rootNodes[0].nextElementSibling)[index - this.state.startIndex] : null;
+        const rowHeight = this.getSizeAt(index);
+        const containerSize = parseInt(this.igxForContainerSize, 10);
+        const containerOffset = -(this.scrollPosition - this.sizesCache[this.state.startIndex]);
+        const endTopOffset = targetNode ? targetNode.offsetTop + rowHeight + containerOffset : containerSize + rowHeight;
+        return !targetNode || targetNode.offsetTop < Math.abs(containerOffset)
+            || containerSize && endTopOffset - containerSize > 5;
+    }
+
+
     /**
      * @hidden
      * Function that recalculates and updates cache sizes.
@@ -1115,20 +1146,16 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     protected initSizesCache(items: any[]): number {
         let totalSize = 0;
         let size = 0;
-        const dimension = this.igxForScrollOrientation === 'horizontal' ?
-            this.igxForSizePropName : 'height';
+        const dimension = this.igxForSizePropName || 'height';
         let i = 0;
         this.sizesCache = [];
         this.heightCache = [];
         this.sizesCache.push(0);
         const count = this.isRemote ? this.totalItemCount : items.length;
         for (i; i < count; i++) {
-            if (dimension === 'height') {
-                // cols[i][dimension] = parseInt(this.igxForItemSize, 10) || 0;
-                size = parseInt(this.igxForItemSize, 10) || 0;
+            size = this._getItemSize(items[i], dimension);
+            if (this.igxForScrollOrientation === 'vertical') {
                 this.heightCache.push(size);
-            } else {
-                size = this._getItemSize(items[i], dimension);
             }
             totalSize += size;
             this.sizesCache.push(totalSize);
@@ -1359,6 +1386,11 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         this._virtScrollTop = realPercentScrolled * maxVirtScrollTop;
     }
 
+    protected _getItemSize(item, dimension: string): number {
+        const dim = item ? item[dimension] : null;
+        return typeof dim === 'number' ? dim : parseInt(this.igxForItemSize, 10) || 0;
+    }
+
     private _updateVScrollOffset() {
         let scrollOffset = 0;
         let currentScrollTop = this.scrollPosition;
@@ -1380,10 +1412,6 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         this.dc.instance._viewContainer.element.nativeElement.style.left = -scrollOffset + 'px';
     }
 
-    private _getItemSize(item, dimension: string): number {
-        const dim = item[dimension];
-        return typeof dim === 'number' ? dim : parseInt(this.igxForItemSize, 10) || 0;
-    }
 
     private _adjustScrollPositionAfterSizeChange(sizeDiff) {
         // if data has been changed while container is scrolled
@@ -1439,10 +1467,14 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
      * @internal
      */
     public get sizesCache(): number[] {
-        if (this.igxGridForOfUniqueSizeCache || this.syncService.isMaster(this)) {
+        if (this.igxForScrollOrientation === 'horizontal') {
+            if (this.igxGridForOfUniqueSizeCache || this.syncService.isMaster(this)) {
+                return this._sizesCache;
+            }
+            return this.syncService.sizesCache(this.igxForScrollOrientation);
+        } else {
             return this._sizesCache;
         }
-        return this.syncService.sizesCache(this.igxForScrollOrientation);
     }
     /**
      * @hidden
@@ -1453,7 +1485,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
     }
 
     protected get itemsDimension() {
-        return this.igxForScrollOrientation === 'horizontal' ? this.igxForSizePropName : 'height';
+        return this.igxForSizePropName || 'height';
     }
 
     /**
@@ -1581,10 +1613,9 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
 
     protected getItemSize(item) {
         let size = 0;
-        const dimension = this.igxForScrollOrientation === 'horizontal' ?
-            this.igxForSizePropName : 'height';
-        if (dimension === 'height') {
-            size = parseInt(this.igxForItemSize, 10) || 0;
+        const dimension = this.igxForSizePropName  || 'height';
+        if (this.igxForScrollOrientation === 'vertical') {
+            size =  this._getItemSize(item, dimension);
             if (item && item.summaries) {
                 size = item.max;
             } else if (item && item.groups && item.height) {
@@ -1597,7 +1628,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
     }
 
     protected initSizesCache(items: any[]): number {
-        if (!this.syncService.isMaster(this)) {
+        if (!this.syncService.isMaster(this) && this.igxForScrollOrientation === 'horizontal') {
             const masterSizesCache = this.syncService.sizesCache(this.igxForScrollOrientation);
             return masterSizesCache[masterSizesCache.length - 1];
         }
@@ -1610,7 +1641,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         const count = this.isRemote ? this.totalItemCount : items.length;
         for (i; i < count; i++) {
             size = this.getItemSize(items[i]);
-            if (this.itemsDimension === 'height') {
+            if (this.igxForScrollOrientation === 'vertical') {
                 this.heightCache.push(size);
             }
             totalSize += size;
@@ -1747,10 +1778,15 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
      * @hidden
      */
     protected _calcMaxChunkSize(): number {
-        if (this.syncService.isMaster(this)) {
+        if (this.igxForScrollOrientation === 'horizontal') {
+            if (this.syncService.isMaster(this)) {
+                return super._calcMaxChunkSize();
+            }
+            return this.syncService.chunkSize(this.igxForScrollOrientation);
+        } else {
             return super._calcMaxChunkSize();
         }
-        return this.syncService.chunkSize(this.igxForScrollOrientation);
+
     }
 }
 

projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts

@@ -138,6 +138,10 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
             scrollDeltaY = this.calcAxisCoords(deltaScaledY, -1, 1);
         }
 
+        if (evt.composedPath && this.didChildScroll(evt, scrollDeltaX, scrollDeltaY)) {
+            return;
+        }
+
         if (scrollDeltaX && this.IgxScrollInertiaDirection === 'horizontal') {
             const nextLeft = this._startX + scrollDeltaX * scrollStep;
             if (!smoothing) {
@@ -186,6 +190,36 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
         }
     }
 
+    /**
+     * @hidden
+     * Checks if the wheel event would have scrolled an element under the display container
+     * in DOM tree so that it can correctly be ignored until that element can no longer be scrolled.
+     */
+    protected didChildScroll(evt, scrollDeltaX, scrollDeltaY): boolean {
+        const path = evt.composedPath();
+        let i = 0;
+        while (i < path.length && path[i].localName !== 'igx-display-container') {
+            const e = path[i++];
+            if (e.scrollHeight > e.clientHeight) {
+                if (scrollDeltaY > 0 && e.scrollHeight - Math.abs(Math.round(e.scrollTop)) !== e.clientHeight) {
+                    return true;
+                }
+                if (scrollDeltaY < 0 && e.scrollTop !== 0) {
+                    return true;
+                }
+            }
+            if (e.scrollWidth > e.clientWidth) {
+                if (scrollDeltaX > 0 && e.scrollWidth - Math.abs(Math.round(e.scrollLeft)) !== e.clientWidth) {
+                    return true;
+                }
+                if (scrollDeltaX < 0 && e.scrollLeft !== 0) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
     /**
      * @hidden
      * Function that is called the first moment we start interacting with the content on a touch device

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1790,7 +1790,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      */
     public getGridTemplate(isRow: boolean): string {
         if (isRow) {
-            const rowsCount = this.grid.multiRowLayoutRowSize;
+            const rowsCount = !this.grid.isPivot ? this.grid.multiRowLayoutRowSize : this.children.length - 1;
             return `repeat(${rowsCount},1fr)`;
         } else {
             return this.getColumnSizesString(this.children);
@@ -2312,23 +2312,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
      * Returns the width and padding of a header cell.
      */
     public getHeaderCellWidths() {
-        const range = this.grid.document.createRange();
-
-        // We do not cover cases where there are children with width 100% and etc,
-        // because then we try to get new column size, based on header content, which is sized based on column size...
-        const headerWidth = this.platform.getNodeSizeViaRange(range,
-            this.headerCell.nativeElement,
-            this.headerGroup.nativeElement);
-
-        const headerStyle = this.grid.document.defaultView.getComputedStyle(this.headerCell.nativeElement);
-        const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
-            parseFloat(headerStyle.borderRightWidth);
-
-        // Take into consideration the header group element, since column pinning applies borders to it if its not a columnGroup.
-        const headerGroupStyle = this.grid.document.defaultView.getComputedStyle(this.headerGroup.nativeElement);
-        const borderSize = !this.parent ? parseFloat(headerGroupStyle.borderRightWidth) + parseFloat(headerGroupStyle.borderLeftWidth) : 0;
-
-        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize) };
+        return this.grid.getHeaderCellWidth(this.headerCell.nativeElement);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -97,7 +97,7 @@ export interface RowType {
     parent?: RowType;
     hasChildren?: boolean;
     treeRow? : ITreeGridRecord;
-    addRowUI?: any;
+    addRowUI?: boolean;
     focused?: boolean;
     grid: GridType;
     onRowSelectorClick?: (event: MouseEvent) => void;
@@ -404,6 +404,7 @@ export interface GridType extends IGridDataBindable {
     hasColumnGroups: boolean;
     hasEditableColumns: boolean;
     uniqueColumnValuesStrategy: (column: ColumnType, tree: FilteringExpressionsTree, done: (values: any[]) => void) => void;
+    getHeaderCellWidth: (element: HTMLElement) => ISizeInfo;
 
     cdr: ChangeDetectorRef;
     document: Document;
@@ -644,3 +645,8 @@ export interface GridSVGIcon {
     name: string;
     value: string;
 }
+
+export interface ISizeInfo {
+    width: number,
+    padding: number
+}

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

@@ -43,7 +43,7 @@ import { FilteringLogic, IFilteringExpression } from '../data-operations/filteri
 import { IGroupByRecord } from '../data-operations/groupby-record.interface';
 import { IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
-import { IgxSummaryOperand, ISummaryExpression } from './summaries/grid-summary';
+import { ISummaryExpression } from './summaries/grid-summary';
 import { RowEditPositionStrategy, IPinningConfig } from './grid.common';
 import { IgxGridToolbarComponent } from './toolbar/grid-toolbar.component';
 import { IgxRowDirective } from './row.directive';
@@ -123,7 +123,7 @@ import {
     IPinColumnCancellableEventArgs
 } from './common/events';
 import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
-import { ColumnType, GridServiceType, GridType, IGX_GRID_SERVICE_BASE, RowType } from './common/grid.interface';
+import { ColumnType, GridServiceType, GridType, IGX_GRID_SERVICE_BASE, ISizeInfo, RowType } from './common/grid.interface';
 import { DropPosition } from './moving/moving.service';
 import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './selection/row-selectors';
 import { IgxColumnComponent } from './columns/column.component';
@@ -2960,7 +2960,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         @Inject(IGX_GRID_SERVICE_BASE) public gridAPI: GridServiceType,
         protected transactionFactory: IgxFlatTransactionFactory,
         private elementRef: ElementRef<HTMLElement>,
-        private zone: NgZone,
+        protected zone: NgZone,
         @Inject(DOCUMENT) public document: any,
         public cdr: ChangeDetectorRef,
         protected resolver: ComponentFactoryResolver,
@@ -3883,6 +3883,26 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.width === null || diff >= 0;
     }
 
+    /**
+     * @hidden @internal
+     * Gets the header cell inner width for auto-sizing.
+     */
+    public getHeaderCellWidth(element: HTMLElement): ISizeInfo {
+        const range = this.document.createRange();
+        const headerWidth = this.platform.getNodeSizeViaRange(range,
+            element,
+            element.parentElement);
+
+        const headerStyle = this.document.defaultView.getComputedStyle(element);
+        const headerPadding = parseFloat(headerStyle.paddingLeft) + parseFloat(headerStyle.paddingRight) +
+            parseFloat(headerStyle.borderRightWidth);
+
+        // Take into consideration the header group element, since column pinning applies borders to it if its not a columnGroup.
+        const headerGroupStyle = this.document.defaultView.getComputedStyle(element.parentElement);
+        const borderSize = parseFloat(headerGroupStyle.borderRightWidth) + parseFloat(headerGroupStyle.borderLeftWidth);
+        return { width: Math.ceil(headerWidth), padding: Math.ceil(headerPadding + borderSize) };
+    }
+
     /**
      * @hidden @internal
      * Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
@@ -6738,7 +6758,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
         // eslint-disable-next-line prefer-const
         for (let [row, set] of selectionMap) {
-            row = this.paginator && source === this.filteredSortedData ? row + (this.paginator.perPage * this.paginator.page) : row;
+            row = this.paginator && (this.pagingMode === GridPagingMode.Local && source === this.filteredSortedData) ? row + (this.paginator.perPage * this.paginator.page) : row;
             row = isRemote ? row - this.virtualizationState.startIndex : row;
             if (!source[row] || source[row].detailsData !== undefined) {
                 continue;
@@ -6980,7 +7000,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.cdr.markForCheck();
     }
 
-    private verticalScrollHandler(event) {
+    protected verticalScrollHandler(event) {
         this.verticalScrollContainer.onScroll(event);
         this.disableTransitions = true;