Merge pull request #162 from cal-smith/modal

fix(modal): refactor modalService.show and add interfaces

Author: zvonimirfras

src/modal/alert-modal.interface.ts

@@ -0,0 +1,53 @@
+export interface AlertModalData {
+	/**
+	 * Use of `modalType` is deprecated, use `type` instead
+	 */
+	modalType?: string;
+	/**
+	 * type of the modal
+	 */
+	type?: "default" | "danger";
+	/**
+	 * Use of `modalLabel` is deprecated, use `label` instead
+	 */
+	modalLabel?: string;
+	/**
+	 * Additional label shown over the modal
+	 */
+	label?: string;
+	/**
+	 * Use of `modalTitle` is deprecated, use `title` instead
+	 */
+	modalTitle?: string;
+	/**
+	 * Primary title for the modal
+	 */
+	title?: string;
+	/**
+	 * Use of `modalContent` is deprecated, use `content` instead
+	 */
+	modalContent?: string;
+	/**
+	 * Content for the modal body, could include HTML tags
+	 */
+	content?: string;
+	/**
+	 * Array of `ModalButton`s
+	 */
+	buttons?: Array<ModalButton>;
+}
+
+export interface ModalButton {
+	/**
+	 * Display value of the button
+	 */
+	text: string;
+	/**
+	 * Button type
+	 */
+	type: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary" = "primary";
+	/**
+	 * Callback for the button `click` event
+	 */
+	click: function;
+}

src/modal/modal.service.ts

@@ -10,6 +10,7 @@ import { ModalPlaceholderService } from "./modal-placeholder.service";
 import { ReplaySubject } from "rxjs";
 import { Injectable } from "@angular/core";
 import { AlertModalComponent } from "./alert-modal.component";
+import { AlertModalData } from "./alert-modal.interface";
 
 
 /**
@@ -86,14 +87,14 @@ export class ModalService {
 	 * @returns {ComponentRef<any>}
 	 * @memberof ModalService
 	 */
-	show(data: {modalType?: string, modalLabel?: string, modalTitle?: string, modalContent?: string, buttons?: []}) {
+	show(data: AlertModalData) {
 		return this.create({
 			component: AlertModalComponent,
 			inputs: {
-				modalType: data.modalType,
-				modalLabel: data.modalLabel,
-				modalTitle: data.modalTitle,
-				modalContent: data.modalContent,
+				modalType: data.type || data.modalType,
+				modalLabel: data.label || data.modalLabel,
+				modalTitle: data.title || data.modalTitle,
+				modalContent: data.content || data.modalContent,
 				buttons: data.buttons || []
 			}
 		});