@ngneat/helipopper 9.2.0 → 10.0.0-alpha.0

package/fesm2022/ngneat-helipopper.mjs

@@ -1,12 +1,21 @@
 import * as i0 from '@angular/core';
-import { ElementRef, InjectionToken, EventEmitter, Injector, PLATFORM_ID, booleanAttribute, Directive, Inject, Input, Output, Injectable, makeEnvironmentProviders, inject } from '@angular/core';
+import { ElementRef, InjectionToken, inject, NgZone, Injectable, booleanAttribute, input, model, EventEmitter, computed, DestroyRef, PLATFORM_ID, Injector, effect, untracked, Directive, Inject, Output, makeEnvironmentProviders } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
-import tippy from 'tippy.js';
-import { Observable, Subject, fromEvent, merge } from 'rxjs';
-import { auditTime, map, switchMap, takeUntil, filter } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Observable, defer, from, map as map$1, of, shareReplay, Subject, fromEvent, merge } from 'rxjs';
+import { auditTime, map, switchMap, filter, takeUntil } from 'rxjs/operators';
 import * as i1 from '@ngneat/overview';
 import { isString as isString$1, isComponent, isTemplateRef } from '@ngneat/overview';
 
+// Let's retrieve the native `IntersectionObserver` implementation hidden by
+// `__zone_symbol__IntersectionObserver`. This would be the unpatched version of
+// the observer present in zone.js environments.
+// Otherwise, if the user is using zoneless change detection (and zone.js is not included),
+// we fall back to the native implementation. Accessing the native implementation
+// allows us to remove `runOutsideAngular` calls and reduce indentation,
+// making the code a bit more readable.
+const IntersectionObserver = globalThis['__zone_symbol__IntersectionObserver'] || globalThis.IntersectionObserver;
+
 let supportsIntersectionObserver = false;
 let supportsResizeObserver = false;
 if (typeof window !== 'undefined') {
@@ -39,7 +48,7 @@ function inView(host, options = {
 function isElementOverflow(host) {
     // Don't access the `offsetWidth` multiple times since it triggers layout updates.
     const hostOffsetWidth = host.offsetWidth;
-    return hostOffsetWidth > host.parentElement.offsetWidth || hostOffsetWidth < host.scrollWidth;
+    return (hostOffsetWidth > host.parentElement.offsetWidth || hostOffsetWidth < host.scrollWidth);
 }
 function overflowChanges(host) {
     const element = coerceElement(host);
@@ -130,35 +139,139 @@ function observeVisibility(host, hiddenHandler) {
     };
 }
 
-const TIPPY_CONFIG = new InjectionToken('Tippy config', {
-    providedIn: 'root',
-    factory() {
-        return {};
-    }
-});
 const TIPPY_REF = new InjectionToken('TIPPY_REF');
+const TIPPY_CONFIG = new InjectionToken('Tippy config');
+
+// We need to use `isPromise` instead of checking whether
+// `value instanceof Promise`. In zone.js patched environments, `global.Promise`
+// is the `ZoneAwarePromise`.
+// `import(...)` returns a native promise (not a `ZoneAwarePromise`), causing
+// `instanceof` check to be falsy.
+function isPromise(value) {
+    return typeof value?.then === 'function';
+}
+class TippyFactory {
+    constructor() {
+        this._ngZone = inject(NgZone);
+        this._config = inject(TIPPY_CONFIG);
+        this._tippyImpl$ = null;
+    }
+    /**
+     * This returns an observable because the user should provide a `loader`
+     * function, which may return a promise if the tippy.js library is to be
+     * loaded asynchronously.
+     */
+    create(target, props) {
+        // We use `shareReplay` to ensure that subsequent emissions are
+        // synchronous and to avoid triggering the `defer` callback repeatedly
+        // when new subscribers arrive.
+        this._tippyImpl$ ||= defer(() => {
+            const maybeTippy = this._ngZone.runOutsideAngular(() => this._config.loader());
+            return isPromise(maybeTippy) ? from(maybeTippy).pipe(map$1((tippy) => tippy.default)) : of(maybeTippy);
+        }).pipe(shareReplay());
+        return this._tippyImpl$.pipe(map$1((tippy) => {
+            return this._ngZone.runOutsideAngular(() => tippy(target, props));
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TippyFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TippyFactory, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TippyFactory, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Transforms a value (typically a string) to a boolean.
+ * Intended to be used as a transform function of an input.
+ *
+ * @see https://material.angular.io/cdk/coercion/overview
+ */
+const coerceBooleanAttribute = booleanAttribute;
 
 class TippyDirective {
-    set appendTo(appendTo) {
-        this.updateProps({ appendTo });
+    // It should be a getter because computations are cached until
+    // any of the producers change.
+    get hostWidth() {
+        return this.host().getBoundingClientRect().width;
     }
-    constructor(platformId, globalConfig, injector, viewService, vcr, zone, hostRef) {
-        this.platformId = platformId;
+    constructor(globalConfig, injector, viewService, vcr, ngZone, hostRef) {
         this.globalConfig = globalConfig;
         this.injector = injector;
         this.viewService = viewService;
         this.vcr = vcr;
-        this.zone = zone;
+        this.ngZone = ngZone;
         this.hostRef = hostRef;
-        this.onlyTextOverflow = false;
-        this.staticWidthHost = false;
-        this.useHostWidth = false;
-        this.hideOnEscape = false;
-        this.detectChangesComponent = true;
-        this.isVisible = false;
+        // Note that default values are not provided for these bindings because `tippy.js`
+        // has its own default values and checks whether the provided props are `undefined`.
+        // We should keep `undefined` as the default value.
+        this.appendTo = input(undefined, { alias: 'tpAppendTo' });
+        this.content = input(undefined, { alias: 'tp' });
+        this.delay = input(undefined, { alias: 'tpDelay' });
+        this.duration = input(undefined, { alias: 'tpDuration' });
+        this.hideOnClick = input(undefined, {
+            alias: 'tpHideOnClick',
+        });
+        this.interactive = input(undefined, {
+            alias: 'tpInteractive',
+        });
+        this.interactiveBorder = input(undefined, {
+            alias: 'tpInteractiveBorder',
+        });
+        this.maxWidth = input(undefined, { alias: 'tpMaxWidth' });
+        // Note that some of the input signal types are declared explicitly because the compiler
+        // also uses types from `@popperjs/core` and requires a type annotation.
+        this.offset = input(undefined, { alias: 'tpOffset' });
+        this.placement = input(undefined, {
+            alias: 'tpPlacement',
+        });
+        this.popperOptions = input(undefined, {
+            alias: 'tpPopperOptions',
+        });
+        this.showOnCreate = input(undefined, {
+            alias: 'tpShowOnCreate',
+        });
+        this.trigger = input(undefined, { alias: 'tpTrigger' });
+        this.triggerTarget = input(undefined, {
+            alias: 'tpTriggerTarget',
+        });
+        this.zIndex = input(undefined, { alias: 'tpZIndex' });
+        this.animation = input(undefined, {
+            alias: 'tpAnimation',
+        });
+        this.useTextContent = input(false, {
+            transform: coerceBooleanAttribute,
+            alias: 'tpUseTextContent',
+        });
+        this.isLazy = input(false, {
+            transform: coerceBooleanAttribute,
+            alias: 'tpIsLazy',
+        });
+        this.variation = input(undefined, { alias: 'tpVariation' });
+        this.isEnabled = input(true, { alias: 'tpIsEnabled' });
+        this.className = input('', { alias: 'tpClassName' });
+        this.onlyTextOverflow = input(false, {
+            transform: coerceBooleanAttribute,
+            alias: 'tpOnlyTextOverflow',
+        });
+        this.staticWidthHost = input(false, {
+            transform: coerceBooleanAttribute,
+            alias: 'tpStaticWidthHost',
+        });
+        this.data = input(undefined, { alias: 'tpData' });
+        this.useHostWidth = input(false, {
+            transform: coerceBooleanAttribute,
+            alias: 'tpUseHostWidth',
+        });
+        this.hideOnEscape = input(false, {
+            transform: coerceBooleanAttribute,
+            alias: 'tpHideOnEscape',
+        });
+        this.detectChangesComponent = input(true, { alias: 'tpDetectChangesComponent' });
+        this.popperWidth = input(undefined, { alias: 'tpPopperWidth' });
+        this.customHost = input(undefined, { alias: 'tpHost' });
+        this.isVisible = model(false, { alias: 'tpIsVisible' });
         this.visible = new EventEmitter();
-        this.destroyed = new Subject();
-        this.enabled = true;
         this.variationDefined = false;
         /**
          * We had use `visible` event emitter previously as a `takeUntil` subscriber in multiple places
@@ -169,10 +282,26 @@ class TippyDirective {
          */
         this.visibleInternal = new Subject();
         this.contentChanged = new Subject();
+        this.host = computed(() => this.customHost() || this.hostRef.nativeElement);
+        this.destroyRef = inject(DestroyRef);
+        this.isServer = isPlatformServer(inject(PLATFORM_ID));
+        this.tippyFactory = inject(TippyFactory);
+        if (this.isServer)
+            return;
+        this.setupListeners();
+        this.destroyRef.onDestroy(() => {
+            this.instance?.destroy();
+            this.destroyView();
+            this.visibilityObserverCleanup?.();
+        });
     }
     ngOnChanges(changes) {
-        if (this.isServerSide)
+        if (this.isServer)
             return;
+        // TODO: we can update it later.
+        // We need to go over class properties, check whether it's a signal (`isSignal(prop)`)
+        // and construct a record where `Record<string, Signal>`.
+        // Follow-up changes would be to have a computation and an effect.
         let props = Object.keys(changes).reduce((acc, change) => {
             if (change === 'isVisible')
                 return acc;
@@ -180,9 +309,6 @@ class TippyDirective {
             return acc;
         }, {});
         let variation;
-        if (isChanged('content', changes)) {
-            this.contentChanged.next();
-        }
         if (isChanged('variation', changes)) {
             variation = changes.variation.currentValue;
             this.variationDefined = true;
@@ -197,57 +323,41 @@ class TippyDirective {
                 ...props,
             };
         }
-        if (isChanged('isEnabled', changes)) {
-            this.enabled = changes.isEnabled.currentValue;
-            this.setStatus();
-        }
-        if (isChanged('isVisible', changes)) {
-            this.isVisible ? this.show() : this.hide();
-        }
         this.updateProps(props);
     }
     ngOnInit() {
-        if (this.useHostWidth) {
+        if (this.useHostWidth()) {
             this.props.maxWidth = this.hostWidth;
         }
     }
     ngAfterViewInit() {
-        if (this.isServerSide)
+        if (this.isServer)
             return;
-        this.zone.runOutsideAngular(() => {
-            if (this.isLazy) {
-                if (this.onlyTextOverflow) {
-                    inView(this.host)
-                        .pipe(switchMap(() => this.isOverflowing$()), takeUntil(this.destroyed))
-                        .subscribe((isElementOverflow) => {
-                        this.checkOverflow(isElementOverflow);
-                    });
-                }
-                else {
-                    inView(this.host)
-                        .pipe(takeUntil(this.destroyed))
-                        .subscribe(() => {
-                        this.createInstance();
-                    });
-                }
-            }
-            else if (this.onlyTextOverflow) {
-                this.isOverflowing$()
-                    .pipe(takeUntil(this.destroyed))
+        if (this.isLazy()) {
+            const hostInView$ = inView(this.host());
+            if (this.onlyTextOverflow()) {
+                hostInView$
+                    .pipe(switchMap(() => this.isOverflowing$()), takeUntilDestroyed(this.destroyRef))
                     .subscribe((isElementOverflow) => {
                     this.checkOverflow(isElementOverflow);
                 });
             }
             else {
-                this.createInstance();
+                hostInView$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+                    this.createInstance();
+                });
             }
-        });
-    }
-    ngOnDestroy() {
-        this.destroyed.next();
-        this.instance?.destroy();
-        this.destroyView();
-        this.visibilityObserverCleanup?.();
+        }
+        else if (this.onlyTextOverflow()) {
+            this.isOverflowing$()
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((isElementOverflow) => {
+                this.checkOverflow(isElementOverflow);
+            });
+        }
+        else {
+            this.createInstance();
+        }
     }
     destroyView() {
         this.viewOptions$ = null;
@@ -260,27 +370,24 @@ class TippyDirective {
      * For example, if you have a grid row with an element that you toggle using the display CSS property on hover.
      */
     observeHostVisibility() {
-        if (this.isServerSide)
+        if (this.isServer)
             return;
         // We don't want to observe the host visibility if we are appending to the body.
         if (this.props.appendTo && this.props.appendTo !== document.body) {
             this.visibilityObserverCleanup?.();
             return this.visibleInternal
-                .asObservable()
-                .pipe(takeUntil(this.destroyed))
+                .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe((isVisible) => {
                 if (isVisible) {
-                    this.zone.runOutsideAngular(() => {
-                        this.visibilityObserverCleanup = observeVisibility(this.instance.reference, () => {
-                            this.hide();
-                            // Because we have animation on the popper it doesn't close immediately doesn't trigger the `tpVisible` event.
-                            // Tippy is relying on the transitionend event to trigger the `onHidden` callback.
-                            // https://github.com/atomiks/tippyjs/blob/master/src/dom-utils.ts#L117
-                            // This event never fires because the popper is removed from the DOM before the transition ends.
-                            if (this.props.animation) {
-                                this.onHidden();
-                            }
-                        });
+                    this.visibilityObserverCleanup = observeVisibility(this.instance.reference, () => {
+                        this.hide();
+                        // Because we have animation on the popper it doesn't close immediately doesn't trigger the `tpVisible` event.
+                        // Tippy is relying on the transitionend event to trigger the `onHidden` callback.
+                        // https://github.com/atomiks/tippyjs/blob/master/src/dom-utils.ts#L117
+                        // This event never fires because the popper is removed from the DOM before the transition ends.
+                        if (this.props.animation) {
+                            this.onHidden();
+                        }
                     });
                 }
                 else {
@@ -308,85 +415,86 @@ class TippyDirective {
         this.props = props;
         this.instance?.setProps(onlyTippyProps(props));
     }
-    setStatus() {
-        this.enabled ? this.instance?.enable() : this.instance?.disable();
-    }
-    get host() {
-        return this.customHost || this.hostRef.nativeElement;
-    }
-    get hostWidth() {
-        return this.host.getBoundingClientRect().width;
+    setStatus(isEnabled) {
+        isEnabled ? this.instance?.enable() : this.instance?.disable();
     }
     createInstance() {
-        if (!this.content && !this.useTextContent) {
+        if (!this.content() && !this.useTextContent()) {
             return;
         }
-        this.zone.runOutsideAngular(() => {
-            this.instance = tippy(this.host, {
-                allowHTML: true,
-                appendTo: document.body,
-                ...(this.globalConfig.zIndexGetter ? { zIndex: this.globalConfig.zIndexGetter() } : {}),
-                ...onlyTippyProps(this.globalConfig),
-                ...onlyTippyProps(this.props),
-                onMount: (instance) => {
-                    this.isVisible = true;
-                    this.visibleInternal.next(this.isVisible);
-                    if (this.visible.observed) {
-                        this.zone.run(() => this.visible.next(this.isVisible));
-                    }
-                    this.useHostWidth && this.listenToHostResize();
-                    this.globalConfig.onMount?.(instance);
-                },
-                onCreate: (instance) => {
-                    instance.popper.classList.add(`tippy-variation-${this.variation || this.globalConfig.defaultVariation}`);
-                    if (this.className) {
-                        for (const klass of normalizeClassName(this.className)) {
-                            instance.popper.classList.add(klass);
-                        }
-                    }
-                    this.globalConfig.onCreate?.(instance);
-                    if (this.isVisible === true) {
-                        instance.show();
+        this.tippyFactory
+            .create(this.host(), {
+            allowHTML: true,
+            appendTo: document.body,
+            ...(this.globalConfig.zIndexGetter
+                ? { zIndex: this.globalConfig.zIndexGetter() }
+                : {}),
+            ...onlyTippyProps(this.globalConfig),
+            ...onlyTippyProps(this.props),
+            onMount: (instance) => {
+                const isVisible = true;
+                this.isVisible.set(isVisible);
+                this.visibleInternal.next(isVisible);
+                if (this.visible.observed) {
+                    this.ngZone.run(() => this.visible.next(isVisible));
+                }
+                this.useHostWidth() && this.listenToHostResize();
+                this.globalConfig.onMount?.(instance);
+            },
+            onCreate: (instance) => {
+                instance.popper.classList.add(`tippy-variation-${this.variation() || this.globalConfig.defaultVariation}`);
+                if (this.className()) {
+                    for (const klass of normalizeClassName(this.className())) {
+                        instance.popper.classList.add(klass);
                     }
-                },
-                onShow: (instance) => {
-                    instance.reference.setAttribute('data-tippy-open', '');
-                    this.zone.run(() => {
-                        const content = this.resolveContent(instance);
-                        if (isString$1(content)) {
-                            instance.setProps({ allowHTML: false });
-                            if (!content?.trim()) {
-                                this.disable();
-                            }
-                            else {
-                                this.enable();
-                            }
-                        }
-                        instance.setContent(content);
-                        this.hideOnEscape && this.handleEscapeButton();
-                    });
-                    if (this.useHostWidth) {
-                        this.setInstanceWidth(instance, this.hostWidth);
+                }
+                this.globalConfig.onCreate?.(instance);
+                if (this.isVisible() === true) {
+                    instance.show();
+                }
+            },
+            onShow: (instance) => {
+                instance.reference.setAttribute('data-tippy-open', '');
+                // We're re-entering because we might create an Angular component,
+                // which should be done within the zone.
+                const content = this.ngZone.run(() => this.resolveContent(instance));
+                if (isString$1(content)) {
+                    instance.setProps({ allowHTML: false });
+                    if (!content?.trim()) {
+                        this.disable();
                     }
-                    else if (this.popperWidth) {
-                        this.setInstanceWidth(instance, this.popperWidth);
+                    else {
+                        this.enable();
                     }
-                    this.globalConfig.onShow?.(instance);
-                },
-                onHide(instance) {
-                    instance.reference.removeAttribute('data-tippy-open');
-                },
-                onHidden: (instance) => {
-                    this.onHidden(instance);
-                },
-            });
-            this.setStatus();
+                }
+                instance.setContent(content);
+                this.hideOnEscape() && this.handleEscapeButton();
+                if (this.useHostWidth()) {
+                    this.setInstanceWidth(instance, this.hostWidth);
+                }
+                else if (this.popperWidth()) {
+                    this.setInstanceWidth(instance, this.popperWidth());
+                }
+                this.globalConfig.onShow?.(instance);
+            },
+            onHide(instance) {
+                instance.reference.removeAttribute('data-tippy-open');
+            },
+            onHidden: (instance) => {
+                this.onHidden(instance);
+            },
+        })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((instance) => {
+            this.instance = instance;
+            this.setStatus(this.isEnabled());
             this.setProps(this.props);
-            this.variation === 'contextMenu' && this.handleContextMenu();
+            this.variation() === 'contextMenu' && this.handleContextMenu();
         });
     }
     resolveContent(instance) {
-        if (!this.viewOptions$ && !isString$1(this.content)) {
+        const content = this.content();
+        if (!this.viewOptions$ && !isString$1(content)) {
             const injector = Injector.create({
                 providers: [
                     {
@@ -396,42 +504,43 @@ class TippyDirective {
                 ],
                 parent: this.injector,
             });
-            if (isComponent(this.content)) {
-                this.instance.data = this.data;
+            const data = this.data();
+            if (isComponent(content)) {
+                this.instance.data = data;
                 this.viewOptions$ = {
                     injector,
                 };
             }
-            else if (isTemplateRef(this.content)) {
+            else if (isTemplateRef(content)) {
                 this.viewOptions$ = {
                     injector,
                     context: {
+                        data,
                         $implicit: this.hide.bind(this),
-                        data: this.data,
                     },
                 };
             }
         }
-        this.viewRef = this.viewService.createView(this.content, {
+        this.viewRef = this.viewService.createView(content, {
             vcr: this.vcr,
             ...this.viewOptions$,
         });
         // We need to call detectChanges for onPush components to update the content
-        if (this.detectChangesComponent && isComponent(this.content)) {
+        if (this.detectChangesComponent() && isComponent(content)) {
             this.viewRef.detectChanges();
         }
-        let content = this.viewRef.getElement();
-        if (this.useTextContent) {
-            content = instance.reference.textContent;
+        let newContent = this.viewRef.getElement();
+        if (this.useTextContent()) {
+            newContent = instance.reference.textContent;
         }
-        if (isString$1(content) && this.globalConfig.beforeRender) {
-            content = this.globalConfig.beforeRender(content);
+        if (isString$1(newContent) && this.globalConfig.beforeRender) {
+            newContent = this.globalConfig.beforeRender(newContent);
         }
-        return content;
+        return newContent;
     }
     handleContextMenu() {
-        fromEvent(this.host, 'contextmenu')
-            .pipe(takeUntil(this.destroyed))
+        fromEvent(this.host(), 'contextmenu')
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => {
             event.preventDefault();
             this.instance.setProps({
@@ -448,11 +557,9 @@ class TippyDirective {
         });
     }
     handleEscapeButton() {
-        this.zone.runOutsideAngular(() => {
-            fromEvent(document.body, 'keydown')
-                .pipe(filter(({ code }) => code === 'Escape'), takeUntil(merge(this.destroyed, this.visibleInternal.pipe(filter((v) => !v)))))
-                .subscribe(() => this.hide());
-        });
+        fromEvent(document.body, 'keydown')
+            .pipe(filter(({ code }) => code === 'Escape'), takeUntil(this.visibleInternal.pipe(filter((v) => !v))), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.hide());
     }
     checkOverflow(isElementOverflow) {
         if (isElementOverflow) {
@@ -468,8 +575,8 @@ class TippyDirective {
         }
     }
     listenToHostResize() {
-        dimensionsChanges(this.host)
-            .pipe(takeUntil(merge(this.destroyed, this.visibleInternal)))
+        dimensionsChanges(this.host())
+            .pipe(takeUntil(this.visibleInternal), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.setInstanceWidth(this.instance, this.hostWidth);
         });
@@ -480,23 +587,22 @@ class TippyDirective {
         instance.popper.style.maxWidth = inPixels;
         instance.popper.firstElementChild.style.maxWidth = inPixels;
     }
-    get isServerSide() {
-        return isPlatformServer(this.platformId);
-    }
     onHidden(instance = this.instance) {
         this.destroyView();
-        this.isVisible = false;
-        this.visibleInternal.next(this.isVisible);
+        const isVisible = false;
+        this.isVisible.set(isVisible);
+        this.visibleInternal.next(isVisible);
         if (this.visible.observed) {
-            this.zone.run(() => this.visible.next(this.isVisible));
+            this.ngZone.run(() => this.visible.next(isVisible));
         }
         this.globalConfig.onHidden?.(instance);
     }
     isOverflowing$() {
-        const notifiers$ = [overflowChanges(this.host)];
+        const host = this.host();
+        const notifiers$ = [overflowChanges(host)];
         // We need to handle cases where the host has a static width but the content might change
-        if (this.staticWidthHost) {
-            notifiers$.push(this.contentChanged.asObservable().pipe(
+        if (this.staticWidthHost()) {
+            notifiers$.push(this.contentChanged.pipe(
             // We need to wait for the content to be rendered before we can check if it's overflowing.
             switchMap(() => {
                 return new Observable((subscriber) => {
@@ -506,14 +612,30 @@ class TippyDirective {
                     });
                     return () => cancelAnimationFrame(id);
                 });
-            }), map(() => isElementOverflow(this.host))));
+            }), map(() => isElementOverflow(host))));
         }
         return merge(...notifiers$);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TippyDirective, deps: [{ token: PLATFORM_ID }, { token: TIPPY_CONFIG }, { token: i0.Injector }, { token: i1.ViewService }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.0.4", type: TippyDirective, isStandalone: true, selector: "[tp]", inputs: { appendTo: ["tpAppendTo", "appendTo"], content: ["tp", "content"], delay: ["tpDelay", "delay"], duration: ["tpDuration", "duration"], hideOnClick: ["tpHideOnClick", "hideOnClick"], interactive: ["tpInteractive", "interactive"], interactiveBorder: ["tpInteractiveBorder", "interactiveBorder"], maxWidth: ["tpMaxWidth", "maxWidth"], offset: ["tpOffset", "offset"], placement: ["tpPlacement", "placement"], popperOptions: ["tpPopperOptions", "popperOptions"], showOnCreate: ["tpShowOnCreate", "showOnCreate"], trigger: ["tpTrigger", "trigger"], triggerTarget: ["tpTriggerTarget", "triggerTarget"], zIndex: ["tpZIndex", "zIndex"], animation: ["tpAnimation", "animation"], useTextContent: ["tpUseTextContent", "useTextContent", booleanAttribute], isLazy: ["tpIsLazy", "isLazy", booleanAttribute], variation: ["tpVariation", "variation"], isEnabled: ["tpIsEnabled", "isEnabled"], className: ["tpClassName", "className"], onlyTextOverflow: ["tpOnlyTextOverflow", "onlyTextOverflow", booleanAttribute], staticWidthHost: ["tpStaticWidthHost", "staticWidthHost", booleanAttribute], data: ["tpData", "data"], useHostWidth: ["tpUseHostWidth", "useHostWidth", booleanAttribute], hideOnEscape: ["tpHideOnEscape", "hideOnEscape", booleanAttribute], detectChangesComponent: ["tpDetectChangesComponent", "detectChangesComponent"], popperWidth: ["tpPopperWidth", "popperWidth"], customHost: ["tpHost", "customHost"], isVisible: ["tpIsVisible", "isVisible", booleanAttribute] }, outputs: { visible: "tpVisible" }, exportAs: ["tippy"], usesOnChanges: true, ngImport: i0 }); }
+    setupListeners() {
+        effect(() => {
+            const appendTo = this.appendTo();
+            this.updateProps({ appendTo });
+        });
+        effect(() => {
+            // Capture signal read to track its changes.
+            this.content();
+            untracked(() => this.contentChanged.next());
+        });
+        effect(() => this.setStatus(this.isEnabled()));
+        effect(() => {
+            const isVisible = this.isVisible();
+            isVisible ? this.show() : this.hide();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TippyDirective, deps: [{ token: TIPPY_CONFIG }, { token: i0.Injector }, { token: i1.ViewService }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.0.6", type: TippyDirective, isStandalone: true, selector: "[tp]", inputs: { appendTo: { classPropertyName: "appendTo", publicName: "tpAppendTo", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "tp", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "tpDelay", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "tpDuration", isSignal: true, isRequired: false, transformFunction: null }, hideOnClick: { classPropertyName: "hideOnClick", publicName: "tpHideOnClick", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "tpInteractive", isSignal: true, isRequired: false, transformFunction: null }, interactiveBorder: { classPropertyName: "interactiveBorder", publicName: "tpInteractiveBorder", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "tpMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "tpOffset", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "tpPlacement", isSignal: true, isRequired: false, transformFunction: null }, popperOptions: { classPropertyName: "popperOptions", publicName: "tpPopperOptions", isSignal: true, isRequired: false, transformFunction: null }, showOnCreate: { classPropertyName: "showOnCreate", publicName: "tpShowOnCreate", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "tpTrigger", isSignal: true, isRequired: false, transformFunction: null }, triggerTarget: { classPropertyName: "triggerTarget", publicName: "tpTriggerTarget", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "tpZIndex", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "tpAnimation", isSignal: true, isRequired: false, transformFunction: null }, useTextContent: { classPropertyName: "useTextContent", publicName: "tpUseTextContent", isSignal: true, isRequired: false, transformFunction: null }, isLazy: { classPropertyName: "isLazy", publicName: "tpIsLazy", isSignal: true, isRequired: false, transformFunction: null }, variation: { classPropertyName: "variation", publicName: "tpVariation", isSignal: true, isRequired: false, transformFunction: null }, isEnabled: { classPropertyName: "isEnabled", publicName: "tpIsEnabled", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "tpClassName", isSignal: true, isRequired: false, transformFunction: null }, onlyTextOverflow: { classPropertyName: "onlyTextOverflow", publicName: "tpOnlyTextOverflow", isSignal: true, isRequired: false, transformFunction: null }, staticWidthHost: { classPropertyName: "staticWidthHost", publicName: "tpStaticWidthHost", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "tpData", isSignal: true, isRequired: false, transformFunction: null }, useHostWidth: { classPropertyName: "useHostWidth", publicName: "tpUseHostWidth", isSignal: true, isRequired: false, transformFunction: null }, hideOnEscape: { classPropertyName: "hideOnEscape", publicName: "tpHideOnEscape", isSignal: true, isRequired: false, transformFunction: null }, detectChangesComponent: { classPropertyName: "detectChangesComponent", publicName: "tpDetectChangesComponent", isSignal: true, isRequired: false, transformFunction: null }, popperWidth: { classPropertyName: "popperWidth", publicName: "tpPopperWidth", isSignal: true, isRequired: false, transformFunction: null }, customHost: { classPropertyName: "customHost", publicName: "tpHost", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "tpIsVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isVisible: "tpIsVisibleChange", visible: "tpVisible" }, exportAs: ["tippy"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TippyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TippyDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -522,102 +644,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                     standalone: true,
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [TIPPY_CONFIG]
-                }] }, { type: i0.Injector }, { type: i1.ViewService }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { appendTo: [{
-                type: Input,
-                args: ['tpAppendTo']
-            }], content: [{
-                type: Input,
-                args: ['tp']
-            }], delay: [{
-                type: Input,
-                args: ['tpDelay']
-            }], duration: [{
-                type: Input,
-                args: ['tpDuration']
-            }], hideOnClick: [{
-                type: Input,
-                args: ['tpHideOnClick']
-            }], interactive: [{
-                type: Input,
-                args: ['tpInteractive']
-            }], interactiveBorder: [{
-                type: Input,
-                args: ['tpInteractiveBorder']
-            }], maxWidth: [{
-                type: Input,
-                args: ['tpMaxWidth']
-            }], offset: [{
-                type: Input,
-                args: ['tpOffset']
-            }], placement: [{
-                type: Input,
-                args: ['tpPlacement']
-            }], popperOptions: [{
-                type: Input,
-                args: ['tpPopperOptions']
-            }], showOnCreate: [{
-                type: Input,
-                args: ['tpShowOnCreate']
-            }], trigger: [{
-                type: Input,
-                args: ['tpTrigger']
-            }], triggerTarget: [{
-                type: Input,
-                args: ['tpTriggerTarget']
-            }], zIndex: [{
-                type: Input,
-                args: ['tpZIndex']
-            }], animation: [{
-                type: Input,
-                args: ['tpAnimation']
-            }], useTextContent: [{
-                type: Input,
-                args: [{ transform: booleanAttribute, alias: 'tpUseTextContent' }]
-            }], isLazy: [{
-                type: Input,
-                args: [{ transform: booleanAttribute, alias: 'tpIsLazy' }]
-            }], variation: [{
-                type: Input,
-                args: ['tpVariation']
-            }], isEnabled: [{
-                type: Input,
-                args: ['tpIsEnabled']
-            }], className: [{
-                type: Input,
-                args: ['tpClassName']
-            }], onlyTextOverflow: [{
-                type: Input,
-                args: [{ transform: booleanAttribute, alias: 'tpOnlyTextOverflow' }]
-            }], staticWidthHost: [{
-                type: Input,
-                args: [{ transform: booleanAttribute, alias: 'tpStaticWidthHost' }]
-            }], data: [{
-                type: Input,
-                args: ['tpData']
-            }], useHostWidth: [{
-                type: Input,
-                args: [{ transform: booleanAttribute, alias: 'tpUseHostWidth' }]
-            }], hideOnEscape: [{
-                type: Input,
-                args: [{ transform: booleanAttribute, alias: 'tpHideOnEscape' }]
-            }], detectChangesComponent: [{
-                type: Input,
-                args: ['tpDetectChangesComponent']
-            }], popperWidth: [{
-                type: Input,
-                args: ['tpPopperWidth']
-            }], customHost: [{
-                type: Input,
-                args: ['tpHost']
-            }], isVisible: [{
-                type: Input,
-                args: [{ transform: booleanAttribute, alias: 'tpIsVisible' }]
-            }], visible: [{
+                }] }, { type: i0.Injector }, { type: i1.ViewService }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.ElementRef }], propDecorators: { visible: [{
                 type: Output,
                 args: ['tpVisible']
             }] } });
@@ -655,32 +684,34 @@ class TippyService {
         this.globalConfig = globalConfig;
         this.view = view;
         this.injector = injector;
+        this._tippyFactory = inject(TippyFactory);
     }
     create(host, content, options = {}) {
         const variation = options.variation || this.globalConfig.defaultVariation;
         const config = {
-            onShow: instance => {
+            onShow: (instance) => {
                 host.setAttribute('data-tippy-open', '');
                 if (!instance.$viewOptions) {
                     instance.$viewOptions = {};
+                    const injector = Injector.create({
+                        providers: [
+                            {
+                                provide: TIPPY_REF,
+                                useValue: instance,
+                            },
+                        ],
+                        parent: options.injector || this.injector,
+                    });
+                    instance.$viewOptions.injector = injector;
                     if (isTemplateRef(content)) {
                         instance.$viewOptions.context = {
                             $implicit: instance.hide.bind(instance),
-                            ...options.context
+                            ...options.context,
                         };
                     }
                     else if (isComponent(content)) {
                         instance.context = options.context;
                         instance.data = options.data;
-                        instance.$viewOptions.injector = Injector.create({
-                            providers: [
-                                {
-                                    provide: TIPPY_REF,
-                                    useValue: instance
-                                }
-                            ],
-                            parent: options.injector || this.injector
-                        });
                     }
                 }
                 if (!instance.view) {
@@ -689,7 +720,7 @@ class TippyService {
                 instance.setContent(instance.view.getElement());
                 options?.onShow?.(instance);
             },
-            onHidden: instance => {
+            onHidden: (instance) => {
                 host.removeAttribute('data-tippy-open');
                 if (!options.preserveView) {
                     instance.view.destroy();
@@ -700,7 +731,7 @@ class TippyService {
             ...onlyTippyProps(this.globalConfig),
             ...this.globalConfig.variations[variation],
             ...onlyTippyProps(options),
-            onCreate: instance => {
+            onCreate: (instance) => {
                 instance.popper.classList.add(`tippy-variation-${variation}`);
                 if (options.className) {
                     for (const klass of normalizeClassName(options.className)) {
@@ -709,14 +740,14 @@ class TippyService {
                 }
                 this.globalConfig.onCreate?.(instance);
                 options.onCreate?.(instance);
-            }
+            },
         };
-        return tippy(host, config);
+        return this._tippyFactory.create(host, config);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TippyService, deps: [{ token: TIPPY_CONFIG }, { token: i1.ViewService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TippyService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TippyService, deps: [{ token: TIPPY_CONFIG }, { token: i1.ViewService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TippyService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: TippyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: TippyService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -724,7 +755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                     args: [TIPPY_CONFIG]
                 }] }, { type: i1.ViewService }, { type: i0.Injector }] });
 
-function provideTippyConfig(config = {}) {
+function provideTippyConfig(config) {
     return makeEnvironmentProviders([{ provide: TIPPY_CONFIG, useValue: config }]);
 }
 function injectTippyRef() {