fix(dropdown): add reset for multi-select

Dropdown updates (#415)
* replaced selected count with reset button count & added secondary content to list item

* Removed scss files

* removed style files

* added demo for multi select with template

* requested changes for dropdown.component.ts

* Changes for resetting all selected list items as per request in PR

* changes to getDisplayValue method

* suggested change for button closing tag

Author: cyrusfurtado

package-lock.json

@@ -63,7 +63,9 @@ storiesOf("Overflow Menu", module)
 				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 3</ibm-overflow-menu-option>
 				<ibm-overflow-menu-option href="https://www.ibm.com" (selected)="selected($event)">Option 4</ibm-overflow-menu-option>
 				<ibm-overflow-menu-option href="https://www.ibm.com" disabled="true" (selected)="selected($event)">Disabled</ibm-overflow-menu-option>
-				<ibm-overflow-menu-option href="https://www.ibm.com" type="danger" (selected)="selected($event)">Danger option</ibm-overflow-menu-option>
+				<ibm-overflow-menu-option href="https://www.ibm.com" type="danger" (selected)="selected($event)">
+					Danger option
+				</ibm-overflow-menu-option>
 			</ibm-overflow-menu>
 			<ibm-placeholder></ibm-placeholder>
 		`,

src/dialog/overflow-menu/overflow-menu.stories.ts

@@ -95,4 +95,9 @@ export class AbstractDropdownView {
 	 * In most cases this just calls `getCurrentElement().focus()`
 	 */
 	initFocus(): void {}
+
+	/**
+	 * Resets all selected items
+	 */
+	resetSelected(): void {}
 }

src/dropdown/abstract-dropdown-view.class.ts

@@ -43,15 +43,27 @@ import { DropdownService } from "./dropdown.service";
 			[ngClass]="{'a': !menuIsClosed}"
 			[attr.aria-expanded]="!menuIsClosed"
 			[attr.aria-disabled]="disabled"
-			(click)="toggleMenu()"
 			(blur)="onBlur()"
 			[disabled]="disabled">
-			<span class="bx--list-box__label">{{getDisplayValue() | async}}</span>
-			<div *ngIf="!skeleton" class="bx--list-box__menu-icon" [ngClass]="{'bx--list-box__menu-icon--open': !menuIsClosed }">
-				<svg fill-rule="evenodd" height="5" role="img" viewBox="0 0 10 5" width="10" [attr.aria-label]="menuButtonLabel">
-					<title>{{menuButtonLabel}}</title>
-					<path d="M0 0l5 4.998L10 0z"></path>
+			<span (click)="clearSelected()" *ngIf="type === 'multi' && view.getSelected() && view.getSelected().length"
+				class="bx--list-box__selection bx--list-box__selection--multi">
+				{{view.getSelected().length}}
+				&nbsp;
+				<svg class="close-tag" width="8" height="8" viewBox="0 0 10 10">
+					<path d="M6.32 5L10 8.68 8.68 10 5 6.32 1.32 10 0 8.68 3.68 5 0 1.32 1.32 0 5 3.68 8.68 0 10 1.32 6.32 5z"></path>
 				</svg>
+			</span>
+			<div class="click-container" (click)="toggleMenu()" style="width: 100%; text-align: left;">
+				<span class="bx--list-box__label">
+					{{getDisplayValue() | async}}
+				</span>
+				<div *ngIf="!skeleton" class="bx--list-box__menu-icon" [ngClass]="{'bx--list-box__menu-icon--open': !menuIsClosed }">
+					<svg fill-rule="evenodd" height="5" role="img" viewBox="0 0 10 5" width="10"
+					alt="Open menu" [attr.aria-label]="menuButtonLabel">
+						<title>{{menuButtonLabel}}</title>
+						<path d="M0 0l5 4.998L10 0z"></path>
+					</svg>
+				</div>
 			</div>
 		</button>
 		<div
@@ -226,6 +238,7 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 				this.propagateChange(this.view.getSelected());
 			} else {
 				this.closeMenu();
+				this.dropdownButton.nativeElement.focus();
 				if (event.item && event.item.selected) {
 					if (this.value) {
 						this.propagateChange(event.item[this.value]);
@@ -336,16 +349,18 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 	}
 
 	/**
-	 * Returns the display value if there is no selection, otherwise the selection will be returned.
-	 */
+     * Returns the display value if there is a selection and displayValue is set,
+     * if there is just a selection the ListItem content property will be returned,
+     * otherwise the placeholder will be returned.
+     */
 	getDisplayValue(): Observable<string> {
 		if (!this.view) {
 			return;
 		}
 		let selected = this.view.getSelected();
 		if (selected && !this.displayValue) {
 			if (this.type === "multi") {
-				return of(`${selected.length} ${this.selectedLabel}`);
+				return of(`${this.placeholder}`);
 			} else {
 				return of(selected[0].content);
 			}
@@ -547,4 +562,10 @@ export class Dropdown implements OnInit, AfterContentInit, OnDestroy {
 
 		return false;
 	}
+
+	clearSelected() {
+		this.view.resetSelected();
+		this.selected.emit([]);
+		this.propagateChange([]);
+	}
 }

src/dropdown/dropdown.component.ts

@@ -69,6 +69,45 @@ storiesOf("Dropdown", module)
 			onClose: action("Multi-select dropdown closed")
 		}
 	})))
+	.add("Multi-select with custom template", withNotes({ text: "Notes on multi select" })(() => ({
+		template: `
+		<div style="width: 300px">
+			<ng-template #customListItem let-item>
+				<input
+				class="bx--checkbox"
+				type="checkbox"
+				[checked]="item.selected"
+				[disabled]="item.disabled"
+				(click)="doClick($event, item)"
+				tabindex="-1">
+				<label class="bx--checkbox-label">
+					<span>{{item.content}}</span>
+					&nbsp;<span [hidden]="!item.other_content" class="sec-content">({{item.other_content}})</span>
+				</label>
+			</ng-template>
+			<ibm-dropdown
+				type="multi"
+				placeholder="Multi-select"
+				displayValue="Selections"
+				[disabled]="disabled"
+				(selected)="selected($event)"
+				(onClose)="onClose($event)">
+				<ibm-dropdown-list [items]="items" [listTpl]="customListItem"></ibm-dropdown-list>
+			</ibm-dropdown>
+		</div>
+	`,
+		props: {
+			disabled: boolean("disabled", false),
+			items: object("items", [
+				{ content: "one" },
+				{ content: "two", other_content: "Some secondary Content" },
+				{ content: "three", other_content: "Some more content" },
+				{ content: "four" }
+			]),
+			selected: action("Selected fired for multi-select dropdown"),
+			onClose: action("Multi-select dropdown closed")
+		}
+	})))
 	.add("With ngModel", () => ({
 		template: `
 		<div style="width: 300px">

src/dropdown/dropdown.stories.ts

@@ -25,12 +25,13 @@ export interface ListItem {
 	 * @memberof ListItem
 	 */
 	content: string;
+
 	/**
 	 * Flag for the selected state of the item.
 	 * @type {boolean}
 	 * @memberof ListItem
 	 */
-	selected: boolean;
+	selected?: boolean;
 	/**
 	 * If the item is in a disabled state.
 	 * (Note: not all lists have to support disabled states, and not all lists behave the same with disabled items)

src/dropdown/list-item.interface.ts

@@ -69,20 +69,22 @@ import { Observable, isObservable, Subscription } from "rxjs";
 				}">
 				<div
 					*ngIf="!listTpl && type === 'multi'"
-					class="bx--form-item bx--checkbox-wrapper">
+					class="bx--form-item">
 					<input
 						class="bx--checkbox"
 						type="checkbox"
 						[checked]="item.selected"
 						[disabled]="item.disabled"
 						(click)="doClick($event, item)"
 						tabindex="-1">
-					<label class="bx--checkbox-label">{{item.content}}</label>
+						<label class="bx--checkbox-label">
+							<span>{{item.content}}</span>
+						</label>
 				</div>
 				<ng-container *ngIf="!listTpl && type === 'single'">{{item.content}}</ng-container>
 				<ng-template
 					*ngIf="listTpl"
-					[ngTemplateOutletContext]="{item: item}"
+					[ngTemplateOutletContext]="{$implicit: item}"
 					[ngTemplateOutlet]="listTpl">
 				</ng-template>
 			</li>
@@ -457,4 +459,9 @@ export class DropdownList implements AbstractDropdownView, AfterViewInit, OnDest
 		element.classList.remove("bx--list-box__menu-item--highlighted");
 		element.tabIndex = -1;
 	}
+
+	resetSelected() {
+		const clearedItems = this.getListItems().map(item => Object.assign({}, item, {selected: false}));
+		this.updateList(clearedItems);
+	}
 }