Merge pivot-grid-master into skrastev/pivot-grid-resize.

Author: skrustev

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
 

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-toggle-icons) {
             @extend %igx-grid__tr-pivot-toggle-icons !optional;
         }

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

@@ -2977,6 +2977,14 @@
     %igx-grid__tr-pivot-toggle-icons {
         display: inline-flex !important;
     }
+
+    %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
@@ -1436,10 +1464,14 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
      * @internal
      */
     public get sizesCache(): number[] {
-        if (this.syncService.isMaster(this)) {
+        if (this.igxForScrollOrientation === 'horizontal') {
+            if (this.syncService.isMaster(this)) {
+                return this._sizesCache;
+            }
+            return this.syncService.sizesCache(this.igxForScrollOrientation);
+        } else {
             return this._sizesCache;
         }
-        return this.syncService.sizesCache(this.igxForScrollOrientation);
     }
     /**
      * @hidden
@@ -1450,7 +1482,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
     }
 
     protected get itemsDimension() {
-        return this.igxForScrollOrientation === 'horizontal' ? this.igxForSizePropName : 'height';
+        return this.igxForSizePropName || 'height';
     }
 
     /**
@@ -1578,10 +1610,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) {
@@ -1594,7 +1625,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];
         }
@@ -1607,7 +1638,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;
@@ -1744,10 +1775,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

@@ -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

@@ -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.
@@ -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;