[US TRTL-531] [FIX TRTL-503] rework group app + list + autocomplete

ui/ui-frontend-common/src/sass/material/_autocomplete.scss

+
 .vitamui-autocomplete-panel {
     border-radius: 5px;
     background-color: $white;
     border: solid 1px var(--vitamui-grey-400);
 
     .mat-option {
-        height: 40px;
+        height: 50px;
     }
 
     .mat-option:not(:last-child) {
-        border-bottom: 1px solid #f0f0f0;
+        border-bottom: 1px solid var(--vitamui-grey-300);
     }
 
   // FIXME: Seems that var( --colorName ) cant be applied in transparentize function. How to load specific color with a composite here ?
     .mat-option:hover:not(.mat-option-disabled),
     .mat-option:focus:not(.mat-option-disabled),
     .mat-option.mat-active {
-        background: var(--vitamui-grey-100)
+        background: var(--vitamui-grey-300)
     }
 
     .mat-option-text {
         display: flex;
-        justify-content: space-between;
         align-items: center;
         font-family:'Mulish', sans-serif;
         font-size: 14px;
+        line-height: 22px;
         color: var(--vitamui-grey-900);
+        letter-spacing: 0.1px;
 
         .vitamui-option-label {
             overflow: hidden;
@@ -39,3 +41,9 @@
     }
 
 }
+
+.mat-autocomplete-panel.mat-autocomplete-visible {
+    box-shadow: none !important;
+}
+
+

ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.html

@@ -8,13 +8,10 @@
     <cdk-step>
       <div class="content">
         <div class="text large bold" i18n="Profile Group Creation@@profileGroupCreateTitle">Création d'un groupe de profils</div>
-
           <vitamui-common-slide-toggle formControlName="enabled">Groupe de profils <span *ngIf="!form.get('enabled').value">in</span>actif</vitamui-common-slide-toggle>
-
           <div class="mt-3">
             <vitamui-common-input class="col-5 p-0" formControlName="name" minlength="2" maxlength="100"
               required placeholder="Nom" i18n-placeholder="Name@@profileGroupCreateNamePlaceholder">
-
               <ng-container *ngIf="form.get('name')?.touched">
                 <vitamui-common-input-error *ngIf="!!form.get('name')?.errors?.required" i18n="Required field error hint@@formErrorRequiredField">Champ requis</vitamui-common-input-error>
                 <vitamui-common-input-error *ngIf="!!form?.get('name')?.errors?.nameExists" i18n="Name exists error hint@@formErrorNameExists">Nom déjà utilisé</vitamui-common-input-error>
@@ -58,7 +55,7 @@
 
     <cdk-step>
       <div class="content">
-        <div class="text large bold mb-0" i18n="Group Provisioning@@profileGroupCreateTitle2">Provisionnement du groupe “{{ form.get('name').value }}”</div>
+        <div class="text large bold" i18n="Group Provisioning@@profileGroupCreateTitle2">Provisionnement du groupe “{{ form.get('name').value }}”</div>
         <div class="text medium bold mb-4" *ngIf="form.get('level').value" i18n="@@groupLevel">Niveau : {{ form.get('level').value }}</div>
         
         <app-profiles-form formControlName="profileIds" [level]="form.get('level').value"></app-profiles-form>

ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-edit/profiles-edit.component.html

 <div class="header">
-  <mat-progress-bar mode="determinate" value="100" class="stepper-progress-bar"></mat-progress-bar>
+  <vitamui-common-progress-bar [index]="stepIndex" [count]="stepCount"></vitamui-common-progress-bar>
 </div>
 
 <form [formGroup]="form" (ngSubmit)="onSubmit()">
+  <vitamui-common-stepper (selectionChange)="stepIndex=$event.selectedIndex">
+  <cdk-step>
+
   <div class="content">
     <div class="text large bold" i18n="Edit the profiles of the group@@profilesEditTitle">Modification des profils de "{{ data?.group?.name }}"</div>
 
-    <div class="form-group">
-      <app-profiles-form formControlName="profileIds"  [level]="data?.group?.level"></app-profiles-form>
-    </div>
-
+      <app-profiles-form formControlName="profileIds" [level]="data?.group?.level"></app-profiles-form>
+    
     <div class="actions">
       <button type="submit" class="btn primary" [disabled]="form.pristine || form.invalid" i18n="Done@@profilesEditSubmitButton">Terminer</button>
       <button type="button" class="btn cancel link" (click)="onCancel()" i18n="Cancel@@profilesEditCancelButton">Annuler</button>
     </div>
   </div>
+  </cdk-step>
+</vitamui-common-stepper>
 </form>

ui/ui-frontend/projects/identity/src/app/group/group-preview/profiles-tab/profiles-edit/profiles-edit.component.ts

@@ -52,6 +52,9 @@ export class ProfilesEditComponent implements OnInit, OnDestroy {
 
   form: FormGroup;
 
+  public stepIndex = 0;
+  public stepCount = 1;
+
   private keyPressSubscription: Subscription;
 
   constructor(