csc multiple selectors

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

@@ -1,8 +1,11 @@
 <div class="filter-group">
   <div class="selectors">
-
-
-    <sae-multi-selector></sae-multi-selector>
+    <sae-multi-selector [label]="'Engine type'"></sae-multi-selector>
+    <sae-multi-selector [label]="'Findings'"></sae-multi-selector>
+    <sae-multi-selector [label]="'ATA'"></sae-multi-selector>
+    <sae-multi-selector [label]="'Part number'"></sae-multi-selector>
+    <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">
     <!--    liste de chips-->

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

@@ -1,5 +1,11 @@
 @use '../../src/styles/variables';
 
+.selectors {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
 .dropdown {
   .dropdown-button {
     padding: 10px;

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

@@ -1,8 +1,8 @@
 <!--    sélecteurs-->
 <div class="input-box">
   <i class="ri-search-line"></i>
-  <!--      <div class="label">Engine type</div>-->
-  <input class="is-hidden" placeholder="Engine type" type="text">
+  <div class="label">{{ label }}</div>
+  <input class="is-hidden" placeholder="{{label}}" type="text">
   <div class="dropdown">
     <div class="dropdown-button">
 

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'sae-multi-selector',
@@ -7,5 +7,6 @@ import {Component} from '@angular/core';
   styleUrl: './multi-selector.scss'
 })
 export class MultiSelector {
+  @Input() label!: string;
 
 }