Merge remote-tracking branch 'origin/master' into dpetev/date-util-test-fix

Author: damyanpetev

CHANGELOG.md

@@ -3,14 +3,17 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 15.1.0
-
 ### General
  - `IgxPivotGrid`
     - The `IgxPivotDateDimension` properties `inBaseDimension` and `inOption` have been deprecated and renamed to `baseDimension` and `options` respectively.
  - `IgxGrid`
     - **Breaking Change** The `onGroupingDone` output has been renamed to `groupingDone` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
  - `DisplayDensity`
-    - **Breaking Change** The `onDensityChanged` output has been renamed to `densityChanged` to not violate the no on-prefixed outputs convention. All components expolsing this event are affected. Automatic migrations are available and will be applied on `ng update`.
+    - **Breaking Change** The `onDensityChanged` output has been renamed to `densityChanged` to not violate the no on-prefixed outputs convention. All components exposing this event are affected. Automatic migrations are available and will be applied on `ng update`.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Breaking Change** - `rowSelectionChanging` event arguments are changed. Now the `oldSelection`, `newSelection`, `added` and `removed` collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted.
+    When the grid is working with remote data and a primary key has been set- for the selected rows that are not currently part of the grid view, will be emitted a partial row data object.
+    - **Behavioral Change** - When selected row is deleted from the grid component `rowSelectionChanging` event will no longer be emitted.
  - `IgxCarousel`
     - **Breaking Change** The `onSlideChanged`, `onSlideAdded`, `onSlideRemoved`, `onCarouselPaused` and `onCarouselPlaying` outputs have been renamed to `slideChanged`, `slideAdded`, `slideRemoved`, `carouselPaused` and `carouselPlaying` to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on `ng update`.
 - `IgxRadio`, `IgxRadioGroup`
@@ -24,7 +27,7 @@ All notable changes for each version of this project will be documented in this
 - `igxPivotGrid`
     - Adding `aggregatorName` for pivot value configuration as an alternative to setting `aggregator` function. If both are set `aggregatorName` takes precedent. If none are set an error is thrown.
 - `IgxSimpleCombo`
-    - **Behavioral Change** 
+    - **Behavioral Change**
     - When the user clicks on the combo's input, the dropdown opens up.
     - Keyboard navigation `ArrowUp` - when the combo is opened `ArrowUp` will close the dropdown if the search input is focused. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. Otherwise `ArrowUp` will move to the previous list item.
 
@@ -109,7 +112,7 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 - The filtering logic inside the grid's Advanced Filtering  is now extracted as a separate  `IgxQueryBuilder` component. The Query Builder allows you to build complex queries by specifying AND/OR operators, conditions and values using the UI. It outputs an object describing the structure of the query. Use the `locale` property to modify the locale settings. The default value is resolved to the global Angular application locale. The `resourceStrings` allows changing the displayed strings.
-    
+
     - Code example below:
 
     ```html
@@ -145,7 +148,7 @@ All notable changes for each version of this project will be documented in this
     <ng-template igxPivotValueChip let-value>
             {{ value.member }}
     </ng-template>
-    ``` 
+    ```
     - Add support for usage with igxGridState to persist state of the pivotConfiguration with an additional `pivotConfiguration` option:
 
     ```html
@@ -161,7 +164,7 @@ All notable changes for each version of this project will be documented in this
     ```
 
     One known issue of the igxGridState directive is that it cannot store functions as the state is stored as string.
-    As a result any custom functions set to `memberFunction`, `aggregator`, `formatter`, `styles` etc. will not be stored. Restoring any of these can be achieved with code on application level. 
+    As a result any custom functions set to `memberFunction`, `aggregator`, `formatter`, `styles` etc. will not be stored. Restoring any of these can be achieved with code on application level.
     Hence we have also exposed 2 new events:
         - `dimensionInit` - emits when a dimension from the configuration is being initialized.
         - `valueInit` - emits when a value from the configuration is being initialized.
@@ -221,7 +224,7 @@ All notable changes for each version of this project will be documented in this
     <column width='auto' ...>
     ```
     - Added support for restoring filtering expressions with custom filtering operands for the `IgxGridStateDirective`.
-    
+
 
 - Added the `IgcFormControl` directive that, when imported with its `IgcFormsModule`, is designed to seamlessly attach to form components from the Ignite UI for WebComponents package and allows using them in Angular templates and reactive forms with support for `ngModel` and `formControlName` directives. Currently the only Web Component with support through the directive is `igc-rating`.
 
@@ -236,7 +239,7 @@ All notable changes for each version of this project will be documented in this
 
 ## 14.0.0
 
