Merge branch 'mvenkov/drop-down-flicker-fix' of https://github.com/IgniteUI/igniteui-angular into mvenkov/drop-down-flicker-fix

Author: wnvko

CHANGELOG.md

@@ -57,9 +57,12 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
     ```
    For more information, please head over to `igxGrid`'s [ReadMe](https://github.com/IgniteUI/igniteui-angular/blob/master/src/grid/README.md) or the [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid_groupby.html).
 
+- `igxGrid` theme now has support for alternating grid row background and text colors.
 - `igxColumn` changes:
     - **Breaking change** filteringExpressions property is removed.
 
+- `igxCell` default editing template is changed according column data type. For more information you can read the [specification](https://github.com/IgniteUI/igniteui-angular/wiki/Cell-Editing) or the [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid_editing.html)
+
 - `igxToggle` changes
     - `onOpening` event added.
     - `onClosing` event added.
@@ -73,15 +76,18 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
         - `onClose` event renamed to `onClosed`.
 - **Breaking change** All properties that were named `isDisabled` have been renamed to `disabled` in order to acheive consistency across our component suite. This affects: date-picker, input directive, input-group, dropdown-item, tabbar and time-picker.
 
+## 6.0.3
+- **igxGrid** exposing the `filteredSortedData` method publicly - returns the grid data with current filtering and sorting applied.
+
 ## 6.0.2
 - **igxGrid** Improve scrolling on mac [#1563](https://github.com/IgniteUI/igniteui-angular/pull/1563)
 - The `ng update igniteui-angular` migration schematics now also update the theme import path in SASS files. [#1582](https://github.com/IgniteUI/igniteui-angular/issues/1582)
 
 ## 6.0.1
 - Introduced migration schematics to integrate with the Angular CLI update command. You can now run
-  
+
   `ng update igniteui-angular`
-  
+
   in existing projects to both update the package and apply any migrations needed to your project. Make sure to commit project state before proceeding.
   Currently these cover converting submodule imports as well as the deprecation of `igxForRemote` and rename of `igx-tab-bar` to `igx-bottom-nav` from 6.0.0.
 - **Breaking changes**:

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -110,8 +110,8 @@
 
         fab-text-color: igx-contrast-color($palette, 'secondary', 500),
         fab-background: igx-color($palette, 'secondary', 500),
-        fab-hover-text-color: null,
-        fab-hover-background: null,
+        fab-hover-text-color: igx-contrast-color($palette, 'secondary', 500),
+        fab-hover-background: igx-color($palette, 'secondary', 400),
         fab-focus-background: igx-color($palette, 'secondary', 500),
         fab-focus-text-color: igx-contrast-color($palette, 'secondary', 500),
 

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

@@ -51,6 +51,7 @@
 ) {
     $default-theme: (
         name: 'igx-grid-filtering',
+        toggle-background: transparent,
         toggle-icon-color: inherit,
         toggle-icon-hover-color: #fff,
         toggle-icon-active-color: igx-contrast-color($palette, 'secondary'),
@@ -60,7 +61,8 @@
         toggle-filtered-background: transparent,
         menu-background: #fff,
         menu-text-color: igx-color($palette, 'grays', 900),
-        menu-button-text-color: igx-color($palette, 'secondary')
+        menu-button-text-color: igx-color($palette, 'secondary'),
+        menu-button-disabled-text-color: initial
     );
 
     @if not($menu-text-color) and $menu-background {
@@ -213,7 +215,7 @@
             color: --var($theme, 'menu-button-text-color');
 
             &:disabled {
-                color: --var($theme, 'menu-button-text-color');
+                color: --var($theme, 'menu-button-disabled-text-color');
             }
         }
 

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

@@ -160,7 +160,7 @@
 
     %igx-grid-summary__result {
         color: --var($theme, 'result-color');
-        font-weight: 800;
+        font-weight: 600;
         flex: 1 1 auto;
         text-align: right;
     }

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

@@ -64,6 +64,14 @@
         }
     }
 
+    @include e(tr, $m: odd) {
+        @extend %grid-row--odd !optional;
+    }
+
+    @include e(tr, $m: even) {
+        @extend %grid-row--even !optional;
+    }
+
     @include e(tr, $m: selected) {
         @extend %grid-row--selected !optional;
     }
@@ -142,6 +150,10 @@
         @extend %grid-cell--fixed-width !optional;
     }
 
+    @include e(td-text) {
+        @extend %grid-cell-text !optional;
+    }
+
     @include e(cbx-selection) {
         @extend %grid__cbx-selection !optional;
     }

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

@@ -13,9 +13,14 @@
 /// @param {Color} $ghost-header-background [null] - The dragged header background color.
 /// @param {Color} $content-background [null] - The table body background color.
 /// @param {Color} $content-text-color [null] - The table body text color.
+/// @param {Color} $row-odd-background [null] - The background color of odd rows.
+/// @param {Color} $row-even-background [null] - The background color of even rows.
+/// @param {Color} $row-odd-text-color [null] - The text color of odd rows.
+/// @param {Color} $row-even-text-color [null] - The text color of even rows.
 /// @param {Color} $row-selected-background [null] - The selected row background color.
 /// @param {Color} $row-selected-text-color [null] - The selected row text color.
 /// @param {Color} $row-hover-background [null] - The hover row background color.
+/// @param {Color} $row-hover-text-color [null] - The hover row text color.
 /// @param {Color} $row-border-color [null] - The row bottom border color.
 /// @param {Color} $pinned-border-width [null] - The border width of the pinned border.
 /// @param {Color} $pinned-border-style [null] - The CSS border style of the pinned border.
@@ -61,9 +66,14 @@
     $ghost-header-icon-color: null,
     $ghost-header-background: null,
 
+    $row-odd-background: null,
+    $row-even-background: null,
+    $row-odd-text-color: null,
+    $row-even-text-color: null,
     $row-selected-background: null,
     $row-selected-text-color: null,
     $row-hover-background: null,
+    $row-hover-text-color: null,
     $row-border-color: null,
 
     $pinned-border-width: null,
@@ -109,9 +119,14 @@
         ghost-header-icon-color: igx-color($palette, 'grays'),
         ghost-header-background: #fff,
 
+        row-odd-background: #fff,
+        row-even-background: #fff,
+        row-odd-text-color: inherit,
+        row-even-text-color: inherit,
         row-selected-background: hexrgba(igx-color($palette, 'grays', 800)),
         row-selected-text-color: igx-contrast-color($palette, 'grays', 900),
-        row-hover-background: darken(hexrgba(igx-color($palette, 'grays', 100)), 10%),
+        row-hover-background: hexrgba(igx-color($palette, 'grays', 200)),
+        row-hover-text-color: igx-color($palette, 'grays', 800),
         row-border-color: igx-color($palette, 'grays', 300),
 
         pinned-border-width: 2px,
@@ -163,6 +178,26 @@
         $content-text-color: text-contrast($content-background);
     }
 
+    @if not($row-odd-background) and $content-background {
+        $row-odd-background: $content-background;
+    }
+
+    @if not($row-even-background) and $content-background {
+        $row-even-background: $content-background;
+    }
+
+    @if not($row-odd-text-color) and $row-odd-background {
+        $row-odd-text-color: text-contrast($row-odd-background);
+    }
+
+    @if not($row-even-text-color) and $row-even-background {
+        $row-even-text-color: text-contrast($row-even-background);
+    }
+
+    @if not($row-hover-text-color) and $row-hover-background {
+        $row-hover-text-color: text-contrast($row-hover-background);
+    }
+
     @if not($cell-selected-text-color) and $cell-selected-background {
         $cell-selected-text-color: text-contrast($cell-selected-background);
     }
@@ -220,9 +255,14 @@
         content-background: $content-background,
         content-text-color: $content-text-color,
 
+        row-odd-background: $row-odd-background,
+        row-even-background: $row-even-background,
+        row-odd-text-color: $row-odd-text-color,
+        row-even-text-color: $row-even-text-color,
         row-selected-background: $row-selected-background,
         row-selected-text-color: $row-selected-text-color,
         row-hover-background: $row-hover-background,
+        row-hover-text-color: $row-hover-text-color,
         row-border-color: $row-border-color,
 
         pinned-border-width: $pinned-border-width,
@@ -371,9 +411,11 @@
 
         %grid-row {
             background: inherit;
+            color: inherit;
 
             &:hover {
                 background: inherit;
+                color: inherit;
             }
         }
     }
@@ -457,15 +499,27 @@
 
         &:hover {
             background-color: --var($theme, 'row-hover-background');
+            color: --var($theme, 'row-hover-text-color');
         }
     }
 
+    %grid-row--odd {
+        background: --var($theme, 'row-odd-background');
+        color: --var($theme, 'row-odd-text-color');
+    }
+
+    %grid-row--even {
+        background: --var($theme, 'row-even-background');
+        color: --var($theme, 'row-even-text-color');
+    }
+
     %grid-row--selected {
         color: --var($theme, 'row-selected-text-color');
         background-color: --var($theme, 'row-selected-background');
 
         &:hover {
             background-color: --var($theme, 'row-selected-background');
+            color: --var($theme, 'row-selected-text-color');
         }
     }
 
@@ -484,9 +538,10 @@
         line-height: $grid-cell-lh;
         color: inherit;
         text-align: left;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+    }
+
+    %grid-cell-text {
+        @include ellipsis();
     }
 
     %grid-cell-display--cosy {
@@ -509,8 +564,7 @@
 
     %grid-cell--editing {
         background-color: --var($theme, 'cell-editing-background') !important;
-        border: 1px solid --var($theme, 'cell-selected-background');
-        box-shadow: igx-elevation($elevations, 2);
+        border: 2px solid --var($theme, 'cell-selected-background');
 
         igx-input-group {
             width: 100%;
@@ -526,6 +580,10 @@
 
     %grid-cell--pinned-last {
         border-right: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important;
+
+        &%grid-cell--editing {
+            border-right: map-get($cell-pin, 'style') --var($theme, 'cell-selected-background') !important;
+        }
     }
 
     %grid-cell-header {
@@ -539,10 +597,6 @@
         padding: map-get($grid-header-padding, 'comfortable');
         border-right: 1px dotted igx-color($palette, 'grays', 400);
         overflow: visible;
-
-        &:last-of-type {
-            border-right: transparent;
-        }
     }
 
     %grid-cell-header--cosy {
@@ -601,9 +655,8 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        z-index: 1;
-        position: relative;
         background: inherit;
+        z-index: 1;
     }
 
     %grid__cbx-selection--cosy {

projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss

@@ -32,7 +32,9 @@
     $default-theme: (
         name: 'igx-list',
         background: #fff,
+        header-background: #fff,
         header-text-color: igx-color($palette, 'secondary'),
+        item-background: #fff,
         item-text-color: igx-color($palette, 'grays', 800),
         item-background-active: igx-color($palette, 'grays', 100),
         item-text-color-active: igx-color($palette, 'grays', 800)

projects/igniteui-angular/src/lib/grid/api.service.ts

@@ -136,37 +136,43 @@ export class IgxGridAPIService {
         if (editableCell) {
             if (!editableCell.cell.column.inlineEditorTemplate && editableCell.cell.column.dataType === 'number') {
                 if (!this.get_cell_inEditMode(gridId).cell.editValue) {
-                    this.update_cell(gridId, editableCell.cellID.rowIndex, editableCell.cellID.columnID, 0);
+                    this.update_cell(gridId, editableCell.cellID.rowID, editableCell.cellID.columnID, 0);
                 } else {
                     const val = parseFloat(this.get_cell_inEditMode(gridId).cell.editValue);
                     if (!isNaN(val) || isFinite(val)) {
-                        this.update_cell(gridId, editableCell.cellID.rowIndex, editableCell.cellID.columnID, val);
+                        this.update_cell(gridId, editableCell.cellID.rowID, editableCell.cellID.columnID, val);
                     }
                 }
             } else {
-                this.update_cell(gridId, editableCell.cellID.rowIndex, editableCell.cellID.columnID, editableCell.cell.editValue);
+                this.update_cell(gridId, editableCell.cellID.rowID, editableCell.cellID.columnID, editableCell.cell.editValue);
             }
         }
     }
 
     public update_cell(id: string, rowSelector, columnID, editValue) {
         let cellObj;
-        let rowIndex;
+        let rowID;
         const row = this.get_row_by_key(id, rowSelector);
         const editableCell = this.get_cell_inEditMode(id);
         if (editableCell) {
             cellObj = editableCell.cell;
-            rowIndex = rowSelector;
+            rowID = editableCell.cellID.rowID;
         } else if (row) {
-            rowIndex = row.index;
-            cellObj = this.get(id).columnList.toArray()[columnID].cells[rowIndex];
+            rowID = row.rowID;
+            cellObj = this.get(id).columnList.toArray()[columnID].cells[row.index];
         }
         if (cellObj) {
             const args: IGridEditEventArgs = { row: cellObj.row, cell: cellObj,
                 currentValue: cellObj.value, newValue: editValue };
             this.get(id).onEditDone.emit(args);
             const column =  this.get(id).columnList.toArray()[columnID];
-            this.get(id).data[rowIndex][column.field] = args.newValue;
+            if (this.get(id).primaryKey) {
+                const index =  this.get(id).data.map((record) => record[this.get(id).primaryKey]).indexOf(rowSelector);
+                this.get(id).data[index][column.field] = args.newValue;
+            } else {
+                this.get(id).data[this.get(id).data.indexOf(rowID)][column.field] = args.newValue;
+            }
+            (this.get(id) as any)._pipeTrigger++;
             this.get(id).refreshSearch();
         }
     }
@@ -176,6 +182,7 @@ export class IgxGridAPIService {
         const args: IGridEditEventArgs = { row, cell: null, currentValue: this.get(id).data[index], newValue: value };
         this.get(id).onEditDone.emit(args);
         this.get(id).data[index] = args.newValue;
+        (this.get(id) as any)._pipeTrigger++;
     }
 
     public sort(id: string, fieldName: string, dir: SortingDirection, ignoreCase: boolean): void {

projects/igniteui-angular/src/lib/grid/cell.component.html

@@ -1,6 +1,6 @@
 <ng-template #defaultCell igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : value" [row]="rowIndex" [column]="this.column.visibleIndex" [page]="this.grid.page">
-    <div>{{ formatter ? formatter(value) : value }}</div>
+    <div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
 </ng-template>
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">