chore(@multi-frontend): upgrade ionic 8

dev/user-frontend-ionic/package.json

@@ -51,7 +51,7 @@
     "@capawesome/capacitor-badge": "6.0.0",
     "@capawesome/capacitor-screen-orientation": "6.0.1",
     "@fullcalendar/angular": "^6.0.0",
-    "@ionic/angular": "^7.3.3",
+    "@ionic/angular": "^8.2.7",
     "@larscom/ngx-translate-module-loader": "^3.0.6",
     "@ngneat/effects-ng": "^2.0.0",
     "@ngneat/elf": "^2.1.0",
@@ -91,7 +91,7 @@
     "@angular/language-service": "^16.2.12",
     "@capacitor/assets": "^3.0.4",
     "@capacitor/cli": "^6.0.0",
-    "@ionic/angular-toolkit": "^9.0.0",
+    "@ionic/angular-toolkit": "^10.1.1",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/leaflet": "^1.9.0",

dev/user-frontend-ionic/projects/auth/src/lib/login/login.page.html

@@ -56,32 +56,33 @@
       <div class="app-text-3" [innerHTML]="page.connexion_text"></div>
     </ion-row>
 
-    <ion-item lines="full">
-      <ion-label position="floating" class="input-label app-text-3 light">{{ 'AUTH.LOGIN.USERNAME' | translate }}</ion-label>
-      <ion-input (keyup.enter)="gotoField(passwordField)" type="text" formControlName="username" class="form-control" id="username" required></ion-input>
-      <ion-note class="app-text-5 danger" slot="error" *ngIf="username && username.errors && (username.dirty && username.touched)">
-        {{ 'AUTH.LOGIN.REQUIRED.USERNAME' | translate }}
-      </ion-note>
+    <ion-item lines="none">
+      <ion-input (keyup.enter)="gotoField(passwordField)" class="form-control app-text-3 light"
+                 formControlName="username" id="username" required type="text"
+                 label="{{ 'AUTH.LOGIN.USERNAME' | translate }}" labelPlacement="floating"
+                 errorText="{{ 'AUTH.LOGIN.REQUIRED.USERNAME' | translate }}">
+      </ion-input>
     </ion-item>
 
-    <ion-item lines="full">
-      <ion-label position="floating" class="input-label app-text-3 light">{{ 'AUTH.LOGIN.PASSWORD' | translate }}</ion-label>
-      <ion-input #passwordField (keyup.enter)="keyboardSubmit()" class="form-control" formControlName="password" id="password"
-                 required type="password"></ion-input>
-      <ion-note class="app-text-5 danger" slot="error" *ngIf="password && password.errors && (password.dirty && password.touched)">
-        {{ 'AUTH.LOGIN.REQUIRED.PASSWORD' | translate }}
-      </ion-note>
+    <ion-item lines="none">
+      <ion-input #passwordField (keyup.enter)="keyboardSubmit()" class="form-control app-text-3 light"
+                 formControlName="password" id="password" required type="password"
+                 label="{{ 'AUTH.LOGIN.PASSWORD' | translate }}" labelPlacement="floating"
+                 errorText="{{ 'AUTH.LOGIN.REQUIRED.PASSWORD' | translate }}">
+      </ion-input>
     </ion-item>
 
     <ion-item lines="none">
       <ion-checkbox
-        [checked]="(saveCredentialsOnAuthentication$ | async)"
         (ionChange)="onSaveCredentialsOnAuthenticationChange($event)"
+        [checked]="(saveCredentialsOnAuthentication$ | async)"
         class="ion-margin-end"
+        justify="start"
+        labelPlacement="end"
         mode="md"
       >
+        <ion-label class="app-text-3 light ion-text-wrap">{{ 'AUTH.LOGIN.SAVE_CREDENTIALS' | translate }}</ion-label>
       </ion-checkbox>
-      <ion-label class="app-text-3 light ion-text-wrap">{{ 'AUTH.LOGIN.SAVE_CREDENTIALS' | translate }}</ion-label>
     </ion-item>
 
     <ion-row class="ion-margin-top ion-padding-horizontal ion-justify-content-center">

dev/user-frontend-ionic/projects/auth/src/lib/preferences/preferences.component.html

@@ -41,8 +41,7 @@
   <h2 class="safe-area-padding-lr">{{ 'AUTH.PREFERENCES.TITLE' | translate }}</h2>
 </ion-label>
 <ion-item>
