Merge branch '15.1.x' into bpachilova/fix-13392-15.1.x

Author: ChronosSF

CHANGELOG.md

@@ -38,6 +38,8 @@ All notable changes for each version of this project will be documented in this
         </igx-card-actions>
     </igx-card>
     ```
+- `IgxButtonGroup`:
+    - The `selected` and `deselected` events are now cancellable.
 
 ### General
  - `IgxPivotGrid`

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

@@ -23,7 +23,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxIconModule } from '../icon/public_api';
 import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
-import { IBaseEventArgs } from '../core/utils';
+import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
 import { mkenum } from '../core/utils';
 
 /**
@@ -442,26 +442,31 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      */
     public _clickHandler(index: number) {
         const button = this.buttons[index];
+        const args: IButtonGroupEventArgs = { cancel: false, button, index };
 
         if (!this.multiSelection) {
             this.buttons.forEach((b, i) => {
                 if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
-                    this.deselected.emit({ button: b, index: i });
+                    this.deselected.emit({ cancel: false, button: b, index: i });
                 }
             });
         }
 
         if (this.selectedIndexes.indexOf(index) === -1) {
-            this.selectButton(index);
-            this.selected.emit({ button, index });
+            this.selected.emit(args);
+            if(!args.cancel){
+                this.selectButton(index);
+            }
         } else {
-            this.deselectButton(index);
-            this.deselected.emit({ button, index });
+            this.deselected.emit(args);
+            if(!args.cancel){
+                this.deselectButton(index);
+            }
         }
     }
 }
 
-export interface IButtonGroupEventArgs extends IBaseEventArgs {
+export interface IButtonGroupEventArgs extends IBaseEventArgs, CancelableEventArgs {
     button: IgxButtonDirective;
     index: number;
 }

projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts

@@ -146,6 +146,47 @@ describe('IgxButtonGroup', () => {
         expect(btnGroupInstance.deselected.emit).toHaveBeenCalled();
     });
 
+    it('should not select the button on click if event is canceled ', () => {
+        const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
+        fixture.detectChanges();
+
+        const btnGroupInstance = fixture.componentInstance.buttonGroup;
+        fixture.detectChanges();
+
+        btnGroupInstance.buttons[1].select();
+        fixture.detectChanges();
+
+        btnGroupInstance.selected.subscribe((e) => {
+            e.cancel = true;
+        });
+        fixture.detectChanges();
+
+        const button = fixture.debugElement.nativeElement.querySelector('button');
+        button.click();
+        fixture.detectChanges();
+
+        expect(btnGroupInstance.buttons[0].selected).toBe(false);
+    });
+
+    it('should not deselect the button on click if event is canceled ', () => {
+        const fixture = TestBed.createComponent(ButtonGroupWithSelectedButtonComponent);
+        fixture.detectChanges();
+
+        const btnGroupInstance = fixture.componentInstance.buttonGroup;
+        fixture.detectChanges();
+
+        btnGroupInstance.deselected.subscribe((e) => {
+            e.cancel = true;
+        });
+        fixture.detectChanges();
+
+        const button = fixture.debugElement.nativeElement.querySelector('button');
+        button.click();
+        fixture.detectChanges();
+
+        expect(btnGroupInstance.buttons[0].selected).toBe(true);
+    });
+
    it('Button Group single selection', () => {
         const fixture = TestBed.createComponent(InitButtonGroupComponent);
         fixture.detectChanges();