From 334b6c90cf0e6aebf7610a87d389f83ba241f16f Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 23 Sep 2025 18:54:13 +0200
Subject: [PATCH] style cols

---
 .../sae-lib/chatbot/bot-talks/bot-talks.html  |  2 +-
 .../filters/filters-group/filters-group.scss  |  2 +-
 .../inputs/multi-selector/multi-selector.html | 44 ++++++++-----------
 .../inputs/multi-selector/multi-selector.scss |  7 +--
 .../inputs/multi-selector/multi-selector.ts   |  8 +++-
 sae-csc/src/app/redux/initialState.ts         |  2 +-
 .../translate-texts/translate-texts.html      |  6 +--
 7 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.html b/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.html
index 971ea01..63d1cf0 100644
--- a/my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.html
+++ b/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">
diff --git a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss b/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
index 73a55b7..115fc57 100644
--- a/my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
+++ b/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;
       }
 
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
index cf479ba..c36fd69 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
+++ b/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>
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
index de48beb..7154d3a 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
+++ b/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;
diff --git a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts b/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
index 44a5783..e11613b 100644
--- a/my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
+++ b/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);
   }
 }
diff --git a/sae-csc/src/app/redux/initialState.ts b/sae-csc/src/app/redux/initialState.ts
index 494565e..5ee4be3 100644
--- a/sae-csc/src/app/redux/initialState.ts
+++ b/sae-csc/src/app/redux/initialState.ts
@@ -7,7 +7,7 @@ export const initialState: StateInterface = {
     backendAPIRoot: "",
     demoMode: true,
     loading: false,
-    fromText: "le texte original",
+    fromText: "",
     // fromText: "",
     fromFile: "",
     toText: "",
diff --git a/sae-csc/src/app/shared/translate-texts/translate-texts.html b/sae-csc/src/app/shared/translate-texts/translate-texts.html
index 9d247c1..b40349a 100644
--- a/sae-csc/src/app/shared/translate-texts/translate-texts.html
+++ b/sae-csc/src/app/shared/translate-texts/translate-texts.html
@@ -3,7 +3,7 @@
 
   <div id="fromText">
 
-    @if (!fileIsUploaded) {
+    @if (!fileIsUploaded || !appState.fromText.length) {
       <!--      @if (appState.fromText.length == 0) {-->
       <button (click)="clickFileUpload(fileUpload)" class=" click-file-upload is-outlined">
             <span class="label">
@@ -40,7 +40,7 @@
     <!--      delete button from_text-->
 
     <button (click)="emptyText('fromText')" [ngClass]="{
-      'is-visible' : fromText.length
+      'is-visible' : appState.fromText.length
       }" class="delete-button button">x
     </button>
     @if (!fileIsUploaded) {
@@ -48,7 +48,7 @@
         (focus)="focusFromText()"
         (keyup)="onFromTextChanged()"
         (ngModelChange)="onFromTextChanged()"
-        [ngModel]="appState.fromText"
+        [(ngModel)]="appState.fromText"
         cols="30"
         id="from_text"
         name="from_text"