Merge branch 'master' into radomirchev-update-roadmap-01-feb-2024

Author: kdinev

CHANGELOG.md

@@ -9,18 +9,27 @@ All notable changes for each version of this project will be documented in this
 - `IgxTree`
     - Added new property `toggleNodeOnClick` that determines whether clicking over a node will change its expanded state or not. Set to `false` by default.
 - `IgxPivotGrid`
-    - `IPivotDimension` interface now exposes a property called `displayName` similar to the one in the `IPivotValue` interface. This property is optional and will be displayed inside the chips for rows and columns in the `IgxPivotGrid`. If the `displayName` proeprty is not set, `memberName` will be used as a fallback.
+    - `IPivotDimension` interface now exposes a property called `displayName` similar to the one in the `IPivotValue` interface. This property is optional and will be displayed inside the chips for rows and columns in the `IgxPivotGrid`. If the `displayName` property is not set, `memberName` will be used as a fallback.
 - New directive -  `igxIconButton` directive that provides a way to use an icon as a fully functional button has been added. The new `igxIconButton` comes in three types - flat, outlined and contained (default). All `igxButton`'s with type `icon` will be automatically migrated to the new `igxIconButton`'s with `ng update`.
 - `IgxButton`
-    - **Behavioral Change** `buttonSelected` event is now emitted not only when a button gets selected, but also when it gets deselected. A benefit of that is when updating the value bound to the `selected` input of an `IgxButton`, the button group in which the button resides is now able to update the styling of the button from selected to deselected. If this event was used in a scenario where it is assumed that the button gets selected, it's a good idea the logic to be branched now based on `eventArgs.selected` condition.
+    - **Behavioral Change** `buttonSelected` event is now emitted not only when a button gets selected, but also when it gets deselected. However, the event is no longer being emitted on initialization. If this event was used in a scenario where it is assumed that the button gets selected, it's a good idea the logic to be branched now based on `eventArgs.selected` condition.
 
 ### General
 - `igxButton`:
     - **Breaking Change** The `raised` type of the `igxButton` directive has been renamed to `contained`. Automatic migrations are available and will be applied on `ng update`.
     - The `igxButtonColor` and `igxButtonBackground` input properties have been deprecated and will be removed in a future version.
 - `IgxForOf`
     - Unified logic for vertical and horizontal virtualization such as - caching, updating, max browser size exceeding.
-    - Addded new method - `addScroll` that can shift the scroll thumb by the specified amount in pixels (negative number to scroll to previous, positive to scroll next). Similar to `addScrollTop` but works for both vertical and horizontal virtualization.
+    - Added new method - `addScroll` that can shift the scroll thumb by the specified amount in pixels (negative number to scroll to previous, positive to scroll next). Similar to `addScrollTop` but works for both vertical and horizontal virtualization.
+
+
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Breaking Changes**
+        - `rowAdd` and `rowDelete` events now emit event argument of type `IRowDataCancelableEventArgs` instead of `IGridEditEventArgs`. The two interfaces are still compatible, however redundant for these events properties `cellID`, `newValue`, `oldValue`, `isAddRow` are deprecated in `IRowDataCancelableEventArgs` and will be removed in a future version. Switching to the correct new interfaces should reveal any deprecated use that can be safely removed.
+    - **Deprecations**
+        - `rowID` property has been deprecated in the following interfaces: `IGridEditDoneEventArgs`, `IPathSegment`, `IRowToggleEventArgs`, `IPinRowEventArgs`, `IgxAddRowParent` and will be removed in a future version. Use `rowKey` instead.
+        - `primaryKey` property has been deprecated in the following interfaces: `IRowDataEventArgs`, `IGridEditDoneEventArgs`. Use `rowKey` instead.
+        - `data` property has been deprecated in the following interfaces: `IRowDataEventArgs`. Use `rowData` instead.
 
 ## 17.0.0
 ### General
@@ -33,14 +42,14 @@ All notable changes for each version of this project will be documented in this
     - `igniteui-angular-i18n` is now tree-shakeable
     - `igniteui-angular/animations` is now tree-shakeable
     - `igniteui-angular` components have improved tree-shaking
