Re-emitting events from child grid to related Row Island. (#5663)

* fix(igxHierarchicalGrid): Re-emitting events from child grid to related RI.

* chore(*): Adding IBaseEventArgs for grid events.

* chore(*): Adding IBaseEventArgs for other component event args.

* chore(*): Renaming owner to context in IBaseEventArgs, since argument owner already exists in some of the EventArgs (IRowDragStartEventArgs, IRowDragEndEventArgs, IgxDropLeaveEventArgs, IgxDragCustomEventDetails etc.).

* chore(*): Updating sample and tests with new event arg.

* chore(*): Adding test for event re-emitting from child to row island.

* chore(*): Renaming base event arg to owner. Introducing breaking change for IRowDragEndEventArgs/IRowDragStartEventArgs.

* chore(*): Updating Change Log.

Author: MayaKirova

CHANGELOG.md

@@ -8,12 +8,16 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - `uniqueColumnValuesStrategy` input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
     - `igxExcelStyleLoading` directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead.
+- `IgxHierarchicalGrid`
+    - Row Islands now emit child grid events with an additional argument - `owner`, which holds reference to the related child grid component instance.
+
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`.
     - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
     - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.
     - **Breaking Change** `igxExcelStylePinningTemplate` directive is renamed to `igxExcelStylePinning`.
+    - **Breaking Change** `onRowDragEnd` and `onRowDragStart` event arguments are changed - `owner` now holds reference to the grid component instance, while `dragDirective` hold reference to the drag directive.
 - `IgxCombo`
     - Combo selection is now consistent when `valueKey` is defined. When `valueKey` is specified, selection is based on the value keys of the items. For example:
     ```html

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

@@ -9,9 +9,9 @@ import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxBannerActionsDirective } from './banner.directives';
 import { CommonModule } from '@angular/common';
-import { CancelableEventArgs } from '../core/utils';
+import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
 
-export interface BannerEventArgs {
+export interface BannerEventArgs extends IBaseEventArgs {
     banner: IgxBannerComponent;
     event?: Event;
 }

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

@@ -23,6 +23,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxIconModule } from '../icon/index';
 import { takeUntil } from 'rxjs/operators';
 import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions, DisplayDensity } from '../core/density';
+import { IBaseEventArgs } from '../core/utils';
 
 export enum ButtonGroupAlignment { horizontal, vertical }
 let NEXT_ID = 0;
@@ -424,7 +425,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     }
 }
 
-export interface IButtonGroupEventArgs {
+export interface IButtonGroupEventArgs extends IBaseEventArgs {
     button: IgxButtonDirective;
     index: number;
 }

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

@@ -12,6 +12,7 @@ import {
     Output
 } from '@angular/core';
 import { IgxIconModule } from '../icon/index';
+import { IBaseEventArgs } from '../core/utils';
 
 let NEXT_ID = 0;
 
@@ -560,7 +561,7 @@ export class IgxSlideComponent implements OnInit, OnDestroy {
     }
 }
 
-export interface ISlideEventArgs {
+export interface ISlideEventArgs extends IBaseEventArgs {
     carousel: IgxCarouselComponent;
     slide: IgxSlideComponent;
 }

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

@@ -13,15 +13,15 @@ import {
 } from '@angular/core';
 import { CheckboxRequiredValidator, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
-import { isIE } from '../core/utils';
+import { isIE, IBaseEventArgs } from '../core/utils';
 import { EditorProvider } from '../core/edit-provider';
 
 export enum LabelPosition {
     BEFORE = 'before',
     AFTER = 'after'
 }
 
-export interface IChangeCheckboxEventArgs {
+export interface IChangeCheckboxEventArgs extends IBaseEventArgs {
     checked: boolean;
     checkbox: IgxCheckboxComponent;
 }

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -20,9 +20,10 @@ import {
     IgxDropEnterEventArgs,
     IgxDropEventArgs
 } from '../directives/drag-drop/drag-drop.directive';
+import { IBaseEventArgs } from '../core/utils';
 
 
-export interface IBaseChipEventArgs {
+export interface IBaseChipEventArgs extends IBaseEventArgs {
     originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IgxDropEnterEventArgs;
     owner: IgxChipComponent;
 }

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

@@ -17,7 +17,7 @@ import {
 import { FormsModule, ReactiveFormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl } from '@angular/forms';
 import { IgxCheckboxModule } from '../checkbox/checkbox.component';
 import { IgxSelectionAPIService } from '../core/selection';
-import { cloneArray, CancelableEventArgs, CancelableBrowserEventArgs } from '../core/utils';
+import { cloneArray, CancelableEventArgs, CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { IgxStringFilteringOperand, IgxBooleanFilteringOperand } from '../data-operations/filtering-condition';
 import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface';
 import { SortingDirection, ISortingExpression } from '../data-operations/sorting-expression.interface';
@@ -85,7 +85,7 @@ export enum IgxComboState {
 }
 
 /** Event emitted when an igx-combo's selection is changing */
-export interface IComboSelectionChangeEventArgs extends CancelableEventArgs {
+export interface IComboSelectionChangeEventArgs extends CancelableEventArgs, IBaseEventArgs {
     /** An array containing the values that are currently selected */
     oldSelection: any[];
     /** An array containing the values that will be selected after this event */
@@ -98,7 +98,7 @@ export interface IComboSelectionChangeEventArgs extends CancelableEventArgs {
     event?: Event;
 }
 
-export interface IComboItemAdditionEvent {
+export interface IComboItemAdditionEvent extends IBaseEventArgs {
     oldCollection: any[];
     addedItem: any;
     newCollection: any[];
@@ -437,7 +437,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Output()
-    public onOpening = new EventEmitter<CancelableEventArgs>();
+    public onOpening = new EventEmitter<CancelableEventArgs & IBaseEventArgs>();
 
     /**
      * Emitted after the dropdown is opened
@@ -457,7 +457,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Output()
-    public onClosing = new EventEmitter<CancelableBrowserEventArgs>();
+    public onClosing = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>();
 
     /**
      * Emitted after the dropdown is closed

projects/igniteui-angular/src/lib/core/displayDensity.ts

@@ -1,4 +1,5 @@
 import { InjectionToken, Input, Output, EventEmitter, DoCheck, OnInit } from '@angular/core';
+import { IBaseEventArgs } from './utils';
 
 
 /**
@@ -17,7 +18,7 @@ export interface IDisplayDensityOptions {
     displayDensity: DisplayDensity;
 }
 
-export interface IDensityChangedEventArgs {
+export interface IDensityChangedEventArgs extends IBaseEventArgs {
     oldDensity: DisplayDensity;
     newDensity: DisplayDensity;
 }

projects/igniteui-angular/src/lib/core/utils.ts

@@ -262,6 +262,13 @@ export interface CancelableEventArgs {
     cancel: boolean;
 }
 
+export interface IBaseEventArgs {
+    /**
+     * Provides reference to the owner component.
+     */
+    owner?: any;
+}
+
 export interface CancelableBrowserEventArgs extends CancelableEventArgs {
     /** Browser event */
     event?: Event;

projects/igniteui-angular/src/lib/data-operations/filtering-expressions-tree.ts

@@ -1,6 +1,7 @@
 import { IFilteringExpression, FilteringLogic } from './filtering-expression.interface';
+import { IBaseEventArgs } from '../core/utils';
 
-export declare interface IFilteringExpressionsTree {
+export declare interface IFilteringExpressionsTree extends IBaseEventArgs {
     filteringOperands: (IFilteringExpressionsTree | IFilteringExpression)[];
     operator: FilteringLogic;
     fieldName?: string;