From 36b2d8b6b2f3d960f8f42c12edb002d14f5f7f56 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Mon, 15 Jan 2024 12:10:31 +0100
Subject: [PATCH] [PM-5345] Update vault-search to use bit-search (#7273)

Migrate vault search to use the bit-search component.
---
 .../components/vault-filter.component.html    | 20 +++++++++----------
 .../shared/vault-filter-shared.module.ts      |  6 ++++--
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html b/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html
index e115c629748..d2799b0bfa3 100644
--- a/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.html
@@ -16,16 +16,16 @@
       </a>
     </div>
     <div class="card-body">
-      <input
-        type="search"
-        placeholder="{{ searchPlaceholder | i18n }}"
-        id="search"
-        class="form-control"
-        [ngModel]="searchText"
-        (ngModelChange)="onSearchTextChanged($event)"
-        autocomplete="off"
-        appAutofocus
-      />
+      <div class="tw-mb-4">
+        <bit-search
+          id="search"
+          placeholder="{{ searchPlaceholder | i18n }}"
+          [(ngModel)]="searchText"
+          (ngModelChange)="onSearchTextChanged($event)"
+          autocomplete="off"
+          appAutofocus
+        />
+      </div>
       <ng-container *ngFor="let f of filtersList">
         <div class="filter">
           <app-filter-section [activeFilter]="activeFilter" [section]="f"> </app-filter-section>
diff --git a/apps/web/src/app/vault/individual-vault/vault-filter/shared/vault-filter-shared.module.ts b/apps/web/src/app/vault/individual-vault/vault-filter/shared/vault-filter-shared.module.ts
index e3fddb1824e..c8becac8ef5 100644
--- a/apps/web/src/app/vault/individual-vault/vault-filter/shared/vault-filter-shared.module.ts
+++ b/apps/web/src/app/vault/individual-vault/vault-filter/shared/vault-filter-shared.module.ts
@@ -1,12 +1,14 @@
 import { NgModule } from "@angular/core";
 
+import { SearchModule } from "@bitwarden/components";
+
 import { SharedModule } from "../../../../shared";
 
 import { VaultFilterSectionComponent } from "./components/vault-filter-section.component";
 
 @NgModule({
-  imports: [SharedModule],
+  imports: [SharedModule, SearchModule],
   declarations: [VaultFilterSectionComponent],
-  exports: [SharedModule, VaultFilterSectionComponent],
+  exports: [SharedModule, VaultFilterSectionComponent, SearchModule],
 })
 export class VaultFilterSharedModule {}