From 684cdb88eaaa212f6b996c1cba058b1308f81f00 Mon Sep 17 00:00:00 2001 From: Pablo Martinez Garcia Date: Fri, 16 Apr 2021 10:39:19 +0200 Subject: [PATCH] AAE-4879 Update tooltip card to receive custom HTML (#6930) --- .../tooltip-card/tooltip-card.component.html | 7 ++++--- .../tooltip-card/tooltip-card.component.scss | 2 +- .../tooltip-card/tooltip-card.component.ts | 10 +++++++++- .../tooltip-card.directive.spec.ts | 8 +++++--- .../tooltip-card/tooltip-card.directive.ts | 20 ++++++++++++++----- 5 files changed, 34 insertions(+), 13 deletions(-) diff --git a/lib/core/directives/tooltip-card/tooltip-card.component.html b/lib/core/directives/tooltip-card/tooltip-card.component.html index 1b52d74e35..2fb49aaa96 100644 --- a/lib/core/directives/tooltip-card/tooltip-card.component.html +++ b/lib/core/directives/tooltip-card/tooltip-card.component.html @@ -1,5 +1,6 @@
- {{text}} -
-

{{text}}

+ {{text}} +
+

{{text}}

+
diff --git a/lib/core/directives/tooltip-card/tooltip-card.component.scss b/lib/core/directives/tooltip-card/tooltip-card.component.scss index 852a0d7bbb..ff0265528d 100644 --- 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 index 6f1782421f..225780094d 100644 --- 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 index 74761e0fb4..a6c4a3e9dd 100644 --- 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: `` + template: `` }) class TestComponent { @ViewChild(TooltipCardDirective, { static: true }) @@ -74,12 +74,14 @@ describe('TooltipCardDirective', () => { fixture.detectChanges(); tooltipCard = overlay.querySelector('div.adf-tooltip-card'); expect(tooltipCard).not.toBeNull(); - const text = overlay.querySelector('div.adf-tooltip-card p'); - const img = overlay.querySelector('div.adf-tooltip-card img'); + const text = tooltipCard.querySelector('p'); + const img = tooltipCard.querySelector('img'); + const div = tooltipCard.querySelector('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 html 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 index 5248ff4347..cc3c6fa899 100644 --- 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')