Merge pull request #8264 from IgniteUI/mvenkov/update-toggle-event-emitters

Toggle should emit correct event arguments

Author: Lipata

CHANGELOG.md

@@ -4,19 +4,21 @@ All notable changes for each version of this project will be documented in this
 ## 10.2.0
 
 ### General
-- `IgxDatePicker`
-    - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
+- `IgxGridActions`
+    - Added `asMenuItems` Input for grid actions - `igx-grid-editing-actions`, `igx-grid-pinning-actions`. When set to true will render the related action buttons as separate menu items with button and label.
 - `IgxInputGroup`
     - **Breaking Change** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property.
     - **Behavioral Change** - The styling of the input group is now dictated by the theme being used. The remaining `types` - `line`, `border`, and `box` will only have effect on the styling when used with the `material` theme. The `search` type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
 - `IgxOverlay`
     - **Breaking Change** - `target` property in `PositionSettings` has been deprecated. You can set the attaching target for the component to show in `OverlaySettings` instead.
+- `IgxToggleDirective`
+    - `onAppended`, `onOpened` and `onClosed` events are emitting now arguments of `ToggleViewEventArgs` type.
+    - `onOpening` and `onClosing` events are emitting now arguments of `ToggleViewCancelableEventArgs` type.
 - `IgxSelect`
     - Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
 - `IgxDatePicker`	
     - **Breaking Change** - Deprecated the `label` property.
-- `igxGridActions`
-    - Added `asMenuItems` Input for grid actions - `igx-grid-editing-actions`, `igx-grid-pinning-actions`. When set to true will render the related action buttons as separate menu items with button and label.
+    - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
 - `igxNavigationDrawer`
     - Added `disableAnimation` property which enables/disables the animation, when toggling the drawer. Set to `false` by default.
 - `igxTabs`

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts

@@ -410,7 +410,7 @@ describe('IgxDateRangePicker', () => {
                     verifyDateRangeInSingleInput();
                     expect(dateRange.collapsed).toBeTruthy();
                     expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
-                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: undefined });
+                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.onClosed.emit).toHaveBeenCalledWith({ owner: dateRange });
                 }));
@@ -473,7 +473,7 @@ describe('IgxDateRangePicker', () => {
                     fixture.detectChanges();
                     expect(dateRange.collapsed).toBeFalsy();
                     expect(dateRange.onOpening.emit).toHaveBeenCalledTimes(1);
-                    expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ cancel: false });
+                    expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.onOpened.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.onOpened.emit).toHaveBeenCalledWith({ owner: dateRange });
 
@@ -490,7 +490,7 @@ describe('IgxDateRangePicker', () => {
                     verifyDateRangeInSingleInput();
                     expect(dateRange.collapsed).toBeTruthy();
                     expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
-                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: undefined });
+                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.onClosed.emit).toHaveBeenCalledWith({ owner: dateRange });
                 }));
@@ -506,7 +506,7 @@ describe('IgxDateRangePicker', () => {
                     fixture.detectChanges();
                     expect(dateRange.collapsed).toBeFalsy();
                     expect(dateRange.onOpening.emit).toHaveBeenCalledTimes(1);
-                    expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ cancel: false });
+                    expect(dateRange.onOpening.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.onOpened.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.onOpened.emit).toHaveBeenCalledWith({ owner: dateRange });
 
@@ -522,7 +522,7 @@ describe('IgxDateRangePicker', () => {
                     fixture.detectChanges();
                     expect(dateRange.collapsed).toBeTruthy();
                     expect(dateRange.onClosing.emit).toHaveBeenCalledTimes(1);
-                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: undefined });
+                    expect(dateRange.onClosing.emit).toHaveBeenCalledWith({ owner: dateRange, cancel: false, event: undefined });
                     expect(dateRange.onClosed.emit).toHaveBeenCalledTimes(1);
                     expect(dateRange.onClosed.emit).toHaveBeenCalledWith({ owner: dateRange });
                 }));

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts

@@ -659,8 +659,12 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
 
     /** @hidden @internal */
     public handleOpening(event: CancelableBrowserEventArgs & IBaseEventArgs): void {
-        this.onOpening.emit(event);
-        this._collapsed = false;
+        const args = { owner: this, cancel: event.cancel, event: event.event };
+        this.onOpening.emit(args);
+        event.cancel = args.cancel;
+        if (!args.cancel) {
+            this._collapsed = false;
+        }
     }
 
     /** @hidden @internal */
