From 5aa064ac65e631f0871f2833ae91007a7c9b7a55 Mon Sep 17 00:00:00 2001
From: Valentin Mihai <Valentin-Gabriel.Mihai.ext@knecon.com>
Date: Mon, 24 Jul 2023 18:39:37 +0300
Subject: [PATCH] DM-337 - escaped non breaking spaces for option description

---
 .../details-radio.component.html              |  2 +-
 .../details-radio.component.scss              |  1 +
 .../details-radio/details-radio.component.ts  | 23 ++++++++++++++++---
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/lib/inputs/details-radio/details-radio.component.html b/src/lib/inputs/details-radio/details-radio.component.html
index 5d06f13..ea4b99e 100644
--- a/src/lib/inputs/details-radio/details-radio.component.html
+++ b/src/lib/inputs/details-radio/details-radio.component.html
@@ -12,7 +12,7 @@
 
             <div class="text">
                 <label class="details-radio-label pointer">{{ option.label | translate }}</label>
-                <span class="hint" [innerHTML]="option.description | translate : option.descriptionParams"></span>
+                <span class="hint" [innerHTML]="option.description"></span>
 
                 <div class="iqser-input-group" *ngIf="option.extraOption && !option.extraOption.hidden && isSelected(option)">
                     <mat-checkbox
diff --git a/src/lib/inputs/details-radio/details-radio.component.scss b/src/lib/inputs/details-radio/details-radio.component.scss
index 651bb93..82015f7 100644
--- a/src/lib/inputs/details-radio/details-radio.component.scss
+++ b/src/lib/inputs/details-radio/details-radio.component.scss
@@ -21,6 +21,7 @@ label {
         }
 
         .text {
+            width: 85%;
             display: flex;
             flex-direction: column;
         }
diff --git a/src/lib/inputs/details-radio/details-radio.component.ts b/src/lib/inputs/details-radio/details-radio.component.ts
index 1e80578..7270e2b 100644
--- a/src/lib/inputs/details-radio/details-radio.component.ts
+++ b/src/lib/inputs/details-radio/details-radio.component.ts
@@ -1,10 +1,10 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { DetailsRadioOption } from './details-radio-option';
 import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { FormFieldComponent } from '../form-field/form-field-component.directive';
 import { NgClass, NgForOf, NgIf } from '@angular/common';
 import { RoundCheckboxComponent } from '../round-checkbox/round-checkbox.component';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 
@@ -37,12 +37,20 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
         ReactiveFormsModule,
     ],
 })
-export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> {
+export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOption<I>> implements OnInit {
     @Input() options: DetailsRadioOption<I>[] = [];
     @Input() displayInRow = false;
 
     @Output() readonly extraOptionChanged: EventEmitter<DetailsRadioOption<I>> = new EventEmitter();
 
+    constructor(private readonly _translateService: TranslateService) {
+        super();
+    }
+
+    ngOnInit() {
+        this.#escapeDescriptionNonBreakingSpaces();
+    }
+
     toggleOption(option: DetailsRadioOption<I>): void {
         if (option.value !== this._value?.value) {
             this.markAsTouched();
@@ -63,4 +71,13 @@ export class DetailsRadioComponent<I> extends FormFieldComponent<DetailsRadioOpt
     emitExtraOption(): void {
         this.extraOptionChanged.emit(this.value);
     }
+
+    #escapeDescriptionNonBreakingSpaces() {
+        this.options.forEach(o => {
+            o.description = this._translateService.instant(o.description, {
+                ...o.descriptionParams,
+            });
+            o.description = o.description.replace(/&nbsp;/g, ' ');
+        });
+    }
 }