Merge branch 'master' into bpachilova/feat-10681-master

Author: teodosiah

CHANGELOG.md

@@ -3,13 +3,16 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 13.1.0
+
 ### New Features
 - `igxTooltipTarget` directive now allows specifying a plain text tooltip without adding an additional DOM element decorated with the `igxTooltip` directive. This is achieved via the newly introduced `tooltip` string input.
     ```html
     <button igxTooltipTarget [tooltip]="'Infragistics Inc. HQ'">
        info
     </button>
     ```
+- `IgxTabs` have full right-to-left (RTL) support.
+
 ### General
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -20,6 +23,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/tabs/_tabs-theme.scss

@@ -58,30 +58,23 @@
 @function igx-tabs-theme(
     $palette: null,
     $schema: $light-schema,
-
     $item-text-color: null,
     $item-background: null,
-
     $item-hover-background: null,
     $item-hover-color: null,
-
     $item-active-color: null,
     $item-active-icon-color: null,
     $item-active-background: null,
     $indicator-color: null,
-
     $button-color: null,
     $button-background: null,
     $button-hover-background: null,
     $button-hover-color: null,
-
     $tab-ripple-color: null,
     $button-ripple-color: null,
     $border-radius: null,
-
     $border-color: null,
     $border-color--hover: null,
-
     $disable-shadow: true
 ) {
     $name: 'igx-tabs';
@@ -347,6 +340,10 @@
             display: none;
         }
 
+        @include if-rtl() {
+            transform: scaleX(-1);
+        }
+
         @include igx-ripple($button-ripple-theme);
         @include igx-css-vars($button-ripple-theme);
     }
@@ -594,5 +591,3 @@
         }
     }
 }
-
-

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/common/grid.interface.ts

@@ -96,7 +96,7 @@ export interface RowType {
     parent?: RowType;
     hasChildren?: boolean;
     treeRow? : ITreeGridRecord;
-    addRowUI?: any;
+    addRowUI?: boolean;
     focused?: boolean;
     grid: GridType;
     onRowSelectorClick?: (event: MouseEvent) => void;

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

@@ -6500,12 +6500,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.tbody.nativeElement.style.display = 'none';
         let res = !this.nativeElement.parentElement ||
             this.nativeElement.parentElement.clientHeight === 0 ||
-            this.nativeElement.parentElement.clientHeight === renderedHeight;
-        if (!this.platform.isChromium && !this.platform.isFirefox) {
+            this.nativeElement.parentElement.clientHeight === renderedHeight ||
             // If grid causes the parent container to extend (for example when container is flex)
             // we should always auto-size since the actual size of the container will continuously change as the grid renders elements.
-            res = this.checkContainerSizeChange();
-        }
+            this.checkContainerSizeChange();
         this.tbody.nativeElement.style.display = '';
         return res;
     }

projects/igniteui-angular/src/lib/grids/grid-public-row.ts

@@ -1,5 +1,5 @@
 import { IGroupByRecord } from '../data-operations/groupby-record.interface';
-import { IgxEditRow } from './common/crud.service';
+import { IgxAddRow, IgxEditRow } from './common/crud.service';
 import { GridInstanceType, GridSummaryCalculationMode, GridSummaryPosition } from './common/enums';
 import { IgxGridCell } from './grid-public-cell';
 import { IgxSummaryResult } from './summaries/grid-summary';
@@ -38,6 +38,19 @@ abstract class BaseRow implements RowType {
         return primaryKey ? data[primaryKey] : data;
     }
 
+    /**
+     * Gets if this represents add row UI
+     * 
+     * ```typescript
+     * let isAddRow = row.addRowUI;
+     * ```
+     */
+    public get addRowUI(): boolean {
+        return !!this.grid.crudService.row &&
+            this.grid.crudService.row.getClassName() === IgxAddRow.name &&
+            this.grid.crudService.row.id === this.key;
+    }
+
     /**
      * The data record that populates the row.
      *

projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts

@@ -1785,6 +1785,7 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => {
                 expect(fix.componentInstance.selectedCell.column.field).toMatch('Phone');
 
                 GridFunctions.simulateGridContentKeydown(fix, 'ArrowDown');
+                await waitForSelectionChange(fix.componentInstance.grid);
                 fix.detectChanges();
 
                 expect(fix.componentInstance.selectedCell.value).toEqual(fix.componentInstance.data[0].Fax);