up similar cases page

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

@@ -12,6 +12,7 @@
         </span>
   </div>
   <!-- (blur)="displayDropdown = false" (click)="onClickInput()" -->
+  <!--  disabled: {{ disabled }}-->
   <input
     (focus)="onInputClickedOrFocused($event)"
     (input)="onSearchInput($event)"
@@ -19,8 +20,8 @@
     placeholder="{{label}}"
     type="text">
 
-  <span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
-  (click)="resetChoicesLists()"
+  <span (click)="resetChoicesLists()"
+        [ngClass]="{ 'is-visible' : selectedChoices?.length}"
         class="selected-items-counter">
     {{ selectedChoices?.length || 0 }}
   </span>
@@ -29,7 +30,7 @@
     <i class="ri-arrow-down-s-line"></i>
   </div>
 
-  @if (displayDropdown ) {
+  @if (displayDropdown) {
 
 
     <div class="dropdown">
@@ -39,36 +40,36 @@
         @if (selectedChoices?.length && availableChoices?.length) {
           <div class="selected-items">
 
-            @for(sc of getFilteredSelectedChoices(); track sc.value){
-            <div (click)="selectedChoicesChangeToggleItem(sc)"
+            @for (sc of getFilteredSelectedChoices(); track sc.value) {
+              <div (click)="selectedChoicesChangeToggleItem(sc)"
 
-                 class="dropdown-item"
-            >
-            <img alt="checkbox" src="checkbox-active.svg" /> 
-            <span class="label">
+                   class="dropdown-item"
+              >
+                <img alt="checkbox" src="checkbox-active.svg"/>
+                <span class="label">
             <!--  {{ sc.label }} -->
             </span>
-            </div>
+              </div>
             }
           </div>
 
-          
+
           <div class="separator">
-            
-          <div class="label">Add new part number</div>
-          <i class="ri-add-line"></i>
+
+            <div class="label">Add new part number</div>
+            <i class="ri-add-line"></i>
           </div>
         }
         <div class="available-items">
 
-<!--          disponibles:-->
+          <!--          disponibles:-->
           <!--      available:-->
-          @for(ac of getFilteredAvailableChoices(); track ac.value){
+          @for (ac of getFilteredAvailableChoices(); track ac.value) {
             <div (click)="availableChoicesChangeToggleItem(ac)"
 
                  class="dropdown-item"
             >
-              <img alt="checkbox" src="checkbox-inactive.svg" /> 
+              <img alt="checkbox" src="checkbox-inactive.svg"/>
               <span class="label">
                 {{ ac.label }}
               </span>

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

@@ -2,6 +2,16 @@
 
 :host {
 
+  &.is-disabled {
+    input {
+      border: grey;
+    }
+
+    .selected-items-counter {
+      color: grey;
+    }
+  }
+
   .input-box {
     width: 218px;
     color: #1b1d27;
@@ -109,19 +119,18 @@
       border: 1px solid #8D91A4;
       box-shadow: 0 0 13px 0 rgba(37, 91, 142, 0.10);
 
-color: var(--color-text-base, #1B1D27);
- 
-text-overflow: ellipsis;
+      color: var(--color-text-base, #1B1D27);
 
-/* Text/text-base */
-font-family: var(--Fonts-Font-text, Barlow);
-font-size: var(--Font-Base, 14px);
-font-style: normal;
-font-weight: 400;
-line-height: 100%; /* 14px */
+      text-overflow: ellipsis;
+
+      /* Text/text-base */
+      font-family: var(--Fonts-Font-text, Barlow);
+      font-size: var(--Font-Base, 14px);
+      font-style: normal;
+      font-weight: 400;
+      line-height: 100%; /* 14px */
 
 
-      
       .dropdown-list {
         max-height: 200px;
         overflow-y: auto;
@@ -139,7 +148,7 @@ line-height: 100%; /* 14px */
     }
   }
 
-  .separator{
+  .separator {
     display: flex;
     width: 186px;
     height: 34px;
@@ -153,7 +162,7 @@ line-height: 100%; /* 14px */
     margin-top: 6px;
     margin-bottom: 16px;
 
-    .label{
+    .label {
       overflow: hidden;
       color: var(--color-text-secondary, #525668);
       leading-trim: both;
@@ -167,11 +176,12 @@ line-height: 100%; /* 14px */
     }
   }
 
-  .available-items{
-    img{
+  .available-items {
+    img {
       margin-right: 6px;
     }
-    .dropdown-item{
+
+    .dropdown-item {
       padding: 6px;
       margin-bottom: 6px;
       display: flex;

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

@@ -77,13 +77,16 @@ export class MultiSelector implements OnInit {
   }
 
   onInputClickedOrFocused(event?: any) {
-    // Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
-    this.clickedOnInput.emit({ label: this.label });
-    if (this.disabled) {
+    console.log('onInputClickedOrFocused', this.disabled, event)
+    if (!this.disabled) {
+
+      // Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
+      this.clickedOnInput.emit({label: this.label});
+      this.displayDropdown = true;
+    } else {
       console.info('disabled input');
       return;
     }
-    this.displayDropdown = true;
   }
 
   onClickInput() {
@@ -93,7 +96,7 @@ export class MultiSelector implements OnInit {
       return;
     }
     // Informe le parent pour fermer les autres puis ouvre celui-ci
-    this.clickedOnInput.emit({ label: this.label });
+    this.clickedOnInput.emit({label: this.label});
     this.displayDropdown = true;
     console.log('Opened dropdown:', this.displayDropdown);
   }