feat(search): Add toolbar search

Author: youda97

src/search/search.component.ts

@@ -3,7 +3,9 @@ import {
 	Input,
 	EventEmitter,
 	Output,
-	HostBinding
+	HostBinding,
+	ElementRef,
+	HostListener
 } from "@angular/core";
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
 import { I18n } from "../i18n/i18n.module";
@@ -42,7 +44,9 @@ export class SearchChange {
 				'bx--search--sm': size === 'sm',
 				'bx--search--lg': size === 'lg',
 				'bx--search--light': theme === 'light',
-				'bx--skeleton': skeleton
+				'bx--skeleton': skeleton,
+				'bx--toolbar-search': toolbar,
+				'bx--toolbar-search--active': toolbar && active
 			}"
 			role="search">
 			<label class="bx--label" [for]="id">{{label}}</label>
@@ -59,15 +63,25 @@ export class SearchChange {
 					[disabled]="disabled"
 					[required]="required"
 					(input)="onSearch($event.target.value)"/>
-				<svg
-					class="bx--search-magnifier"
-					width="16"
-					height="16"
-					viewBox="0 0 16 16">
-					<path
-						d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
-						fill-rule="nonzero"/>
-				</svg>
+					<button
+						*ngIf="toolbar; else svg"
+						class="bx--toolbar-search__btn"
+						aria-label="Toolbar search"
+						tabindex="0"
+						(click)="openSearch($event)">
+						<ng-template [ngTemplateOutlet]="svg"></ng-template>
+					</button>
+					<ng-template #svg>
+						<svg
+							class="bx--search-magnifier"
+							width="16"
+							height="16"
+							viewBox="0 0 16 16">
+							<path
+								d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
+								fill-rule="nonzero"/>
+						</svg>
+					</ng-template>
 			</ng-template>
 
 			<button
@@ -119,6 +133,10 @@ export class Search implements ControlValueAccessor {
 	 * Set to `true` for a disabled search input.
 	 */
 	@Input() disabled = false;
+	/**
+	 * Set to `true` for a toolbar search component.
+	 */
+	@Input() toolbar = false;
 	/**
 	 * Set to `true` for a loading search component.
 	 */
@@ -156,12 +174,14 @@ export class Search implements ControlValueAccessor {
 	 */
 	@Output() change = new EventEmitter<SearchChange>();
 
+	active = false;
+
 	/**
 	 * Creates an instance of `Search`.
 	 * @param i18n The i18n translations.
 	 * @memberof Search
 	 */
-	constructor(protected i18n: I18n) {
+	constructor(protected elementRef: ElementRef, protected i18n: I18n) {
 		Search.searchCount++;
 	}
 
@@ -230,4 +250,27 @@ export class Search implements ControlValueAccessor {
 		this.change.emit(event);
 		this.propagateChange(this.value);
 	}
+
+	openSearch(event) {
+		this.active = true;
+		this.elementRef.nativeElement.querySelector(".bx--search-input").focus();
+	}
+
+	@HostListener("keydown", ["$event"])
+	keyDown(event: KeyboardEvent) {
+		if (this.toolbar) {
+			if (event.key === "Escape") {
+				this.active = false;
+			} else if (event.key === "Enter") {
+				this.openSearch(event);
+			}
+		}
+	}
+
+	@HostListener("focusout", ["$event"])
+	focusOut(event) {
+		if (this.toolbar && event.relatedTarget === null) {
+			this.active = false;
+		}
+	}
 }

src/search/search.stories.ts

@@ -20,6 +20,13 @@ storiesOf("Search", module).addDecorator(
 			placeholder: text("placeholder", "Search")
 		}
 	}))
+	.add("Toolbar search", () => ({
+		template: `
+		<div class="bx--toolbar">
+			<ibm-search placeholder="search" size="sm" toolbar="true"></ibm-search>
+		</div>
+		`
+	}))
 	.add("Skeleton", () => ({
 		template: `
 		<div style="width: 200px;">