-  <ion-label class="ion-text-wrap">
-    {{ 'AUTH.PREFERENCES.SAVE_CREDENTIALS' | translate }}
-  </ion-label>
-  <ion-toggle [checked]="saveCredentialsOnAuthentication$ | async" slot="start" (ionChange)="onSaveCredentialsOnAuthenticationChange($event)"></ion-toggle>
+  <ion-toggle [checked]="saveCredentialsOnAuthentication$ | async" (ionChange)="onSaveCredentialsOnAuthenticationChange($event)" labelPlacement="end" justify="start">
+    <ion-label class="ion-text-wrap">{{ 'AUTH.PREFERENCES.SAVE_CREDENTIALS' | translate }}</ion-label>
+  </ion-toggle>
 </ion-item>

dev/user-frontend-ionic/projects/contact-us/src/lib/contact-us.page.html

@@ -55,16 +55,14 @@
     <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
       <ion-list>
         <ion-item>
-          <ion-label class="input-label" position="floating">{{ "CONTACT-US.YOUR_EMAIL" | translate }}</ion-label>
-          <ion-input formControlName="from"></ion-input>
+          <ion-input formControlName="from" label="{{ 'CONTACT-US.YOUR_EMAIL' | translate }}" labelPlacement="floating">
+          </ion-input>
         </ion-item>
         <ion-item>
-          <ion-label class="input-label" position="floating">{{ "CONTACT-US.SUBJECT" | translate }}</ion-label>
-          <ion-input formControlName="subject"></ion-input>
+          <ion-input formControlName="subject" label="{{ 'CONTACT-US.SUBJECT' | translate }}" labelPlacement="floating"></ion-input>
         </ion-item>
         <ion-item>
-          <ion-label class="input-label" position="floating">{{ "CONTACT-US.MESSAGE" | translate }}</ion-label>
-          <ion-textarea [autoGrow]="true" formControlName="text"></ion-textarea>
+          <ion-textarea [autoGrow]="true" formControlName="text" label="{{ 'CONTACT-US.MESSAGE' | translate }}" labelPlacement="floating"></ion-textarea>
         </ion-item>
       </ion-list>
 

dev/user-frontend-ionic/projects/contacts/src/lib/contacts.page.html

@@ -47,8 +47,9 @@
     </ion-row>
     <ion-radio-group [value]="this.filterChecked" (ionChange)="selectedCategory($event)">
       <ion-item lines="none" *ngFor="let filter of this.filtersList">
-        <ion-label class="app-text-4">{{ 'CONTACTS.CONTACT_TYPES.' + filter | translate }}</ion-label>
-        <ion-radio mode="md" [value]="filter"></ion-radio>
+        <ion-radio mode="md" [value]="filter">
+          <ion-label class="app-text-4">{{ 'CONTACTS.CONTACT_TYPES.' + filter | translate }}</ion-label>
+        </ion-radio>
       </ion-item>
     </ion-radio-group>
     <ion-row class="ion-padding ion-justify-content-center">

dev/user-frontend-ionic/projects/map/src/lib/map.page.html

@@ -56,8 +56,9 @@
         </ion-row>
         <form [formGroup]="form">
           <ion-item formArrayName="categoriesForm" *ngFor="let category of categoriesForm.controls; let i = index">
-            <ion-label class="app-text-3 light ion-text-wrap">{{ getCategoryTranslation(categories[i]) | translate }}</ion-label>
-            <ion-checkbox mode="md" [formControlName]="i"></ion-checkbox>
+            <ion-checkbox mode="md" [formControlName]="i">
+              <ion-label class="app-text-3 light ion-text-wrap">{{ getCategoryTranslation(categories[i]) | translate }}</ion-label>
+            </ion-checkbox>
           </ion-item>
         </form>
       </ion-list>

dev/user-frontend-ionic/projects/notifications/src/lib/notifications.page.html

@@ -60,8 +60,9 @@
         <form [formGroup]="form" *ngIf="(filterableChannels$ | async) as filterableChannels">
           <ion-item class="channel-list" formArrayName="channelsForm"
             *ngFor="let channel of channelsForm.controls; let i = index">
