Merge branch 'master' into vslavov/combo-ivy-renderer

Author: ChronosSF

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+
 ## 9.0.0
 
 ### General
@@ -16,14 +17,22 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
 
+
+## 8.2.6
+
+### New Features
+- `IgxSelectItem`
+    - `text` input is added. By default, the Select component will display the selected item's element inner text. In cases with a more complex item template, where more than just text interpolation is used, set the text property to specify what to display in the select field when the item is selected.
+
+
 ## 8.2.4
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - The header text of the columns and the column groups now has the `title` attribute set to it in order to expose a native browser tooltip.
 
 ### RTL Support
-Most of the components in the framework now have full right-to-left (RTL) support via the newly included RTL themes. 
+Most of the components in the framework now have full right-to-left (RTL) support via the newly included RTL themes.
 
-For CSS-based projects add `node_modules/igniteui-angular/styles/igniteui-angular-rtl.css` to your angular.json styles collection. 
+For CSS-based projects add `node_modules/igniteui-angular/styles/igniteui-angular-rtl.css` to your angular.json styles collection.
 
 For Sass-based projects pass `$direction` to the `igx-core` mixin in your root stylesheet.
 
@@ -39,7 +48,7 @@ Currently the following components have only partial RTL support:
  - Circular Progress Indicator (igx-circular-bar)
 
  We plan on adding support for the aforementioned components in the upcoming releases.
- 
+
 ### New Features
 
 - Columns now expose the `cellStyles` property which allows conditional styling of the column cells. Similar to `cellClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation.
@@ -61,6 +70,20 @@ The callback signature for both `cellStyles` and `cellClasses` is now changed to
 
 - `IgxChip`
     - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provides the events, passed from the `igxDrag` directive. The passed original events are in other words the previous events that triggered the `igxChip` ones. They also have original events until a browser event is reached.
+- `IgxGrid` - Now you can access all grid data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand `operate` method.
+
+```typescript
+class MySummary extends IgxNumberSummaryOperand {
+    constructor() {
+        super();
+    }
+    operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] {
+        const result = super.operate(allData.map(r => r[fieldName]));
+        result.push({ key: 'test', label: 'Total Discounted', summaryResult: allData.filter((rec) => rec.Discontinued).length });
+        return result;
+    }
+}
+```
 
 ## 8.2.0
 ### New theme

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

@@ -198,9 +198,8 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
             row.data = { ...row.data, ...rowInEditMode.transactionState };
         // TODO: Workaround for updating a row in edit mode through the API
         } else if (this.grid.transactions.enabled) {
-            const lastCommitedValue = grid.transactions.getState(row.id) ?
-                grid.transactions.getState(row.id).value : null;
-            row.data = lastCommitedValue ? Object.assign(row.data, lastCommitedValue) : row.data;
+            const state = grid.transactions.getState(row.id);
+            row.data = state ? Object.assign({}, row.data, state.value) : row.data;
         }
     }
 

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

@@ -3839,7 +3839,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             }
             const row = new IgxRow(rowSelector, -1, this.gridAPI.getRowData(rowSelector));
             this.gridAPI.update_row(row, value);
-            this.cdr.detectChanges();
+
+            // TODO: fix for #5934 and probably break for #5763
+            // consider adding of third optional boolean parameter in updateRow.
+            // If developer set this parameter to true we should call notifyChanges(true), and
+            // vise-versa if developer set it to false we should call notifyChanges(false).
+            // The parameter should default to false
+            this.notifyChanges();
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid/grid-cell-editing.spec.ts

@@ -694,6 +694,44 @@ describe('IgxGrid - Cell Editing #grid', () => {
             expect(cell.value).toEqual('New Name');
         });
 
+        it(`Should not update data in grid with transactions, when row is updated in onCellEdit and onCellEdit is canceled`, () => {
+            fixture = TestBed.createComponent(SelectionWithTransactionsComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+
+            grid.primaryKey = 'ID';
+            fixture.detectChanges();
+
+            // update the cell value via updateRow and cancel the event
+            grid.onCellEdit.subscribe((e: IGridEditEventArgs) => {
+                const rowIndex: number = e.cellID.rowIndex;
+                const row = grid.getRowByIndex(rowIndex);
+                grid.updateRow({[row.columns[e.cellID.columnID].field]: e.newValue}, row.rowID);
+                e.cancel = true;
+            });
+
+            const cell = grid.getCellByColumn(0, 'Name');
+            const initialValue = cell.value;
+            const firstNewValue = 'New Value';
+            const secondNewValue = 'Very New Value';
+
+            cell.update(firstNewValue);
+            fixture.detectChanges();
+            expect(cell.value).toBe(firstNewValue);
+
+            cell.update(secondNewValue);
+            fixture.detectChanges();
+            expect(cell.value).toBe(secondNewValue);
+
+            grid.transactions.undo();
+            fixture.detectChanges();
+            expect(cell.value).toBe(firstNewValue);
+
+            grid.transactions.undo();
+            fixture.detectChanges();
+            expect(cell.value).toBe(initialValue);
+        });
+
         it(`Should properly emit 'onCellEditCancel' event`, () => {
             spyOn(grid.onCellEditCancel, 'emit').and.callThrough();
             const cell = grid.getCellByColumn(0, 'fullName');

projects/igniteui-angular/src/lib/select/select-item.component.ts

@@ -1,14 +1,42 @@
 import { IgxDropDownItemComponent } from './../drop-down/drop-down-item.component';
-import { Component, DoCheck } from '@angular/core';
+import { Component, DoCheck, Input } from '@angular/core';
 
 @Component({
     selector: 'igx-select-item',
     template: '<ng-content></ng-content>'
 })
 export class IgxSelectItemComponent extends IgxDropDownItemComponent implements DoCheck {
 
+    private _text: any;
+
+    /**
+     * An @Input property that gets/sets the item's text to be displayed in the select component's input when the item is selected.
+     *
+     * ```typescript
+     *  //get
+     *  let mySelectedItem = this.dropDown.selectedItem;
+     *  let selectedItemText = mySelectedItem.text;
+     * ```
+
+     * ```html
+     * // set
+     * <igx-select-item [text]="'London'"></igx-select-item>
+     * ```
+     */
+    @Input()
+    public get text(): string {
+        return this._text;
+    }
+
+    public set text(text: string) {
+        this._text = text;
+    }
+
     /** @hidden @internal */
     public get itemText() {
+        if (this._text !== undefined) {
+            return this._text;
+        }
         return this.elementRef.nativeElement.innerText.trim();
     }