up csc placeholder and file csv upload

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

@@ -4,23 +4,23 @@
 }"
      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>
-  <!--    (blur)="displayDropdown = false" -->
   <input
-
+    (blur)="displayDropdown = false"
     (click)="onClickInput()" (focus)="displayDropdown = true"
     class="is-hidden" placeholder="{{label}}"
     type="text">
+  <span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
+        class="selected-items-counter">
+    {{ selectedChoices?.length }}
+  </span>
   <div class="dropdown-button selector-button">
     <!--          bouton-->
     <i class="ri-arrow-down-s-line"></i>

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

@@ -1,107 +1,116 @@
 @use '../../src/styles/variables';
 
-.input-box {
-  margin-left: -1rem;
+:host {
 
-  .d-none {
-    display: none;
-  }
+  .input-box {
+    margin-left: -1rem;
 
-  i {
+    .d-none {
+      display: none;
+    }
 
-    top: 10px;
-    left: 1rem;
+    i {
 
-    &::before {
-      left: 10px;
       top: 10px;
+      left: 1rem;
+
+      &::before {
+        left: 10px;
+        top: 10px;
+      }
+
+      &.is-disabled {
+        color: #525668;
+        fill: #525668;
+      }
     }
 
-    &.is-disabled {
-      color: #525668;
-      fill: #525668;
-    }
-  }
-
-  .search-placeholder,
-  .selector-button {
-    position: relative;
-  }
-
-  .search-placeholder {
-    top: 30px;
-    left: 16px;
-  }
-
-  .selector-button {
-    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;
-  }
-
-
-  input {
-
-    border-radius: 8px;
-    border: 1px solid #8D91A4;
-    background: var(--color-background-card-on-base, #FFF);
-
-
-    padding: 10px 40px;
-
-    width: 210px;
-    height: 42px;
-
-    overflow: hidden;
-    color: var(--color-text-secondary, #525668);
-    text-overflow: ellipsis;
-    font-size: var(--Font-Base, 14px);
-
-
-    .is-disabled & {
-      border-color: #525668;
-    }
-  }
-
-  .dropdown {
-    background: white;
-    padding: 1rem;
-    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;
+    .search-placeholder,
+    .selector-button {
+      position: relative;
     }
 
-    .dropdown-item {
-      padding: 4px;
-      cursor: pointer;
+    .search-placeholder {
+      top: 30px;
+      left: 16px;
+    }
 
-      &:hover {
-        background: #525668;
-        color: white;
+    .selector-button {
+      top: -32px;
+      right: -183px;
+    }
+
+    .selected-items-counter {
+      background: variables.$csc-chips-bg-color;
+      color: white;
+      border-radius: 200px;
+      padding: 10px;
+      display: inline-block;
+      line-height: 10px;
+      position: relative;
+      top: 2px;
+      left: -53px;
+      visibility: hidden;
+
+      &.is-visible {
+        visibility: visible;
+      }
+    }
+
+
+    input {
+
+      border-radius: 8px;
+      border: 1px solid #8D91A4;
+      background: var(--color-background-card-on-base, #FFF);
+
+
+      padding: 10px 40px;
+
+      width: 210px;
+      height: 42px;
+
+      overflow: hidden;
+      color: var(--color-text-secondary, #525668);
+      text-overflow: ellipsis;
+      font-size: var(--Font-Base, 14px);
+
+
+      .is-disabled & {
+        border-color: #525668;
+      }
+    }
+
+    .dropdown {
+      background: white;
+      padding: 1rem;
+      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;
+        cursor: pointer;
+
+        &:hover {
+          background: #525668;
+          color: white;
+        }
       }
     }
   }
+
 }

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

@@ -17,6 +17,10 @@ export class MultiSelector {
   @Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
   @Input() selectedChoices: any = ['choix 4', 'choix 5'];
   @Input() displayDropdown: boolean = false;
+
+  @Input() store: any;
+  @Input() actionTypes: any;
+  
   @Output() selectedChoicesChange = new EventEmitter<any>();
   @Output() availableChoicesChange = new EventEmitter<any>();