CSC link state to filters

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
+  }
 }