style disabled selector csc

angular-basic/.gitignore

@@ -42,3 +42,4 @@ testem.log
 Thumbs.db
 
 sae-lib
+my-workspace

angular-basic/Dockerfile

@@ -13,7 +13,7 @@ COPY my-workspace /app/my-workspace
 WORKDIR /app/angular-basic
 
 RUN echo "============= run setup script "
-
+RUN pkg install bash nano ncdu
 RUN ./setup.sh
 
 # Construire le projet Angular (production)
@@ -31,9 +31,6 @@ FROM nginx:1.27-alpine AS production
 RUN rm -rf /usr/share/nginx/html/*
 
 # Copier la sortie du build (on testera le bon chemin ensuite)
-
-#COPY --from=build /app/dist /usr/share/nginx/html
-
 COPY --from=build /app/angular-basic/dist/angular-basic/browser/* /usr/share/nginx/html
 
 RUN echo "============= liste des fichiers dans nginx html"
@@ -45,6 +42,7 @@ RUN echo "============="
 # 🔹 Exposer le port par défaut d'nginx (80)
 EXPOSE 80
 
+
 HEALTHCHECK --interval=30s --timeout=10s --retries=3 \
 CMD wget -qO- http://localhost:80/ || exit 1
 

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

@@ -1,6 +1,9 @@
-<div class="bot-talks-container">
+<div class="bot-talks-container ">
   <!--  bot talks land-->
   <!--  avatar-->
+  @if (avatarPlacement == 'left') {
+    <div class="bot-avatar bot-avatar-left"></div>
+  }
   <div class="bot-talks-bubble">
     <div class="bot-talks-message">
       {{ message }}
@@ -72,8 +75,7 @@
 
   </div>
 
-  <div class="avatar-container">
+  @if (avatarPlacement == 'right') {
-
+    <div class="bot-avatar bot-avatar-right"></div>
-    <div class="avatar"></div>
+  }
-  </div>
 </div>

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

@@ -83,8 +83,8 @@
     padding: 12px;
   }
 
-  .avatar {
+  .bot-avatar {
-    background: transparent url('/public/chatbot.png') center center no-repeat;
+    background: white;
     background-size: contain;
     width: 32px;
     height: 32px;

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

@@ -14,4 +14,5 @@ export class BotTalks {
   @Input() public message: string = 'Hello!';
   @Input() public documents: Array<any> = [];
   @Input() public appState: any = {};
+  @Input() public avatarPlacement: '' | 'left' | 'right' = 'left';
 }

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 }}-->
+
+  @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 {
 
+
+  .input-box {
+    width: 218px;
+    color: #1b1d27;
+
     &.is-disabled {
       input {
         border: grey;
       }
 
       .selected-items-counter {
+        color: white;
+        background-color: grey;
+      }
+
+      i {
         color: grey;
       }
     }
 
-  .input-box {
-    width: 218px;
-    color: #1b1d27;
-
     .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;
+    }
+  }
+
 }