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,14 +103,24 @@
       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;
@@ -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);
   }
 }

sae-csc/public/checkbox-inactive.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="20" height="20" fill="white"/>
+<path d="M19.5 0.5V19.5H0.5V0.5H19.5Z" stroke="#A1A5B9"/>
+</svg>

sae-csc/public/shield.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.15256 2.3549L8 0.833252L14.8474 2.3549C15.2287 2.43964 15.5 2.77781 15.5 3.16839V11.4907C15.5 13.1624 14.6645 14.7236 13.2735 15.6509L8 19.1666L2.7265 15.6509C1.33551 14.7236 0.5 13.1624 0.5 11.4907V3.16839C0.5 2.77781 0.771275 2.43964 1.15256 2.3549ZM2.16667 3.83687V11.4907C2.16667 12.6052 2.72367 13.6459 3.651 14.2642L8 17.1635L12.349 14.2642C13.2763 13.6459 13.8333 12.6052 13.8333 11.4907V3.83687L8 2.54058L2.16667 3.83687ZM8 9.16659C6.84942 9.16659 5.91667 8.23384 5.91667 7.08325C5.91667 5.93266 6.84942 4.99992 8 4.99992C9.15058 4.99992 10.0833 5.93266 10.0833 7.08325C10.0833 8.23384 9.15058 9.16659 8 9.16659ZM4.27288 13.3333C4.48016 11.4583 6.06977 9.99992 8 9.99992C9.93025 9.99992 11.5198 11.4583 11.7271 13.3333H4.27288Z" fill="black"/>
+</svg>

sae-csc/src/app/redux/filters.ts

@@ -148,7 +148,7 @@ export const filtersCSC =
         value: 'DEVIATION_TO_INSTRUCTIONS',
       }, {
         label: 'DEVIATION TO INSTRUCTIONS Revision',
-        value: 'DEVIATION_TO_INSTRUCTIONS',
+        value: 'DEVIATION_TO_INSTRUCTIONS_REVISION',
       },
       {
         label: 'PRESERVATION_OVERDUE',
@@ -339,9 +339,6 @@ export const filtersCSC =
       {
         label: 'PIT, PITTING : Piqure',
         value: 'PIT',
-      }, {
-        label: 'VOIDS :Vides, Cavites',
-        value: 'VOIDS',
       }, 
 
       {

sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.html

@@ -36,7 +36,10 @@
           <span>×</span>
         </button>
         <div class="popup-body">
-          <h2 class="title">Privacy Policy</h2>
+          <h2 class="title">
+            <span class="label">Privacy Policy</span>
+                      <img alt="shield" src="shield.svg">
+          </h2>
           <p>
             Personal Data Protection Policy
           </p>

sae-csc/src/app/shared/navigation/bottom-navigation/bottom-navigation.scss

@@ -1,8 +1,8 @@
 @use '../../../../styles/variables-barrel' as variables;
 
 .bottom-navigation {
-  position: relative;
-  top: 280px;
+  position: absolute;
+  top: 872px;
   padding: 0 0 16px;
 
 
@@ -78,6 +78,12 @@
     cursor: pointer;
   }
 
+  .title{
+    img{
+      margin-left: 16px;
+    }
+  }
+
   .popup-content {
     position: relative;
     width: 90%;