@@ -675,7 +679,12 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
             this.value = null;
         }
 
-        this.onClosing.emit(event);
+        const args = { owner: this, cancel: event.cancel, event: event.event };
+        this.onClosing.emit(args);
+        event.cancel = args.cancel;
+        if (args.cancel) {
+            return;
+        }
 
         if (this.mode === InteractionMode.DropDown && event.event && !this.element.nativeElement.contains(event.event.target)) {
             // outside click

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

@@ -29,8 +29,8 @@ handlers when the toggle is opened and respectively closed.
 ```html
 <button (click)="toggleRef.toggle()">Toggle</button>
 <div igxToggle #toggleRef="toggle" 
-    (onOpening)="eventHandler()" (onAppended)="eventHandler()" (onOpened)="eventHandler()"
-    (onClosing)="eventHandler()" (onClosed)="eventHandler()" >
+    (onOpening)="eventHandler($event)" (onAppended)="eventHandler($event)" (onOpened)="eventHandler($event)"
+    (onClosing)="eventHandler($event)" (onClosed)="eventHandler($event)" >
     <p>Some content that user would like to make it togglable.</p>
 </div>
 ```
@@ -40,11 +40,11 @@ handlers when the toggle is opened and respectively closed.
 ### Outputs
 | Name | Return Type | Description |
 |:--:|:---|:---|
-| `onAppended`   | `void` | Emits an event after content is appended to the overlay.         |
-| `onOpening`    | `void` | Emits an event before the toggle container is opened.            |
-| `onOpened`     | `void` | Emits an event after the toggle container is opened.             |
-| `onClosing`    | `void` | Emits an event before the toggle container is closed.            |
-| `onClosed`     | `void` | Emits an event after the toggle container is closed.             |
+| `onAppended`   | `ToggleViewEventArgs`           | Emits an event after content is appended to the overlay.         |
+| `onOpening`    | `ToggleViewCancelableEventArgs` | Emits an event before the toggle container is opened.            |
+| `onOpened`     | `ToggleViewEventArgs`           | Emits an event after the toggle container is opened.             |
+| `onClosing`    | `ToggleViewCancelableEventArgs` | Emits an event before the toggle container is closed.            |
+| `onClosed`     | `ToggleViewEventArgs`           | Emits an event after the toggle container is closed.             |
 ### Methods
 | Name   | Arguments | Return Type | Description |
 |:----------:|:------|:------|:------|

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

@@ -573,7 +573,7 @@ describe('IgxToggle', () => {
             fixture.detectChanges();
 
             expect(toggle.onClosing.emit).toHaveBeenCalledTimes(1);
-            expect(toggle.onClosing.emit).toHaveBeenCalledWith({ cancel: false, event: new Event('click') });
+            expect(toggle.onClosing.emit).toHaveBeenCalledWith({ id: '0', owner: toggle, cancel: false, event: new Event('click') });
             expect(toggle.onClosed.emit).toHaveBeenCalledTimes(1);
         }));
 

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

