make modals type-safe

it is now possible to create a modal and return a correctly typed
ComponentRef.

The BaseModal class is now also typed, allowing a correctly typed output
value.

Author: georgmu

src/modal/base-modal.class.ts

@@ -13,11 +13,11 @@ import {
 @Directive({
 	selector: "[cdsBaseModal], [ibmBaseModal]"
 })
-export class BaseModal {
+export class BaseModal<R = any> {
 	/**
 	 * Base event emitter to propagate close events
 	 */
-	@Output() close = new EventEmitter();
+	@Output() close = new EventEmitter<R>();
 
 	/**
 	 * Controls the open state of the modal
@@ -27,7 +27,7 @@ export class BaseModal {
 	/**
 	 * Default method to handle closing the modal
 	 */
-	closeModal(): void {
-		this.close.emit();
+	closeModal(value?: R): void {
+		this.close.emit(value);
 	}
 }

src/modal/base-modal.service.ts

@@ -3,10 +3,12 @@ import {
 	Injector,
 	Injectable,
 	inject,
-	EnvironmentInjector
+	EnvironmentInjector,
+	Type
 } from "@angular/core";
 import { PlaceholderService } from "carbon-components-angular/placeholder";
 import { tap, delay } from "rxjs/operators";
+import {BaseModal} from "./base-modal.class";
 
 
 /**
@@ -44,7 +46,8 @@ export class BaseModalService {
 	 * Creates and renders the modal component that is passed in.
 	 * `inputs` is an optional parameter of `data` that can be passed to the `Modal` component.
 	 */
-	create<T>(data: { component: any, inputs?: any }): ComponentRef<any> {
+	create<T extends BaseModal, I extends Record<any, unknown> = Record<string, unknown>>(
+		data: { component: Type<T>, inputs?: I }): ComponentRef<T> {
 		let defaults = { inputs: {} };
 		data = Object.assign({}, defaults, data);
 

src/placeholder/placeholder.service.ts

@@ -3,7 +3,8 @@ import {
 	ViewContainerRef,
 	Injector,
 	EnvironmentInjector,
-	inject
+	inject,
+	Type
 } from "@angular/core";
 import { Injectable } from "@angular/core";
 
@@ -35,24 +36,24 @@ export class PlaceholderService {
 	/**
 	 * Creates and returns component in the view.
 	 */
-	createComponent(
-		component: ComponentRef<any>,
+	createComponent<T>(
+		component: Type<T>,
 		injector: Injector,
 		id?: any,
 		environment: EnvironmentInjector = undefined
-	): ComponentRef<any> {
+	): ComponentRef<T> {
 		if (id) {
 			if (!this.viewContainerMap.has(id)) {
 				console.error(`No view container with id ${id} found`);
 				return;
 			}
-			return this.viewContainerMap.get(id).createComponent(component as any, { index: this.viewContainerMap.size, injector });
+			return this.viewContainerMap.get(id).createComponent(component, { index: this.viewContainerMap.size, injector });
 		}
 		if (!this.viewContainerRef) {
 			console.error("No view container defined! Likely due to a missing `cds-placeholder`");
 			return;
 		}
-		return this.viewContainerRef.createComponent(component as any,
+		return this.viewContainerRef.createComponent(component,
 			{
 				index: this.viewContainerRef.length,
 				injector,