up dropdown listing csc

my-workspace/projects/sae-lib/filters/filters-group/filters-group.html

@@ -4,57 +4,69 @@
   @if(appState.filters){
     <div class="selectors">
       <sae-multi-selector
+        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'engineType')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters?.engineType?.availableList"
         [disabled]="disabled"
         [label]="'Engine type'"
+        [displayDropdown]="activeLabel==='Engine type'"
         [selectedChoices]="appState.filters?.engineType?.selectedList"
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
+        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'findings')"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters.findings.availableList"
         [label]="'Findings'"
+        [displayDropdown]="activeLabel==='Findings'"
         [selectedChoices]="appState.filters.findings.selectedList"
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
+        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'ata')"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters?.ata?.availableList"
         [label]="'ATA'"
+        [displayDropdown]="activeLabel==='ATA'"
         [selectedChoices]="appState.filters?.ata?.selectedList"
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
+        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters?.partNumber?.availableList"
         [label]="'Part number'"
+        [displayDropdown]="activeLabel==='Part number'"
         [selectedChoices]="appState.filters?.partNumber?.selectedList"
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
+        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters?.technicalManual?.availableList"
         [label]="'Technical Manual'"
+        [displayDropdown]="activeLabel==='Technical Manual'"
         [selectedChoices]="appState.filters?.technicalManual?.selectedList"
         [store]="store"
       ></sae-multi-selector>
       <sae-multi-selector
+        (clickedOnInput)="onClickedOnInput($event)"
         (availableChoicesChange)="onAvailableChoicesChange($event, 'onOffWing')"
         (selectedChoicesChange)="onSelectedChoicesChange($event, 'onOffWing')"
         [actionTypes]="actionTypes"
         [availableChoices]="appState.filters?.onOffWing?.availableList"
         [label]="'On-wing/off-wing'"
+        [displayDropdown]="activeLabel==='On-wing/off-wing'"
         [selectedChoices]="appState.filters?.onOffWing?.selectedList"
         [store]="store"
       ></sae-multi-selector>

my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts

@@ -20,6 +20,9 @@ export class FiltersGroup {
   @Input() disabled!: boolean;
   @Input() hideChipsList: boolean = false;
 
+  // Gère quel sélecteur a son dropdown ouvert
+  activeLabel: string | null = null;
+
   constructor() {
 
     console.log('constructor filters group', this.appState, this.store, this.actionTypes);
@@ -52,4 +55,9 @@ export class FiltersGroup {
       });
     }
   }
+
+  onClickedOnInput(event: any) {
+    const label = event?.label;
+    this.activeLabel = label || null;
+  }
 }

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

@@ -11,10 +11,9 @@
     {{ label }}
         </span>
   </div>
+  <!-- (blur)="displayDropdown = false" (click)="onClickInput()" -->
   <input
-    (blur)="displayDropdown = false"
-    (click)="onClickInput()"
-    (focus)="displayDropdown = true"
+    (focus)="onInputClickedOrFocused($event)"
     (input)="onSearchInput($event)"
     class=""
     placeholder="{{label}}"
@@ -43,13 +42,20 @@
 
                  class="dropdown-item"
             >
-              <i class="ri-checkbox-line"></i>
+            <img alt="checkbox" src="checkbox-active.svg" /> 
+            <span class="label">
               {{ sc.label }}
+            </span>
             </div>
             }
           </div>
 
-          <hr>
+          
+          <div class="separator">
+            
+          <div class="label">Add new part number</div>
+          <i class="ri-add-line"></i>
+          </div>
         }
         <div class="available-items">
 
@@ -60,8 +66,10 @@
 
                  class="dropdown-item"
             >
-              <i class="ri-checkbox-line"></i>
-              {{ ac.label }}
+              <img alt="checkbox" src="checkbox-inactive.svg" /> 
+              <span class="label">
+                {{ ac.label }}
+              </span>
             </div>
           }
 

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

@@ -103,15 +103,25 @@
       position: relative;
       display: block;
       z-index: 100;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
       width: 218px;
-      top: -47px;
+      top: -24px;
       left: 0;
-      border-left: 1px solid #8D91A4;
-      border-bottom: 1px solid #8D91A4;
-      border-right: 1px solid #8D91A4;
+      border: 1px solid #8D91A4;
+      box-shadow: 0 0 13px 0 rgba(37, 91, 142, 0.10);
 
+color: var(--color-text-base, #1B1D27);
+ 
+text-overflow: ellipsis;
+
+/* Text/text-base */
+font-family: var(--Fonts-Font-text, Barlow);
+font-size: var(--Font-Base, 14px);
+font-style: normal;
+font-weight: 400;
+line-height: 100%; /* 14px */
+
+
+      
       .dropdown-list {
         max-height: 200px;
         overflow-y: auto;
@@ -129,4 +139,29 @@
     }
   }
 
+  .separator{
+    display: flex;
+width: 186px;
+height: 34px;
+min-height: 34px;
+max-height: 34px;
+padding: var(--Spacing-Spacing-20, 8px) var(--Spacing-Spacing-30, 12px);
+align-items: center;
+gap: var(--Spacing-Spacing-10, 4px);
+border-radius: var(--Radius-list, 0);
+background: #F5F5F5;
+
+.label{
+  overflow: hidden;
+color: var(--color-text-secondary, #525668);
+leading-trim: both;
+text-edge: cap;
+text-overflow: ellipsis;
+font-family: var(--Fonts-Font-text, Barlow);
+font-size: var(--Font-Base, 14px);
+font-style: italic;
+font-weight: 400;
+line-height: 100%; /* 14px */
+}
+  }
 }

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

@@ -22,6 +22,7 @@ export class MultiSelector implements OnInit {
   @Input() store: any;
   @Input() actionTypes: any;
 
+  @Output() clickedOnInput = new EventEmitter<any>();
   @Output() selectedChoicesChange = new EventEmitter<any>();
   @Output() availableChoicesChange = new EventEmitter<any>();
 
@@ -73,6 +74,12 @@ export class MultiSelector implements OnInit {
   availableChoicesChangeToggleItem(choice: any) {
     this.availableChoicesChange.emit(choice);
     console.log('toggle available choice ', choice, 'in filter ', this.label);
+    // Retire immédiatement l'élément cliqué de la liste des disponibles (feedback UI optimiste)
+    const clickedValue = typeof choice === 'string' ? choice : choice?.value;
+    this.availableChoices = (this.availableChoices || []).filter((c: any) => {
+      const value = typeof c === 'string' ? c : c?.value;
+      return value !== clickedValue;
+    });
     this.store.dispatch({
         type: this.actionTypes.UPDATE_FILTER,
         payload: {
@@ -83,12 +90,25 @@ export class MultiSelector implements OnInit {
     )
   }
 
-  onClickInput() {
+  onInputClickedOrFocused(event?: any) {
+    // Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
+    this.clickedOnInput.emit({ label: this.label });
     if (this.disabled) {
       console.info('disabled input');
       return;
     }
-    this.displayDropdown = !this.displayDropdown;
-    console.log('Toggled dropdown:', this.displayDropdown);
+    this.displayDropdown = true;
+  }
+
+  onClickInput() {
+    console.log('click dropdown:', this.displayDropdown);
+    if (this.disabled) {
+      console.info('disabled input');
+      return;
+    }
+    // Informe le parent pour fermer les autres puis ouvre celui-ci
+    this.clickedOnInput.emit({ label: this.label });
+    this.displayDropdown = true;
+    console.log('Opened dropdown:', this.displayDropdown);
   }
 }