@@ -25,7 +25,14 @@ import {
 import { filter, takeUntil } from 'rxjs/operators';
 import { Subscription, Subject, MonoTypeOperatorFunction } from 'rxjs';
 import { OverlayClosingEventArgs } from '../../services/overlay/utilities';
-import { CancelableEventArgs, CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils';
+import { CancelableBrowserEventArgs, IBaseEventArgs } from '../../core/utils';
+
+export interface ToggleViewEventArgs extends IBaseEventArgs {
+    /** Id of the toggle view */
+    id: string;
+}
+
+export interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, CancelableBrowserEventArgs { }
 
 @Directive({
     exportAs: 'toggle',
@@ -60,7 +67,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
      * ```
      */
     @Output()
-    public onOpened = new EventEmitter();
+    public onOpened = new EventEmitter<ToggleViewEventArgs>();
 
     /**
      * Emits an event before the toggle container is opened.
@@ -79,7 +86,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
      * ```
      */
     @Output()
-    public onOpening = new EventEmitter<CancelableEventArgs & IBaseEventArgs>();
+    public onOpening = new EventEmitter<ToggleViewCancelableEventArgs>();
 
     /**
      * Emits an event after the toggle container is closed.
@@ -98,7 +105,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
      * ```
      */
     @Output()
-    public onClosed = new EventEmitter();
+    public onClosed = new EventEmitter<ToggleViewEventArgs>();
 
     /**
      * Emits an event before the toggle container is closed.
@@ -117,7 +124,26 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
      * ```
      */
     @Output()
-    public onClosing = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>();
+    public onClosing = new EventEmitter<ToggleViewCancelableEventArgs>();
+
+    /**
+     * Emits an event after the toggle element is appended to the overlay container.
+     *
+     * ```typescript
+     * onAppended() {
+     *  alert("Content appended!");
+     * }
+     * ```
+     *
+     * ```html
+     * <div
+     *   igxToggle
+     *   (onAppended)='onToggleAppended()'>
+     * </div>
+     * ```
+     */
+    @Output()
+    public onAppended = new EventEmitter<ToggleViewEventArgs>();
 
     private _collapsed = true;
     /**
@@ -171,25 +197,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         @Optional() private navigationService: IgxNavigationService) {
     }
 
-    /**
-     * Emits an event after the toggle element is appended to the overlay container.
-     *
-     * ```typescript
-     * onAppended() {
-     *  alert("Content appended!");
-     * }
-     * ```
-     *
-     * ```html
-     * <div
-     *   igxToggle
-     *   (onAppended)='onToggleAppended()'>
-     * </div>
-     * ```
-     */
-    @Output()
-    public onAppended = new EventEmitter();
-
     /**
      * Opens the toggle.
      *
@@ -214,7 +221,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         this._collapsed = false;
         this.cdr.detectChanges();
 
-        const openEventArgs: CancelableEventArgs = { cancel: false };
+        const openEventArgs: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId };
         this.onOpening.emit(openEventArgs);
         if (openEventArgs.cancel) {
             this._collapsed = true;
@@ -225,32 +232,34 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         this.unsubscribe();
 
         this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => {
-            this.onAppended.emit();
+            const appendedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId };
+            this.onAppended.emit(appendedEventArgs);
         });
 
         this._overlayOpenedSub = this.overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe(() => {
-            this.onOpened.emit();
+            const openedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId };
+            this.onOpened.emit(openedEventArgs);
         });
 
         this._overlayClosingSub = this.overlayService
-        .onClosing
-        .pipe(...this._overlaySubFilter)
-        .subscribe((e: OverlayClosingEventArgs) => {
-            const eventArgs: CancelableBrowserEventArgs = { cancel: false, event: e.event };
-            this.onClosing.emit(eventArgs);
-            e.cancel = eventArgs.cancel;
-
-            //  in case event is not canceled this will close the toggle and we need to unsubscribe.
-            //  Otherwise if for some reason, e.g. close on outside click, close() gets called before
-            //  onClosed was fired we will end with calling onClosing more than once
-            if (!e.cancel) {
-                this.clearSubscription(this._overlayClosingSub);
-            }
-        });
+            .onClosing
+            .pipe(...this._overlaySubFilter)
+            .subscribe((e: OverlayClosingEventArgs) => {
+                const eventArgs: ToggleViewCancelableEventArgs = { cancel: false, event: e.event, owner: this, id: this._overlayId };
+                this.onClosing.emit(eventArgs);
+                e.cancel = eventArgs.cancel;
+
+                //  in case event is not canceled this will close the toggle and we need to unsubscribe.
+                //  Otherwise if for some reason, e.g. close on outside click, close() gets called before
+                //  onClosed was fired we will end with calling onClosing more than once
+                if (!e.cancel) {
+                    this.clearSubscription(this._overlayClosingSub);
+                }
+            });
 
         this._overlayClosedSub = this.overlayService.onClosed
-        .pipe(...this._overlaySubFilter)
-        .subscribe(this.overlayClosed);
+            .pipe(...this._overlaySubFilter)
+            .subscribe(this.overlayClosed);
 
         this.overlayService.show(this._overlayId, overlaySettings);
     }
@@ -353,7 +362,8 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         this.cdr.detectChanges();
         delete this._overlayId;
         this.unsubscribe();
-        this.onClosed.emit();
+        const closedEventArgs: ToggleViewEventArgs = { owner: this, id: this._overlayId };
+        this.onClosed.emit(closedEventArgs);
     }
 
     private unsubscribe() {