[CL-161] Update bit-search support autofocus (#7272)

appAutofocus currently doesn't work on the bit-search component. This PR resolves this issue by introducing a FocusableElement interface components can implement, which is respected by the autofocus directive.

libs/components/src/search/search.component.html

@@ -8,6 +8,7 @@
     <i class="bwi bwi-search bwi-fw tw-text-muted"></i>
   </label>
   <input
+    #input
     bitInput
     type="search"
     [id]="id"

libs/components/src/search/search.component.ts

@@ -1,6 +1,8 @@
-import { Component, Input } from "@angular/core";
+import { Component, ElementRef, Input, ViewChild } from "@angular/core";
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
+import { FocusableElement } from "../input/autofocus.directive";
+
 let nextId = 0;
 
 @Component({
@@ -12,18 +14,28 @@ let nextId = 0;
       multi: true,
       useExisting: SearchComponent,
     },
+    {
+      provide: FocusableElement,
+      useExisting: SearchComponent,
+    },
   ],
 })
-export class SearchComponent implements ControlValueAccessor {
+export class SearchComponent implements ControlValueAccessor, FocusableElement {
   private notifyOnChange: (v: string) => void;
   private notifyOnTouch: () => void;
 
+  @ViewChild("input") private input: ElementRef<HTMLInputElement>;
+
   protected id = `search-id-${nextId++}`;
   protected searchText: string;
 
   @Input() disabled: boolean;
   @Input() placeholder: string;
 
+  focus() {
+    this.input.nativeElement.focus();
+  }
+
   onChange(searchText: string) {
     if (this.notifyOnChange != undefined) {
       this.notifyOnChange(searchText);