@ngneat/helipopper 12.2.0 → 13.1.0

package/fesm2022/ngneat-helipopper.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { ElementRef, inject, NgZone, ɵisPromise as _isPromise, Injectable, InjectionToken, Injector, signal, booleanAttribute, input, output, model, computed, DestroyRef, PLATFORM_ID, ViewContainerRef, effect, untracked, Directive } from '@angular/core';
+import { ElementRef, inject, NgZone, ɵisPromise as _isPromise, Injectable, InjectionToken, Injector, signal, booleanAttribute, input, output, model, computed, DestroyRef, PLATFORM_ID, ViewContainerRef, afterEveryRender, untracked, effect, Directive } from '@angular/core';
 import { isPlatformServer } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Observable, defer, of, tap, map as map$1, Subject, merge } from 'rxjs';
-import { auditTime, map, switchMap, takeUntil } from 'rxjs/operators';
+import { Observable, defer, of, tap, map as map$1, Subject, firstValueFrom, combineLatest, from, merge } from 'rxjs';
+import { auditTime, map, switchMap, takeUntil, filter } from 'rxjs/operators';
 import { ViewService, isTemplateRef, isComponent, isString } from '@ngneat/overview';
-import { TIPPY_LOADER, TIPPY_CONFIG } from '@ngneat/helipopper/config';
+import { TIPPY_LOADER, TIPPY_CONFIG, TIPPY_LOADER_COMPONENT, TIPPY_LOADER_TIMING } from '@ngneat/helipopper/config';
 
 // Let's retrieve the native `IntersectionObserver` implementation hidden by
 // `__zone_symbol__IntersectionObserver`. This would be the unpatched version of
@@ -65,7 +65,7 @@ function dimensionsChanges(target) {
             subscriber.complete();
             return;
         }
-        const observer = new ResizeObserver(() => subscriber.next(true));
+        const observer = new ResizeObserver(() => subscriber.next());
         observer.observe(target);
         return () => observer.disconnect();
     });