-- Added additional theme properties for the `IgxCalendar` so that it's easier to style the `:hover` and `:focus` states inside the selected date or range of dates. 
+- Added additional theme properties for the `IgxCalendar` so that it's easier to style the `:hover` and `:focus` states inside the selected date or range of dates.
 - `IgxDatePicker` and `IgxDateRangePicker` now expose a `weekStart` input property like the `IgxCalendar`
 - `IgxCombo` and  `IgxSimpleComboComponent`
     - The combobox `role`, `aria-haspopup`, `aria-expanded`, `aria-controls` and `aria-labelledby` attributes have been moved from combo wrapper to the combo input. Additionally the  `IgxSimpleComboComponent` input is marked with `aria-readonly="false"` and `aria-autocomplete="list"` attributes. The `aria-labelled` attribute is applied to the combo dropdown as well and can be set by the `ariaLabelledBy` property, the combo label or placeholder. The serach input within the combo dropdown is now marked as `role="searchbox"`, `aria-label="search"` and `aria-autocomplete="list"`. The dropdown item container has `aria-activedescendant` attribute to identify the currently active element of the item list. The `IgxCombo` container is also marked as `aria-multiselectable="true"`. The dropdown header items role has been changed to `group`.

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

@@ -355,7 +355,7 @@ export class GridBaseAPIService<T extends GridType> implements GridServiceType {
         this.deleteRowFromData(rowId, index);
 
         if (grid.selectionService.isRowSelected(rowId)) {
-            grid.selectionService.deselectRow(rowId);
+            grid.selectionService.deselectRowsWithNoEvent([rowId]);
         } else {
             grid.selectionService.clearHeaderCBState();
         }

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

@@ -49,6 +49,7 @@ describe('IgxGrid - Row Selection #grid', () => {
     describe('Base tests', () => {
         let fix: ComponentFixture<RowSelectionComponent>;
         let grid: IgxGridComponent;
+        const gridData = SampleTestData.foodProductDataExtended();
 
         beforeEach(() => {
             fix = TestBed.createComponent(RowSelectionComponent);
@@ -134,14 +135,16 @@ describe('IgxGrid - Row Selection #grid', () => {
         }));
 
         it('Header checkbox should select/deselect all rows', () => {
-            const allRowsArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
+            const allRows = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
+            const allRowsArray = [gridData[0], gridData[1], gridData[2], gridData[3], gridData[4], gridData[5], gridData[6], gridData[7], gridData[8], gridData[9],
+            gridData[10], gridData[11], gridData[12], gridData[13], gridData[14], gridData[15], gridData[16], gridData[17], gridData[18]];
             spyOn(grid.rowSelectionChanging, 'emit').and.callThrough();
             GridSelectionFunctions.clickHeaderRowCheckbox(fix);
             fix.detectChanges();
 
             GridSelectionFunctions.verifyHeaderRowCheckboxState(fix, true);
             GridSelectionFunctions.verifyRowsArraySelected(grid.rowList.toArray());
-            expect(grid.selectedRows).toEqual(allRowsArray);
+            expect(grid.selectedRows).toEqual(allRows);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1);
             let args: IRowSelectionEventArgs = {
                 added: allRowsArray,
@@ -150,7 +153,8 @@ describe('IgxGrid - Row Selection #grid', () => {
                 newSelection: allRowsArray,
                 oldSelection: [],
                 removed: [],
-                allRowsSelected: true
+                allRowsSelected: true,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -168,7 +172,8 @@ describe('IgxGrid - Row Selection #grid', () => {
                 removed: allRowsArray,
                 event: jasmine.anything() as any,
                 cancel: false,
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
         });
@@ -213,13 +218,14 @@ describe('IgxGrid - Row Selection #grid', () => {
 
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1);
             let args: IRowSelectionEventArgs = {
-                added: [1],
+                added: [gridData[0]],
                 cancel: false,
                 event: jasmine.anything() as any,
-                newSelection: [1],
+                newSelection: [gridData[0]],
                 oldSelection: [],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -237,13 +243,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([1, 2]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
             args = {
-                added: [2],
+                added: [gridData[1]],
                 cancel: false,
                 event: jasmine.anything() as any,
-                newSelection: [1, 2],
-                oldSelection: [1],
+                newSelection: [gridData[0], gridData[1]],
+                oldSelection: [gridData[0]],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -259,10 +266,11 @@ describe('IgxGrid - Row Selection #grid', () => {
                 added: [],
                 cancel: false,
                 event: jasmine.anything() as any,
-                newSelection: [2],
-                oldSelection: [1, 2],
-                removed: [1],
-                allRowsSelected: false
+                newSelection: [gridData[1]],
+                oldSelection: [gridData[0], gridData[1]],
+                removed: [gridData[0]],
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -278,9 +286,10 @@ describe('IgxGrid - Row Selection #grid', () => {
                 cancel: false,
                 event: jasmine.anything() as any,
                 newSelection: [],
-                oldSelection: [2],
-                removed: [2],
-                allRowsSelected: false
+                oldSelection: [gridData[1]],
+                removed: [gridData[1]],
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
         });
@@ -299,13 +308,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([2]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({
-                added: [2],
+                added: [gridData[1]],
                 cancel: false,
                 event: mockEvent,
-                newSelection: [2],
+                newSelection: [gridData[1]],
                 oldSelection: [],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             });
 
             // Click again on same row
@@ -325,13 +335,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([3]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({
-                added: [3],
+                added: [gridData[2]],
                 cancel: false,
                 event: mockEvent,
-                newSelection: [3],
-                oldSelection: [2],
-                removed: [2],
-                allRowsSelected: false
+                newSelection: [gridData[2]],
+                oldSelection: [gridData[1]],
+                removed: [gridData[1]],
+                allRowsSelected: false,
+                owner: grid
             });
         });
         it('Should select the row only on checkbox click when selectRowOnClick has value false', () => {
@@ -521,13 +532,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([2, 3, 4, 5]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({
-                added: [3, 4, 5],
+                added: [gridData[2], gridData[3], gridData[4]],
                 cancel: false,
                 event: mockEvent,
-                newSelection: [2, 3, 4, 5],
-                oldSelection: [2],
+                newSelection: [gridData[1], gridData[2], gridData[3], gridData[4]],
+                oldSelection: [gridData[1]],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             });
 
             for (let index = 1; index < 5; index++) {
@@ -704,7 +716,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             const secondRow = grid.gridAPI.get_row_by_index(1);
             const thirdRow = grid.gridAPI.get_row_by_index(2);
             grid.rowSelectionChanging.subscribe((e: IRowSelectionEventArgs) => {
-                if (e.added.length > 0 && (e.added[0]) % 2 === 0) {
+                if (e.added.length > 0 && (e.added[0].ProductID) % 2 === 0) {
                     e.newSelection = e.oldSelection || [];
                 }
             });
@@ -819,6 +831,7 @@ describe('IgxGrid - Row Selection #grid', () => {
     describe('RowSelection single', () => {
         let fix: ComponentFixture<SingleRowSelectionComponent>;
         let grid: IgxGridComponent;
+        const gridData = SampleTestData.foodProductDataExtended();
 
         beforeEach(() => {
             fix = TestBed.createComponent(SingleRowSelectionComponent);
@@ -865,13 +878,14 @@ describe('IgxGrid - Row Selection #grid', () => {
 
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(1);
             let args: IRowSelectionEventArgs = {
-                added: [1],
+                added: [gridData[0]],
                 cancel: false,
                 event: jasmine.anything() as any,
-                newSelection: [1],
+                newSelection: [gridData[0]],
                 oldSelection: [],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -888,13 +902,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([2]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
             args = {
-                added: [2],
+                added: [gridData[1]],
                 cancel: false,
                 event: jasmine.anything() as any,
-                newSelection: [2],
-                oldSelection: [1],
-                removed: [1],
-                allRowsSelected: false
+                newSelection: [gridData[1]],
+                oldSelection: [gridData[0]],
+                removed: [gridData[0]],
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
         });
@@ -1041,13 +1056,14 @@ describe('IgxGrid - Row Selection #grid', () => {
             expect(grid.selectedRows).toEqual([5]);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledTimes(2);
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith({
-                added: [5],
+                added: [gridData[4]],
                 cancel: false,
                 event: mockEvent,
-                newSelection: [5],
-                oldSelection: [2],
-                removed: [2],
-                allRowsSelected: false
+                newSelection: [gridData[4]],
+                oldSelection: [gridData[1]],
+                removed: [gridData[1]],
+                allRowsSelected: false,
+                owner: grid
             });
 
             GridSelectionFunctions.verifyRowSelected(secondRow);
@@ -1383,7 +1399,8 @@ describe('IgxGrid - Row Selection #grid', () => {
                 newSelection: [gridData[1]],
                 oldSelection: [],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
 
@@ -1399,7 +1416,8 @@ describe('IgxGrid - Row Selection #grid', () => {
                 newSelection: [gridData[1], gridData[2], gridData[3], gridData[4]],
                 oldSelection: [gridData[1]],
                 removed: [],
-                allRowsSelected: false
+                allRowsSelected: false,
+                owner: grid
             };
             expect(grid.rowSelectionChanging.emit).toHaveBeenCalledWith(args);
         });