Merge branch 'master' into patch-2

Author: kdinev

.github/workflows/nodejs.yml

@@ -54,6 +54,6 @@ jobs:
             npm run test:i18n:dist
       - name: Publish to coveralls.io
         if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '16.x'
-        uses: coverallsapp/github-action@v1.1.2
+        uses: coverallsapp/github-action@v1.2.1
         with:
             github-token: ${{ github.token }}

CHANGELOG.md

@@ -24,6 +24,7 @@ All notable changes for each version of this project will be documented in this
 
 - `IgxGrid`
     - Added new auto-sizing API `recalculateAutoSizes` that recalculates widths of columns that have size set to `auto`. Can be used in scenarios where you want to auto-size the columns again post initialization.
+    - Clicking with the Left Mouse key while holding `Ctrl` on selected cell will deselect the cell.
 - `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`

projects/igniteui-angular/src/lib/badge/badge.component.ts

@@ -133,6 +133,24 @@ export class IgxBadgeComponent {
     @HostBinding('class.igx-badge')
     public cssClass = 'igx-badge';
 
+    /**
+     * Sets a square shape to the badge, if `shape` is set to `square`.
+     * By default the shape of the badge is rounded.
+     *
+     * @example
+     * ```html
+     * <igx-badge shape="square"></igx-badge>
+     * ```
+     */
+    @Input()
+    public shape: 'rounded' | 'square' = 'rounded';
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-badge--square')
+    public get _squareShape(): boolean {
+        return this.shape === 'square';
+    }
+
     /**
      * Sets/gets the aria-label attribute value.
      *

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss

@@ -39,6 +39,10 @@
             @extend %igx-badge--error !optional;
         }
 
+        @include m(square) {
+            @extend %igx-badge--square !optional;
+        }
+
         @include m(hidden) {
             @extend %igx-badge--hidden !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -127,6 +127,10 @@
         }
     }
 
+    %igx-badge--square {
+        border-radius: 0;
+    }
+
     %igx-badge-value {
         white-space: nowrap;
         padding: $badge-value-padding;

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts

@@ -230,16 +230,14 @@ describe('IgxRadioGroupDirective', () => {
 
         const domRadio = fixture.debugElement.query(By.css('igx-radio')).nativeElement;
         expect(domRadio.classList.contains('igx-radio--invalid')).toBe(false);
-        expect(radioGroup.invalid).toBe(false);
         expect(radioGroup.selected).toBeUndefined;
 
         dispatchRadioEvent('keyup', domRadio, fixture);
         expect(domRadio.classList.contains('igx-radio--focused')).toBe(true);
         dispatchRadioEvent('blur', domRadio, fixture);
         fixture.detectChanges();
         tick();
-        
-        //expect(radioGroup.invalid).toBe(true);
+
         expect(domRadio.classList.contains('igx-radio--invalid')).toBe(true);
 
         dispatchRadioEvent('keyup', domRadio, fixture);
@@ -251,7 +249,6 @@ describe('IgxRadioGroupDirective', () => {
 
         expect(domRadio.classList.contains('igx-radio--checked')).toBe(true);
         expect(radioGroup.radioButtons.first.checked).toEqual(true);
-        expect(radioGroup.invalid).toBe(false);
         expect(domRadio.classList.contains('igx-radio--invalid')).toBe(false);
     }));
 });

projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.ts

@@ -1,13 +1,14 @@
 import {
     AfterContentInit,
     AfterViewInit,
-    ContentChildren, Directive, EventEmitter, HostBinding, Input, NgModule, OnDestroy, Optional, Output, QueryList, Self
+    ContentChildren, Directive, EventEmitter, HostBinding, HostListener, Input, NgModule, OnDestroy, Optional, Output, QueryList, Self
 } from '@angular/core';
 import { ControlValueAccessor, NgControl, Validators } from '@angular/forms';
 import { fromEvent, noop, Subject } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
 import { mkenum } from '../../core/utils';
 import { IChangeRadioEventArgs, IgxRadioComponent } from '../../radio/radio.component';
+import { IgxDirectionality } from '../../services/direction/directionality';
 import { IgxRippleModule } from '../ripple/ripple.directive';
 
 /**
@@ -194,6 +195,51 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
     @HostBinding('class.igx-radio-group--vertical')
     private vertical = false;
 
+    @HostListener('click', ['$event'])
+    protected handleClick(event: MouseEvent) {
+        event.stopPropagation();
+        this.selected.nativeElement.focus();
+    }
+
+    @HostListener('keydown', ['$event'])
+    protected handleKeyDown(event: KeyboardEvent) {
+        const { key } = event;
+
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
+            const buttons = this.radioButtons.filter(radio => !radio.disabled);
+            const checked = buttons.find((radio) => radio.checked);
+            let index = checked ? buttons.indexOf(checked!) : -1;
+            const ltr = this._directionality.value === 'ltr';
+
+            switch (key) {
+                case 'ArrowUp':
+                    index += -1;
+                    break;
+                case 'ArrowLeft':
+                    index += ltr ? -1 : 1;
+                    break;
+                case 'ArrowRight':
+                    index += ltr ? 1 : -1;
+                    break;
+                default:
+                    index += 1;
+            }
+
+            if (index < 0) index = buttons.length - 1;
+            if (index > buttons.length - 1) index = 0;
+
+            buttons.forEach((radio) => {
+                radio.deselect();
+                radio.nativeElement.blur();
+            });
+
+            buttons[index].focused = true;
+            buttons[index].nativeElement.focus();
+            buttons[index].select();
+            event.preventDefault();
+        }
+    }
+
     /**
      * Returns the alignment of the `igx-radio-group`.
      * ```typescript
@@ -284,8 +330,8 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
         });
     }
 
-    /** 
-     * @hidden 
+    /**
+     * @hidden
      * @internal
     */
     public ngAfterViewInit() {
@@ -315,6 +361,10 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
      * @internal
      */
     private updateValidityOnBlur() {
+        this.radioButtons.forEach((button) => {
+            button.focused = false;
+        });
+
         if (this.required) {
             const checked = this.radioButtons.find(x => x.checked);
             this.invalid = !checked;
@@ -372,7 +422,8 @@ export class IgxRadioGroupDirective implements AfterContentInit, AfterViewInit,
 
     constructor(
         @Optional() @Self() public ngControl: NgControl,
-    ) { 
+        private _directionality: IgxDirectionality,
+    ) {
         if (this.ngControl !== null) {
             this.ngControl.valueAccessor = this;
         }

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -973,6 +973,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
                 this.grid.crudService.updateCell(true, event);
             }
             return;
+        } else {
+            this.selectionService.primaryButton = true;
         }
         this.selectionService.pointerDown(this.selectionNode, event.shiftKey, event.ctrlKey);
         this.activate(event);
@@ -1030,11 +1032,16 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
      */
     public activate(event: FocusEvent | KeyboardEvent) {
         const node = this.selectionNode;
-        const shouldEmitSelection = !this.selectionService.isActiveNode(node);
-
+        let shouldEmitSelection = !this.selectionService.isActiveNode(node);
+        
         if (this.selectionService.primaryButton) {
             const currentActive = this.selectionService.activeElement;
-            this.selectionService.activeElement = node;
+            if (this.cellSelectionMode === GridSelectionMode.single && (event as any)?.ctrlKey && this.selected) {
+                this.selectionService.activeElement = null;
+                shouldEmitSelection = true;
+            } else {
+                this.selectionService.activeElement = node;
+            }
             const cancel = this._updateCRUDStatus(event);
             if (cancel) {
                 this.selectionService.activeElement = currentActive;
@@ -1066,8 +1073,13 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
         }
         this.selectionService.primaryButton = true;
         if (this.cellSelectionMode === GridSelectionMode.multiple && this.selectionService.activeElement) {
-            this.selectionService.add(this.selectionService.activeElement, false); // pointer events handle range generation
-            this.selectionService.keyboardStateOnFocus(node, this.grid.rangeSelected, this.nativeElement);
+            if (this.selectionService.isInMap(this.selectionService.activeElement) && (event as any)?.ctrlKey && !(event as any)?.shiftKey) {
+                this.selectionService.remove(this.selectionService.activeElement);
+                shouldEmitSelection = true;
+            } else {
+                this.selectionService.add(this.selectionService.activeElement, false); // pointer events handle range generation
+                this.selectionService.keyboardStateOnFocus(node, this.grid.rangeSelected, this.nativeElement);
+            }
         }
         if (this.grid.isCellSelectable && shouldEmitSelection) {
             this.zone.run(() => this.grid.selected.emit({ cell: this.getCellType(), event }));

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

@@ -4758,8 +4758,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.crudService.endEdit(true);
         this.gridAPI.addRowToData(data);
 
-        this.rowAddedNotifier.next({ data: data, owner: this });
         this.pipeTrigger++;
+        this.rowAddedNotifier.next({ data: data, owner: this });
         this.notifyChanges();
     }
 
@@ -5065,6 +5065,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.crudService.endEdit(true);
         this.selectionService.clearHeaderCBState();
         this.summaryService.clearSummaryCache();
+        this.summaryPipeTrigger++;
         this.cdr.detectChanges();
     }
 

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

@@ -148,6 +148,9 @@ export class IgxGridNavigationService {
                     this.grid.cdr.detectChanges();
                 });
             } else {
+                if (hasLastActiveNode && !this.grid.selectionService.selected(this.lastActiveNode)) {
+                    return;
+                }
                 const range = {
                     rowStart: this.activeNode.row, rowEnd: this.activeNode.row,
                     columnStart: this.activeNode.column, columnEnd: this.activeNode.column

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

@@ -225,6 +225,34 @@ describe('IgxGrid - Cell selection #grid', () => {
             GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 0, 0, 2, 3);
         });
 
+        it('Should be able to select cells correctly when focus is returned to the grid', async() => {
+            const firstCell = grid.gridAPI.get_cell_by_index(1, 'ParentID');
+            const secondCell = grid.gridAPI.get_cell_by_index(2, 'Name');
+
+            UIInteractions.simulateClickAndSelectEvent(firstCell);
+            fix.detectChanges();
+
+            GridSelectionFunctions.verifyCellSelected(firstCell);
+            expect(grid.selectedCells.length).toBe(1);
+
+            UIInteractions.simulateClickAndSelectEvent(firstCell, false, true);
+            fix.detectChanges();
+
+            expect(grid.selectedCells.length).toBe(0);
+            
+            grid.navigation.lastActiveNode = grid.navigation.activeNode;
+            grid.navigation.activeNode = null;
+            fix.detectChanges();
+            grid.tbody.nativeElement.focus();
+            fix.detectChanges();
+            
+            UIInteractions.simulateClickAndSelectEvent(secondCell, false, true);
+            fix.detectChanges();
+            GridSelectionFunctions.verifyCellSelected(firstCell, false);
+            GridSelectionFunctions.verifyCellSelected(secondCell, true);
+            expect(grid.selectedCells.length).toBe(1);
+        });
+
         it('Should be able to select range when click on a cell and hold Shift key and click on another Cell', () => {
             const firstCell = grid.gridAPI.get_cell_by_index(3, 'HireDate');
             const secondCell = grid.gridAPI.get_cell_by_index(1, 'ID');
@@ -341,7 +369,7 @@ describe('IgxGrid - Cell selection #grid', () => {
             ];
             const expectedData2 = [
                 { ID: 475, ParentID: 147, Name: 'Michael Langdon' },
-                { ID: 957, ParentID: 147 },
+                { ID: 957 },
                 { ID: 317, ParentID: 147 }
             ];
 
@@ -362,18 +390,17 @@ describe('IgxGrid - Cell selection #grid', () => {
             GridSelectionFunctions.verifyCellsRegionSelected(grid, 0, 2, 0, 1);
             GridSelectionFunctions.verifyCellSelected(thirdCell);
 
-            // Click on a cell in the region and verify it is not changed
+            // Click on a cell in the region and verify it is deselected
             let cell = grid.gridAPI.get_cell_by_index(1, 'ParentID');
             UIInteractions.simulateClickAndSelectEvent(cell, false, true);
             fix.detectChanges();
 
-            GridSelectionFunctions.verifyCellsRegionSelected(grid, 0, 2, 0, 1);
-            GridSelectionFunctions.verifyCellSelected(thirdCell);
+            GridSelectionFunctions.verifyCellsRegionSelected(grid, 0, 0, 0, 2);
+            GridSelectionFunctions.verifyCellsRegionSelected(grid, 2, 2, 0, 1);
+            GridSelectionFunctions.verifyCellSelected(cell, false);
+            GridSelectionFunctions.verifyCellSelected(grid.gridAPI.get_cell_by_index(1, 'ID'), true);
             expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
             expect(grid.getSelectedData()).toEqual(expectedData2);
-            GridSelectionFunctions.verifySelectedRange(grid, 0, 2, 0, 1, 0, 3);
-            GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 2, 2, 1, 3);
-            GridSelectionFunctions.verifySelectedRange(grid, 1, 1, 1, 1, 2, 3);
 
             // Click on a cell without holding Ctrl
             cell = grid.gridAPI.get_cell_by_index(0, 'ID');
@@ -3155,6 +3182,25 @@ describe('IgxGrid - Cell selection #grid', () => {
             GridSelectionFunctions.verifySelectedRange(grid, 0, 0, 0, 0);
         });
 
+        it('Should deselect a selected cell with Ctrl + click', () => {
+            const selectionChangeSpy = spyOn<any>(grid.selected, 'emit').and.callThrough();
+            const firstCell = grid.gridAPI.get_cell_by_index(1, 'ParentID');
+
+            // Click on a cell
+            UIInteractions.simulateClickAndSelectEvent(firstCell);
+            fix.detectChanges();
+            GridSelectionFunctions.verifyCellSelected(firstCell);
+            expect(grid.selectedCells.length).toBe(1);
+            expect(selectionChangeSpy).toHaveBeenCalledTimes(1);
+
+            // Click on same cell holding Ctrl
+            UIInteractions.simulateClickAndSelectEvent(firstCell, false, true);
+            fix.detectChanges();
+            GridSelectionFunctions.verifyCellSelected(firstCell, false);
+            expect(grid.selectedCells.length).toBe(0);
+            expect(selectionChangeSpy).toHaveBeenCalledTimes(2);
+        });
+
         it('When when navigate with arrow keys cell selection should be changed', () => {
             const selectionChangeSpy = spyOn<any>(grid.selected, 'emit').and.callThrough();
             let cell = grid.gridAPI.get_cell_by_index(1, 'Name');

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

@@ -851,6 +851,40 @@ describe('IgxGrid - Row Editing #grid', () => {
             expect(GridFunctions.getRowEditingBannerText(fix)).toBe('You have 2 changes in this row and 1 hidden columns');
         }));
 
+        it(`Should show no row changes when changing the cell value to the original one`, () => {
+            targetCell = grid.gridAPI.get_cell_by_index(0, 'Downloads');
+            fix.detectChanges();
+
+            const originalValue = targetCell.value;
+
+            UIInteractions.simulateDoubleClickAndSelectEvent(targetCell);
+            fix.detectChanges();
+
+            // change first editable cell value
+            targetCell.editValue = '500';
+            fix.detectChanges();
+
+            // go to next cell
+            UIInteractions.triggerEventHandlerKeyDown('tab', gridContent);
+            fix.detectChanges();
+
+            expect(GridFunctions.getRowEditingBannerText(fix)).toBe('You have 1 changes in this row and 0 hidden columns');
+
+            // return to first editable cell
+            UIInteractions.triggerEventHandlerKeyDown('tab', gridContent, false, true);
+            fix.detectChanges();
+
+            // change cell value to the original one
+            targetCell.editValue = originalValue;
+            fix.detectChanges();
+
+            // go to next cell
+            UIInteractions.triggerEventHandlerKeyDown('tab', gridContent);
+            fix.detectChanges();
+
+            expect(GridFunctions.getRowEditingBannerText(fix)).toBe('You have 0 changes in this row and 0 hidden columns');
+        });
+
         it(`Should focus last edited cell after click on editable buttons`, (async () => {
             targetCell = grid.gridAPI.get_cell_by_index(0, 'Downloads');
             UIInteractions.simulateDoubleClickAndSelectEvent(targetCell);