-            <ion-label class="app-text-3 light ion-text-wrap" for="terms">{{filterableChannels[i].label}}</ion-label>
-            <ion-checkbox mode="md" [formControlName]="i"></ion-checkbox>
+            <ion-checkbox mode="md" [formControlName]="i">
+              <ion-label class="app-text-3 light ion-text-wrap" for="terms">{{filterableChannels[i].label}}</ion-label>
+            </ion-checkbox>
           </ion-item>
         </form>
       </ion-list>

dev/user-frontend-ionic/projects/schedule/src/lib/common/select-planning/select-planning.component.html

@@ -74,8 +74,9 @@
       </ion-row>
       <form [formGroup]="form">
         <ion-item formArrayName="planningList" *ngFor="let planning of planningList.controls; let i = index">
-          <ion-label class="app-text-4 ion-text-wrap" for="terms">{{availablePlanningList[i].label}}</ion-label>
-          <ion-checkbox [formControlName]="i"></ion-checkbox>
+          <ion-checkbox [formControlName]="i">
+            <ion-label class="app-text-4 ion-text-wrap" for="terms">{{availablePlanningList[i].label}}</ion-label>
+          </ion-checkbox>
         </ion-item>
       </form>
     </ion-content>

dev/user-frontend-ionic/projects/schedule/src/lib/common/select-user/select-user.component.html

@@ -49,8 +49,7 @@
     <ion-content>
       <form [formGroup]="form" (ngSubmit)="onSubmit()">
         <ion-item>
-          <ion-label class="app-text-4" position="floating">{{ 'SCHEDULE.MANAGEMENT.USERNAME_FORM_LABEL' | translate }}</ion-label>
-          <ion-input formControlName="login"></ion-input>
+          <ion-input formControlName="login" label="{{ 'SCHEDULE.MANAGEMENT.USERNAME_FORM_LABEL' | translate }}" labelPlacement="floating"></ion-input>
         </ion-item>
         <ion-button expand="full" type="submit" [disabled]="!form.valid"><ion-text class="app-text-3 contrast">{{ 'SCHEDULE.MANAGEMENT.VALIDATE_FORM_BUTTON' | translate }}</ion-text></ion-button>
       </form>

dev/user-frontend-ionic/projects/schedule/src/lib/schedule-calendar/schedule-calendar.component.html

@@ -49,10 +49,9 @@
         completeLocalDate}}.</ion-note>
     </ion-item>
 
-    <ion-range *ngIf="viewType !== 'day'" [(ngModel)]="zoomLevel" (ionChange)="updateZoomLevel()" min="0" max="2" step="1" pin="true" snaps="true">
+    <ion-range *ngIf="viewType !== 'day'" [(ngModel)]="zoomLevel" (ionChange)="updateZoomLevel()" min="0" max="2" step="1" pin="true" snaps="true" ticks="true">
       <ion-label class="app-text-6" slot="start">0</ion-label>
       <ion-label class="app-text-6" slot="end">x2</ion-label>
-      <ion-label class="app-text-6" slot="tick" value="1">1</ion-label>
     </ion-range>
     <full-calendar #calendar [options]="calendarOptions">
       <ng-template #eventContent let-arg>

dev/user-frontend-ionic/src/theme/app-theme-dist/styles/auth/login.page.scss

@@ -41,19 +41,12 @@ ion-item {
   --background: transparent;
 }
 
-.input-label {
-  padding-bottom: 10px;
-  color: var(--app-font-color-primary) !important;
-}
-
-.item-has-value .label-floating.sc-ion-label-md-h {
-  padding-bottom: 10px;
+ion-input {
+  --border-color: var(--ion-color-medium-light-tint);
+  --highlight-color: var(--app-font-color-primary);
+  --highlight-color-valid: var(--app-font-color-primary);
 }
 
 ion-title {
   color: var(--app-font-color-topbar) !important;
 }
-
-ion-item {
-  --border-color: var(--ion-color-medium-light-tint);;
-}

dev/user-frontend-ionic/src/theme/app-theme-dist/styles/chatbot/chatbot.page.scss

@@ -119,7 +119,8 @@ ion-input.input {
   border-radius: 0.15rem;
   --ion-item-background: var(--app-color-component-background-primary);
   background-color: var(--app-color-component-background-primary);
-  caret-color: auto;
+  --highlight-color: var(--app-font-color-primary);
+  color: var(--app-font-color-primary) !important;
 }
 
 .icon {