privacy policy style

my-workspace/projects/sae-lib/filters/filters-group/filters-group.html

@@ -1,4 +1,4 @@
-<div class="filter-group">
+<div [ngClass]="{highlighted}" class="filter-group">
   <div class="selectors">
     <sae-multi-selector [label]="'Engine type'"></sae-multi-selector>
     <sae-multi-selector [label]="'Findings'"></sae-multi-selector>
@@ -7,7 +7,7 @@
     <sae-multi-selector [label]="'Technical Manual'"></sae-multi-selector>
     <sae-multi-selector [label]="'On-wing/off-wing'"></sae-multi-selector>
   </div>
-  <div class="chips-listing">
+  <div (click)="highlighted = !highlighted" class="chips-listing">
     <!--    liste de chips-->
     <div class="chips-column">
 

my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss

@@ -7,7 +7,7 @@
 
   sae-multi-selector {
     margin-left: 20px;
- 
+
   }
 }
 
@@ -79,16 +79,32 @@
       background: variables.$csc-chips-bg-color;
       color: white;
       border: solid 1px variables.$csc-chips-bg-color;
-      width: 100%;
       border-radius: 20px;
       margin-bottom: 10px;
       display: flex;
       padding: 8px 10px 10px 12px;
+
+      text-align: center;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 14px;
+
       justify-content: center;
       align-items: center;
       gap: 5px;
       align-self: stretch;
       padding-right: 10px;
+
+
     }
+
+
+  }
+
+  &.highlighted .chips-listing {
+    border-radius: 8px;
+    border: 1px solid #C2A9FD;
+    background: #E3EAF1;
+    box-shadow: 0 0 10px 0 #A86CFD;
   }
 }

my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts

@@ -1,14 +1,16 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 import {MultiSelector} from '../../inputs/multi-selector/multi-selector';
+import {NgClass} from '@angular/common';
 
 @Component({
   selector: 'sae-filters-group',
   imports: [
-    MultiSelector
+    MultiSelector,
+    NgClass
   ],
   templateUrl: './filters-group.html',
   styleUrl: './filters-group.scss'
 })
 export class FiltersGroup {
-
+  @Input() highlighted = false;
 }

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

@@ -6,31 +6,40 @@
     {{ label }}
     </span>
   </div>
-  <input class="is-hidden" placeholder="{{label}}" type="text">
-  <div class="dropdown">
-    <div class="dropdown-button selector-button">
-      <!--          bouton-->
-      <i class="ri-arrow-down-s-line"></i>
-    </div>
-    <div class="dropdown-list">
-      <!--      selected:-->
-      <div class="selected-items">
+  <input (blur)="displayDropdown = false" (click)="displayDropdown= !displayDropdown" (focus)="displayDropdown = true"
+         class="is-hidden" placeholder="{{label}}"
+         type="text">
+  @if (displayDropdown) {
 
+    <div class="dropdown">
+      <div class="dropdown-button selector-button">
+        <!--          bouton-->
+        <i class="ri-arrow-down-s-line"></i>
       </div>
-      <hr>
-      <div class="available-items">
-        <!--      available:-->
-        <div class="dropdown-item">
-          <div class="label">
-            choix 1
-          </div>
+      <div class="dropdown-list">
+        <!--      selected:-->
+        <div class="selected-items">
+
+          @for (sc of selectedChoices; track sc) {
+            <div class="dropdown-item">
+
+              <i class="ri-checkbox-line"></i>
+              {{ sc }}
+            </div>
+          }
         </div>
-        <div class="dropdown-item">
-          <div class="label">
-            choix 2
-          </div>
+        <hr>
+        <div class="available-items">
+          <!--      available:-->
+          @for (c of choices; track c) {
+            <div class="dropdown-item">
+              <i class="ri-checkbox-blank-line"></i>
+              {{ c }}
+            </div>
+          }
         </div>
       </div>
     </div>
-  </div>
+
+  }
 </div>

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

@@ -61,4 +61,22 @@
       border-color: #525668;
     }
   }
+
+  .dropdown {
+    background: white;
+    padding: 1rem;
+    border-radius: 8px;
+    position: relative;
+    display: block;
+
+    .dropdown-item {
+      padding: 4px;
+      cursor: pointer;
+
+      &:hover {
+        background: #525668;
+        color: white;
+      }
+    }
+  }
 }

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

@@ -8,5 +8,8 @@ import {Component, Input} from '@angular/core';
 })
 export class MultiSelector {
   @Input() label!: string;
+  @Input() choices: any = ['choix 1', 'choix 2', 'choix 3'];
+  @Input() selectedChoices: any = ['choix 4'];
+  displayDropdown = true;
 
 }