@@ -97,6 +97,8 @@ function onlyTippyProps(allProps) {
         'popperWidth',
         'zIndexGetter',
         'staticWidthHost',
+        'bindings',
+        'directives',
     ];
     const overriddenMethods = ['onShow', 'onHidden', 'onCreate'];
     Object.keys(allProps).forEach((prop) => {
@@ -149,7 +151,7 @@ class TippyFactory {
      * function, which may return a promise if the tippy.js library is to be
      * loaded asynchronously.
      */
-    create(target, props) {
+    getTippyImpl() {
         this._tippyImpl$ ||= defer(() => {
             if (this._tippy)
                 return of(this._tippy);
@@ -179,14 +181,12 @@ class TippyFactory {
                 this._tippy = tippy;
             }));
         });
-        return this._tippyImpl$.pipe(map$1((tippy) => {
-            return this._ngZone.runOutsideAngular(() => tippy(target, props));
-        }));
+        return this._tippyImpl$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TippyFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TippyFactory, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TippyFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TippyFactory, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TippyFactory, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TippyFactory, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -207,11 +207,12 @@ function injectTippyRef() {
 
 class TippyService {
     constructor() {
+        this._ngZone = inject(NgZone);
         this._injector = inject(Injector);
         this._globalConfig = inject(TIPPY_CONFIG, { optional: true });
         this._viewService = inject(ViewService);
         this._tippyFactory = inject(TippyFactory);
-        this.enabled = signal(true, ...(ngDevMode ? [{ debugName: "enabled" }] : []));
+        this.enabled = signal(true, ...(ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []));
     }
     enableAll() {
         this.enabled.set(true);
@@ -276,12 +277,16 @@ class TippyService {
                 options.onCreate?.(instance);
             },
         };
-        return this._tippyFactory.create(host, config);
+        return this._tippyFactory.getTippyImpl().pipe(map$1((tippy) => {
+            return this._ngZone.runOutsideAngular(() => {
+                return tippy(host, config);
+            });
+        }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TippyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TippyService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TippyService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TippyService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TippyService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TippyService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -308,7 +313,7 @@ const appendTo = function appendTo() {
 // We are providing them as default input values.
 // The `tippy.js` repository has been archived and is unlikely to
 // change in the future, so it is safe to use these values as defaults.
-const defaultAppendTo = () => document.body;
+const defaultAppendTo = (() => document.body);
 const defaultDelay = 0;
 const defaultDuration = [300, 250];
 const defaultInteractiveBorder = 2;
@@ -326,95 +331,50 @@ class TippyDirective {
         return this.host().getBoundingClientRect().width;
     }
     constructor() {
-        this.appendTo = input(defaultAppendTo, ...(ngDevMode ? [{ debugName: "appendTo", alias: 'tpAppendTo' }] : [{
-                alias: 'tpAppendTo',
-            }]));
-        this.content = input('', ...(ngDevMode ? [{ debugName: "content", alias: 'tp' }] : [{ alias: 'tp' }]));
-        this.delay = input(defaultDelay, ...(ngDevMode ? [{ debugName: "delay", alias: 'tpDelay' }] : [{
-                alias: 'tpDelay',
-            }]));
-        this.duration = input(defaultDuration, ...(ngDevMode ? [{ debugName: "duration", alias: 'tpDuration' }] : [{
-                alias: 'tpDuration',
-            }]));
-        this.hideOnClick = input(true, ...(ngDevMode ? [{ debugName: "hideOnClick", alias: 'tpHideOnClick' }] : [{
-                alias: 'tpHideOnClick',
-            }]));
-        this.interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive", alias: 'tpInteractive' }] : [{
-                alias: 'tpInteractive',
-            }]));
-        this.interactiveBorder = input(defaultInteractiveBorder, ...(ngDevMode ? [{ debugName: "interactiveBorder", alias: 'tpInteractiveBorder' }] : [{
-                alias: 'tpInteractiveBorder',
-            }]));
-        this.maxWidth = input(defaultMaxWidth, ...(ngDevMode ? [{ debugName: "maxWidth", alias: 'tpMaxWidth' }] : [{
-                alias: 'tpMaxWidth',
-            }]));
+        this.appendTo = input(defaultAppendTo, { ...(ngDevMode ? { debugName: "appendTo" } : /* istanbul ignore next */ {}), alias: 'tpAppendTo' });
+        this.content = input('', { ...(ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {}), alias: 'tp' });
+        this.delay = input(defaultDelay, { ...(ngDevMode ? { debugName: "delay" } : /* istanbul ignore next */ {}), alias: 'tpDelay' });
+        this.duration = input(defaultDuration, { ...(ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {}), alias: 'tpDuration' });
+        this.hideOnClick = input(true, { ...(ngDevMode ? { debugName: "hideOnClick" } : /* istanbul ignore next */ {}), alias: 'tpHideOnClick' });
+        this.interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), alias: 'tpInteractive' });
+        this.interactiveBorder = input(defaultInteractiveBorder, { ...(ngDevMode ? { debugName: "interactiveBorder" } : /* istanbul ignore next */ {}), alias: 'tpInteractiveBorder' });
+        this.maxWidth = input(defaultMaxWidth, { ...(ngDevMode ? { debugName: "maxWidth" } : /* istanbul ignore next */ {}), 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(defaultOffset, ...(ngDevMode ? [{ debugName: "offset", alias: 'tpOffset' }] : [{
-                alias: 'tpOffset',
-            }]));
-        this.placement = input(defaultPlacement, ...(ngDevMode ? [{ debugName: "placement", alias: 'tpPlacement' }] : [{
-                alias: 'tpPlacement',
-            }]));
-        this.popperOptions = input({}, ...(ngDevMode ? [{ debugName: "popperOptions", alias: 'tpPopperOptions' }] : [{
-                alias: 'tpPopperOptions',
-            }]));
-        this.showOnCreate = input(false, ...(ngDevMode ? [{ debugName: "showOnCreate", alias: 'tpShowOnCreate' }] : [{
-                alias: 'tpShowOnCreate',
-            }]));
-        this.trigger = input(defaultTrigger, ...(ngDevMode ? [{ debugName: "trigger", alias: 'tpTrigger' }] : [{
-                alias: 'tpTrigger',
-            }]));
-        this.triggerTarget = input(defaultTriggerTarget, ...(ngDevMode ? [{ debugName: "triggerTarget", alias: 'tpTriggerTarget' }] : [{
-                alias: 'tpTriggerTarget',
-            }]));
-        this.zIndex = input(defaultZIndex, ...(ngDevMode ? [{ debugName: "zIndex", alias: 'tpZIndex' }] : [{
-                alias: 'tpZIndex',
-            }]));
-        this.animation = input(defaultAnimation, ...(ngDevMode ? [{ debugName: "animation", alias: 'tpAnimation' }] : [{
-                alias: 'tpAnimation',
-            }]));
-        this.useTextContent = input(false, ...(ngDevMode ? [{ debugName: "useTextContent", transform: coerceBooleanAttribute,
-                alias: 'tpUseTextContent' }] : [{
-                transform: coerceBooleanAttribute,
-                alias: 'tpUseTextContent',
-            }]));
-        this.isLazy = input(false, ...(ngDevMode ? [{ debugName: "isLazy", transform: coerceBooleanAttribute,
-                alias: 'tpIsLazy' }] : [{
-                transform: coerceBooleanAttribute,
-                alias: 'tpIsLazy',
-            }]));
-        this.variation = input(undefined, ...(ngDevMode ? [{ debugName: "variation", alias: 'tpVariation' }] : [{ alias: 'tpVariation' }]));
-        this.isEnabled = input(true, ...(ngDevMode ? [{ debugName: "isEnabled", alias: 'tpIsEnabled' }] : [{ alias: 'tpIsEnabled' }]));
-        this.className = input('', ...(ngDevMode ? [{ debugName: "className", alias: 'tpClassName' }] : [{ alias: 'tpClassName' }]));
-        this.onlyTextOverflow = input(false, ...(ngDevMode ? [{ debugName: "onlyTextOverflow", transform: coerceBooleanAttribute,
-                alias: 'tpOnlyTextOverflow' }] : [{
-                transform: coerceBooleanAttribute,
-                alias: 'tpOnlyTextOverflow',
-            }]));
-        this.staticWidthHost = input(false, ...(ngDevMode ? [{ debugName: "staticWidthHost", transform: coerceBooleanAttribute,
-                alias: 'tpStaticWidthHost' }] : [{
-                transform: coerceBooleanAttribute,
-                alias: 'tpStaticWidthHost',
-            }]));
-        this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data", alias: 'tpData' }] : [{ alias: 'tpData' }]));
-        this.useHostWidth = input(false, ...(ngDevMode ? [{ debugName: "useHostWidth", transform: coerceBooleanAttribute,
-                alias: 'tpUseHostWidth' }] : [{
-                transform: coerceBooleanAttribute,
-                alias: 'tpUseHostWidth',
-            }]));
-        this.hideOnEscape = input(false, ...(ngDevMode ? [{ debugName: "hideOnEscape", transform: coerceBooleanAttribute,
-                alias: 'tpHideOnEscape' }] : [{
-                transform: coerceBooleanAttribute,
-                alias: 'tpHideOnEscape',
-            }]));
-        this.popperWidth = input(undefined, ...(ngDevMode ? [{ debugName: "popperWidth", alias: 'tpPopperWidth' }] : [{
-                alias: 'tpPopperWidth',
-            }]));
-        this.customHost = input(undefined, ...(ngDevMode ? [{ debugName: "customHost", alias: 'tpHost' }] : [{ alias: 'tpHost' }]));
-        this.onShow = output({ alias: 'tpOnShow' });
-        this.onHide = output({ alias: 'tpOnHide' });
-        this.isVisible = model(false, ...(ngDevMode ? [{ debugName: "isVisible", alias: 'tpIsVisible' }] : [{ alias: 'tpIsVisible' }]));
+        this.offset = input(defaultOffset, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), alias: 'tpOffset' });
+        this.placement = input(defaultPlacement, { ...(ngDevMode ? { debugName: "placement" } : /* istanbul ignore next */ {}), alias: 'tpPlacement' });
+        this.popperOptions = input({}, { ...(ngDevMode ? { debugName: "popperOptions" } : /* istanbul ignore next */ {}), alias: 'tpPopperOptions' });
+        this.showOnCreate = input(false, { ...(ngDevMode ? { debugName: "showOnCreate" } : /* istanbul ignore next */ {}), alias: 'tpShowOnCreate' });
+        this.trigger = input(defaultTrigger, { ...(ngDevMode ? { debugName: "trigger" } : /* istanbul ignore next */ {}), alias: 'tpTrigger' });
+        this.triggerTarget = input(defaultTriggerTarget, { ...(ngDevMode ? { debugName: "triggerTarget" } : /* istanbul ignore next */ {}), alias: 'tpTriggerTarget' });
+        this.zIndex = input(defaultZIndex, { ...(ngDevMode ? { debugName: "zIndex" } : /* istanbul ignore next */ {}), alias: 'tpZIndex' });
+        this.animation = input(defaultAnimation, { ...(ngDevMode ? { debugName: "animation" } : /* istanbul ignore next */ {}), alias: 'tpAnimation' });
+        this.useTextContent = input(false, { ...(ngDevMode ? { debugName: "useTextContent" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute,
+            alias: 'tpUseTextContent' });
+        this.isLazy = input(false, { ...(ngDevMode ? { debugName: "isLazy" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute,
+            alias: 'tpIsLazy' });
+        this.variation = input(undefined, { ...(ngDevMode ? { debugName: "variation" } : /* istanbul ignore next */ {}), alias: 'tpVariation' });
+        this.isEnabled = input(true, { ...(ngDevMode ? { debugName: "isEnabled" } : /* istanbul ignore next */ {}), alias: 'tpIsEnabled' });
+        this.className = input('', { ...(ngDevMode ? { debugName: "className" } : /* istanbul ignore next */ {}), alias: 'tpClassName' });
+        this.onlyTextOverflow = input(false, { ...(ngDevMode ? { debugName: "onlyTextOverflow" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute,
+            alias: 'tpOnlyTextOverflow' });
+        this.staticWidthHost = input(false, { ...(ngDevMode ? { debugName: "staticWidthHost" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute,
+            alias: 'tpStaticWidthHost' });
+        this.data = input(undefined, { ...(ngDevMode ? { debugName: "data" } : /* istanbul ignore next */ {}), alias: 'tpData' });
+        /** Angular `inputBinding`/`outputBinding`/`twoWayBinding` descriptors forwarded to `createComponent`. */
+        this.bindings = input(undefined, { ...(ngDevMode ? { debugName: "bindings" } : /* istanbul ignore next */ {}), alias: 'tpBindings' });
+        /** Host directives (with optional bindings) forwarded to `createComponent`. */
+        this.directives = input(undefined, { ...(ngDevMode ? { debugName: "directives" } : /* istanbul ignore next */ {}), alias: 'tpDirectives' });
+        this.useHostWidth = input(false, { ...(ngDevMode ? { debugName: "useHostWidth" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute,
+            alias: 'tpUseHostWidth' });
+        this.hideOnEscape = input(false, { ...(ngDevMode ? { debugName: "hideOnEscape" } : /* istanbul ignore next */ {}), transform: coerceBooleanAttribute,
+            alias: 'tpHideOnEscape' });
+        this.tippyProps = input(undefined, { ...(ngDevMode ? { debugName: "tippyProps" } : /* istanbul ignore next */ {}), alias: 'tpTippyProps' });
+        this.popperWidth = input(undefined, { ...(ngDevMode ? { debugName: "popperWidth" } : /* istanbul ignore next */ {}), alias: 'tpPopperWidth' });
+        this.customHost = input(undefined, { ...(ngDevMode ? { debugName: "customHost" } : /* istanbul ignore next */ {}), alias: 'tpHost' });
+        this.tpOnShow = output({ alias: 'tpOnShow' });
+        this.tpOnHide = output({ alias: 'tpOnHide' });
+        this.isVisible = model(false, { ...(ngDevMode ? { debugName: "isVisible" } : /* istanbul ignore next */ {}), alias: 'tpIsVisible' });
         this.visible = output({ alias: 'tpVisible' });
         this.viewRef = null;
         this.variationDefined = false;
@@ -429,7 +389,7 @@ class TippyDirective {
         this.visibleInternal = new Subject();
         this.visibilityObserverCleanup = null;
         this.contentChanged = new Subject();
-        this.host = computed(() => this.customHost() || this.hostRef.nativeElement, ...(ngDevMode ? [{ debugName: "host" }] : []));
+        this.host = computed(() => this.customHost() || this.hostRef.nativeElement, ...(ngDevMode ? [{ debugName: "host" }] : /* istanbul ignore next */ []));
         this.destroyRef = inject(DestroyRef);
         this.tippyService = inject(TippyService);
         this.isServer = 
@@ -445,9 +405,25 @@ class TippyDirective {
         this.vcr = inject(ViewContainerRef);
         this.ngZone = inject(NgZone);
         this.hostRef = inject(ElementRef);
+        this.loaderViewRef = null;
+        this.globalLoaderComponent = inject(TIPPY_LOADER_COMPONENT, { optional: true });
+        this.loaderTiming = inject(TIPPY_LOADER_TIMING);
         if (this.isServer)
             return;
         this.setupListeners();
+        // `afterEveryRender` fires synchronously within Angular's CD cycle.
+        // This lets us update the enabled/disabled state of the instance BEFORE a
+        // synthetic mouseenter event is dispatched, which fixes test timing when
+        // Angular-triggered changes (content/style bindings) cause the overflow
+        // state to change. ResizeObserver (`overflowChanges`) remains as a fallback
+        // for non-Angular-triggered resize events (browser window resize, etc.).
+        afterEveryRender({
+            read: () => {
+                if (!this.onlyTextOverflow())
+                    return;
+                untracked(() => this.checkOverflow(isElementOverflow(this.host())));
+            },
+        });
         this.destroyRef.onDestroy(() => {
             this.destroyed = true;
             this.instance?.destroy();
@@ -458,10 +434,10 @@ class TippyDirective {
     ngOnChanges(changes) {
         if (this.isServer)
             return;
-        // `isVisible` is not required as a prop since we update it manually
-        // in an effect-like manner.
+        // `isVisible` and `tippyProps` are not merged into `this.props`; they are
+        // handled separately (model signal and direct-spread effect respectively).
         const changedProps = Object.keys(changes)
-            .filter((key) => key !== 'isVisible')
+            .filter((key) => key !== 'isVisible' && key !== 'tippyProps')
             .reduce((accumulator, key) => ({ ...accumulator, [key]: changes[key].currentValue }), {});
         // Variation defaults are applied only on the first call or when the variation
         // input itself changes. Re-applying them on every ngOnChanges call would
@@ -483,9 +459,10 @@ class TippyDirective {
     ngAfterViewInit() {
         if (this.isServer)
             return;
+        const onlyTextOverflow = this.onlyTextOverflow();
         if (this.isLazy()) {
             const hostInView$ = inView(this.host());
-            if (this.onlyTextOverflow()) {
+            if (onlyTextOverflow) {
                 hostInView$
                     .pipe(switchMap(() => this.isOverflowing$()), takeUntilDestroyed(this.destroyRef))
                     .subscribe((isElementOverflow) => {
@@ -498,7 +475,7 @@ class TippyDirective {
                 });
             }
         }
-        else if (this.onlyTextOverflow()) {
+        else if (onlyTextOverflow) {
             this.isOverflowing$()
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe((isElementOverflow) => {
@@ -513,6 +490,8 @@ class TippyDirective {
         this.viewOptions$ = null;
         this.viewRef?.destroy();
         this.viewRef = null;
+        this.loaderViewRef?.destroy();
+        this.loaderViewRef = null;
     }
     /**
      * This method is useful when you append to an element that you might remove from the DOM.
@@ -563,7 +542,7 @@ class TippyDirective {
     }
     setProps(props) {
         this.props = props;
-        this.instance?.setProps(onlyTippyProps(props));
+        this.instance?.setProps({ ...onlyTippyProps(props), ...(this.tippyProps() ?? {}) });
     }
     setStatus(isEnabled) {
         isEnabled ? this.instance?.enable() : this.instance?.disable();
@@ -571,83 +550,53 @@ class TippyDirective {
     hasContent() {
         return !!(this.content() || this.useTextContent());
     }
-    createInstance() {
+    async createInstance() {
         if (this.created || !this.hasContent()) {
             return;
         }
         this.created = true;
-        this.tippyFactory
-            .create(this.host(), {
-            appendTo,
-            allowHTML: true,
-            ...(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);
-                this.ngZone.run(() => this.visible.emit(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();
-                }
-            },
-            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(content)) {
-                    instance.setProps({ allowHTML: false });
-                    if (!content?.trim()) {
-                        this.disable();
-                    }
-                    else {
-                        this.enable();
-                    }
-                }
-                instance.setContent(content);
-                this.hideOnEscape() && this.handleEscapeButton();
-                this.clearInstanceWidth(instance);
-                if (this.useHostWidth()) {
-                    this.setInstanceWidth(instance, this.hostWidth);
-                }
-                else if (this.popperWidth()) {
-                    this.setInstanceWidth(instance, this.popperWidth());
-                }
-                this.globalConfig.onShow?.(instance);
-                this.onShow.emit();
-            },
-            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();
+        const tippy = await this.ngZone.runOutsideAngular(() => {
+            return firstValueFrom(this.tippyFactory.getTippyImpl(), {
+                defaultValue: undefined,
+            });
         });
-    }
-    resolveContent(instance) {
-        const content = this.content();
+        if (tippy === undefined || this.destroyRef.destroyed) {
+            return;
+        }
+        this.instance = this.ngZone.runOutsideAngular(() => {
+            return tippy(this.host(), {
+                appendTo,
+                allowHTML: true,
+                ...(this.globalConfig.zIndexGetter
+                    ? { zIndex: this.globalConfig.zIndexGetter() }
+                    : {}),
+                ...onlyTippyProps(this.globalConfig),
+                ...onlyTippyProps(this.props),
+                ...(this.tippyProps() ?? {}),
+                // Arrow functions or inline callbacks close over the method's lexical scope,
+                // causing V8 to allocate a Context object that indirectly retains the directive
+                // instance inside tippy.js after destroy. A JSBoundFunction has no [[Context]]
+                // slot — only { bound_target_function, bound_this, bound_arguments } — so no
+                // closure context is created. onHide is bound to null because it needs no `this`
+                // at all, fully breaking the retention chain (same reasoning as `appendTo` above).
+                onMount: this.onMount.bind(this),
+                onCreate: this.onCreate.bind(this),
+                onShow: this.onShow.bind(this),
+                onHide: function (instance) {
+                    instance.reference.removeAttribute('data-tippy-open');
+                }.bind(null),
+                onHidden: this.onHidden.bind(this),
+            });
+        });
+        this.setStatus(this.isEnabled());
+        this.setProps(this.props);
+        this.variation() === 'contextMenu' && this.handleContextMenu();
+    }
+    // `resolvedContent` is provided when the caller already awaited a lazy factory.
+    // Passing it here avoids re-reading `this.content()`, which would still carry
+    // the raw factory function type and require another cast.
+    resolveContent(instance, resolvedContent) {
+        const content = (resolvedContent ?? this.content());
         if (!this.viewOptions$ && !isString(content)) {
             const injector = Injector.create({
                 providers: [
@@ -663,6 +612,8 @@ class TippyDirective {
                 this.instance.data = data;
                 this.viewOptions$ = {
                     injector,
+                    bindings: this.bindings(),
+                    directives: this.directives(),
                 };
             }
             else if (isTemplateRef(content)) {
@@ -675,22 +626,24 @@ class TippyDirective {
                 };
             }
         }
-        this.viewRef = this.viewService.createView(content, {
-            vcr: this.vcr,
-            ...this.viewOptions$,
-        });
-        // We need to call `detectChanges` for OnPush components to update their content.
-        if (isComponent(content)) {
-            // `ɵcmp` is a component defition set for any component.
-            // Checking the `onPush` property of the component definition is a
-            // smarter way to determine whether we need to call `detectChanges()`,
-            // as users may be unaware of setting the binding.
-            const isOnPush = content.ɵcmp?.onPush;
-            if (isOnPush) {
-                this.viewRef.detectChanges();
+        let newContent = this.ngZone.run(() => {
+            this.viewRef = this.viewService.createView(content, {
+                vcr: this.vcr,
+                ...this.viewOptions$,
+            });
+            // We need to call `detectChanges` for OnPush components to update their content.
+            if (isComponent(content)) {
+                // `ɵcmp` is a component defition set for any component.
+                // Checking the `onPush` property of the component definition is a
+                // smarter way to determine whether we need to call `detectChanges()`,
+                // as users may be unaware of setting the binding.
+                const isOnPush = content.ɵcmp?.onPush;
+                if (isOnPush) {
+                    this.viewRef.detectChanges();
+                }
             }
-        }
-        let newContent = this.viewRef.getElement();
+            return this.viewRef.getElement();
+        });
         if (this.useTextContent()) {
             newContent = instance.reference.textContent;
         }
@@ -768,6 +721,26 @@ class TippyDirective {
         instance.popper.style.maxWidth = inPixels;
         instance.popper.firstElementChild.style.maxWidth = inPixels;
     }
+    onMount(instance) {
+        const isVisible = true;
+        this.isVisible.set(isVisible);
+        this.visibleInternal.next(isVisible);
+        this.ngZone.run(() => this.visible.emit(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();
+        }
+    }
     onHidden(instance = this.instance) {
         this.destroyView();
         const isVisible = false;
@@ -777,11 +750,82 @@ class TippyDirective {
         if (!this.destroyed) {
             this.isVisible.set(isVisible);
             this.ngZone.run(() => this.visible.emit(isVisible));
-            this.onHide.emit();
+            this.tpOnHide.emit();
         }
         this.visibleInternal.next(isVisible);
         this.globalConfig.onHidden?.(instance);
     }
+    onShow(instance) {
+        // In onlyTextOverflow mode the tooltip must not appear when the host is
+        // not overflowing. Returning false from onShow prevents tippy from
+        // showing regardless of the instance's enabled/disabled state. This
+        // acts as a last-resort guard for cases where checkOverflow() hasn't
+        // been called yet (e.g. Angular's scheduler hasn't flushed CD between
+        // the content/width change and the trigger event).
+        if (this.onlyTextOverflow() && !isElementOverflow(this.host())) {
+            return false;
+        }
+        // The outer `onShow` must be synchronous so that `return false` above
+        // is seen as a boolean by tippy.js (an `async` function always returns
+        // a Promise, which is truthy and would never suppress the show).
+        this.handleOnShow(instance);
+    }
+    async handleOnShow(instance) {
+        instance.reference.setAttribute('data-tippy-open', '');
+        const maybeContent = this.content();
+        const isLazyFactory = !isComponentClass(maybeContent) && typeof maybeContent === 'function';
+        let resolvedContent;
+        if (isLazyFactory) {
+            const loaderComponent = this.globalLoaderComponent;
+            if (loaderComponent) {
+                const loaderElement = this.ngZone.run(() => {
+                    this.loaderViewRef = this.viewService.createView(loaderComponent, {
+                        vcr: this.vcr,
+                    });
+                    return this.loaderViewRef.getElement();
+                });
+                instance.setContent(loaderElement);
+            }
+            const cancelled = Symbol();
+            // combineLatest ensures we swap the loader only when both the component
+            // is ready AND the timing observable has emitted — guaranteeing the spinner
+            // is visible for at least the configured duration regardless of import speed.
+            // takeUntil + takeUntilDestroyed cancel if the tooltip hides or the
+            // directive is destroyed mid-flight.
+            const result = await firstValueFrom(combineLatest([
+                from(maybeContent()),
+                this.loaderTiming,
+            ]).pipe(map(([component]) => component), takeUntil(this.visibleInternal.pipe(filter((v) => !v))), takeUntilDestroyed(this.destroyRef)), { defaultValue: cancelled });
+            this.loaderViewRef?.destroy();
+            this.loaderViewRef = null;
+            if (result === cancelled)
+                return;
+            resolvedContent = result;
+        }
+        // For non-lazy content this call is fully synchronous — skipping the
+        // await avoids a microtask tick that would otherwise cause a visible flicker.
+        const content = this.resolveContent(instance, resolvedContent);
+        if (isString(content)) {
+            instance.setProps({ allowHTML: false });
+            if (content?.trim()) {
+                this.enable();
+            }
+            else {
+                this.disable();
+            }
+        }
+        instance.setContent(content);
+        this.hideOnEscape() && this.handleEscapeButton();
+        this.clearInstanceWidth(instance);
+        if (this.useHostWidth()) {
+            this.setInstanceWidth(instance, this.hostWidth);
+        }
+        else if (this.popperWidth()) {
+            this.setInstanceWidth(instance, this.popperWidth());
+        }
+        this.globalConfig.onShow?.(instance);
+        this.tpOnShow.emit();
+    }
     isOverflowing$() {
         const host = this.host();
         const notifiers$ = [overflowChanges(host)];
@@ -828,18 +872,26 @@ class TippyDirective {
                 this.created = false;
             }
         });
+        effect(() => {
+            const tippyProps = this.tippyProps();
+            untracked(() => this.instance?.setProps(tippyProps ?? {}));
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TippyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.1", 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 }, 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: { onShow: "tpOnShow", onHide: "tpOnHide", isVisible: "tpIsVisibleChange", visible: "tpVisible" }, exportAs: ["tippy"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TippyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", 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 }, bindings: { classPropertyName: "bindings", publicName: "tpBindings", isSignal: true, isRequired: false, transformFunction: null }, directives: { classPropertyName: "directives", publicName: "tpDirectives", 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 }, tippyProps: { classPropertyName: "tippyProps", publicName: "tpTippyProps", 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: { tpOnShow: "tpOnShow", tpOnHide: "tpOnHide", isVisible: "tpIsVisibleChange", visible: "tpVisible" }, exportAs: ["tippy"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.1", ngImport: i0, type: TippyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TippyDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: '[tp]',
                     exportAs: 'tippy',
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpAppendTo", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "tp", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpDelay", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpDuration", required: false }] }], hideOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpHideOnClick", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpInteractive", required: false }] }], interactiveBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpInteractiveBorder", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpMaxWidth", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpOffset", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpPlacement", required: false }] }], popperOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpPopperOptions", required: false }] }], showOnCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpShowOnCreate", required: false }] }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpTrigger", required: false }] }], triggerTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpTriggerTarget", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpZIndex", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpAnimation", required: false }] }], useTextContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpUseTextContent", required: false }] }], isLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpIsLazy", required: false }] }], variation: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpVariation", required: false }] }], isEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpIsEnabled", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpClassName", required: false }] }], onlyTextOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpOnlyTextOverflow", required: false }] }], staticWidthHost: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpStaticWidthHost", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpData", required: false }] }], bindings: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpBindings", required: false }] }], directives: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpDirectives", required: false }] }], useHostWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpUseHostWidth", required: false }] }], hideOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpHideOnEscape", required: false }] }], tippyProps: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpTippyProps", required: false }] }], popperWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpPopperWidth", required: false }] }], customHost: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpHost", required: false }] }], tpOnShow: [{ type: i0.Output, args: ["tpOnShow"] }], tpOnHide: [{ type: i0.Output, args: ["tpOnHide"] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "tpIsVisible", required: false }] }, { type: i0.Output, args: ["tpIsVisibleChange"] }], visible: [{ type: i0.Output, args: ["tpVisible"] }] } });
+function isComponentClass(content) {
+    return (typeof content === 'function' &&
+        /^class\s/.test(Function.prototype.toString.call(content)));
+}
 
 /**
  * Generated bundle index. Do not edit.