Merge branch 'master' into table-toolbar

Author: youda97

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() {}
 }

src/dropdown/dropdown.component.ts

@@ -9,7 +9,8 @@ import {
 	ViewChild,
 	AfterContentInit,
 	HostListener,
-	OnDestroy
+	OnDestroy,
+	TemplateRef
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -66,7 +67,12 @@ import { DropdownService } from "./dropdown.service";
 					<path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path>
 				</svg>
 			</div>
-			<span class="bx--list-box__label">{{getDisplayValue() | async}}</span>
+			<span *ngIf="isRenderString()" class="bx--list-box__label">{{getDisplayStringValue() | async}}</span>
+			<ng-template
+				*ngIf="!isRenderString()"
+				[ngTemplateOutletContext]="getRenderTemplateContext()"
+				[ngTemplateOutlet]="displayValue">
+			</ng-template>
 			<ibm-icon-chevron-down16
 				*ngIf="!skeleton"
 				class="bx--list-box__menu-icon"
@@ -97,9 +103,9 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 */
 	@Input() placeholder = "";
 	/**
-	 * The selected value from the `Dropdown`.
+	 * The selected value from the `Dropdown`. Can be a string or template.
 	 */
-	@Input() displayValue = "";
+	@Input() displayValue: string | TemplateRef<any> = "";
 	/**
 	 * Size to render the dropdown field.
 	 */
@@ -358,23 +364,41 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	 * if there is just a selection the ListItem content property will be returned,
 	 * otherwise the placeholder will be returned.
 	 */
-	getDisplayValue(): Observable<string> {
+	getDisplayStringValue(): Observable<string> {
 		if (!this.view) {
 			return;
 		}
 		let selected = this.view.getSelected();
-		if (selected && !this.displayValue) {
+		if (selected && (!this.displayValue || !this.isRenderString())) {
 			if (this.type === "multi") {
 				return of(this.placeholder);
 			} else {
 				return of(selected[0].content);
 			}
-		} else if (selected) {
-			return of(this.displayValue);
+		} else if (selected && this.isRenderString()) {
+			return of(this.displayValue as string);
 		}
 		return of(this.placeholder);
 	}
 
+	isRenderString(): boolean {
+		return typeof this.displayValue === "string";
+	}
+
+	getRenderTemplateContext() {
+		if (!this.view) {
+			return;
+		}
+		let selected = this.view.getSelected();
+		if (this.type === "multi") {
+			return {items: selected};
+		} else if (selected && selected.length > 0) {
+			return {item: selected[0]}; // this is to be compatible with the dropdown-list template
+		} else {
+			return {};
+		}
+	}
+
 	getSelectedCount(): number {
 		if (this.view.getSelected()) {
 			return this.view.getSelected().length;

src/dropdown/dropdown.stories.ts

@@ -118,6 +118,43 @@ storiesOf("Dropdown", module)
 			theme: select("theme", ["dark", "light"], "dark")
 		}
 	}))
+	.add("With Template", () => ({
+		template: `
+		<div style="width: 300px;">
+			<ibm-dropdown
+				[theme]="theme"
+				placeholder="Select"
+				[displayValue]="dropdownRenderer"
+				[disabled]="disabled"
+				(selected)="selected($event)"
+				(onClose)="onClose($event)">
+				<ibm-dropdown-list [items]="items" [listTpl]="dropdownRenderer"></ibm-dropdown-list>
+			</ibm-dropdown>
+			<ng-template #dropdownRenderer let-item="item">
+				<div *ngIf="item && item.content" style="font-size: 14px;">
+					<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
+							width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" style="will-change: transform;">
+						<path d="M9.3 3.7l3.8 3.8H1v1h12.1l-3.8 3.8.7.7 5-5-5-5z"></path>
+					</svg>
+					&nbsp;{{item.content}}
+				</div>
+			</ng-template>
+		</div>
+	`,
+		props: {
+			disabled: boolean("disabled", false),
+			items: object("items", [
+				{ content: "one", selected: true },
+				{ content: "two" },
+				{ content: "three" },
+				{ content: "four" }
+			]),
+			selected: action("Selected fired for dropdown"),
+			onClose: action("Dropdown closed"),
+			theme: select("theme", ["dark", "light"], "dark")
+		}
+
+	}))
 	.add("Skeleton", () => ({
 		template: `
 		<div style="width: 300px">