Add keyboard navigation and hepler to typeahead

1 files changed, 48 insertions, 0 deletions

diff --git a/client/src/app/header/suggestion.component.ts b/client/src/app/header/suggestion.component.ts
new file mode 100644
index 000000000..75c44a583
--- /dev/null
+++ b/client/src/app/header/suggestion.component.ts
@@ -0,0 +1,48 @@
+import { Input, Component, Output, EventEmitter, OnInit } from '@angular/core'
+import { RouterLink } from '@angular/router'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { ListKeyManagerOption } from '@angular/cdk/a11y'
+
+type Result = {
+  text: string
+  type: 'channel' | 'suggestion' | 'search-channel' | 'search-instance' | 'search-global' | 'search-any'
+  routerLink?: RouterLink
+}
+
+@Component({
+  selector: 'my-suggestion',
+  templateUrl: './suggestion.component.html',
+  styleUrls: [ './suggestion.component.scss' ]
+})
+export class SuggestionComponent implements OnInit, ListKeyManagerOption {
+  @Input() result: Result
+  @Input() highlight: string
+  @Output() selected = new EventEmitter()
+
+  inAllText: string
+  inThisChannelText: string
+  inThisInstanceText: string
+
+  disabled = false
+  active = false
+
+  constructor (
+    private i18n: I18n
+  ) {
+    this.inAllText = this.i18n('In the vidiverse')
+    this.inThisChannelText = this.i18n('In this channel')
+    this.inThisInstanceText = this.i18n('In this instance')
+  }
+
+  getLabel () {
+    return this.result.text
+  }
+
+  ngOnInit () {
+    this.active = false
+  }
+
+  selectItem () {
+    this.selected.emit(this.result)
+  }
+}