Improve HTML entities decoding, and fix wrong  

src/app/app.component.ts

@@ -24,6 +24,8 @@ import { DialogSaveSessionComponent } from "./components/dialog-save-session/dia
 import { QuicknavComponent } from "./components/quicknav/quicknav.component";
 import { NotificationsService } from "./services/notifications.service";
 
+import { decodeHtml } from './util';
+
 import { HotkeysService, Hotkey } from "angular2-hotkeys";
 
 import { MatomoInjector, MatomoTracker } from "ngx-matomo";
@@ -266,13 +268,6 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     }
   }
 
-  /** clodo trick @see https://www.julesgaston.fr/encoder-decoder-entites-html-entities-javascript/ */
-  public static decodeHTMLEntities(text: string): string {
-    const textArea = document.createElement("textarea");
-    textArea.innerHTML = text;
-    return textArea.value;
-  }
-
   /**
    * Triggered at app startup.
    * Preferences are loaded by app setup service
@@ -336,11 +331,11 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
   }
 
   public getCalculatorLabel(t: CalculatorType) {
-    return AppComponent.decodeHTMLEntities(this.formulaireService.getLocalisedTitleFromCalculatorType(t));
+    return decodeHtml(this.formulaireService.getLocalisedTitleFromCalculatorType(t));
   }
 
   public getFullCalculatorTitle(calc: { title: string, type: CalculatorType, active?: boolean }): string {
-    return AppComponent.decodeHTMLEntities(calc.title + " (" + this.getCalculatorLabel(calc.type) + ")");
+    return decodeHtml(calc.title + " (" + this.getCalculatorLabel(calc.type) + ")");
   }
 
   public get calculators() {

src/app/components/generic-select/generic-select.component.html

 <mat-form-field>
     <mat-select [id]="selectId" [placeholder]="label" [(value)]="selectedValue" [multiple]="isMultiple" [disabled]="isDisabled">
         <mat-select-trigger *ngIf="isMultiple">
-          {{ selectedValue && selectedValue[0] ? selectedValue[0].label : '' }}
+          {{ selectedValue && selectedValue[0] ? entryLabel(selectedValue[0]) : '' }}
           <span *ngIf="selectedValue?.length > 1" class="multiple-selection-label">
             (+ {{ selectedValue.length - 1 }} {{ selectedValue?.length === 2 ? uitextAndOther : uitextAndOthers }})
           </span>

src/app/components/select-field-line/select-field-line.component.ts

@@ -5,6 +5,7 @@ import { SelectEntry } from "../../formulaire/elements/select-entry";
 import { I18nService } from "../../services/internationalisation.service";
 import { ApplicationSetupService } from "../../services/app-setup.service";
 import { SelectFieldCustom } from "../../formulaire/elements/select-field-custom";
+import { decodeHtml } from "../../util";
 
 @Component({
     selector: "select-field-line",
@@ -46,7 +47,7 @@ export class SelectFieldLineComponent implements OnInit {
     }
 
     protected entryLabel(entry: SelectEntry): string {
-        return entry.label;
+        return decodeHtml(entry.label);
     }
 
     public get selectedValue(): SelectEntry | SelectEntry[] {

src/app/services/internationalisation.service.ts

@@ -120,7 +120,7 @@ export class I18nService extends Observable implements Observer {
                 if (msg[textKey] === undefined) {
                     return `*** message not found: ${textKey} ***`;
                 }
-                return msg[textKey];
+                return decodeHtml(msg[textKey]);
             } else {
                 if (! this._Messages) {
                     return `*** messages not loaded: ${this._currentLanguage} ***`;
@@ -128,7 +128,7 @@ export class I18nService extends Observable implements Observer {
                 if (this._Messages[textKey] === undefined) {
                     return `*** message not found: ${textKey} ***`;
                 }
-                return this._Messages[textKey];
+                return decodeHtml(this._Messages[textKey]);
             }
         } else {
             const messages = msg || this._Messages;
@@ -140,10 +140,10 @@ export class I18nService extends Observable implements Observer {
                 if (this._fallbackMessages[textKey] === undefined) {
                     return `*** message not found: ${textKey} ***`;
                 } else {
-                    return this._fallbackMessages[textKey];
+                    return decodeHtml(this._fallbackMessages[textKey]);
                 }
             } else {
-                return messages[textKey];
+                return decodeHtml(messages[textKey]);
             }
         }
     }

src/locale/messages.fr.json

@@ -473,7 +473,7 @@
     "INFO_REMOUSRESULTS_TIRANT": "Tirant d'eau (m)",
     "INFO_REMOUSRESULTS_TIRANTCRITIQUE": "Tirant d'eau critique",
     "INFO_REMOUSRESULTS_TIRANTNORMAL": "Tirant d'eau normal",
-    "INFO_REPORT_BUG_BODY": "Ceci est un rapport d'erreur.\n\nMerci de décrire rapidement ci-dessous le problème rencontré, et les étapes qui vous y ont mené :\n\n\n\n\n--- État de la session en cours - ne pas modifier le texte ci-dessous ---\n--------------------------------------------------------------------------------------------\n\n",
+    "INFO_REPORT_BUG_BODY": "Ceci est un rapport d'erreur.\n\nMerci de décrire rapidement ci-dessous le problème rencontré, et les étapes qui vous y ont mené:\n\n\n\n\n--- État de la session en cours - ne pas modifier le texte ci-dessous ---\n--------------------------------------------------------------------------------------------\n\n",
     "INFO_REPORT_BUG_SUBJECT": "Rapport d'erreur",
     "INFO_REQUIRES": "dépend de",
     "INFO_RESULTS_EXPORT_AS_SPREADSHEET": "Exporter en XLSX",
@@ -525,7 +525,7 @@
     "INFO_THEME_VERIFICATION_TITRE": "Vérification de passes",
     "INFO_TITREJOURNAL": "Journal de calcul",
     "INFO_TITREJOURNAL_GLOBAL": "Synthèse du journal de calcul",
-    "INFO_WELCOME_CONTENT": "<p>Le logiciel Cassiopée a été développé par le pôle R&D écohydraulique regroupant l'<a href=\"https&nbsp;://ofb.gouv.fr\" target=\"_blank\">OFB</a> (Office Français de la Biodiversité) et l’<a href=\"https&nbsp;://www.imft.fr\" target=\"_blank\">IMFT</a> (Institut de mécanique des fluides de Toulouse) et par l'<a href=\"http&nbsp;://g-eau.fr\" target=\"_blank\">UMR G-EAU</a> (UMR Gestion de l'Eau, Acteurs, Usages).</p><p>Il regroupe des outils d'aide à la conception des dispositifs de franchissement piscicoles pour la montaison et la dévalaison ainsi que des outils de calcul hydraulique utiles pour l'ingénierie en environnement et agriculture.</p><p>Pour plus d'informations, consulter les <a href=\"assets/docs/fr/mentions_legales.html\" target=\"_blank\">mentions légales</a> et la <a href=\"assets/docs/fr/index.html\" target=\"_blank\">documentation</a>.</p>",
+    "INFO_WELCOME_CONTENT": "<p>Le logiciel Cassiopée a été développé par le pôle R&D écohydraulique regroupant l'<a href=\"https://ofb.gouv.fr\" target=\"_blank\">OFB</a> (Office Français de la Biodiversité) et l’<a href=\"https://www.imft.fr\" target=\"_blank\">IMFT</a> (Institut de mécanique des fluides de Toulouse) et par l'<a href=\"http://g-eau.fr\" target=\"_blank\">UMR G-EAU</a> (UMR Gestion de l'Eau, Acteurs, Usages).</p><p>Il regroupe des outils d'aide à la conception des dispositifs de franchissement piscicoles pour la montaison et la dévalaison ainsi que des outils de calcul hydraulique utiles pour l'ingénierie en environnement et agriculture.</p><p>Pour plus d'informations, consulter les <a href=\"assets/docs/fr/mentions_legales.html\" target=\"_blank\">mentions légales</a> et la <a href=\"assets/docs/fr/index.html\" target=\"_blank\">documentation</a>.</p>",
     "INFO_WELCOME_SUBTITLE": "Modules de calcul d'hydraulique",
     "INFO_EXAMPLE_LABEL_CHANNEL_FLOW": "Débit d'un chenal avec ouvrages",
     "INFO_EXAMPLE_LABEL_PAB_COMPLETE": "Passe à bassins type",