Merge pull request #18 from rajnishdargan/feature-pratham

Issue #PS-4120 feat: Added DomSanitizer to load images for MTF and ASQ

projects/quml-library/src/lib/asq/asq-options/asq-options.component.html

@@ -24,8 +24,4 @@
       </div>
     </div>
   </div>
-</ng-container>
-
-
-
-
+</ng-container>

projects/quml-library/src/lib/asq/asq.component.ts

@@ -1,5 +1,6 @@
-import { Component,Input,Output,EventEmitter} from '@angular/core';
-import {AsqOptions,AsqInteractions} from '../interfaces/asq-interface';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { AsqOptions, AsqInteractions } from '../interfaces/asq-interface';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Component({
   selector: 'quml-asq',
@@ -13,17 +14,35 @@ export class AsqComponent {
   @Output() optionsReordered = new EventEmitter<AsqOptions>();
 
   public interactions?: AsqInteractions;
-  public questionBody?: string;
+  public questionBody?: SafeHtml;
   public layout: 'VERTICAL' | 'HORIZONTAL' | 'DEFAULT';
 
+  constructor(private sanitizer: DomSanitizer) {}
+
   ngOnInit(): void {
     this.initialize();
   }
 
   initialize(): void {
     this.setLayout();
-    this.interactions = this.question?.interactions;
-    this.questionBody = this.question?.body;
+
+    // Sanitize question body
+    this.questionBody = this.sanitizeHtml(this.question?.body);
+    console.log('ASQ this.questionBody', this.questionBody);
+
+    // Modify interactions with sanitized labels
+    if (this.question?.interactions) {
+      this.interactions = { ...this.question.interactions };
+
+      if (this.interactions.response1?.options) {
+        this.interactions.response1.options = this.interactions.response1.options.map(option => ({
+          ...option,
+          label: this.sanitizeHtml(option.label)
+        }));
+      }
+    }
+
+    console.log('ASQ this.interactions', this.interactions);
   }
 
   setLayout(): void {
@@ -41,4 +60,9 @@ export class AsqComponent {
   handleReorderedOptions(reorderedOptions: AsqOptions) {
     this.optionsReordered.emit(reorderedOptions);
   }
+
+  // Helper function to sanitize HTML
+  sanitizeHtml(html: any): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
 }

projects/quml-library/src/lib/interfaces/asq-interface.ts

@@ -1,5 +1,7 @@
+import { SafeHtml } from "@angular/platform-browser";
+
 export interface AsqOptions {
-    label: string;
+    label: string | SafeHtml;
     value: number;
 }
 

projects/quml-library/src/lib/interfaces/mtf-interface.ts

@@ -1,5 +1,7 @@
+import { SafeHtml } from "@angular/platform-browser";
+
 export interface MtfOption {
-    label: string;
+    label: string | SafeHtml;
     value: number;
 }
 

projects/quml-library/src/lib/mtf/mtf.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { MtfInteractions, MtfOptions } from '../interfaces/mtf-interface';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 @Component({
   selector: 'quml-mtf',
@@ -14,17 +15,40 @@ export class MtfComponent implements OnInit {
   @Output() optionsReordered = new EventEmitter<MtfOptions>();
 
   public interactions?: MtfInteractions;
-  public questionBody?: string;
+  public questionBody?: SafeHtml;
   public layout: 'VERTICAL' | 'HORIZONTAL' | 'DEFAULT';
 
+  constructor(private sanitizer: DomSanitizer) {}
+
   ngOnInit(): void {
     this.initialize();
   }
 
   initialize(): void {
     this.setLayout();
-    this.interactions = this.question?.interactions;
-    this.questionBody = this.question?.body;
+
+    // Sanitize the question body
+    this.questionBody = this.sanitizeHtml(this.question?.body);
+    console.log('MTF this.questionBody', this.questionBody);
+
+    // Sanitize interactions if available
+    if (this.question?.interactions) {
+      this.interactions = { ...this.question.interactions };
+
+      if (this.interactions.response1?.options) {
+        this.interactions.response1.options.left = this.interactions.response1.options.left.map(option => ({
+          ...option,
+          label: this.sanitizeHtml(option.label)
+        }));
+
+        this.interactions.response1.options.right = this.interactions.response1.options.right.map(option => ({
+          ...option,
+          label: this.sanitizeHtml(option.label)
+        }));
+      }
+    }
+
+    console.log('MTF this.interactions', this.interactions);
   }
 
   setLayout(): void {
@@ -42,4 +66,9 @@ export class MtfComponent implements OnInit {
   handleReorderedOptions(reorderedOptions: MtfOptions) {
     this.optionsReordered.emit(reorderedOptions);
   }
+
+  // Sanitize HTML content
+  sanitizeHtml(html: any): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
 }