AAE-4879 Update tooltip card to receive custom HTML (#6930)

Alfresco · Apr 16, 2021 · 684cdb8 · 684cdb8
1 parent e9bf84e
commit 684cdb8
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 13 deletions.
diff --git a/lib/core/directives/tooltip-card/tooltip-card.component.html b/lib/core/directives/tooltip-card/tooltip-card.component.html
@@ -1,5 +1,6 @@
 <div @tooltip class="adf-tooltip-card" [style.width.px]="width">
-    <img [src]="image" [width]="width" alt="{{text}}">
-    <hr *ngIf="image"/>
-    <p>{{text}}</p>
+    <img *ngIf="image " [src]="image" [width]="width" alt="{{text}}">
+    <hr *ngIf="image" />
+    <p *ngIf="text">{{text}}</p>
+    <div *ngIf="htmlContent" [innerHTML]="sanitizedHtmlContent()" class="adf-tooltip-card-content"></div>
 </div>
diff --git a/lib/core/directives/tooltip-card/tooltip-card.component.scss b/lib/core/directives/tooltip-card/tooltip-card.component.scss
@@ -17,7 +17,7 @@
         padding: 12px;
         border-radius: 6px;
 
-        p {
+        p, div {
             font-size: mat-font-size($alfresco-typography, caption);
             color: mat-color($foreground, text, 0.75);
             margin: 0;

diff --git a/lib/core/directives/tooltip-card/tooltip-card.component.ts b/lib/core/directives/tooltip-card/tooltip-card.component.ts
@@ -14,8 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, Input } from '@angular/core';
+import { Component, Input, SecurityContext } from '@angular/core';
 import { animate, style, transition, trigger } from '@angular/animations';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
     selector: 'adf-tooltip-card-component',
@@ -37,5 +38,12 @@ import { animate, style, transition, trigger } from '@angular/animations';
 export class TooltipCardComponent {
     @Input() image = '';
     @Input() text = '';
+    @Input() htmlContent = '';
     @Input() width = '300';
+
+    constructor(private sanitizer: DomSanitizer) { }
+
+    sanitizedHtmlContent(): string {
+        return this.sanitizer.sanitize(SecurityContext.HTML, this.htmlContent);
+    }
 }
diff --git a/lib/core/directives/tooltip-card/tooltip-card.directive.spec.ts b/lib/core/directives/tooltip-card/tooltip-card.directive.spec.ts
@@ -25,7 +25,7 @@ import { By } from '@angular/platform-browser';
 import { TooltipCardComponent } from './tooltip-card.component';
 
 @Component({
-    template: `<span #span [adf-tooltip-card]="'Sample text'" [image]="'/assets/testImg.png'" [width]="'400'" class="test-component"></span>`
+    template: `<span #span [adf-tooltip-card]="'Sample text'" [image]="'/assets/testImg.png'" [width]="'400'" [htmlContent]="'this is the <b>html</b> raw code'" class="test-component"></span>`
 })
 class TestComponent {
     @ViewChild(TooltipCardDirective, { static: true })
@@ -74,12 +74,14 @@ describe('TooltipCardDirective', () => {
         fixture.detectChanges();
         tooltipCard = overlay.querySelector<HTMLElement>('div.adf-tooltip-card');
         expect(tooltipCard).not.toBeNull();
-        const text = overlay.querySelector<HTMLElement>('div.adf-tooltip-card p');
-        const img = overlay.querySelector<HTMLElement>('div.adf-tooltip-card img');
+        const text = tooltipCard.querySelector<HTMLElement>('p');
+        const img = tooltipCard.querySelector<HTMLElement>('img');
+        const div = tooltipCard.querySelector<HTMLElement>('div');
         expect(tooltipCard.getAttribute('style')).toBe('width: 400px;');
         expect(text.textContent.trim()).toEqual('Sample text');
         expect(img.getAttribute('src')).toEqual('/assets/testImg.png');
         expect(img.getAttribute('width')).toEqual('400');
+        expect(div.innerHTML).toEqual('this is the <b>html</b> raw code');
     });
 
     it('should hide tooltip-card on mouse leave', () => {

diff --git a/lib/core/directives/tooltip-card/tooltip-card.directive.ts b/lib/core/directives/tooltip-card/tooltip-card.directive.ts
@@ -25,6 +25,14 @@ export class TooltipCardDirective implements OnInit {
     @Input('adf-tooltip-card') text = '';
     @Input() image = '';
     @Input() width = '300';
+    @Input() htmlContent = '';
+    @Input() originX: 'start' | 'center' | 'end' = 'start';
+    @Input() originY: 'top' | 'center' | 'bottom' = 'top';
+    @Input() overlayX: 'start' | 'center' | 'end' = 'start';
+    @Input() overlayY: 'top' | 'center' | 'bottom' = 'bottom';
+    @Input() offsetX = 0;
+    @Input() offsetY = -8;
+
     private overlayRef: OverlayRef;
 
     constructor(
@@ -37,11 +45,12 @@ export class TooltipCardDirective implements OnInit {
         const positionStrategy = this.overlayPositionBuilder
             .flexibleConnectedTo(this.elementRef)
             .withPositions([{
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -8
+                originX: this.originX,
+                originY: this.originY,
+                overlayX: this.overlayX,
+                overlayY: this.overlayY,
+                offsetY: this.offsetY,
+                offsetX: this.offsetX
             }]);
 
         this.overlayRef = this.overlay.create({ positionStrategy });
@@ -54,6 +63,7 @@ export class TooltipCardDirective implements OnInit {
         tooltipRef.instance.text = this.text;
         tooltipRef.instance.image = this.image;
         tooltipRef.instance.width = this.width;
+        tooltipRef.instance.htmlContent = this.htmlContent;
     }
 
     @HostListener('mouseout')