Merge

Author: youda97

package-lock.json

@@ -1,13 +1,13 @@
 import {
 	Component,
 	OnInit,
-	Injector,
 	ViewContainerRef,
 	ViewChild
 } from "@angular/core";
-import { DialogPlaceholderService } from "./dialog-placeholder.service";
+import { PlaceholderService } from "./../placeholder/placeholder.module";
 
 /**
+ * Deprecated as of v2.0, will be removed with v3.0
  * Using a dialog (popover, tooltip, etc) with appendToBody="true" in your application
  * requires *this* component (`n-dialog-placeholder`).
  * It would generally be placed near the end of your app component template
@@ -26,9 +26,7 @@ import { DialogPlaceholderService } from "./dialog-placeholder.service";
  * <ibm-dialog-placeholder></ibm-dialog-placeholder>
  * ```
  *
- * @export
- * @class DialogPlaceholder
- * @implements {OnInit}
+ * @deprecated
  */
 @Component({
 	selector: "ibm-dialog-placeholder",
@@ -37,23 +35,19 @@ import { DialogPlaceholderService } from "./dialog-placeholder.service";
 export class DialogPlaceholder implements OnInit {
 	/**
 	 * Maintains a reference to the view DOM element of the `DialogPlaceholder`.
-	 * @type {ViewContainerRef}
-	 * @memberof DialogPlaceholder
 	 */
 	@ViewChild("dialogPlaceholder", { read: ViewContainerRef }) viewContainerRef: ViewContainerRef;
 
 	/**
 	 * Creates an instance of `DialogPlaceholder`.
-	 * @param {DialogPlaceholderService} dialogPlaceholderService
-	 * @memberof DialogPlaceholder
 	 */
-	constructor(public dialogPlaceholderService: DialogPlaceholderService) { }
+	constructor(public placeholderService: PlaceholderService) { }
 
 	/**
-	 * Initializes the component using `ModalService`.
-	 * @memberof DialogPlaceholder
+	 * Initializes the component using `PlaceholderService`.
 	 */
-	ngOnInit(): void {
-		this.dialogPlaceholderService.registerViewContainerRef(this.viewContainerRef);
+	ngOnInit() {
+		console.warn("`ibm-dialog-placeholder` has been deprecated in favour of `ibm-placeholder`");
+		this.placeholderService.registerViewContainerRef(this.viewContainerRef);
 	}
 }

src/dialog/dialog-placeholder.component.ts

@@ -1,11 +1,10 @@
 // modules
-import { NgModule, Optional, SkipSelf } from "@angular/core";
+import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
 import { StaticIconModule } from "./../icon/static-icon.module";
 
 // imports
 import { DialogService } from "./dialog.service";
-import { DialogPlaceholderService } from "./dialog-placeholder.service";
 import { Dialog } from "./dialog.component";
 import { DialogDirective } from "./dialog.directive";
 import { DialogPlaceholder } from "./dialog-placeholder.component";
@@ -19,10 +18,10 @@ import { OverflowMenuPane } from "./overflow-menu/overflow-menu-pane.component";
 import { OverflowMenuDirective } from "./overflow-menu/overflow-menu.directive";
 import { OverflowMenuOption } from "./overflow-menu/overflow-menu-option.component";
 import { I18nModule } from "./../i18n/i18n.module";
+import { PlaceholderModule } from "./../placeholder/placeholder.module";
 
 // exports
 export { DialogService } from "./dialog.service";
-export { DialogPlaceholderService } from "./dialog-placeholder.service";
 export { Dialog } from "./dialog.component";
 export { DialogDirective } from "./dialog.directive";
 export { DialogPlaceholder } from "./dialog-placeholder.component";
@@ -36,18 +35,6 @@ export { OverflowMenuPane } from "./overflow-menu/overflow-menu-pane.component";
 export { OverflowMenuDirective } from "./overflow-menu/overflow-menu.directive";
 export { OverflowMenuOption } from "./overflow-menu/overflow-menu-option.component";
 
-// either provides a new instance of DialogPlaceholderService, or returns the parent
-export function DIALOG_PLACEHOLDER_SERVICE_PROVIDER_FACTORY(parentService: DialogPlaceholderService) {
-	return parentService || new DialogPlaceholderService();
-}
-
-// placholder service *must* be a singleton to ensure the placeholder viewref is accessible globally
-export const DIALOG_PLACEHOLDER_SERVICE_PROVIDER = {
-	provide: DialogPlaceholderService,
-	deps: [[new Optional(), new SkipSelf(), DialogPlaceholderService]],
-	useFactory: DIALOG_PLACEHOLDER_SERVICE_PROVIDER_FACTORY
-};
-
 @NgModule({
 	declarations: [
 		Dialog,
@@ -73,15 +60,17 @@ export const DIALOG_PLACEHOLDER_SERVICE_PROVIDER = {
 		OverflowMenuOption,
 		DialogPlaceholder
 	],
-	providers: [
-		DialogService,
-		DIALOG_PLACEHOLDER_SERVICE_PROVIDER
-	],
+	providers: [ DialogService ],
 	entryComponents: [
 		Dialog,
 		Tooltip,
 		OverflowMenuPane
 	],
-	imports: [CommonModule, StaticIconModule, I18nModule]
+	imports: [
+		CommonModule,
+		StaticIconModule,
+		I18nModule,
+		PlaceholderModule
+	]
 })
 export class DialogModule {}

src/dialog/dialog-placeholder.service.ts

@@ -9,7 +9,7 @@ import {
 } from "@angular/core";
 import { Subscription } from "rxjs";
 import { DialogConfig } from "./dialog-config.interface";
-import { DialogPlaceholderService } from "./dialog-placeholder.service";
+import { PlaceholderService } from "./../placeholder/placeholder.module";
 
 /**
  * `Dialog` object to be injected into other components.
@@ -67,7 +67,7 @@ export class DialogService {
 	constructor(
 		protected componentFactoryResolver: ComponentFactoryResolver,
 		protected injector: Injector,
-		protected dialogPlaceholderService: DialogPlaceholderService
+		protected placeholderService: PlaceholderService
 	) {}
 
 	/**
@@ -103,21 +103,13 @@ export class DialogService {
 	 */
 	open(viewContainer: ViewContainerRef, dialogConfig: DialogConfig) {
 		if (!this.dialogRef) {
-			// holder for either the provided view, or the view from DialogPlaceholderService
-			let view = viewContainer;
-			if (dialogConfig.appendToBody && this.dialogPlaceholderService.viewContainerRef) {
-				view = this.dialogPlaceholderService.viewContainerRef;
-				// add our component to the view
-				this.dialogRef = view.createComponent(this.componentFactory, 0, this.injector);
-			} else if (dialogConfig.appendToBody && !this.dialogPlaceholderService.viewContainerRef) {
-				// fallback to the old insertion method if the viewref doesn't exist
-				this.dialogRef = view.createComponent(this.componentFactory, 0, this.injector);
-				setTimeout(() => {
-					window.document.querySelector("body").appendChild(this.dialogRef.location.nativeElement);
-				});
+			// holder for either the provided view, or the view from Placeholder
+			if (dialogConfig.appendToBody) {
+				// add our component to the placeholder
+				this.dialogRef = this.placeholderService.createComponent(this.componentFactory, this.injector);
 			} else {
 				// add our component to the view
-				this.dialogRef = view.createComponent(this.componentFactory, 0, this.injector);
+				this.dialogRef = viewContainer.createComponent(this.componentFactory, 0, this.injector);
 			}
 
 			// initialize some extra options
@@ -128,7 +120,7 @@ export class DialogService {
 			this.isOpen = true;
 
 			this.dialogSubscription = this.onClose.subscribe(() => {
-				this.close(view);
+				this.close(viewContainer);
 			});
 
 			this.dialogRef.instance.elementRef.nativeElement.focus();
@@ -148,9 +140,8 @@ export class DialogService {
 
 		if (this.dialogRef) {
 			let elementToFocus = this.dialogRef.instance.dialogConfig["previouslyFocusedElement"];
-			if (this.dialogRef.instance.dialogConfig.appendToBody && this.dialogPlaceholderService.viewContainerRef) {
-				const vcRef = this.dialogPlaceholderService.viewContainerRef;
-				vcRef.remove(vcRef.indexOf(this.dialogRef.hostView));
+			if (this.dialogRef.instance.dialogConfig.appendToBody) {
+				this.placeholderService.destroyComponent(this.dialogRef);
 			} else {
 				viewContainer.remove(viewContainer.indexOf(this.dialogRef.hostView));
 			}