Merge remote-tracking branch 'origin/master' into sstoychev/reemit-events-master

Author: ChronosSF

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes for each version of this project will be documented in this
     </igx-grid>
    ```
    - Exposed `dataChanging` and `dataChanged` events for the three grids that are re-emits of the corresponding `IgxForOf` events. These indicate the beginning and end of the input change triggering the actual data re-rendering which happens each time the data view changes. This happens after changes in either the data the grid is bound or the state affecting the operations which alter this data (e.g. sorting, filtering, group-by).
+   - 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/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