Merge branch '8.2.x' into ddincheva/summary5754

Author: kdinev

CHANGELOG.md

@@ -81,6 +81,7 @@ For more information about the theming please read our [documentation](https://w
     - `isCellSelected` method has been deprecated. Now you can use `selected` property.
     - `rowSelectable` property has been deprecated. Now you can use `rowSelection` property to enable row selection and also you can show and hide the row selectors by setting `hideRowSelectors` property to true or false (which is the default value).
     - Removed deprecated event `OnFocusChange`
+    - `IgxGridBaseComponent` exposes a new property, `dataView` that returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid
     - **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`.
     - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
     - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss

@@ -23,8 +23,7 @@
             @extend %igx-chip__item--hover !optional;
         }
 
-        &:focus,
-        &:focus-within {
+        &:focus {
             @extend %igx-chip__item--focus !optional;
         }
     }

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -402,9 +402,20 @@
             display: none;
         }
 
-        &:focus-within {
+        // FIX IE11 and Edge focus styles.
+        // [focus-within] is not supported by IE & Edge.
+        &:focus {
             outline-style: none;
-            color: igx-color(map-get($theme, 'palette'), error);
+
+            igx-icon {
+                color: igx-color(map-get($theme, 'palette'), error);
+            }
+        }
+
+        igx-icon {
+            &:focus{
+                outline-style: none;
+            }
         }
 
         [dir='rtl'] & {

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

@@ -1189,6 +1189,7 @@
         %grid-cell-text {
             font-style: italic;
             color: --var($theme, 'cell-edited-value-color');
+            padding: 0 1px;
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss

@@ -13,6 +13,7 @@
 /// @prop {Color} row-even-background [#222] - The background color of even rows.
 /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color.
 /// @prop {Map} row-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The selected row background color.
+/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: #222] - The selected row background color on hover.
 /// @prop {Color} row-selected-text-color [#fff] - The selected row text color.
 /// @prop {Color} ghost-header-background [#222] - The dragged header background color.
 /// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode.
@@ -52,6 +53,12 @@ $_base-dark-grid: (
         hexrgba: #222
     ),
 
+    row-selected-hover-background: (
+        igx-color: ('secondary', 'A700'),
+        rgba: .24,
+        hexrgba: #222
+    ),
+
     row-selected-text-color: #fff,
 
     ghost-header-background: #222,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss

@@ -27,9 +27,9 @@
 /// @prop {Color} row-even-background [#fff] - The background color of even rows.
 /// @prop {Color} row-odd-text-color [inherit] - The text color of odd rows.
 /// @prop {Color} row-even-text-color [inherit] - The text color of even rows.
-/// @prop {Map} row-selected-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row background color.
+/// @prop {Map} row-selected-background [igx-color: ('secondary', 50)] - The selected row background color.
 /// @prop {Map} row-selected-text-color [igx-contrast-color: ('secondary', 50)] - The selected row text color.
-/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50), hexrgba: #fff] - The selected row hover background.
+/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 50)] - The selected row hover background.
 /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #fff] - The hover row background color.
 /// @prop {Map} row-hover-text-color [igx-contrast-color: ('grays', 200)] - The hover row text color.
 /// @prop {Map} row-border-color [igx-color: ('grays', 300)] - The row bottom border color.
@@ -132,12 +132,10 @@ $_light-grid: extend(
 
         row-selected-background: (
             igx-color: ('secondary', 50),
-            hexrgba: #fff
         ),
 
         row-selected-hover-background: (
             igx-color: ('secondary', 50),
-            hexrgba: #fff
         ),
 
         row-selected-text-color: (
@@ -334,7 +332,7 @@ $_light-grid: extend(
 /// @prop {Map} row-selected-hover-background [igx-color: ('grays', 200), hexrgba: #fff] - The selected row hover background.
 /// @prop {Map} row-border-color [igx-color: ('grays', 100)] - The row bottom border color.
 /// @prop {Map} pinned-border-color [igx-color: ('grays', 200)] - The color of the pinned border.
-/// @prop {Map} cell-active-border-color [igx-color: ('primary', 100), hexrgba: #fff] - The active(focused) cell border color.
+/// @prop {Map} cell-active-border-color [igx-color: ('primary', 100)] - The active(focused) cell border color.
 /// @prop {Map} cell-selected-background [igx-color: ('grays', 300), hexrgba: #fff] - The selected cell background color.
 /// @prop {Map} grouparea-background [igx-color: 'surface'] - The grid group area background color.
 /// @prop {Map} group-row-background [igx-color: ('grays', 50), hexrgba: #fff] - The grid group row background color.
@@ -385,7 +383,6 @@ $_fluent-grid: extend(
 
         cell-active-border-color: (
             igx-color: ('primary', 100),
-            hexrgba: #fff
         ),
 
         cell-selected-background: (

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

@@ -25,6 +25,7 @@ export interface GridType {
     pinnedColumns: any;
     summariesRowList: any;
     headerContainer: any;
+    dataView: any[];
 
     rowInEditMode: any;
     rowEditTabs: any;

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

@@ -890,7 +890,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             this._isLoading = value;
             this.evaluateLoadingState();
         }
-        this.notifyChanges();
+        Promise.resolve().then(() => {
+            // wait for the current detection cycle to end before triggering a new one.
+            this.notifyChanges();
+        });
     }
 
     /**
@@ -4630,8 +4633,8 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     public hasVerticalSroll() {
         if (this._init) { return false; }
         const isScrollable = this.verticalScrollContainer ? this.verticalScrollContainer.isScrollable() : false;
-        return !!(this.calcWidth && this.verticalScrollContainer.igxForOf &&
-            this.verticalScrollContainer.igxForOf.length > 0 &&
+        return !!(this.calcWidth && this.dataView &&
+            this.dataView.length > 0 &&
             isScrollable);
     }
 
@@ -4997,6 +5000,17 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return 0;
     }
 
+    /**
+     * Returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid.
+     * ```typescript
+     *      const dataView = this.grid.dataView;
+     * ```
+     * @memberof IgxGridComponent
+     */
+    get dataView(): any[] {
+        return this.verticalScrollContainer.igxForOf;
+    }
+
     /**
      * Get current selection state.
      * Returns an array with selected rows' IDs (primaryKey or rowData)
@@ -5215,7 +5229,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * If `headers` is enabled, it will use the column header (if any) instead of the column field.
      */
     getSelectedData(formatters = false, headers = false) {
-        const source = this.verticalScrollContainer.igxForOf;
+        const source = this.dataView;
         return this.extractDataFromSelection(source, formatters, headers);
     }
 
@@ -5284,12 +5298,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 	 * @memberof IgxGridBaseComponent
      */
     public navigateTo(rowIndex: number, visibleColIndex = -1, cb: Function = null) {
-        if (rowIndex < 0 || rowIndex > this.verticalScrollContainer.igxForOf.length - 1
+        if (rowIndex < 0 || rowIndex > this.dataView.length - 1
             || (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
             return;
         }
         this.wheelHandler();
-        if (this.verticalScrollContainer.igxForOf.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
+        if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
             visibleColIndex = -1;
         }
         if (visibleColIndex === -1 || this.navigation.isColumnFullyVisible(visibleColIndex)) {
@@ -5325,7 +5339,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => a - b) :
             columns.map(editCol => editCol.visibleIndex).sort((a, b) => a - b);
         const nextCellIndex = colIndexes.find(index => index > curVisibleColIndex);
-        if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1)
+        if (this.dataView.slice(currRowIndex, currRowIndex + 1)
             .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && nextCellIndex !== undefined) {
             return { rowIndex: currRowIndex, visibleColumnIndex: nextCellIndex };
         } else {
@@ -5357,7 +5371,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         const colIndexes = callback ? columns.filter((col) => callback(col)).map(editCol => editCol.visibleIndex).sort((a, b) => b - a) :
             columns.map(editCol => editCol.visibleIndex).sort((a, b) => b - a);
         const prevCellIndex = colIndexes.find(index => index < curVisibleColIndex);
-        if (this.verticalScrollContainer.igxForOf.slice(currRowIndex, currRowIndex + 1)
+        if (this.dataView.slice(currRowIndex, currRowIndex + 1)
             .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData) && prevCellIndex !== undefined) {
             return { rowIndex: currRowIndex, visibleColumnIndex: prevCellIndex };
         } else {
@@ -5400,24 +5414,24 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private getPrevDataRowIndex(currentRowIndex): number {
         if (currentRowIndex <= 0) { return currentRowIndex; }
 
-        const prevRow = this.verticalScrollContainer.igxForOf.slice(0, currentRowIndex).reverse()
+        const prevRow = this.dataView.slice(0, currentRowIndex).reverse()
             .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData);
-        return prevRow ? this.verticalScrollContainer.igxForOf.indexOf(prevRow) : currentRowIndex;
+        return prevRow ? this.dataView.indexOf(prevRow) : currentRowIndex;
     }
 
     private getNextDataRowIndex(currentRowIndex): number {
-        if (currentRowIndex === this.verticalScrollContainer.igxForOf.length) { return currentRowIndex; }
+        if (currentRowIndex === this.dataView.length) { return currentRowIndex; }
 
-        const nextRow = this.verticalScrollContainer.igxForOf.slice(currentRowIndex + 1, this.verticalScrollContainer.igxForOf.length)
+        const nextRow = this.dataView.slice(currentRowIndex + 1, this.dataView.length)
             .find(rec => !rec.expression && !rec.summaries && !rec.childGridsData);
-        return nextRow ? this.verticalScrollContainer.igxForOf.indexOf(nextRow) : currentRowIndex;
+        return nextRow ? this.dataView.indexOf(nextRow) : currentRowIndex;
     }
 
     private isValidPosition(rowIndex, colIndex): boolean {
         const rows = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).length;
         const cols = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0).length;
         if (rows < 1 || cols < 1) { return false; }
-        if (rowIndex > -1 && rowIndex < this.verticalScrollContainer.igxForOf.length &&
+        if (rowIndex > -1 && rowIndex < this.dataView.length &&
             colIndex > - 1 && colIndex <= this.unpinnedColumns[this.unpinnedColumns.length - 1].visibleIndex) {
             return true;
         }
@@ -5614,11 +5628,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         if (delayScrolling) {
             this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
                 this.scrollDirective(this.verticalScrollContainer,
-                    typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
+                    typeof (row) === 'number' ? row : this.dataView.indexOf(row));
             });
         } else {
             this.scrollDirective(this.verticalScrollContainer,
-                typeof (row) === 'number' ? row : this.verticalScrollContainer.igxForOf.indexOf(row));
+                typeof (row) === 'number' ? row : this.dataView.indexOf(row));
         }
 
         this.scrollToHorizontally(column);

projects/igniteui-angular/src/lib/grids/grid-mrl-navigation.service.ts

@@ -249,7 +249,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
             moveNext = true;
         }
         const rowIndex = moveNext ? selectedNode.row + 1 : selectedNode.row;
-        if (rowIndex > this.grid.verticalScrollContainer.igxForOf.length - 1) {
+        if (rowIndex > this.grid.dataView.length - 1) {
             // end of rows reached.
             return;
         }
@@ -469,7 +469,7 @@ export class IgxGridMRLNavigationService extends IgxGridNavigationService {
     }
 
     private _isGroupRecordAt(rowIndex: number) {
-        const record = this.grid.verticalScrollContainer.igxForOf[rowIndex];
+        const record = this.grid.dataView[rowIndex];
         return record.records && record.records.length;
     }
 

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -267,7 +267,7 @@ export class IgxGridNavigationService {
             (cells[cells.length - 1] as HTMLElement).focus();
         } else {
            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
-            this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
+            this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
                     const cells = this.grid.nativeElement.querySelectorAll(
@@ -315,7 +315,7 @@ export class IgxGridNavigationService {
     public navigateDown(rowElement, selectedNode: ISelectionNode) {
         const currentRowIndex = selectedNode.row;
         const visibleColumnIndex = selectedNode.column;
-        if (currentRowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1 ||
+        if (currentRowIndex === this.grid.dataView.length - 1 ||
             (currentRowIndex === 0 && rowElement.tagName.toLowerCase() === 'igx-grid-summary-row')) {
             // check if this is rootSummary row
             return;
@@ -389,7 +389,7 @@ export class IgxGridNavigationService {
             this.onKeydownEnd(rowIndex);
         } else {
            this.getFocusableGrid().nativeElement.focus({ preventScroll: true });
-            this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
+            this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
                     const rows = this.getAllRows();
@@ -405,7 +405,7 @@ export class IgxGridNavigationService {
         const verticalScroll = this.grid.verticalScrollContainer.getVerticalScroll();
         if (verticalScroll.scrollHeight === 0 ||
             verticalScroll.scrollTop === verticalScroll.scrollHeight - this.grid.verticalScrollContainer.igxForContainerSize) {
-            const rowIndex = this.grid.verticalScrollContainer.igxForOf.length - 1;
+            const rowIndex = this.grid.dataView.length - 1;
             const row = this.grid.nativeElement.querySelector(`[data-rowindex="${rowIndex}"]`) as HTMLElement;
             if (row && row.tagName.toLowerCase() === 'igx-grid-groupby-row') {
                 row.focus();
@@ -414,10 +414,10 @@ export class IgxGridNavigationService {
             const isSummary = (row && row.tagName.toLowerCase() === 'igx-grid-summary-row') ? true : false;
             this.onKeydownEnd(rowIndex, isSummary);
         } else {
-            this.grid.verticalScrollContainer.scrollTo(this.grid.verticalScrollContainer.igxForOf.length - 1);
+            this.grid.verticalScrollContainer.scrollTo(this.grid.dataView.length - 1);
             this.grid.verticalScrollContainer.onChunkLoad
                 .pipe(first()).subscribe(() => {
-                    const rowIndex = this.grid.verticalScrollContainer.igxForOf.length - 1;
+                    const rowIndex = this.grid.dataView.length - 1;
                     const row = this.grid.nativeElement.querySelector(`[data-rowindex="${rowIndex}"]`) as HTMLElement;
                     if (row && row.tagName.toLowerCase() === 'igx-grid-groupby-row') {
                         row.focus();
@@ -447,7 +447,7 @@ export class IgxGridNavigationService {
             const rowEl = this.grid.rowList.find(row => row.index === rowIndex + 1) ?
                 this.grid.rowList.find(row => row.index === rowIndex + 1) :
                 this.grid.summariesRowList.find(row => row.index === rowIndex + 1);
-            if (rowIndex === this.grid.verticalScrollContainer.igxForOf.length - 1 && this.grid.rootSummariesEnabled) {
+            if (rowIndex === this.grid.dataView.length - 1 && this.grid.rootSummariesEnabled) {
                 this.onKeydownHome(0, true);
                 return;
             }