-    - **Breaking Change** `getCurrentResourceStrings` has been removed. Use the specific component string imports instead. 
+    - **Breaking Change** `getCurrentResourceStrings` has been removed. Use the specific component string imports instead.
         - E.g. EN strings come from `igniteui-angular`: `import { GridResourceStringsEN } from 'igniteui-angular';`
         - E.g. DE or other language strings come from `igniteui-angular-i18n`: `import { GridResourceStringsDE } from 'igniteui-angular-i18n';`
 - DisplayDensity token and inputs are deprecated in favor of `--ig-size` theming
 - We're working on reducing the library size
     - `IgxRadioComponent` size has been reduced in half
     - `IgxSwitchComponent` size has been reduced in half
-- `IgxRadioComponent` 
+- `IgxRadioComponent`
     - **Breaking Change** `IChangeRadioEventArgs` is now `IChangeCheckboxEventArgs`. `ng update` to `17.0.0` will automatically migrate this for you.
     - **Breaking Change** `RadioLabelPosition` is now `LabelPosition`. `ng update` to `17.0.0` will automatically migrate this for you.
 - `IgxSwitchComponent`
@@ -49,7 +58,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxCombo`
     - **Breaking Change** `IComboSelectionChangingEventArgs` properties `newSelection` and `oldSelection` have been renamed to `newValue` and `oldValue` respectively to better reflect their function. Just like Combo's `value`, those will emit either the specified property values or full data items depending on whether `valueKey` is set or not. Automatic migrations are available and will be applied on `ng update`.
     - `IComboSelectionChangingEventArgs` exposes two new properties `newSelection` and `oldSelection` in place of the old ones that are no longer affected by `valueKey` and consistently emit items from Combo's `data`.
-      
+
       Note: In remote data scenarios with `valueKey` set, selected items that are not currently part of the loaded data chunk will be emitted a partial item data object with the `valueKey` property.
     - **Breaking Change** - `IComboSelectionChangingEventArgs` properties `added` and `removed` now always contain data items, regardless of `valueKey` being set. This aligns them with the updated `newSelection` and `oldSelection` properties, including the same limitation for remote data as described above.
 - `IgxSimpleCombo`
@@ -61,11 +70,11 @@ All notable changes for each version of this project will be documented in this
 - `IgxCombo`,`IgxSimpleCombo`
     - **Breaking Change** The `displayValue` property now returns the display text as expected (instead of display values in array).
 
+=======
 ## 16.1.5
 ### General
 - `IgxButtonGroup`:
     - Reverted cancellable on `selected` and `deselected` events (added in 15.1.24) as it was breaking firing order and related handling.
-
 ## 16.1.4
 ### New Features
 - `Themes`:
@@ -107,7 +116,7 @@ All notable changes for each version of this project will be documented in this
      ```
 - `IgxBadge`:
     - Material icons extended along with any other custom icon set can now be used inside the badge component.
