Implemented the use of the SkyDynamicComponentService (#9)

package.json

@@ -28,13 +28,13 @@
     "@angular/core": "^4.3.6",
     "@angular/forms": "^4.3.6",
     "@angular/router": "^4.3.6",
-    "@skyux/core": "^3.1.0",
+    "@skyux/core": "^3.5.1",
     "@skyux/i18n": "^3.3.0",
     "@skyux/indicators": "^3.0.0-rc.1"
   },
   "dependencies": {},
   "devDependencies": {
-    "@blackbaud/skyux": "2.34.0",
+    "@blackbaud/skyux": "2.35.0",
     "@blackbaud/skyux-builder": "1.30.0",
     "@skyux-sdk/builder-plugin-skyux": "1.0.0-rc.5"
   }

src/app/public/modules/flyout/fixtures/flyout-fixtures.module.ts

@@ -51,11 +51,11 @@ import {
   ],
   imports: [
     CommonModule,
-    NoopAnimationsModule,
     RouterTestingModule,
     SkyFlyoutModule,
     SkyModalModule,
-    SkyToastModule
+    SkyToastModule,
+    NoopAnimationsModule
   ],
   exports: [
     SkyFlyoutTestSampleComponent,

src/app/public/modules/flyout/flyout-adapter.service.ts

@@ -26,17 +26,6 @@ export class SkyFlyoutAdapterService {
     this.renderer = this.rendererFactory.createRenderer(undefined, undefined);
   }
 
-  public appendToBody(element: any): void {
-    const body = this.windowRef.getWindow().document.body;
-    this.renderer.appendChild(body, element);
-  }
-
-  public removeHostElement(): void {
-    const document = this.windowRef.getWindow().document;
-    const hostElement = document.querySelector('sky-flyout');
-    this.renderer.removeChild(document.body, hostElement);
-  }
-
   public adjustHeaderForHelp(header: ElementRef): void {
     const windowObj = this.windowRef.getWindow();
     const helpWidget = windowObj.document.getElementById('bb-help-invoker');

src/app/public/modules/flyout/flyout.component.spec.ts

@@ -157,6 +157,8 @@ describe('Flyout component', () => {
     applicationRef.tick();
     tick();
     fixture.detectChanges();
+    flyoutService.ngOnDestroy();
+    applicationRef.tick();
     fixture.destroy();
   }));
 

src/app/public/modules/flyout/flyout.module.ts

@@ -15,6 +15,7 @@ import {
 } from '@angular/router';
 
 import {
+  SkyDynamicComponentModule,
   SkyWindowRefService
 } from '@skyux/core';
 
@@ -62,7 +63,8 @@ import {
     RouterModule,
     SkyI18nModule,
     SkyIconModule,
-    SkyFlyoutResourcesModule
+    SkyFlyoutResourcesModule,
+    SkyDynamicComponentModule
   ],
   exports: [
     SkyFlyoutComponent

src/app/public/modules/flyout/flyout.service.spec.ts

@@ -1,32 +1,33 @@
 import {
-  ApplicationRef,
-  ComponentFactoryResolver,
-  Injector
+  ApplicationRef
 } from '@angular/core';
 
 import {
   inject,
-  TestBed,
-  tick,
-  fakeAsync
+  TestBed
 } from '@angular/core/testing';
 
-import {
-  NoopAnimationsModule
-} from '@angular/platform-browser/animations';
-
 import {
   expect
 } from '@skyux-sdk/testing';
 
 import {
+  SkyDynamicComponentService,
   SkyWindowRefService
 } from '@skyux/core';
 
 import {
   SkyFlyoutAdapterService
 } from './flyout-adapter.service';
 
+import {
+  SkyFlyoutFixturesModule
+} from './fixtures/flyout-fixtures.module';
+
+import {
+  SkyFlyoutHostsTestComponent
+} from './fixtures/flyout-hosts.component.fixture';
+
 import {
   SkyFlyoutService
 } from './flyout.service';
@@ -36,107 +37,78 @@ import {
 } from './types';
 
 describe('Flyout service', () => {
+  let service: SkyFlyoutService;
+  let applicationRef: ApplicationRef;
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        NoopAnimationsModule
+        SkyFlyoutFixturesModule
       ],
       providers: [
-        SkyFlyoutService,
-        {
-          provide: SkyFlyoutAdapterService,
-          useValue: {
-            appendToBody() { },
-            removeHostElement() { }
-          }
-        },
-        {
-          provide: ApplicationRef,
-          useValue: {
-            attachView() {},
-            detachView() {}
-          }
-        },
-        Injector,
-        {
-          provide: ComponentFactoryResolver,
-          useValue: {
-            resolveComponentFactory() {
-              return {
-                create() {
-                  return {
-                    destroy() {},
-                    hostView: {
-                      rootNodes: [
-                        {}
-                      ]
-                    },
-                    instance: {
-                      messageStream: {
-                        take() {
-                          return {
-                            subscribe() { }
-                          };
-                        },
-                        next() {}
-                      },
-                      attach() {
-                        return {
-                          close() { },
-                          closed: {
-                            take() {
-                              return {
-                                subscribe() { }
-                              };
-                            }
-                          }
-                        };
-                      }
-                    }
-                  };
-                }
-              };
-            }
-          }
-        },
+        SkyFlyoutAdapterService,
         SkyWindowRefService
       ]
     });
+
+    service = TestBed.get(SkyFlyoutService);
   });
 
