style disabled selector csc

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

@@ -5,7 +5,7 @@
      class="input-box"
 >
 
-  <i class="ri-search-line search-placeholder"></i>
+
   <div class="label">
         <span class="d-none">
     {{ label }}
@@ -13,18 +13,38 @@
   </div>
   <!-- (blur)="displayDropdown = false" (click)="onClickInput()" -->
   <!--  disabled: {{ disabled }}-->
-  <input
-    (focus)="onInputClickedOrFocused($event)"
-    (input)="onSearchInput($event)"
-    class=""
-    placeholder="{{label}}"
-    type="text">
 
+  @if (selectedChoices.length > 0) {
+    <div class="first-selection fake-input">
+
+      {{ selectedChoices[0].value }}
+    </div>
+  } @else {
+
+    @if (displayDropdown) {
+      <i class="ri-search-line search-placeholder"></i>
+      <input
+        (focus)="onInputClickedOrFocused($event)"
+        (input)="onSearchInput($event)"
+        class=""
+        placeholder="{{label}}"
+        type="text">
+    } @else {
+
+      <div class="placeholder">
+        {{ label }}
+      </div>
+
+    }
+
+
+  }
   <span (click)="resetChoicesLists()"
         [ngClass]="{ 'is-visible' : selectedChoices?.length}"
         class="selected-items-counter">
     {{ selectedChoices?.length || 0 }}
   </span>
+
   <div (click)="onClickInput()" 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

@@ -2,20 +2,26 @@
 
 :host {
 
-  &.is-disabled {
-    input {
-      border: grey;
-    }
-
-    .selected-items-counter {
-      color: grey;
-    }
-  }
 
   .input-box {
     width: 218px;
     color: #1b1d27;
 
+    &.is-disabled {
+      input {
+        border: grey;
+      }
+
+      .selected-items-counter {
+        color: white;
+        background-color: grey;
+      }
+
+      i {
+        color: grey;
+      }
+    }
+
     .d-none {
       display: none;
     }
@@ -190,4 +196,16 @@
 
     }
   }
+
+  .placeholder, .fake-input {
+    border: solid 1px grey;
+    padding: 16px;
+    border-radius: 6px;
+
+    .is-disabled & {
+      color: grey;
+      border-color: #dedede;
+    }
+  }
+
 }