-    - Code example: 
+    - Code example:
 
      ```typescript
      import { IgxBadgeComponent, IgxIconService } from 'igniteui-angular';
@@ -150,7 +159,7 @@ All notable changes for each version of this project will be documented in this
     ```
 
     ```css
-    /* 
+    /*
     Add --ig-size to a component or global file.
     Available values are:
     compact: --ig-size-small

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts

@@ -15,7 +15,7 @@ import { IgxTreeGridEditActionsComponent } from '../../test-utils/tree-grid-comp
 import { IgxGridEditingActionsComponent } from './grid-editing-actions.component';
 import { IgxGridPinningActionsComponent } from './grid-pinning-actions.component';
 import { IgxActionStripComponent } from '../action-strip.component';
-import { IgxColumnComponent } from '../../grids/public_api';
+import { IRowDataCancelableEventArgs, IgxColumnComponent } from '../../grids/public_api';
 
 describe('igxGridEditingActions #grid ', () => {
     let fixture;
@@ -203,6 +203,7 @@ describe('igxGridEditingActions #grid ', () => {
             expect(grid.rowPinning.emit).toHaveBeenCalledTimes(1);
             expect(grid.rowPinning.emit).toHaveBeenCalledWith({
                 rowID : row.key,
+                rowKey: row.key,
                 insertAtIndex: 0,
                 isPinned: true,
                 row,
@@ -220,6 +221,7 @@ describe('igxGridEditingActions #grid ', () => {
             expect(grid.rowPinning.emit).toHaveBeenCalledTimes(2);
             expect(grid.rowPinning.emit).toHaveBeenCalledWith({
                 rowID : row5.key,
+                rowKey: row5.key,
                 insertAtIndex: 1,
                 isPinned: true,
                 row: row5,
@@ -355,18 +357,22 @@ describe('igxGridEditingActions #grid ', () => {
             expect(editActions[3].componentInstance.iconName).toBe('delete');
             const deleteChildBtn = editActions[3].componentInstance;
 
-            const rowDeleteArgs = {
+            const rowDeleteArgs: IRowDataCancelableEventArgs = {
                 rowID: row.key,
                 primaryKey: row.key,
+                rowKey: row.key,
                 cancel: false,
                 rowData: treeGrid.getRowData(row.key),
+                data: treeGrid.getRowData(row.key),
                 oldValue: null,
-                owner: treeGrid
+                owner: treeGrid,
             };
 
             const rowDeletedArgs = {
                 data: treeGrid.getRowData(row.key),
+                rowData: treeGrid.getRowData(row.key),
                 primaryKey: row.key,
+                rowKey: row.key,
                 owner: treeGrid
             };
 

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

@@ -302,14 +302,20 @@ 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;
     private _selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';
 
+    private mutationObserver: MutationObserver;
+    private observerConfig: MutationObserverInit = {
+      attributeFilter: ["data-selected"],
+      childList: true,
+      subtree: true,
+    };
+
     constructor(
         private _cdr: ChangeDetectorRef,
         private _renderer: Renderer2,
@@ -351,6 +357,8 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
             return;
         }
 
+        this.updateSelected(index);
+
         const button = this.buttons[index];
         button.select();
     }
@@ -366,25 +374,21 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
             this.selectedIndexes.push(index);
         }
 
-        if (button.selected) {
-            this._renderer.setAttribute(button.nativeElement, 'aria-pressed', 'true');
-            this._renderer.addClass(button.nativeElement, 'igx-button-group__item--selected');
+        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) {
+        const indexInViewButtons = this.viewButtons.toArray().indexOf(button);
+        if (indexInViewButtons !== -1) {
             this.values[indexInViewButtons].selected = true;
-            }
+        }
 
-            // deselect other buttons if selectionMode is not multi
-            if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {
-                this.buttons.forEach((_, i) => {
-                    if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
-                        this.deselectButton(i);
-                    }
-                });
-            }
-        } else {
-            this.deselectButton(index);
+        // deselect other buttons if selectionMode is not multi
+        if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {
+            this.buttons.forEach((_, i) => {
+                if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
+                    this.deselectButton(i);
+                }
+            });
         }
 
     }
@@ -455,9 +459,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
                 }
 
                 button.buttonClick.pipe(takeUntil(this.buttonClickNotifier$)).subscribe((_) => this._clickHandler(index));
-                button.buttonSelected
-                    .pipe(takeUntil(this.buttonSelectedNotifier$))
-                    .subscribe((_) => this.updateSelected(index));
             });
         };
 
@@ -466,6 +467,10 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
         initButtons();
 
         this._cdr.detectChanges();
+
+        this.mutationObserver = this.setMutationsObserver();
+
+        this.mutationObserver.observe(this._el.nativeElement, this.observerConfig);
     }
 
     /**
@@ -475,17 +480,18 @@ 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();
+
+        this.mutationObserver.disconnect();
     }
 
     /**
      * @hidden
      */
     public _clickHandler(index: number) {
+        this.mutationObserver.disconnect();
+
         const button = this.buttons[index];
         const args: IButtonGroupEventArgs = { owner: this, button, index };
 
@@ -506,6 +512,54 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
                 this.deselected.emit(args);
             }
         }
+
+        this.mutationObserver.observe(this._el.nativeElement, this.observerConfig);
+    }
+
+    private setMutationsObserver() {
+        return new MutationObserver((records, observer) => {
+            // Stop observing while handling changes
+            observer.disconnect();
+
+            const updatedButtons = this.getUpdatedButtons(records);
+
+            if (updatedButtons.length > 0) {
+                updatedButtons.forEach((button) => {
+                    const index = this.buttons.map((b) => b.nativeElement).indexOf(button);
+                    const args: IButtonGroupEventArgs = { owner: this, button: this.buttons[index], index };
+
+                    this.updateButtonSelectionState(index, args);
+                });
+            }
+
+            // Watch for changes again
+            observer.observe(this._el.nativeElement, this.observerConfig);
+        });
+    }
+
+    private getUpdatedButtons(records: MutationRecord[]) {
+        const updated: HTMLButtonElement[] = [];
+
+        records
+          .filter((x) => x.type === 'attributes')
+          .reduce((prev, curr) => {
+            prev.push(
+              curr.target as HTMLButtonElement
+            );
+            return prev;
+          }, updated);
+
+        return updated;
+    }
+
+    private updateButtonSelectionState(index: number, args: IButtonGroupEventArgs) {
+        if (this.selectedIndexes.indexOf(index) === -1) {
+            this.selectButton(index);
+            this.selected.emit(args);
+        } else {
+            this.deselectButton(index);
+            this.deselected.emit(args);
+        }
     }
 }
 

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

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { TestBed, waitForAsync } from '@angular/core/testing';
+import { TestBed, fakeAsync, flushMicrotasks, waitForAsync } from '@angular/core/testing';
 import { ButtonGroupAlignment, IgxButtonGroupComponent } from './buttonGroup.component';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -115,7 +115,11 @@ describe('IgxButtonGroup', () => {
 
         const button = fixture.debugElement.nativeElement.querySelector('button');
         button.click();
+        // The first button is already selected, so it should not fire the selected event, but the deselected one.
+        expect(btnGroupInstance.selected.emit).not.toHaveBeenCalled();
 
+        const unselectedButton = fixture.debugElement.nativeElement.querySelector('#unselected');
+        unselectedButton.click();
         expect(btnGroupInstance.selected.emit).toHaveBeenCalled();
     });
 
@@ -360,7 +364,7 @@ describe('IgxButtonGroup', () => {
         }
     });
 
-    it('should style the corresponding button as deselected when the value bound to the selected input changes', () => {
+    it('should style the corresponding button as deselected when the value bound to the selected input changes', fakeAsync(() => {
         const fixture = TestBed.createComponent(ButtonGroupButtonWithBoundSelectedOutputComponent);
         fixture.detectChanges();
 
@@ -370,11 +374,13 @@ describe('IgxButtonGroup', () => {
         expect(btnGroupInstance.buttons[1].selected).toBe(true);
 
         fixture.componentInstance.selectedValue = 100;
+        flushMicrotasks();
         fixture.detectChanges();
 
-        expect(btnGroupInstance.selectedButtons.length).toBe(0);
-        expect(btnGroupInstance.buttons[1].selected).toBe(false);
-    });
+        btnGroupInstance.buttons.forEach((button) => {
+            expect(button.selected).toBe(false);
+        });
+    }));
 
 });
 
@@ -492,7 +498,7 @@ class TemplatedButtonGroupDesplayDensityComponent {
     template: `
     <igx-buttongroup>
         <button igxButton [selected]="true">Button 0</button>
