[PM-9854] - Send Search Component (#10278)

* send list items container

* update send list items container

* finalize send list container

* remove unecessary file

* undo change to config

* prefer use of takeUntilDestroyed

* add send items service

* and send list filters and service

* undo changes to jest config

* add specs for send list filters

* Revert "Merge branch 'PM-9853' into PM-9852"

This reverts commit 9f65ded13f, reversing
changes made to 63f95600e8.

* add send items service

* Revert "Revert "Merge branch 'PM-9853' into PM-9852""

This reverts commit 81e9860c25.

* finish send search

* fix formControlName

* add specs

* finalize send search

* layout and copy fixes

* cleanup

* Remove unneeded empty file

* Remove the erroneous addition of send-list-filters to vault-export tsconfig

* update tests

* hide send list filters for non-premium users

* fix and add specss

* Fix small typo

* Re-add missing tests

* Remove unused NgZone

* Rename selector for send-search

---------

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>

libs/tools/send/send-ui/src/send-search/send-search.component.html

@@ -0,0 +1,8 @@
+<div class="tw-mb-2">
+  <bit-search
+    [placeholder]="'search' | i18n"
+    [(ngModel)]="searchText"
+    (ngModelChange)="onSearchTextChanged()"
+  >
+  </bit-search>
+</div>

libs/tools/send/send-ui/src/send-search/send-search.component.ts

@@ -0,0 +1,52 @@
+import { CommonModule } from "@angular/common";
+import { Component } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormsModule } from "@angular/forms";
+import { Subject, Subscription, debounceTime, filter } from "rxjs";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { SearchModule } from "@bitwarden/components";
+
+import { SendItemsService } from "../services/send-items.service";
+
+const SearchTextDebounceInterval = 200;
+
+@Component({
+  imports: [CommonModule, SearchModule, JslibModule, FormsModule],
+  standalone: true,
+  selector: "tools-send-search",
+  templateUrl: "send-search.component.html",
+})
+export class SendSearchComponent {
+  searchText: string;
+
+  private searchText$ = new Subject<string>();
+
+  constructor(private sendListItemService: SendItemsService) {
+    this.subscribeToLatestSearchText();
+    this.subscribeToApplyFilter();
+  }
+
+  onSearchTextChanged() {
+    this.searchText$.next(this.searchText);
+  }
+
+  subscribeToLatestSearchText(): Subscription {
+    return this.sendListItemService.latestSearchText$
+      .pipe(
+        takeUntilDestroyed(),
+        filter((data) => !!data),
+      )
+      .subscribe((text) => {
+        this.searchText = text;
+      });
+  }
+
+  subscribeToApplyFilter(): Subscription {
+    return this.searchText$
+      .pipe(debounceTime(SearchTextDebounceInterval), takeUntilDestroyed())
+      .subscribe((data) => {
+        this.sendListItemService.applyFilter(data);
+      });
+  }
+}