style cols

my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.html

@@ -5,7 +5,7 @@
     <div class="bot-talks-message">
       {{ message }}
     </div>
-    @if (documents?.length) {
+    @if (documents.length) {
       @for (document of documents; track document.id) {
 
         <div class="document-container">

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

@@ -71,7 +71,7 @@
 
       .chips-column {
         padding: 12px 12px;
-        width: 220px;
+        width: 218px;
         //border: solid 1px #ccc;
       }
 

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

@@ -8,12 +8,12 @@
 
   <i class="ri-search-line search-placeholder"></i>
   <div class="label">
-    <span class="d-none">
+        <span class="d-none">
     {{ label }}
-    </span>
+        </span>
   </div>
-  <!--    (blur)="displayDropdown = false"-->
   <input
+    (blur)="displayDropdown = false"
     (click)="onClickInput()"
     (focus)="displayDropdown = true"
     class="is-hidden" placeholder="{{label}}"
@@ -22,47 +22,41 @@
         class="selected-items-counter">
     {{ selectedChoices?.length || 0 }}
   </span>
-  <div class="dropdown-button selector-button">
+  <div (click)="onClickInput()" class="dropdown-button selector-button">
     <!--          bouton-->
     <i class="ri-arrow-down-s-line"></i>
   </div>
 
-  @if (displayDropdown
-  && availableChoices?.length) {
+  @if (displayDropdown && availableChoices?.length) {
+
 
     <div class="dropdown">
-
       <div class="dropdown-list">
         <!--      selected:-->
-        <div class="selected-items">
-
-          @for (sc of selectedChoices; track sc) {
-            <div class="dropdown-item"
-                 (click)="selectedChoicesChangeToggleItem(sc)"
+        @if (selectedChoices?.length && availableChoices?.length) {
+          <div class="selected-items">
+            <div (click)="selectedChoicesChangeToggleItem(sc)"
+                 *ngFor="let sc of selectedChoices"
+                 class="dropdown-item"
             >
-
               <i class="ri-checkbox-line"></i>
               {{ sc }}
             </div>
-          }
-        </div>
-        @if (selectedChoices?.length && availableChoices?.length) {
+          </div>
 
           <hr>
         }
         <div class="available-items">
           <!--      available:-->
-          @for (ac of availableChoices; track ac) {
-            <div class="dropdown-item"
-                 (click)="availableChoicesChangeToggleItem(ac)"
-            >
-              <i class="ri-checkbox-blank-line"></i>
-              {{ ac }}
-            </div>
-          }
+          <div (click)="availableChoicesChangeToggleItem(ac)"
+               *ngFor="let ac of availableChoices"
+               class="dropdown-item"
+          >
+            <i class="ri-checkbox-blank-line"></i>
+            {{ ac }}
+          </div>
         </div>
       </div>
     </div>
-
   }
 </div>

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

@@ -3,7 +3,7 @@
 :host {
 
   .input-box {
-    width: 220px;
+    width: 218px;
 
     .d-none {
       display: none;
@@ -91,12 +91,13 @@
       border-radius: 8px;
       position: relative;
       display: block;
-      z-index: 10;
+      z-index: 100;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       width: 210px;
 
-      top: -59px;
+      top: 42px;
+      left: 0;
       border-left: 1px solid #8D91A4;
       border-bottom: 1px solid #8D91A4;
       border-right: 1px solid #8D91A4;

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

@@ -55,7 +55,11 @@ export class MultiSelector {
   }
 
   onClickInput() {
-    if (this.disabled) return;
-    this.displayDropdown = !this.displayDropdown
+    if (this.disabled) {
+      console.info('disabled input');
+      return;
+    }
+    this.displayDropdown = !this.displayDropdown;
+    console.log('Toggled dropdown:', this.displayDropdown);
   }
 }