feat(IgxOverlayService): add contentAppending emit (#12696)

* feat(IgxOverlayService): add contentAppending event

* feat(IgxOverlayService): add contentAppending emit

* refactor(Overlay): enhance the emitted args of contentAppending event #12480

* chore(*): update the changelog

* test(OverlayService): add few tests for the contentAppending event #12480

---------

Co-authored-by: Desislava Dincheva <[email protected]>
Co-authored-by: Hristo <[email protected]>
Co-authored-by: ddincheva <[email protected]>

Author: 3 people

CHANGELOG.md

@@ -17,6 +17,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxColumnComponent`
     - Added `currRec` and `groupRec` parameters to the `groupingComparer` function that give access to the all properties of the compared records.
 
+- `IgxOverlayService`
+    -A new event `contentAppending` is introduced - the event is emitted before the content is appended to the overlay. The event is emitted with `OverlayEventArgs` arguments and is not cancellable.
+
 ### General
  - `IgxPivotGrid`
     - The `IgxPivotDateDimension` properties `inBaseDimension` and `inOption` have been deprecated and renamed to `baseDimension` and `options` respectively.
@@ -35,9 +38,9 @@ All notable changes for each version of this project will be documented in this
 - `igxMask` directive
     - Added the capability to escape mask pattern literals.
 - `IgxBadge`
-    - Added `shape` property that controls the shape of the badge and can be either `square` or `rounded`. The default shape of the badge is rounded. 
+    - Added `shape` property that controls the shape of the badge and can be either `square` or `rounded`. The default shape of the badge is rounded.
 - `IgxAvatar`
-    - **Breaking Change** The `roundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `shape` attribute that can be `square`, `rounded` or `circle`. The default shape of the avatar is `square`. 
+    - **Breaking Change** The `roundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added `shape` attribute that can be `square`, `rounded` or `circle`. The default shape of the avatar is `square`.
 - `IgxOverlayService`
     - `attach` method overload accepting `ComponentFactoryResolver` (trough `NgModuleRef`-like object) is now deprecated in line with API deprecated in Angular 13. New overload is added accepting `ViewComponentRef` that should be used instead.
 

projects/igniteui-angular/src/lib/services/overlay/README.md

@@ -134,5 +134,6 @@ this.overlay.show(component, overlaySettings);
 | opened            | Emitted after overlay shows                   | false      |            |
 | closing           | Emitted before overlay hides                  | true       |            |
 | closed            | Emitted after overlay hides                   | false      |            |
+| contentAppending   | Emitted before overlay's content is appended   | false      |            |
 | contentAppended   | Emitted after overlay's content is appended   | false      |            |
 | animationStarting | Emitted before animation is started           | false      |            |

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -13,6 +13,7 @@ import {
 import { fakeAsync, inject, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { BrowserModule } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { first } from 'rxjs/operators';
 import { scaleInVerTop, scaleOutVerTop } from '../../animations/main';
 import { IgxAvatarComponent, IgxAvatarModule } from '../../avatar/avatar.component';
 import { IgxCalendarComponent, IgxCalendarModule } from '../../calendar/public_api';
@@ -558,6 +559,7 @@ describe('igxOverlay', () => {
             spyOn(overlayInstance.closed, 'emit');
             spyOn(overlayInstance.closing, 'emit');
             spyOn(overlayInstance.opened, 'emit');
+            spyOn(overlayInstance.contentAppending, 'emit');
             spyOn(overlayInstance.contentAppended, 'emit');
             spyOn(overlayInstance.opening, 'emit');
             spyOn(overlayInstance.animationStarting, 'emit');
@@ -571,6 +573,7 @@ describe('igxOverlay', () => {
                 .toHaveBeenCalledWith({ id: firstCallId, componentRef: jasmine.any(ComponentRef) as any, cancel: false });
             const args: OverlayEventArgs = (overlayInstance.opening.emit as jasmine.Spy).calls.mostRecent().args[0];
             expect(args.componentRef.instance).toEqual(jasmine.any(SimpleDynamicComponent));
+            expect(overlayInstance.contentAppending.emit).toHaveBeenCalledTimes(1);
             expect(overlayInstance.contentAppended.emit).toHaveBeenCalledTimes(1);
             expect(overlayInstance.animationStarting.emit).toHaveBeenCalledTimes(1);
 
@@ -595,6 +598,7 @@ describe('igxOverlay', () => {
             tick();
             expect(overlayInstance.opening.emit).toHaveBeenCalledTimes(2);
             expect(overlayInstance.opening.emit).toHaveBeenCalledWith({ componentRef: undefined, id: secondCallId, cancel: false });
+            expect(overlayInstance.contentAppending.emit).toHaveBeenCalledTimes(2);
             expect(overlayInstance.contentAppended.emit).toHaveBeenCalledTimes(2);
             expect(overlayInstance.animationStarting.emit).toHaveBeenCalledTimes(3);
 
@@ -616,6 +620,68 @@ describe('igxOverlay', () => {
             overlayInstance.detachAll();
         }));
 
+        it('Should properly emit contentAppending event', fakeAsync(() => {
+            const fixture = TestBed.createComponent(SimpleRefComponent);
+            fixture.detectChanges();
+            const overlayInstance = fixture.componentInstance.overlay;
+            const os: OverlaySettings = {
+                excludeFromOutsideClick: [],
+                positionStrategy: new GlobalPositionStrategy(),
+                scrollStrategy: new NoOpScrollStrategy(),
+                modal: true,
+                closeOnOutsideClick: true,
+                closeOnEscape: false
+            };
+
+            spyOn(overlayInstance.contentAppending, 'emit');
+            spyOn(overlayInstance.contentAppended, 'emit');
+
+            const firstCallId = overlayInstance.attach(SimpleDynamicComponent);
+            overlayInstance.show(firstCallId);
+            tick();
+
+            expect(overlayInstance.contentAppending.emit).toHaveBeenCalledTimes(1);
+            expect(overlayInstance.contentAppended.emit).toHaveBeenCalledTimes(1);
+
+            expect(overlayInstance.contentAppending.emit).toHaveBeenCalledWith({ id: firstCallId, elementRef: jasmine.any(Object),
+                componentRef: jasmine.any(ComponentRef) as any, settings: os })
+        }));
+
+        it('Should properly be able to override OverlaySettings using contentAppending event args', fakeAsync(() => {
+            const fixture = TestBed.createComponent(SimpleRefComponent);
+            fixture.detectChanges();
+            const overlayInstance = fixture.componentInstance.overlay;
+            const os: OverlaySettings = {
+                excludeFromOutsideClick: [],
+                positionStrategy: new GlobalPositionStrategy(),
+                scrollStrategy: new CloseScrollStrategy(),
+                modal: false,
+                closeOnOutsideClick: false,
+                closeOnEscape: true
+            };
+
+            overlayInstance.contentAppending.pipe(first()).subscribe((e: OverlayEventArgs) => {
+                // override the default settings
+                e.settings = os;
+            });
+            overlayInstance.contentAppended.pipe(first()).subscribe((e: OverlayEventArgs) => {
+                const overlay = overlayInstance.getOverlayById(e.id);
+                expect(overlay.settings.closeOnEscape).toBeTrue();
+                expect(overlay.settings.modal).toBeFalsy();
+                expect(overlay.settings.closeOnOutsideClick).toBeFalsy();
+            });
+
+            spyOn(overlayInstance.contentAppended, 'emit').and.callThrough();
+            spyOn(overlayInstance.contentAppending, 'emit').and.callThrough();
+
+            const firstCallId = overlayInstance.attach(SimpleDynamicComponent);
+            overlayInstance.show(firstCallId);
+            tick();
+
+            expect(overlayInstance.contentAppending.emit).toHaveBeenCalledTimes(1);
+            expect(overlayInstance.contentAppended.emit).toHaveBeenCalledTimes(1);
+        }));
+
         it('Should properly set style on position method call - GlobalPosition.', () => {
             const mockParent = document.createElement('div');
             const mockItem = document.createElement('div');

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -107,6 +107,16 @@ export class IgxOverlayService implements OnDestroy {
      */
     public closed = new EventEmitter<OverlayEventArgs>();
 
+    /**
+     * Emitted before the content is appended to the overlay.
+     * ```typescript
+     * contentAppending(event: OverlayEventArgs){
+     *     const contentAppending = event;
+     * }
+     * ```
+     */
+    public contentAppending = new EventEmitter<OverlayEventArgs>();
+
     /**
      * Emitted after the content is appended to the overlay, and before animations are started.
      * ```typescript
@@ -347,7 +357,11 @@ export class IgxOverlayService implements OnDestroy {
         info.id = (this._componentId++).toString();
         info.visible = false;
         const settings = Object.assign({}, this._defaultSettings, this.getUserOverlaySettings(viewContainerRefOrSettings, moduleRefOrSettings));
-        info.settings = settings;
+        // Emit the contentAppending event before appending the content
+        const eventArgs = { id: info.id, elementRef: info.elementRef, componentRef: info.componentRef, settings };
+        this.contentAppending.emit(eventArgs);
+        // Append the content to the overlay
+        info.settings = eventArgs.settings;
         this._overlayInfos.push(info);
         info.hook = this.placeElementHook(info.elementRef.nativeElement);
         const elementRect = info.elementRef.nativeElement.getBoundingClientRect();

projects/igniteui-angular/src/lib/services/overlay/utilities.ts

@@ -111,6 +111,10 @@ export interface OverlayEventArgs extends IBaseEventArgs {
     id: string;
     /** Available when `Type<T>` is provided to the `attach()` method and allows access to the created Component instance */
     componentRef?: ComponentRef<any>;
+    /** Will provide the elementRef of the markup that will be displayed in the overlay */
+    elementRef?: ElementRef<any>;
+    /** Will provide the overlay settings which will be used when the component is attached */
+    settings?: OverlaySettings;
     /** Will provide the original keyboard event if closed from ESC or click */
     event?: Event;
 }