-  it('should only create a single host component', inject(
-    [SkyFlyoutService],
-    (service: SkyFlyoutService) => {
+  beforeEach(
+    inject(
+      [
+        ApplicationRef
+      ],
+      (
+        _applicationRef: ApplicationRef
+      ) => {
+        applicationRef = _applicationRef;
+      }
+    )
+  );
+
+  it('should only create a single host component', () => {
       const spy = spyOn(service as any, 'createHostComponent').and.callThrough();
-      service.open({} as any);
-      service.open({} as any);
+      service.open(SkyFlyoutHostsTestComponent);
+      service.open(SkyFlyoutHostsTestComponent);
       expect(spy.calls.count()).toEqual(1);
     }
-  ));
+  );
 
-  it('should return an instance with a close method', inject(
-    [SkyFlyoutService],
-    (service: SkyFlyoutService) => {
-      const flyout = service.open({} as any);
+  it('should return an instance with a close method', () => {
+      const flyout = service.open(SkyFlyoutHostsTestComponent);
       expect(typeof flyout.close).toEqual('function');
     }
-  ));
-
-  it('should expose a method to remove the flyout from the DOM', fakeAsync(inject(
-    [SkyFlyoutService, SkyFlyoutAdapterService, ApplicationRef],
-    (
-      service: SkyFlyoutService,
-      adapter: SkyFlyoutAdapterService,
-      appRef: ApplicationRef
-    ) => {
-      service.open({} as any);
-      tick();
+  );
+
+  it('should expose a method to remove the flyout from the DOM', () => {
+      spyOn(window, 'setTimeout').and.callFake((fun: Function) => {
+        fun();
+      });
+      service.open(SkyFlyoutHostsTestComponent);
+      applicationRef.tick();
       const spy = spyOn(service['host'].instance.messageStream, 'next').and.callThrough();
       service.close();
-      tick();
+      applicationRef.tick();
       expect(spy).toHaveBeenCalledWith({
         type: SkyFlyoutMessageType.Close
       });
     }
-  )));
+  );
+
+  it('should dispose of any open host if the service is destroyed', () => {
+    spyOn(window, 'setTimeout').and.callFake((fun: Function) => {
+      fun();
+    });
+    service.open(SkyFlyoutHostsTestComponent);
+    applicationRef.tick();
+    const dynamicService = TestBed.get(SkyDynamicComponentService);
+    const spy = spyOn(dynamicService, 'removeComponent').and.callThrough();
+    // Note: Calling the lifecycle function directly as there is no way to destroy the service
+    // as it would be in the wild.
+    service.ngOnDestroy();
+    applicationRef.tick();
+    expect(spy).toHaveBeenCalled();
+  }
+);
 });

src/app/public/modules/flyout/flyout.service.ts

@@ -1,10 +1,6 @@
 import {
-  ApplicationRef,
-  ComponentFactoryResolver,
   ComponentRef,
-  EmbeddedViewRef,
   Injectable,
-  Injector,
   Type,
   OnDestroy
 } from '@angular/core';
@@ -17,7 +13,8 @@ import {
 import 'rxjs/add/operator/take';
 
 import {
-  SkyWindowRefService
+  SkyWindowRefService,
+  SkyDynamicComponentService
 } from '@skyux/core';
 
 import {
@@ -47,14 +44,15 @@ export class SkyFlyoutService implements OnDestroy {
 
   constructor(
     private adapter: SkyFlyoutAdapterService,
-    private appRef: ApplicationRef,
-    private injector: Injector,
-    private resolver: ComponentFactoryResolver,
-    private windowRef: SkyWindowRefService
+    private windowRef: SkyWindowRefService,
+    private dynamicComponentService: SkyDynamicComponentService
   ) { }
 
   public ngOnDestroy(): void {
     this.removeListners();
+    if (this.host) {
+      this.removeHostComponent();
+    }
   }
 
   public open<T>(component: Type<T>, config?: SkyFlyoutConfig): SkyFlyoutInstance<T> {
@@ -85,26 +83,15 @@ export class SkyFlyoutService implements OnDestroy {
   }
 
   private createHostComponent(): ComponentRef<SkyFlyoutComponent> {
-    const componentRef = this.resolver
-      .resolveComponentFactory(SkyFlyoutComponent)
-      .create(this.injector);
-
-    const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0];
-
-    this.appRef.attachView(componentRef.hostView);
-    this.adapter.appendToBody(domElem);
-
-    return componentRef;
+    this.host = this.dynamicComponentService.createComponent(SkyFlyoutComponent);
+    return this.host;
   }
 
   private removeHostComponent() {
     if (this.host) {
-      this.appRef.detachView(this.host.hostView);
-      this.host.destroy();
+      this.dynamicComponentService.removeComponent(this.host);
       this.host = undefined;
     }
-
-    this.adapter.removeHostElement();
   }
 
   private addListeners<T>(flyout: SkyFlyoutInstance<T>): void {