refactor(tooltip): migrate to signals #430 (#503)

* refactor(tooltip): migrate to signals #430 * refactor(tooltip): change naming * refactor(tooltip): change naming * refactor(tooltip): remove alias * refactor(tooltip): format * refactor(hover-card): remove mutable state pattern. Create inject token * refactor(tooltip): move computed previous to tooltip and remove ariaDescribedByState * refactor(tooltip): add brackets to the signal call * refactor(tooltip): run format --------- Co-authored-by: moos <[email protected]>
spartan-ng · Jan 7, 2025 · 814062a · 814062a
1 parent d7f1338
commit 814062a
Show file tree

Hide file tree

Showing 7 changed files with 316 additions and 260 deletions.
diff --git a/libs/brain/tooltip/src/index.ts b/libs/brain/tooltip/src/index.ts
@@ -8,6 +8,7 @@ export * from './lib/brn-tooltip-content.component';
 export * from './lib/brn-tooltip-content.directive';
 export * from './lib/brn-tooltip-trigger.directive';
 export * from './lib/brn-tooltip.directive';
+export * from './lib/brn-tooltip.token';
 
 export const BrnTooltipImports = [
 	BrnTooltipDirective,

diff --git a/libs/brain/tooltip/src/lib/brn-tooltip-content.component.ts b/libs/brain/tooltip/src/lib/brn-tooltip-content.component.ts
@@ -4,20 +4,20 @@
  * Check them out! Give them a try! Leave a star! Their work is incredible!
  */
 
-import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import {
 	ChangeDetectionStrategy,
 	ChangeDetectorRef,
 	Component,
-	type ElementRef,
+	ElementRef,
+	inject,
 	type OnDestroy,
 	PLATFORM_ID,
 	Renderer2,
+	signal,
 	type TemplateRef,
-	ViewChild,
+	viewChild,
 	ViewEncapsulation,
-	inject,
-	signal,
 } from '@angular/core';
 import { Subject } from 'rxjs';
 
@@ -82,12 +82,7 @@ export class BrnTooltipContentComponent implements OnDestroy {
 	public _exitAnimationDuration = 0;
 
 	/** Reference to the internal tooltip element. */
-	@ViewChild('tooltip', {
-		// Use a static query here since we interact directly with
-		// the DOM which can happen before `ngAfterViewInit`.
-		static: true,
-	})
-	public _tooltip?: ElementRef<HTMLElement>;
+	public _tooltip = viewChild('tooltip', { read: ElementRef<HTMLElement> });
 
 	/** Whether interactions on the page should close the tooltip */
 	private _closeOnInteraction = false;
@@ -216,7 +211,7 @@ export class BrnTooltipContentComponent implements OnDestroy {
 		// We set the classes directly here ourselves so that toggling the tooltip state
 		// isn't bound by change detection. This allows us to hide it even if the
 		// view ref has been detached from the CD tree.
-		const tooltip = this._tooltip?.nativeElement;
+		const tooltip = this._tooltip()?.nativeElement;
 		if (!tooltip || !this._isBrowser) return;
 		this._renderer2.setStyle(tooltip, 'visibility', isVisible ? 'visible' : 'hidden');
 		if (isVisible) {
@@ -231,7 +226,7 @@ export class BrnTooltipContentComponent implements OnDestroy {
 		// We set the classes directly here ourselves so that toggling the tooltip state
 		// isn't bound by change detection. This allows us to hide it even if the
 		// view ref has been detached from the CD tree.
-		const tooltip = this._tooltip?.nativeElement;
+		const tooltip = this._tooltip()?.nativeElement;
 		if (!tooltip || !this._isBrowser) return;
 		this._renderer2.setAttribute(tooltip, 'data-side', side);
 		this._renderer2.setAttribute(tooltip, 'data-state', isVisible ? 'open' : 'closed');