-        <button igxButton>Button 1</button>
+        <button igxButton id="unselected">Button 1</button>
         <button igxButton>Button 2</button>
     </igx-buttongroup>
     `,

projects/igniteui-angular/src/lib/directives/button/README.md

@@ -31,6 +31,8 @@ this.button.displayDensity = "compact";
 | `igxButtonColor` |    string   |   Set the button text color. You can pass any CSS valid color value. |
 | `igxButtonBackground` | string | Set the button background color. You can pass any CSS valid color value. |
 | `displayDensity` | DisplayDensity | Determines the display density of the button. |
+| `buttonSelected` | EventEmitter<IButtonEventArgs> | Emitted only when a button gets selected, or deselected, and not on initialization. |
+| `selected` | boolean | Gets or sets whether the button is selected. Mainly used in the IgxButtonGroup component and it will have no effect if set separately. |
 
 # Button types
 | Name   | Description |

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

@@ -134,6 +134,24 @@ describe('IgxButton', () => {
         expect(theButtonNativeEl.classList.length).toEqual(2);
         expect(theButtonNativeEl.classList).toContain(classes.flat);
     });
+
+    it('Should emit the buttonSelected event only on user interaction, not on initialization', () => {
+        const fixture = TestBed.createComponent(InitButtonComponent);
+        fixture.detectChanges();
+        const button = fixture.componentInstance.button;
+        spyOn(button.buttonSelected, 'emit');
+
+        button.ngOnInit();
+        expect(button.buttonSelected.emit).not.toHaveBeenCalled();
+
+        button.nativeElement.click();
+        fixture.detectChanges();
+        expect(button.buttonSelected.emit).toHaveBeenCalledTimes(1);
+
+        button.nativeElement.click();
+        fixture.detectChanges();
+        expect(button.buttonSelected.emit).toHaveBeenCalledTimes(2);
+    });
 });
 
 @Component({