fix(dialog): use mouseleave by default

Author: cal-smith

src/dialog/dialog-config.interface.ts

@@ -14,9 +14,12 @@ export interface DialogConfig {
 	content: string | TemplateRef<any>;
 	/**
 	 * Parameter for triggering `Dialog` display.
-	 * With the release of v2.0 the type will just be "click" or "hover".
 	 */
 	trigger: "click" | "hover" | "mouseenter";
+	/**
+	 * Parameter for triggering the `Dialog` close event.
+	 */
+	closeTrigger: "mouseout" | "mouseleave";
 	/**
 	 * Parameter defining the placement in which the `Dialog` appears.
 	 * @type {Placement}

src/dialog/dialog.directive.ts

@@ -36,31 +36,35 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	static dialogCounter = 0;
 	/**
 	 * Title for the dialog
-	 * @type {string}
 	 */
 	@Input() title = "";
 	/**
 	 * Dialog body content.
-	 * @type {(string | TemplateRef<any>)}
 	 */
 	@Input() ibmDialog: string | TemplateRef<any>;
 	/**
 	 * Defines how the Dialog is triggered.(Hover and click behave the same on mobile - both respond to a single tap)
-	 * @type {("click" | "hover" | "mouseenter")}
 	 */
 	@Input() trigger: "click" | "hover" | "mouseenter" = "click";
+	/**
+	 * Defines how the Dialog close event is triggered.
+	 *
+	 * [See here](https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event)
+	 * for more on the difference between `mouseleave` and `mouseout`.
+	 *
+	 * Defaults to `click` when `trigger` is set to `click`.
+	 */
+	@Input() closeTrigger: "mouseout" | "mouseleave" = "mouseleave";
 	/**
 	 * Placement of the dialog, usually relative to the element the directive is on.
 	 */
 	@Input() placement = "left";
 	/**
 	 * Class to add to the dialog container
-	 * @type {string}
 	 */
 	@Input() wrapperClass: string;
 	/**
 	 * Spacing between the dialog and it's triggering element
-	 * @type {number}
 	 */
 	@Input() gap = 0;
 	/**
@@ -117,7 +121,6 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 
 	/**
 	 * Overrides 'touchstart' event to trigger a toggle on the Dialog.
-	 * @param {any} evt
 	 */
 	@HostListener("touchstart", ["$event"])
 	onTouchStart(evt) {
@@ -135,6 +138,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 			parentRef: this.elementRef,
 			gap: this.gap,
 			trigger: this.trigger,
+			closeTrigger: this.closeTrigger,
 			appendInline: this.appendInline,
 			wrapperClass: this.wrapperClass,
 			data: this.data
@@ -160,7 +164,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 		// bind events for hovering or clicking the host
 		if (this.trigger === "hover" || this.trigger === "mouseenter") {
 			fromEvent(this.elementRef.nativeElement, "mouseenter").subscribe(() => this.toggle());
-			fromEvent(this.elementRef.nativeElement, "mouseout").subscribe(() => this.close());
+			fromEvent(this.elementRef.nativeElement, this.closeTrigger).subscribe(() => this.close());
 			fromEvent(this.elementRef.nativeElement, "focus").subscribe(() => this.open());
 			fromEvent(this.elementRef.nativeElement, "blur").subscribe(() => this.close());
 		} else {
@@ -231,7 +235,6 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	/**
 	 * Empty method for child classes to override and specify additional init steps.
 	 * Run after DialogDirective completes it's ngOnInit.
-	 * @protected
 	 */
 	protected onDialogInit() {}
 }