AAE-41613 Hiding tooltip card on click (#11571)

lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.spec.ts

@@ -131,4 +131,20 @@ describe('TooltipCardDirective', () => {
 
         expect(fixture.componentInstance.directive.hide).toHaveBeenCalledTimes(0);
     });
+
+    it('should hide tooltip-card on click', () => {
+        fixture.detectChanges();
+        const span = fixture.debugElement.query(By.css('span.test-component'));
+        span.triggerEventHandler('mouseenter', {});
+        fixture.detectChanges();
+        let tooltipCard = overlay.querySelector<HTMLElement>('div.adf-tooltip-card');
+
+        expect(tooltipCard).not.toBeNull();
+
+        span.triggerEventHandler('click', {});
+        fixture.detectChanges();
+        tooltipCard = overlay.querySelector<HTMLElement>('div.adf-tooltip-card');
+
+        expect(tooltipCard).toBeNull();
+    });
 });

lib/core/src/lib/directives/tooltip-card/tooltip-card.directive.ts

@@ -37,7 +37,11 @@ export class TooltipCardDirective implements OnInit, OnDestroy {
 
     private overlayRef: OverlayRef;
 
-    constructor(private overlay: Overlay, private overlayPositionBuilder: OverlayPositionBuilder, private elementRef: ElementRef) {}
+    constructor(
+        private overlay: Overlay,
+        private overlayPositionBuilder: OverlayPositionBuilder,
+        private elementRef: ElementRef
+    ) {}
 
     ngOnDestroy(): void {
         if (this.overlayRef) {
@@ -70,6 +74,7 @@ export class TooltipCardDirective implements OnInit, OnDestroy {
     }
 
     @HostListener('mouseleave')
+    @HostListener('click')
     hide() {
         this.overlayRef?.detach();
     }