Merge pull request #511 from cal-smith/master

fix(modal): add overlaySelected handler to alert-modal

Author: zvonimirfras

package-lock.json

@@ -85,7 +85,7 @@
     "@carbon/icons-angular": "10.1.0",
     "@commitlint/cli": "7.5.2",
     "@commitlint/config-conventional": "7.5.0",
-    "@compodoc/compodoc": "1.1.9",
+    "@compodoc/compodoc": "1.1.7",
     "@storybook/addon-actions": "5.0.6",
     "@storybook/addon-knobs": "5.0.6",
     "@storybook/addon-links": "5.0.6",

package.json

@@ -48,8 +48,8 @@ import { BaseModal } from "./base-modal.class";
 @Component({
 	selector: "ibm-alert-modal",
 	template: `
-		<ibm-modal [theme]="modalType" [modalLabel]="modalTitle">
-			<ibm-modal-header (closeSelect)="closeModal()">
+		<ibm-modal [theme]="modalType" [modalLabel]="modalTitle" (overlaySelected)="dismissModal()">
+			<ibm-modal-header (closeSelect)="dismissModal()">
 				<p class="bx--modal-header__label bx--type-delta">{{modalLabel}}</p>
       			<p class="bx--modal-header__heading bx--type-beta">{{modalTitle}}</p>
 			</ibm-modal-header>
@@ -59,7 +59,7 @@ import { BaseModal } from "./base-modal.class";
 			<ibm-modal-footer *ngIf="buttons.length > 0">
 				<ng-container *ngFor="let button of buttons; let i = index">
 					<button
-						ibmButton="{{button.type}}"
+						[ibmButton]="button.type"
 						(click)="buttonClicked(i)"
 						[id]="button.id"
 						[attr.modal-primary-focus]="(button.type.indexOf('primary') !== -1 ? '' : null)">
@@ -73,15 +73,14 @@ import { BaseModal } from "./base-modal.class";
 export class AlertModal extends BaseModal {
 	/**
 	 * Creates an instance of `AlertModal`.
-	 * @param {ModalService} modalService
-	 * @memberof AlertModal
 	 */
 	constructor(
 		@Inject("modalType") public modalType = "default",
 		@Inject("modalLabel") public modalLabel: string,
 		@Inject("modalTitle") public modalTitle: string,
 		@Inject("modalContent") public modalContent: string,
-		@Inject("buttons") public buttons = []
+		@Inject("buttons") public buttons = [],
+		@Inject("close") public onClose: Function
 	) {
 		super();
 		for (let i = 0; i < this.buttons.length; i++) {
@@ -103,4 +102,11 @@ export class AlertModal extends BaseModal {
 
 		this.closeModal();
 	}
+
+	dismissModal() {
+		if (this.onClose && this.onClose() === false) {
+			return;
+		}
+		this.closeModal();
+	}
 }

src/modal/alert-modal.component.ts

@@ -40,6 +40,10 @@ export interface AlertModalData {
 	 * Array of `ModalButton`s
 	 */
 	buttons?: Array<ModalButton>;
+	/**
+	 * Callback for non-specific close events. `return false;` to prevent the modal from closing
+	 */
+	close?: Function;
 }
 
 export enum ModalButtonType {

src/modal/alert-modal.interface.ts

@@ -1,7 +1,7 @@
 import { Output, EventEmitter } from "@angular/core";
 
 /**
- * Extend `BaseModal` in your custom modal implementations to ensure consistent close behaviour.
+ * Extend `BaseModal` in your custom modal implementations to ensure consistent close behavior.
  *
  * `ModalService` depends on the `close` event to correctly clean up the component.
  */

src/modal/base-modal.class.ts

@@ -24,60 +24,60 @@ import { cycleTabs, getFocusElementList } from "./../common/tab.service";
 /**
  * Component to create modals for presenting content.
  *
- * Using a modal in your application requires `ibm-modal-placeholder` which would generally be
+ * Using a modal in your application requires `ibm-placeholder` which would generally be
  * placed near the end of your app component template (app.component.ts or app.component.html) as:
  *
- * ```html
- * <ibm-modal-placeholder></ibm-modal-placeholder>
- * ```
+```html
+<ibm-modal-placeholder></ibm-modal-placeholder>
+```
  *
  * A more complete example for `Modal` is given as follows:
  *
  * Example modal definition:
  *
- * ```typescript
- * \@Modal()
- * \@Component({
- * 	selector: "app-sample-modal",
- * 	template: `
- *		<ibm-modal size="xl">
- * 			<ibm-modal-header (closeSelect)="closeModal()">Header text</ibm-modal-header>
- * 			<section class="modal-body">
- * 			<h1>Sample modal works.</h1>
- * 			<button class="btn--icon-link" nPopover="Hello there" title="Popover title" placement="right" appendInline="true">
- * 				<ibm-icon icon="info" size="sm"></ibm-icon>
- * 			</button>
- * 			{{modalText}}
- * 			</section>
- * 			<ibm-modal-footer><button ibmButton="primary" (click)="closeModal()">Close</button></ibm-modal-footer>
- * 		</ibm-modal>`,
- * 	styleUrls: ["./sample-modal.component.scss"]
- * })
- * export class SampleModal extends BaseModal {
- * 	modalText: string;
- * 	constructor(protected injector: Injector) {
- * 		super();
- * 		this.modalText = this.injector.get("modalText");
- * 	}
- * }
- * ```
+```typescript
+@Component({
+	selector: "app-sample-modal",
+	template: `
+				<ibm-modal size="xl" (overlaySelected)="closeModal()">
+					<ibm-modal-header (closeSelect)="closeModal()">Header text</ibm-modal-header>
+						<section class="modal-body">
+							<h1>Sample modal works.</h1>
+							<button class="btn--icon-link" nPopover="Hello there" title="Popover title" placement="right" appendInline="true">
+								<ibm-icon icon="info" size="sm"></ibm-icon>
+							</button>
+							{{modalText}}
+						</section>
+					<ibm-modal-footer><button ibmButton="primary" (click)="closeModal()">Close</button></ibm-modal-footer>
+				</ibm-modal>`,
+	styleUrls: ["./sample-modal.component.scss"]
+})
+export class SampleModal extends BaseModal {
+	modalText: string;
+	constructor(protected injector: Injector) {
+		super();
+		this.modalText = this.injector.get("modalText");
+	}
+}
+```
  *
  * Example of opening the modal:
  *
- * ```typescript
- * \@Component({
- *  selector: "app-modal-demo",
- *  template: `
- *   <button ibmButton="primary" (click)="openModal('drill')">Drill-down modal</button>
- *   <ibm-modal-placeholder></ibm-modal-placeholder>`
- * })
- * export class ModalDemo {
- * 	openModal() {
- * 		this.modalService.create({component: SampleModal, inputs: {modalText: "Hello universe."}});
- * 	}
- * }
- * ```
+```typescript
+@Component({
+	selector: "app-modal-demo",
+	template: `
+				<button ibmButton="primary" (click)="openModal('drill')">Drill-down modal</button>
+				<ibm-placeholder></ibm-placeholder>`
+})
+export class ModalDemo {
+	openModal() {
+		this.modalService.create({component: SampleModal, inputs: {modalText: "Hello universe."}});
+	}
+}
+```
  *
+ * <example-url>https://angular.carbondesignsystem.com/iframe.html?id=modal--basic</example-url>
  */
 @Component({
 	selector: "ibm-modal",
@@ -124,7 +124,7 @@ export class Modal implements AfterViewInit, OnInit, OnDestroy {
 	@Input() modalLabel = "default";
 
 	/**
-	 * Emits event when click occurs within `n-overlay` element. This is to track click events occuring outside bounds of the `Modal` object.
+	 * Emits event when click occurs within `n-overlay` element. This is to track click events occurring outside bounds of the `Modal` object.
 	 */
 	@Output() overlaySelected = new EventEmitter();
 	/**
@@ -142,7 +142,7 @@ export class Modal implements AfterViewInit, OnInit, OnDestroy {
 	modalState: "in" | "out" = "out";
 
 	/**
-	 * An element should have 'data-modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.
+	 * An element should have 'modal-primary-focus' as an attribute to receive initial focus within the `Modal` component.
 	 */
 	selectorPrimaryFocus = "[modal-primary-focus]";
 

src/modal/modal.component.ts

@@ -22,8 +22,6 @@ import { PlaceholderService } from "./../placeholder/placeholder.module";
  * 	destroy(index: number = -1): void {}
  * }
  * ```
- * @export
- * @class ModalService
  */
 @Injectable()
 export class ModalService {
@@ -32,18 +30,12 @@ export class ModalService {
 
 	/**
 	 * Creates an instance of `ModalService`.
-	 * @param {ComponentFactoryResolver} resolver
-	 * @memberof ModalService
 	 */
 	constructor(public resolver: ComponentFactoryResolver, public placeholderService: PlaceholderService) {}
 
 	/**
 	 * 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.
-	 * @template T
-	 * @param {{component: any, inputs?: any}} data
-	 * @returns {ComponentRef<any>}
-	 * @memberof ModalService
 	 */
 	create<T>(data: {component: any, inputs?: any}): ComponentRef<any> {
 		let defaults = {inputs: {}};
@@ -88,8 +80,6 @@ export class ModalService {
 	 * 		click: clickFunction,
 	 * }
 	 * ```
-	 * @returns {ComponentRef<any>}
-	 * @memberof ModalService
 	 */
 	show(data: AlertModalData) {
 		for (let key of Object.keys(data)) {
@@ -108,18 +98,15 @@ export class ModalService {
 				modalLabel: data.label || data.modalLabel,
 				modalTitle: data.title || data.modalTitle,
 				modalContent: data.content || data.modalContent,
-				buttons: data.buttons || []
+				buttons: data.buttons || [],
+				close: data.close || (() => {})
 			}
 		});
 	}
 
 	/**
 	 * Destroys the modal on the supplied index.
 	 * When called without parameters it destroys the most recently created/top most modal.
-	 *
-	 * @param {any} [index=-1]
-	 * @returns
-	 * @memberof ModalService
 	 */
 	destroy(index = -1) {
 		// return if nothing to destroy because it's already destroyed

src/modal/modal.service.ts

@@ -12,7 +12,7 @@ import { BaseModal } from "./base-modal.class";
 @Component({
 	selector: "app-sample-modal",
 	template: `
-		<ibm-modal>
+		<ibm-modal (overlaySelected)="closeModal()">
 			<ibm-modal-header (closeSelect)="closeModal()">Header label</ibm-modal-header>
 			<section class="bx--modal-content">
 				<h1>Sample modal works.</h1>