Add keyboard navigation and hepler to typeahead

1 files changed, 31 insertions, 0 deletions

diff --git a/client/src/app/header/suggestions.component.ts b/client/src/app/header/suggestions.component.ts
new file mode 100644
index 000000000..122c09388
--- /dev/null
+++ b/client/src/app/header/suggestions.component.ts
@@ -0,0 +1,31 @@
+import { Input, QueryList, Component, Output, AfterViewInit, EventEmitter, ViewChildren } from '@angular/core'
+import { SuggestionComponent } from './suggestion.component'
+
+@Component({
+  selector: 'my-suggestions',
+  template: `
+    <ul role="listbox" class="p-0 m-0">
+      <li *ngFor="let result of results; let i = index" class="d-flex flex-justify-start flex-items-center p-0 f5"
+          role="option" aria-selected="true" (mouseenter)="hoverItem(i)">
+        <my-suggestion [result]="result" [highlight]="highlight"></my-suggestion>
+      </li>
+    </ul>
+  `
+})
+export class SuggestionsComponent implements AfterViewInit {
+  @Input() results: any[]
+  @Input() highlight: string
+  @ViewChildren(SuggestionComponent) listItems: QueryList<SuggestionComponent>
+  @Output() init = new EventEmitter()
+
+  ngAfterViewInit () {
+    this.init.emit({ items: this.listItems })
+    this.listItems.changes.subscribe(
+      val => this.init.emit({ items: this.listItems })
+    )
+  }
+
+  hoverItem (index: number) {
+    this.init.emit({ items: this.listItems, index: index })
+  }
+}