refactor(button): emit selected event (#9315)

* refactor(button): emit selected event

* refactor(button-group): update button state on selection

Co-authored-by: Galina Edinakova <[email protected]>
Co-authored-by: Konstantin Dinev <[email protected]>

Author: 3 people

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

@@ -33,7 +33,7 @@ export const ButtonGroupAlignment = mkenum({
     horizontal: 'horizontal',
     vertical: 'vertical'
 });
-export type ButtonGroupAlignment = (typeof ButtonGroupAlignment)[keyof typeof ButtonGroupAlignment];
+export type ButtonGroupAlignment = typeof ButtonGroupAlignment[keyof typeof ButtonGroupAlignment];
 
 let NEXT_ID = 0;
 
@@ -61,7 +61,6 @@ let NEXT_ID = 0;
     selector: 'igx-buttongroup',
     templateUrl: 'buttongroup-content.component.html'
 })
-
 export class IgxButtonGroupComponent extends DisplayDensityBase implements AfterContentInit, AfterViewInit, OnDestroy {
     /**
      * A collection containing all buttons inside the button group.
@@ -123,6 +122,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * ```
      */
     @Input() public multiSelection = false;
+
     /**
      * An @Input property that allows setting the buttons in the button group.
      * ```typescript
@@ -150,6 +150,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * ```
      */
     @Input() public values: any;
+
     /**
      * An @Input property that allows you to disable the `igx-buttongroup` component. By default it's false.
      * ```html
@@ -165,7 +166,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
             this._disabled = value;
 
             if (this.viewButtons && this.templateButtons) {
-                this.buttons.forEach((b) => b.disabled = this._disabled);
+                this.buttons.forEach((b) => (b.disabled = this._disabled));
             }
         }
     }
@@ -238,7 +239,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     @ViewChildren(IgxButtonDirective) private viewButtons: QueryList<IgxButtonDirective>;
     @ContentChildren(IgxButtonDirective) private templateButtons: QueryList<IgxButtonDirective>;
 
-
     /**
      * Returns true if the `igx-buttongroup` alignment is vertical.
      * Note that in order for the accessor to work correctly the property should be set explicitly.
@@ -264,14 +264,18 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     public selectedIndexes: number[] = [];
 
     protected buttonClickNotifier$ = new Subject<boolean>();
+    protected buttonSelectedNotifier$ = new Subject<boolean>();
     protected queryListNotifier$ = new Subject<boolean>();
 
     private _isVertical: boolean;
     private _itemContentCssClass: string;
     private _disabled = false;
 
-    constructor(private _cdr: ChangeDetectorRef, private _renderer: Renderer2,
-        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
+    constructor(
+        private _cdr: ChangeDetectorRef,
+        private _renderer: Renderer2,
+        @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions
+    ) {
         super(_displayDensityOptions);
     }
 
@@ -308,15 +312,23 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
         }
 
         const button = this.buttons[index];
-        const buttonElement = button.nativeElement;
+        button.select();
+    }
 
-        this.selectedIndexes.push(index);
-        button.selected = true;
+    /**
+     * @hidden
+     * @internal
+     */
+    public updateSelected(index: number) {
+        const button = this.buttons[index];
 
-        this._renderer.setAttribute(buttonElement, 'aria-pressed', 'true');
-        this._renderer.addClass(buttonElement, 'igx-button-group__item--selected');
+        if(this.selectedIndexes.indexOf(index) === -1) {
+            this.selectedIndexes.push(index);
+            this.selected.emit({ button, index });
+        }
 
-        this.selected.emit({ button, index });
+        this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'true');
+        this._renderer.addClass(button.nativeElement, 'igx-button-group__item--selected');
 
         const indexInViewButtons = this.viewButtons.toArray().indexOf(button);
         if (indexInViewButtons !== -1) {
@@ -352,20 +364,18 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
         }
 
         const button = this.buttons[index];
-        const buttonElement = button.nativeElement;
-
         this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1);
-        button.selected = false;
-
-        this._renderer.setAttribute(buttonElement, 'aria-pressed', 'false');
-        this._renderer.removeClass(buttonElement, 'igx-button-group__item--selected');
 
-        this.deselected.emit({ button, index });
+        this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'false');
+        this._renderer.removeClass(button.nativeElement, 'igx-button-group__item--selected');
+        button.deselect();
 
         const indexInViewButtons = this.viewButtons.toArray().indexOf(button);
         if (indexInViewButtons !== -1) {
             this.values[indexInViewButtons].selected = false;
         }
