up style multi selector

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

@@ -75,7 +75,7 @@
   }
 
   @if (!hideChipsList) {
-    <div (click)="highlighted = !highlighted" class="chips-listing">
+    <div   class="chips-listing">
       <!--    liste de chips-->
 
       <div class="chips-column">

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

@@ -65,7 +65,7 @@
     .chips-listing {
       display: flex;
       position: absolute;
-      top: 650px;
+      top: 560px;
       margin-top: 16px;
       border-radius: 4px;
       background: variables.$csc-filters-box-color;

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

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, HostListener, Input, ElementRef} from '@angular/core';
 import {MultiSelector} from '../../inputs/multi-selector/multi-selector';
 import {CommonModule} from '@angular/common';
 
@@ -23,7 +23,7 @@ export class FiltersGroup {
   // Gère quel sélecteur a son dropdown ouvert
   activeLabel: string | null = null;
 
-  constructor() {
+  constructor(private elementRef: ElementRef) {
 
     console.log('constructor filters group', this.appState, this.store, this.actionTypes);
   }
@@ -60,4 +60,16 @@ export class FiltersGroup {
     const label = event?.label;
     this.activeLabel = label || null;
   }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent) {
+    const clickTarget = event.target as Node | null;
+    if (!clickTarget) {
+      return;
+    }
+    // Ferme tous les dropdowns si clic en dehors du groupe de filtres
+    if (!this.elementRef.nativeElement.contains(clickTarget)) {
+      this.activeLabel = null;
+    }
+  }
 }

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

@@ -20,6 +20,7 @@
     type="text">
 
   <span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
+  (click)="resetChoicesLists()"
         class="selected-items-counter">
     {{ selectedChoices?.length || 0 }}
   </span>
@@ -33,7 +34,8 @@
 
     <div class="dropdown">
       <div class="dropdown-list">
-        <!--      selected:-->
+        <!-- count: {{ getFilteredSelectedChoices().length + getFilteredAvailableChoices().length }}
+             selected:-->
         @if (selectedChoices?.length && availableChoices?.length) {
           <div class="selected-items">
 
@@ -44,7 +46,7 @@
             >
             <img alt="checkbox" src="checkbox-active.svg" /> 
             <span class="label">
-              {{ sc.label }}
+            <!--  {{ sc.label }} -->
             </span>
             </div>
             }

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

@@ -141,27 +141,43 @@ line-height: 100%; /* 14px */
 
   .separator{
     display: flex;
-width: 186px;
+    width: 186px;
-height: 34px;
+    height: 34px;
-min-height: 34px;
+    min-height: 34px;
-max-height: 34px;
+    max-height: 34px;
-padding: var(--Spacing-Spacing-20, 8px) var(--Spacing-Spacing-30, 12px);
+    padding: var(--Spacing-Spacing-20, 8px) var(--Spacing-Spacing-30, 12px);
-align-items: center;
+    align-items: center;
-gap: var(--Spacing-Spacing-10, 4px);
+    gap: var(--Spacing-Spacing-10, 4px);
-border-radius: var(--Radius-list, 0);
+    border-radius: var(--Radius-list, 0);
-background: #F5F5F5;
+    background: #F5F5F5;
+    margin-top: 6px;
+    margin-bottom: 16px;
 
-.label{
+    .label{
-  overflow: hidden;
+      overflow: hidden;
-color: var(--color-text-secondary, #525668);
+      color: var(--color-text-secondary, #525668);
-leading-trim: both;
+      leading-trim: both;
-text-edge: cap;
+      text-edge: cap;
-text-overflow: ellipsis;
+      text-overflow: ellipsis;
-font-family: var(--Fonts-Font-text, Barlow);
+      font-family: var(--Fonts-Font-text, Barlow);
-font-size: var(--Font-Base, 14px);
+      font-size: var(--Font-Base, 14px);
-font-style: italic;
+      font-style: italic;
-font-weight: 400;
+      font-weight: 400;
-line-height: 100%; /* 14px */
+      line-height: 100%; /* 14px */
-}
+    }
+  }
+
+  .available-items{
+    img{
+      margin-right: 6px;
+    }
+    .dropdown-item{
+      padding: 6px;
+      margin-bottom: 6px;
+      display: flex;
+      align-items: center;
+      justify-content: start;
+
+    }
   }
 }

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

@@ -62,13 +62,6 @@ export class MultiSelector implements OnInit {
     console.log('toggle selected choice ', choice, 'in filter ', this.label);
     this.selectedChoicesChange.emit(choice);
     console.log(choice);
-    this.store.dispatch({
-      type: this.actionTypes.UPDATE_FILTER,
-      payload: {
-        filter: this.label,
-        selectedChoice: choice
-      }
-    })
   }
 
   availableChoicesChangeToggleItem(choice: any) {
@@ -80,14 +73,7 @@ export class MultiSelector implements OnInit {
       const value = typeof c === 'string' ? c : c?.value;
       return value !== clickedValue;
     });
-    this.store.dispatch({
+    console.log('toggle available choices', this.label, choice);
-        type: this.actionTypes.UPDATE_FILTER,
-        payload: {
-          filter: this.label,
-          availableChoice: choice
-        }
-      }
-    )
   }
 
   onInputClickedOrFocused(event?: any) {
@@ -111,4 +97,9 @@ export class MultiSelector implements OnInit {
     this.displayDropdown = true;
     console.log('Opened dropdown:', this.displayDropdown);
   }
+
+  resetChoicesLists() {
+    this.selectedChoices = [];
+    this.availableChoices = [];
+  }
 }