From 129b91aec9f10d134cb8ed66c0bbae742800d205 Mon Sep 17 00:00:00 2001
From: Netanel Basal <netanel7799@gmail.com>
Date: Wed, 13 Dec 2023 21:02:16 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20introduce=20injectTippyR?=
 =?UTF-8?q?ef?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ngneat/helipopper/src/lib/providers.ts    | 14 +++++++++++--
 .../helipopper/src/lib/tippy.directive.ts     | 21 +++++++++++--------
 projects/ngneat/helipopper/src/public-api.ts  |  2 +-
 src/app/example/example.component.ts          | 12 +++++++----
 src/app/playground/playground.component.html  |  1 +
 5 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/projects/ngneat/helipopper/src/lib/providers.ts b/projects/ngneat/helipopper/src/lib/providers.ts
index ee6439d..27468b6 100644
--- a/projects/ngneat/helipopper/src/lib/providers.ts
+++ b/projects/ngneat/helipopper/src/lib/providers.ts
@@ -1,6 +1,16 @@
-import { makeEnvironmentProviders } from '@angular/core';
-import { TIPPY_CONFIG, TippyConfig } from './tippy.types';
+import { inject, makeEnvironmentProviders } from '@angular/core';
+import { TIPPY_CONFIG, TIPPY_REF, TippyConfig, TippyInstance } from './tippy.types';
 
 export function provideTippyConfig(config: Partial<TippyConfig> = {}) {
   return makeEnvironmentProviders([{ provide: TIPPY_CONFIG, useValue: config }]);
 }
+
+export function injectTippyRef(): TippyInstance {
+  const instance = inject(TIPPY_REF, { optional: true });
+
+  if (instance) {
+    return instance;
+  }
+
+  throw new Error('tp is not provided in the current context or on one of its ancestors');
+}
diff --git a/projects/ngneat/helipopper/src/lib/tippy.directive.ts b/projects/ngneat/helipopper/src/lib/tippy.directive.ts
index 7abf6df..3bd4298 100644
--- a/projects/ngneat/helipopper/src/lib/tippy.directive.ts
+++ b/projects/ngneat/helipopper/src/lib/tippy.directive.ts
@@ -345,21 +345,24 @@ export class TippyDirective implements OnChanges, AfterViewInit, OnDestroy, OnIn
 
   protected resolveContent(instance: TippyInstance) {
     if (!this.viewOptions$ && !isString(this.content)) {
+      const injector = Injector.create({
+        providers: [
+          {
+            provide: TIPPY_REF,
+            useValue: this.instance,
+          },
+        ],
+        parent: this.injector,
+      });
       if (isComponent(this.content)) {
         this.instance.data = this.data;
+
         this.viewOptions$ = {
-          injector: Injector.create({
-            providers: [
-              {
-                provide: TIPPY_REF,
-                useValue: this.instance,
-              },
-            ],
-            parent: this.injector,
-          }),
+          injector,
         };
       } else if (isTemplateRef(this.content)) {
         this.viewOptions$ = {
+          injector,
           context: {
             $implicit: this.hide.bind(this),
             data: this.data,
diff --git a/projects/ngneat/helipopper/src/public-api.ts b/projects/ngneat/helipopper/src/public-api.ts
index 5a32e55..1e5c5a0 100644
--- a/projects/ngneat/helipopper/src/public-api.ts
+++ b/projects/ngneat/helipopper/src/public-api.ts
@@ -3,4 +3,4 @@ export { tooltipVariation, popperVariation, withContextMenuVariation } from './l
 export { TippyService } from './lib/tippy.service';
 export { inView, overflowChanges } from './lib/utils';
 export { ExtendedTippyInstance, TippyInstance, TIPPY_REF, TippyConfig, TIPPY_CONFIG } from './lib/tippy.types';
-export { provideTippyConfig } from './lib/providers';
+export { provideTippyConfig, injectTippyRef } from './lib/providers';
diff --git a/src/app/example/example.component.ts b/src/app/example/example.component.ts
index 51dd7de..6c714e6 100644
--- a/src/app/example/example.component.ts
+++ b/src/app/example/example.component.ts
@@ -1,18 +1,22 @@
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { TIPPY_REF, TippyInstance } from '@ngneat/helipopper';
+import { injectTippyRef } from 'projects/ngneat/helipopper/src/lib/providers';
 
 @Component({
   selector: 'app-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.scss']
+  styleUrls: ['./example.component.scss'],
 })
 export class ExampleComponent implements OnInit, OnDestroy {
   name: string;
+  tippy = injectTippyRef();
 
-  constructor(@Inject(TIPPY_REF) tippy: TippyInstance) {
-    console.log(tippy);
+  constructor() {
+    const { name = 'world!' } = this.tippy.data ?? {};
 
-    const { name = 'world!' } = tippy.data ?? {};
+    setTimeout(() => {
+      this.tippy.hide();
+    }, 1000);
 
     this.name = name;
   }
diff --git a/src/app/playground/playground.component.html b/src/app/playground/playground.component.html
index be9dacf..a9a9922 100644
--- a/src/app/playground/playground.component.html
+++ b/src/app/playground/playground.component.html
@@ -84,6 +84,7 @@ <h6>Custom Template</h6>
     </div>
 
     <ng-template #tpl let-hide>
+      <app-example />
       <div *ngFor="let item of tooltipPositions" class="positions">
         {{ item }}
       </div>