feat(design): DaffModalService.open returns reference instead of modal instance

apps/demo/src/app/cart/components/add-to-cart-notification/effects/add-to-cart-notification.effects.ts

@@ -13,7 +13,7 @@ import {
 import { DaffCartActionTypes } from '@daffodil/cart/state';
 import {
   DaffModalService,
-  DaffModalComponent,
+  DaffModalRef,
 } from '@daffodil/design/modal';
 
 import {
@@ -25,7 +25,7 @@ import { AddToCartNotificationComponent } from '../components/add-to-cart-notifi
 
 @Injectable()
 export class AddToCartNotificationEffects {
-  private notification: DaffModalComponent;
+  private notification: DaffModalRef;
 
   constructor(
     private actions$: Actions,
@@ -54,7 +54,7 @@ export class AddToCartNotificationEffects {
   closeModal$ = createEffect(() => this.actions$.pipe(
     ofType(AddToCartNotificationActionTypes.CloseAddToCartNotificationAction),
     map((action) => {
-      this.daffModalService.close(this.notification);
+      this.notification.close();
     }),
   ), { dispatch: false });
 }

libs/design-examples/modal/src/basic-modal/basic-modal.component.ts

@@ -5,7 +5,7 @@ import {
 
 import { DaffButtonComponent } from '@daffodil/design/button';
 import {
-  DaffModalComponent,
+  DaffModalRef,
   DAFF_MODAL_COMPONENTS,
   DaffModalService,
 } from '@daffodil/design/modal';
@@ -25,7 +25,7 @@ import { BasicModalContentExampleComponent } from './modal-content.component';
   ],
 })
 export class BasicModalExampleComponent {
-  modal: DaffModalComponent;
+  modal: DaffModalRef;
 
   constructor(private modalService: DaffModalService) {}
 

libs/design-examples/modal/src/position-config-modal/position-config-modal.component.ts

@@ -5,7 +5,7 @@ import {
 
 import { DaffButtonComponent } from '@daffodil/design/button';
 import {
-  DaffModalComponent,
+  DaffModalRef,
   DAFF_MODAL_COMPONENTS,
   DaffModalService,
 } from '@daffodil/design/modal';
@@ -25,7 +25,7 @@ import { PositionConfigModalContentExampleComponent } from './modal-content.comp
   ],
 })
 export class PositionConfigModalExampleComponent {
-  modal: DaffModalComponent;
+  modal: DaffModalRef;
 
   constructor(private modalService: DaffModalService) {}
 

libs/design/modal/src/modal/interfaces/modal.ts

@@ -0,0 +1,32 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { ComponentRef } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { DaffModalComponent } from '../modal.component';
+
+export interface DaffModal {
+  /**
+   * The reference to the modal in question
+   */
+  modal: ComponentRef<DaffModalComponent>;
+
+  /**
+   * The overlay associated with a given modal.
+   */
+  overlay: OverlayRef;
+}
+
+/**
+ * Reference to modal instance.
+ */
+export interface DaffModalRef {
+  /**
+   * Closes the modal.
+   */
+  close(): void;
+
+  /**
+   * Emits when the modal close animation completes.
+   */
+  afterClosed: Observable<boolean>;
+}

libs/design/modal/src/public_api.ts

@@ -1,7 +1,7 @@
 export * from './modal/modal.component';
 export { DaffModalModule } from './modal.module';
 export { DaffModalService } from './service/modal.service';
-export { DaffModal } from './modal/modal';
+export { DaffModalRef } from './modal/interfaces/modal';
 export { DaffModalHeaderComponent } from './modal-header/modal-header.component';
 export { DaffModalTitleDirective } from './modal-title/modal-title.directive';
 export { DaffModalContentComponent } from './modal-content/modal-content.component';

libs/design/modal/src/service/modal.service.ts

@@ -13,7 +13,10 @@ import {
 } from '@angular/core';
 import { take } from 'rxjs/operators';
 
-import { DaffModal } from '../modal/modal';
+import {
+  DaffModal,
+  DaffModalRef,
+} from '../modal/interfaces/modal';
 import {
   DaffModalConfiguration,
   DaffModalPosition,
@@ -99,7 +102,7 @@ export class DaffModalService {
   open(
     component: Type<any>,
     configuration?: Partial<DaffModalConfiguration>,
-  ): DaffModalComponent {
+  ): DaffModalRef {
     this._closeAllModals();
     const config = { ...this.defaultConfiguration, ...configuration };
     const _ref = this._createOverlayRef(config);
@@ -124,7 +127,11 @@ export class DaffModalService {
           ? config.onBackdropClicked()
           : this.close(modal.modal.instance),
       );
-    return modal.modal.instance;
+
+    return {
+      close: () => this.close(modal.modal.instance),
+      afterClosed: modal.modal.instance.closedAnimationCompleted$,
+    };
   }
 
   close(component: DaffModalComponent): void {

libs/design/modal/src/specs/focus-management.spec.ts

@@ -14,6 +14,7 @@ import { By } from '@angular/platform-browser';
 import { DaffFocusStackService } from '@daffodil/design';
 import {
   DaffModalComponent,
+  DaffModalRef,
   DaffModalService,
 } from '@daffodil/design/modal';
 
@@ -32,15 +33,15 @@ class ModalContentComponent {}
   ],
 })
 class WrapperComponent {
-  _modal: DaffModalComponent;
+  _modal: DaffModalRef;
   constructor(private modal: DaffModalService) {}
 
   openModal() {
     this._modal = this.modal.open(ModalContentComponent);
   }
 
   closeModal() {
-    this.modal.close(this._modal);
+    this._modal.close();
   }
 }