CSC link state to filters

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

@@ -1,40 +1,61 @@
 <!--    sélecteurs-->
-<div class="input-box">
+<div [ngClass]="{
+'is-disabled': disabled
+}"
+     class="input-box"
+>
+  @if (selectedChoices?.length) {
+    <div class="selected-items-counter">
+      {{ selectedChoices.length }}
+    </div>
+  }
   <i class="ri-search-line search-placeholder"></i>
   <div class="label">
     <span class="d-none">
     {{ label }}
     </span>
   </div>
-  <input (blur)="displayDropdown = false" (click)="displayDropdown= !displayDropdown" (focus)="displayDropdown = true"
-         class="is-hidden" placeholder="{{label}}"
-         type="text">
-  @if (displayDropdown) {
+  <!--    (blur)="displayDropdown = false" -->
+  <input
+
+    (click)="onClickInput()" (focus)="displayDropdown = true"
+    class="is-hidden" placeholder="{{label}}"
+    type="text">
+  <div class="dropdown-button selector-button">
+    <!--          bouton-->
+    <i class="ri-arrow-down-s-line"></i>
+  </div>
+
+  @if (displayDropdown && availableChoices?.length) {
 
     <div class="dropdown">
-      <div class="dropdown-button selector-button">
-        <!--          bouton-->
-        <i class="ri-arrow-down-s-line"></i>
-      </div>
+
       <div class="dropdown-list">
         <!--      selected:-->
         <div class="selected-items">
 
           @for (sc of selectedChoices; track sc) {
-            <div class="dropdown-item">
+            <div class="dropdown-item"
+                 (click)="selectedChoicesChangeToggleItem(sc)"
+            >
 
               <i class="ri-checkbox-line"></i>
               {{ sc }}
             </div>
           }
         </div>
-        <hr>
+        @if (selectedChoices?.length && availableChoices?.length) {
+
+          <hr>
+        }
         <div class="available-items">
           <!--      available:-->
-          @for (c of choices; track c) {
-            <div class="dropdown-item">
+          @for (ac of availableChoices; track ac) {
+            <div class="dropdown-item"
+                 (click)="availableChoicesChangeToggleItem(ac)"
+            >
               <i class="ri-checkbox-blank-line"></i>
-              {{ c }}
+              {{ ac }}
             </div>
           }
         </div>

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

@@ -17,7 +17,7 @@
       top: 10px;
     }
 
-    .disabled & {
+    &.is-disabled {
       color: #525668;
       fill: #525668;
     }
@@ -34,8 +34,20 @@
   }
 
   .selector-button {
-    top: -30px;
-    right: -177px;
+    top: -36px;
+    right: -165px;
+  }
+
+  .selected-items-counter {
+    background: blue;
+    color: white;
+    border-radius: 200px;
+    padding: 10px;
+    display: inline-block;
+    line-height: 10px;
+    position: relative;
+    top: 33px;
+    left: 136px;
   }
 
 
@@ -57,7 +69,7 @@
     font-size: var(--Font-Base, 14px);
 
 
-    .disabled & {
+    .is-disabled & {
       border-color: #525668;
     }
   }
@@ -68,6 +80,19 @@
     border-radius: 8px;
     position: relative;
     display: block;
+    z-index: 10;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+
+    top: -28px;
+    border-left: 1px solid #8D91A4;
+    border-bottom: 1px solid #8D91A4;
+    border-right: 1px solid #8D91A4;
+
+    .dropdown-list {
+      max-height: 200px;
+      overflow-y: auto;
+    }
 
     .dropdown-item {
       padding: 4px;

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

@@ -1,15 +1,57 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgClass} from '@angular/common';
 
 @Component({
   selector: 'sae-multi-selector',
-  imports: [],
+  imports: [
+    NgClass
+  ],
   templateUrl: './multi-selector.html',
   styleUrl: './multi-selector.scss'
 })
 export class MultiSelector {
+  @Input() disabled: boolean = false;
   @Input() label!: string;
-  @Input() choices: any = ['choix 1', 'choix 2', 'choix 3'];
-  @Input() selectedChoices: any = ['choix 4'];
-  displayDropdown = true;
+  // @Input() store: any;
+  // @Input() ActionTypes: any;
+  @Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
+  @Input() selectedChoices: any = ['choix 4', 'choix 5'];
+  @Input() displayDropdown: boolean = false;
+  @Output() selectedChoicesChange = new EventEmitter<any>();
+  @Output() availableChoicesChange = new EventEmitter<any>();
 
+  constructor() {
+
+  }
+
+  selectedChoicesChangeToggleItem(choice: any) {
+    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) {
+    this.availableChoicesChange.emit(choice);
+    console.log('toggle available choice ', choice, 'in filter ', this.label);
+    // this.store.dispatch({
+    //     type: this.ActionTypes.UPDATE_FILTER,
+    //     payload: {
+    //       filter: this.label,
+    //       availableChoice: choice
+    //     }
+    //   }
+    // )
+  }
+
+  onClickInput() {
+    if (this.disabled) return;
+    this.displayDropdown = !this.displayDropdown
+  }
 }