ajout filtrage de multi filtre par input texte

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html

@@ -15,7 +15,9 @@
     (blur)="displayDropdown = false"
     (click)="onClickInput()"
     (focus)="displayDropdown = true"
-    class="is-hidden" placeholder="{{label}}"
+    (input)="onSearchInput($event)"
+    class=""
+    placeholder="{{label}}"
     type="text">
 
   <span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
@@ -36,7 +38,7 @@
         @if (selectedChoices?.length && availableChoices?.length) {
           <div class="selected-items">
 
-            @for(sc of selectedChoices; track sc.value){
+            @for(sc of getFilteredSelectedChoices(); track sc.value){
             <div (click)="selectedChoicesChangeToggleItem(sc)"
 
                  class="dropdown-item"
@@ -53,7 +55,7 @@
 
 <!--          disponibles:-->
           <!--      available:-->
-          @for(ac of availableChoices; track ac.value){
+          @for(ac of getFilteredAvailableChoices(); track ac.value){
             <div (click)="availableChoicesChangeToggleItem(ac)"
 
                  class="dropdown-item"

my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts

@@ -25,6 +25,8 @@ export class MultiSelector implements OnInit {
   @Output() selectedChoicesChange = new EventEmitter<any>();
   @Output() availableChoicesChange = new EventEmitter<any>();
 
+  searchText: string = '';
+
   constructor() {
       }
 
@@ -33,6 +35,28 @@ export class MultiSelector implements OnInit {
 
   }
 
+  onSearchInput(event: any) {
+    this.searchText = (event?.target?.value || '').toLowerCase();
+  }
+
+  getFilteredSelectedChoices() {
+    if (!this.searchText) {
+      return this.selectedChoices || [];
+    }
+    return (this.selectedChoices || []).filter((c: any) =>
+      (c?.label || '').toLowerCase().includes(this.searchText)
+    );
+  }
+
+  getFilteredAvailableChoices() {
+    if (!this.searchText) {
+      return this.availableChoices || [];
+    }
+    return (this.availableChoices || []).filter((c: any) =>
+      (c?.label || '').toLowerCase().includes(this.searchText)
+    );
+  }
+
   selectedChoicesChangeToggleItem(choice: any) {
     console.log('toggle selected choice ', choice, 'in filter ', this.label);
     this.selectedChoicesChange.emit(choice);