+
+        this.deselected.emit({ button, index });
     }
 
     /**
@@ -392,17 +402,20 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
             // initial configuration
             this.buttons.forEach((button, index) => {
                 const buttonElement = button.nativeElement;
+                this._renderer.addClass(buttonElement, 'igx-button-group__item');
 
                 if (this.disabled) {
                     button.disabled = true;
                 }
 
                 if (button.selected) {
-                    this.selectButton(index);
+                    this.updateSelected(index);
                 }
 
-                button.buttonClick.pipe(takeUntil(this.buttonClickNotifier$)).subscribe((ev) => this._clickHandler(ev, index));
-                this._renderer.addClass(buttonElement, 'igx-button-group__item');
+                button.buttonClick.pipe(takeUntil(this.buttonClickNotifier$)).subscribe((_) => this._clickHandler(index));
+                button.buttonSelected
+                    .pipe(takeUntil(this.buttonSelectedNotifier$))
+                    .subscribe((_) => this.updateSelected(index));
             });
         };
 
@@ -420,18 +433,21 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
         this.buttonClickNotifier$.next();
         this.buttonClickNotifier$.complete();
 
+        this.buttonSelectedNotifier$.next();
+        this.buttonSelectedNotifier$.complete();
+
         this.queryListNotifier$.next();
         this.queryListNotifier$.complete();
     }
 
     /**
      * @hidden
      */
-    public _clickHandler(_: MouseEvent, i: number) {
-        if (this.selectedIndexes.indexOf(i) !== -1) {
-            this.deselectButton(i);
-        } else {
+    public _clickHandler(i: number) {
+        if (this.selectedIndexes.indexOf(i) === -1) {
             this.selectButton(i);
+        } else {
+            this.deselectButton(i);
         }
     }
 }
@@ -449,6 +465,4 @@ export interface IButtonGroupEventArgs extends IBaseEventArgs {
     exports: [IgxButtonGroupComponent],
     imports: [IgxButtonModule, CommonModule, IgxRippleModule, IgxIconModule]
 })
-
-export class IgxButtonGroupModule {
-}
+export class IgxButtonGroupModule {}

projects/igniteui-angular/src/lib/directives/button/button.directive.ts

@@ -13,6 +13,7 @@ import {
 } from '@angular/core';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions, DisplayDensity } from '../../core/density';
 import { mkenum } from '../../core/utils';
+import { IBaseEventArgs } from '../../core/utils';
 
 const IgxButtonType = mkenum({
     Flat: 'flat',
@@ -53,22 +54,16 @@ export class IgxButtonDirective extends DisplayDensityBase {
     private static ngAcceptInputType_type: IgxButtonType | '';
 
     /**
-     * Gets or sets whether the button is selected.
-     * Mainly used in the IgxButtonGroup component and it will have no effect if set separately.
-     *
-     * @example
-     * ```html
-     * <button igxButton="flat" [selected]="button.selected"></button>
-     * ```
+     * Called when the button is clicked.
      */
-    @Input()
-    public selected = false;
+    @Output()
+    public buttonClick = new EventEmitter<any>();
 
     /**
-     * Called when the button is clicked.
+     * Called when the button is selected.
      */
     @Output()
-    public buttonClick = new EventEmitter<any>();
+    public buttonSelected = new EventEmitter<IButtonEventArgs>();
 
     /**
      * Sets/gets the `role` attribute.
@@ -119,6 +114,38 @@ export class IgxButtonDirective extends DisplayDensityBase {
      */
     private _backgroundColor: string;
 
+    /**
+     * @hidden
+     * @internal
+     */
+    private _selected = false;
+
+    /**
+     * Gets or sets whether the button is selected.
+     * Mainly used in the IgxButtonGroup component and it will have no effect if set separately.
+     *
+     * @example
+     * ```html
+     * <button igxButton="flat" [selected]="button.selected"></button>
+     * ```
+     */
+    @Input()
+    public set selected(value: boolean) {
+        if(this._selected !== value) {
+            if(!this._selected) {
+                this.buttonSelected.emit({
+                    button: this
+                });
+            }
+
+            this._selected = value;
+        }
+    }
+
+    public get selected(): boolean {
+        return this._selected;
+    }
+
     constructor(
         public element: ElementRef,
         private _renderer: Renderer2,
@@ -192,7 +219,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
      *
      * @example
      *  ```html
-     * <button igxButton= "flat" igxLabel="Label"></button>
+     * <button igxButton="flat" igxLabel="Label"></button>
      * ```
      */
     @Input('igxLabel')
@@ -298,6 +325,26 @@ export class IgxButtonDirective extends DisplayDensityBase {
     public get disabledAttribute() {
         return this._disabled ? this._disabled : null;
     }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public select() {
+        this.selected = true;
+    }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    public deselect() {
+        this._selected = false;
+    }
+}
+
+export interface IButtonEventArgs extends IBaseEventArgs {
+    button: IgxButtonDirective;
 }
 
 /**