@lucca-front/ng 21.2.2 → 21.2.4-rc.1

package/fesm2022/lucca-front-ng-tooltip.mjs

@@ -1,13 +1,13 @@
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, signal, ChangeDetectionStrategy, Component, Injectable, ElementRef, Renderer2, Injector, input, linkedSignal, numberAttribute, booleanAttribute, computed, effect, Directive, NgModule } from '@angular/core';
-import { Subject, switchMap, of, from, timer, startWith } from 'rxjs';
+import { inject, DestroyRef, signal, ChangeDetectionStrategy, Component, Injectable, ElementRef, Renderer2, Injector, input, linkedSignal, numberAttribute, booleanAttribute, computed, effect, afterRenderEffect, Directive, NgModule } from '@angular/core';
+import { Subject, timer, startWith } from 'rxjs';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { isNotNil, ɵeffectWithDeps as _effectWithDeps } from '@lucca-front/ng/core';
-import { debounceTime, filter, debounce, tap, map } from 'rxjs/operators';
 import { DOCUMENT } from '@angular/common';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isNotNil, ɵeffectWithDeps as _effectWithDeps } from '@lucca-front/ng/core';
+import { filter, debounce, tap, map } from 'rxjs/operators';
 
 const luTransformTooltip = trigger('transformTooltip', [
     state('enter', style({
@@ -29,8 +29,8 @@ class LuTooltipPanelComponent {
         this.destroyRef = inject(DestroyRef);
         this.mouseEnter$ = new Subject();
         this.mouseLeave$ = new Subject();
-        this.content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
-        this.contentPositionClasses = signal({}, ...(ngDevMode ? [{ debugName: "contentPositionClasses" }] : []));
+        this.content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        this.contentPositionClasses = signal({}, ...(ngDevMode ? [{ debugName: "contentPositionClasses" }] : /* istanbul ignore next */ []));
     }
     setPanelPosition(posX, posY) {
         this.contentPositionClasses.set({
@@ -40,10 +40,10 @@ class LuTooltipPanelComponent {
             'is-below': posY === 'top',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: LuTooltipPanelComponent, isStandalone: true, selector: "lu-tooltip-panel", host: { attributes: { "role": "tooltip" }, listeners: { "mouseenter": "mouseEnter$.next()", "mouseleave": "mouseLeave$.next()" } }, ngImport: i0, template: "@if (content(); as content) {\n\t<div class=\"tooltip\" [class]=\"contentPositionClasses()\" [innerHtml]=\"content\"></div>\n}\n", styles: ["@layer components{.tooltip{--components-tooltip-background-color: var(--palettes-neutral-900);--components-tooltip-color: var(--pr-t-color-text-reverse);--components-tooltip-max-width: 15rem;--components-tooltip-transformOrigin: center;--components-tooltip-margin: 0;background-color:var(--components-tooltip-background-color);color:var(--components-tooltip-color);padding-block:var(--pr-t-spacings-50);padding-inline:var(--pr-t-spacings-100);max-inline-size:var(--components-tooltip-max-width);border-radius:var(--pr-t-border-radius-default);font:var(--pr-t-font-body-XS);transform-origin:var(--components-tooltip-transformOrigin);margin:var(--components-tooltip-margin);text-align:center;inline-size:fit-content;animation-name:scaleIn;animation-duration:var(--commons-animations-durations-fast);animation-iteration-count:1;overflow-wrap:break-word}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.tooltip:empty{display:none}@supports (background-image: -webkit-named-image(i)){@media(hover:hover){[luTooltipWhenEllipsis]:after{content:\"\";display:block}}}}@layer mods{.tooltip.is-above{--components-tooltip-transformOrigin: bottom center}.tooltip.is-below{--components-tooltip-transformOrigin: top center}.tooltip.is-before{--components-tooltip-transformOrigin: center right}.tooltip.is-before.is-above{--components-tooltip-transformOrigin: bottom right}.tooltip.is-before.is-below{--components-tooltip-transformOrigin: top right}.tooltip.is-after{--components-tooltip-transformOrigin: center left}.tooltip.is-after.is-above{--components-tooltip-transformOrigin: bottom left}.tooltip.is-after.is-below{--components-tooltip-transformOrigin: top left}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: LuTooltipPanelComponent, isStandalone: true, selector: "lu-tooltip-panel", host: { attributes: { "role": "tooltip" }, listeners: { "mouseenter": "mouseEnter$.next()", "mouseleave": "mouseLeave$.next()" } }, ngImport: i0, template: "@if (content(); as content) {\n\t<div class=\"tooltip\" [class]=\"contentPositionClasses()\" [innerHtml]=\"content\"></div>\n}\n", styles: ["@layer components{.tooltip{--components-tooltip-background-color: var(--palettes-neutral-900);--components-tooltip-color: var(--pr-t-color-text-reverse);--components-tooltip-max-width: 15rem;--components-tooltip-transformOrigin: center;--components-tooltip-margin: 0;background-color:var(--components-tooltip-background-color);color:var(--components-tooltip-color);padding-block:var(--pr-t-spacings-50);padding-inline:var(--pr-t-spacings-100);max-inline-size:var(--components-tooltip-max-width);border-radius:var(--pr-t-border-radius-default);font:var(--pr-t-font-body-XS);transform-origin:var(--components-tooltip-transformOrigin);margin:var(--components-tooltip-margin);text-align:center;inline-size:fit-content;animation-name:scaleIn;animation-duration:var(--commons-animations-durations-fast);animation-iteration-count:1;overflow-wrap:break-word}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.tooltip:empty{display:none}@supports (background-image: -webkit-named-image(i)){@media(hover:hover){[luTooltipWhenEllipsis]:after{content:\"\";display:block}}}}@layer mods{.tooltip.is-above{--components-tooltip-transformOrigin: bottom center}.tooltip.is-below{--components-tooltip-transformOrigin: top center}.tooltip.is-before{--components-tooltip-transformOrigin: center right}.tooltip.is-before.is-above{--components-tooltip-transformOrigin: bottom right}.tooltip.is-before.is-below{--components-tooltip-transformOrigin: top right}.tooltip.is-after{--components-tooltip-transformOrigin: center left}.tooltip.is-after.is-above{--components-tooltip-transformOrigin: bottom left}.tooltip.is-after.is-below{--components-tooltip-transformOrigin: top left}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipPanelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-tooltip-panel', host: {
                         role: 'tooltip',
@@ -52,84 +52,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (content(); as content) {\n\t<div class=\"tooltip\" [class]=\"contentPositionClasses()\" [innerHtml]=\"content\"></div>\n}\n", styles: ["@layer components{.tooltip{--components-tooltip-background-color: var(--palettes-neutral-900);--components-tooltip-color: var(--pr-t-color-text-reverse);--components-tooltip-max-width: 15rem;--components-tooltip-transformOrigin: center;--components-tooltip-margin: 0;background-color:var(--components-tooltip-background-color);color:var(--components-tooltip-color);padding-block:var(--pr-t-spacings-50);padding-inline:var(--pr-t-spacings-100);max-inline-size:var(--components-tooltip-max-width);border-radius:var(--pr-t-border-radius-default);font:var(--pr-t-font-body-XS);transform-origin:var(--components-tooltip-transformOrigin);margin:var(--components-tooltip-margin);text-align:center;inline-size:fit-content;animation-name:scaleIn;animation-duration:var(--commons-animations-durations-fast);animation-iteration-count:1;overflow-wrap:break-word}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.tooltip:empty{display:none}@supports (background-image: -webkit-named-image(i)){@media(hover:hover){[luTooltipWhenEllipsis]:after{content:\"\";display:block}}}}@layer mods{.tooltip.is-above{--components-tooltip-transformOrigin: bottom center}.tooltip.is-below{--components-tooltip-transformOrigin: top center}.tooltip.is-before{--components-tooltip-transformOrigin: center right}.tooltip.is-before.is-above{--components-tooltip-transformOrigin: bottom right}.tooltip.is-before.is-below{--components-tooltip-transformOrigin: top right}.tooltip.is-after{--components-tooltip-transformOrigin: center left}.tooltip.is-after.is-above{--components-tooltip-transformOrigin: bottom left}.tooltip.is-after.is-below{--components-tooltip-transformOrigin: top left}}\n"] }]
         }] });
 
-class EllipsisRuler {
-    #document = inject(DOCUMENT);
-    #parentMasked = this.#document.createElement('div');
-    constructor() {
-        this.#parentMasked.classList.add('pr-u-mask');
-        this.#parentMasked.setAttribute('aria-hidden', 'true');
-        this.#document.body.appendChild(this.#parentMasked);
+/**
+ * Single, shared IntersectionObserver used by every tooltip to defer its first ellipsis
+ * measurement until the host element is near the viewport.
+ *
+ * One observer for the whole page is far cheaper than one IntersectionObserver per tooltip when
+ * many tooltips are created at once (e.g. a large table being (re)rendered): the browser then
+ * delivers a single batched callback instead of one per element.
+ */
+class TooltipVisibilityObserver {
+    #observer;
+    #callbacks = new WeakMap();
+    /** Calls `onVisible` once — the first time `element` comes near the viewport — then stops observing it. */
+    observeOnce(element, onVisible) {
+        this.#callbacks.set(element, onVisible);
+        this.#getObserver().observe(element);
     }
-    /**
-     * Checks for ellipsis by cloning the node and comparing its unconstrained width against the original element.
-     *
-     * We used to do this using scrollWidth but the thing is, it's a rounded value. Sometimes,
-     * you'd get true while it should be false and vice-versa, because of rounding.
-     *
-     * So we duplicate the properties we're interested in on the element to be tested to calculate its ideal size,
-     * which we then compare with its current size.
-     */
-    async hasEllipsis(element) {
-        await this.#nextFrame();
-        const elementStyle = getComputedStyle(element);
-        const bodyStyle = getComputedStyle(this.#document.body);
-        if (elementStyle.textOverflow !== 'ellipsis') {
-            return false;
-        }
-        const { padding, borderWidth, borderStyle, boxSizing, fontFamily, fontWeight, fontStyle } = elementStyle;
-        const fontSize = (Number(elementStyle.fontSize.replace('px', '')) / Number(bodyStyle.fontSize.replace('px', ''))).toString() + 'rem';
-        await this.#nextFrame();
-        const elementCloned = this.#document.createElement('div');
-        Object.assign(elementCloned.style, {
-            inlineSize: 'fit-content',
-            whiteSpace: 'nowrap',
-            position: 'absolute',
-            visibility: 'hidden',
-            padding,
-            borderWidth,
-            borderStyle,
-            boxSizing,
-            fontFamily,
-            fontWeight,
-            fontStyle,
-            fontSize,
-        });
-        this.#parentMasked.appendChild(elementCloned);
-        elementCloned.innerHTML = element.innerHTML;
-        try {
-            const clonedElementWidth = elementCloned.getBoundingClientRect().width.toFixed(3);
-            const elementWidth = element.getBoundingClientRect().width.toFixed(3);
-            return parseFloat(clonedElementWidth) > parseFloat(elementWidth);
-        }
-        catch {
-            return false;
-        }
-        finally {
-            this.#parentMasked.removeChild(elementCloned);
-        }
+    unobserve(element) {
+        this.#callbacks.delete(element);
+        this.#observer?.unobserve(element);
     }
-    #nextFrame() {
-        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    // Created lazily so the observer is only instantiated in the browser, on first use.
+    #getObserver() {
+        return (this.#observer ??= new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (!entry.isIntersecting) {
+                    continue;
+                }
+                const onVisible = this.#callbacks.get(entry.target);
+                this.unobserve(entry.target);
+                onVisible?.();
+            }
+        }, { rootMargin: '100px' }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EllipsisRuler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EllipsisRuler, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipVisibilityObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipVisibilityObserver, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: EllipsisRuler, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: TooltipVisibilityObserver, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
+        }] });
 
 let nextId = 0;
 class LuTooltipTriggerDirective {
     #overlay;
     #host;
     #renderer;
-    #ruler;
+    #document;
     #injector;
     #destroyRef;
-    #isVisible;
-    #ellipsisTrigger;
+    #visibilityObserver;
+    // 0 until the element first appears; bumped for the initial measurement and on every real
+    // size/content change. Scrolling in and out of view does NOT bump it (see #armMeasurementObservers).
+    #measureTrigger;
+    // guards the one-time setup of the persistent resize/mutation observers
+    #measurementObserversArmed;
+    // the IntersectionObserver callback can fire after the view is destroyed; avoid touching
+    // the destroyed injector (NG0911) when that happens
+    #destroyed;
+    // written only from the `read` phase of the afterRenderEffect below
     #hasEllipsis;
+    // reusable hidden clone, one per directive, used to measure the unconstrained width
+    #clone;
     #action;
     #realAction;
     #effectRef;
@@ -137,36 +121,39 @@ class LuTooltipTriggerDirective {
         this.#overlay = inject(Overlay);
         this.#host = inject(ElementRef);
         this.#renderer = inject(Renderer2);
-        this.#ruler = inject(EllipsisRuler);
+        this.#document = inject(DOCUMENT);
         this.#injector = inject(Injector);
         this.#destroyRef = inject(DestroyRef);
-        this.luTooltipInput = input('', { ...(ngDevMode ? { debugName: "luTooltipInput" } : {}), alias: 'luTooltip' });
-        this.luTooltip = linkedSignal(() => this.luTooltipInput(), ...(ngDevMode ? [{ debugName: "luTooltip" }] : []));
-        this.luTooltipEnterDelay = input(300, { ...(ngDevMode ? { debugName: "luTooltipEnterDelay" } : {}), transform: numberAttribute });
-        this.luTooltipLeaveDelay = input(100, { ...(ngDevMode ? { debugName: "luTooltipLeaveDelay" } : {}), transform: numberAttribute });
-        this.luTooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "luTooltipDisabled" } : {}), transform: booleanAttribute });
-        this.luTooltipOnlyForDisplay = input(false, { ...(ngDevMode ? { debugName: "luTooltipOnlyForDisplay" } : {}), transform: booleanAttribute });
-        this.luTooltipPosition = input('above', ...(ngDevMode ? [{ debugName: "luTooltipPosition" }] : []));
-        this.luTooltipWhenEllipsisInput = input(false, { ...(ngDevMode ? { debugName: "luTooltipWhenEllipsisInput" } : {}), alias: 'luTooltipWhenEllipsis', transform: booleanAttribute });
-        this.luTooltipWhenEllipsis = linkedSignal(() => this.luTooltipWhenEllipsisInput(), ...(ngDevMode ? [{ debugName: "luTooltipWhenEllipsis" }] : []));
-        this.luTooltipAnchor = input(this.#host, ...(ngDevMode ? [{ debugName: "luTooltipAnchor" }] : []));
-        this.id = input(`${this.#host.nativeElement.tagName.toLowerCase()}-tooltip-${nextId++}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+        this.#visibilityObserver = inject(TooltipVisibilityObserver);
+        this.luTooltipInput = input('', { ...(ngDevMode ? { debugName: "luTooltipInput" } : /* istanbul ignore next */ {}), alias: 'luTooltip' });
+        this.luTooltip = linkedSignal(() => this.luTooltipInput(), ...(ngDevMode ? [{ debugName: "luTooltip" }] : /* istanbul ignore next */ []));
+        this.luTooltipEnterDelay = input(300, { ...(ngDevMode ? { debugName: "luTooltipEnterDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.luTooltipLeaveDelay = input(100, { ...(ngDevMode ? { debugName: "luTooltipLeaveDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.luTooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "luTooltipDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.luTooltipOnlyForDisplay = input(false, { ...(ngDevMode ? { debugName: "luTooltipOnlyForDisplay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.luTooltipPosition = input('above', ...(ngDevMode ? [{ debugName: "luTooltipPosition" }] : /* istanbul ignore next */ []));
+        this.luTooltipWhenEllipsisInput = input(false, { ...(ngDevMode ? { debugName: "luTooltipWhenEllipsisInput" } : /* istanbul ignore next */ {}), alias: 'luTooltipWhenEllipsis', transform: booleanAttribute });
+        this.luTooltipWhenEllipsis = linkedSignal(() => this.luTooltipWhenEllipsisInput(), ...(ngDevMode ? [{ debugName: "luTooltipWhenEllipsis" }] : /* istanbul ignore next */ []));
+        this.luTooltipAnchor = input(this.#host, ...(ngDevMode ? [{ debugName: "luTooltipAnchor" }] : /* istanbul ignore next */ []));
+        this.id = input(`${this.#host.nativeElement.tagName.toLowerCase()}-tooltip-${nextId++}`, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         this.ariaDescribedBy = computed(() => {
             if (this.luTooltipDisabled() || this.luTooltipWhenEllipsis() || this.luTooltipOnlyForDisplay()) {
                 return null;
             }
             return `${this.id()}-panel`;
-        }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
-        this.#isVisible = signal(false, ...(ngDevMode ? [{ debugName: "#isVisible" }] : []));
-        this.#ellipsisTrigger = signal(0, ...(ngDevMode ? [{ debugName: "#ellipsisTrigger" }] : []));
-        this.#hasEllipsis = toSignal(toObservable(this.#ellipsisTrigger).pipe(debounceTime(150), switchMap(() => {
-            if (!this.luTooltipWhenEllipsis() || this.luTooltipDisabled()) {
-                return of(false);
-            }
-            return from(this.#ruler.hasEllipsis(this.#host.nativeElement));
-        })), { initialValue: false });
-        this.#action = signal(null, ...(ngDevMode ? [{ debugName: "#action" }] : []));
-        this.#realAction = linkedSignal({ ...(ngDevMode ? { debugName: "#realAction" } : {}), source: this.#action,
+        }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
+        // 0 until the element first appears; bumped for the initial measurement and on every real
+        // size/content change. Scrolling in and out of view does NOT bump it (see #armMeasurementObservers).
+        this.#measureTrigger = signal(0, ...(ngDevMode ? [{ debugName: "#measureTrigger" }] : /* istanbul ignore next */ []));
+        // guards the one-time setup of the persistent resize/mutation observers
+        this.#measurementObserversArmed = false;
+        // the IntersectionObserver callback can fire after the view is destroyed; avoid touching
+        // the destroyed injector (NG0911) when that happens
+        this.#destroyed = false;
+        // written only from the `read` phase of the afterRenderEffect below
+        this.#hasEllipsis = signal(false, ...(ngDevMode ? [{ debugName: "#hasEllipsis" }] : /* istanbul ignore next */ []));
+        this.#action = signal(null, ...(ngDevMode ? [{ debugName: "#action" }] : /* istanbul ignore next */ []));
+        this.#realAction = linkedSignal({ ...(ngDevMode ? { debugName: "#realAction" } : /* istanbul ignore next */ {}), source: this.#action,
             computation: (action, previous) => {
                 if (!action || action === 'close') {
                     return action;
@@ -181,6 +168,7 @@ class LuTooltipTriggerDirective {
                 }
                 return 'open';
             } });
+        this.#destroyRef.onDestroy(() => (this.#destroyed = true));
         // Action debounce pipeline — kept as Observable since signals can't debounce
         toObservable(this.#realAction)
             .pipe(filter(isNotNil), debounce((action) => timer(action === 'open' ? this.luTooltipEnterDelay() : this.luTooltipLeaveDelay())), tap((event) => {
@@ -200,32 +188,101 @@ class LuTooltipTriggerDirective {
                 this.setAccessibilityProperties(null);
             }
         });
+        // Defer the first measurement until the element is near the viewport, then stop tracking
+        // visibility: scrolling must not re-measure, so we arm the resize/mutation observers once.
+        // A single shared IntersectionObserver handles every tooltip (see TooltipVisibilityObserver).
         effect((onCleanup) => {
-            if (!this.luTooltipWhenEllipsis() || this.luTooltipDisabled()) {
-                this.#isVisible.set(false);
-                return;
-            }
-            const observer = new IntersectionObserver((entries) => this.#isVisible.set(entries.some((e) => e.isIntersecting)), { rootMargin: '100px' });
-            observer.observe(this.#host.nativeElement);
-            onCleanup(() => observer.disconnect());
-        });
-        effect((onCleanup) => {
-            if (!this.#isVisible() || !this.luTooltipWhenEllipsis() || this.luTooltipDisabled()) {
+            if (!this.luTooltipWhenEllipsis() || this.luTooltipDisabled() || this.#measurementObserversArmed) {
                 return;
             }
             const el = this.#host.nativeElement;
-            const bump = () => this.#ellipsisTrigger.update((v) => v + 1);
-            const resizeObserver = new ResizeObserver(() => bump());
-            resizeObserver.observe(el);
-            const mutationObserver = new MutationObserver(() => bump());
-            mutationObserver.observe(el, { characterData: true, subtree: true, childList: true });
-            // Initial check when element becomes visible — prevents regression where tooltips never appear
-            bump();
-            onCleanup(() => {
-                resizeObserver.disconnect();
-                mutationObserver.disconnect();
-            });
+            this.#visibilityObserver.observeOnce(el, () => this.#armMeasurementObservers());
+            onCleanup(() => this.#visibilityObserver.unobserve(el));
+        });
+        // Ellipsis measurement, split across afterRenderEffect phases so that — across every tooltip
+        // on the page — all DOM writes happen together, then all geometry reads happen together.
+        // This keeps the whole batch to a single forced reflow instead of one reflow per element.
+        afterRenderEffect({
+            earlyRead: () => {
+                // reading the trigger registers the dependency; 0 means "not measured yet"
+                const measured = this.#measureTrigger() > 0;
+                const shouldMeasure = measured && !this.luTooltipDisabled() && this.luTooltipWhenEllipsis();
+                if (!shouldMeasure) {
+                    return { measure: false };
+                }
+                const host = this.#host.nativeElement;
+                const hostStyle = getComputedStyle(host);
+                if (hostStyle.textOverflow !== 'ellipsis') {
+                    return { measure: false };
+                }
+                return { measure: true, host, hostStyle };
+            },
+            write: (earlyReadResult) => {
+                const snapshot = earlyReadResult();
+                if (!snapshot.measure) {
+                    return { measure: false };
+                }
+                const clone = (this.#clone ??= this.#createClone());
+                this.#applyClonedStyles(clone, snapshot.hostStyle);
+                clone.innerHTML = snapshot.host.innerHTML;
+                return { measure: true, host: snapshot.host, clone };
+            },
+            read: (writeResult) => {
+                const measurement = writeResult();
+                if (!measurement.measure) {
+                    this.#hasEllipsis.set(false);
+                    return;
+                }
+                const cloneWidth = measurement.clone.getBoundingClientRect().width;
+                const hostWidth = measurement.host.getBoundingClientRect().width;
+                // rounded to 3 decimals to ignore sub-pixel noise
+                this.#hasEllipsis.set(Math.round(cloneWidth * 1000) > Math.round(hostWidth * 1000));
+            },
         });
+        this.#destroyRef.onDestroy(() => this.#clone?.remove());
+    }
+    // Set up — once — the observers that ask for a re-measurement on real size/content changes.
+    // They stay connected for the directive lifetime (even off-screen), so scrolling never
+    // re-measures; only an actual resize/mutation does.
+    #armMeasurementObservers() {
+        if (this.#measurementObserversArmed || this.#destroyed) {
+            return;
+        }
+        this.#measurementObserversArmed = true;
+        const el = this.#host.nativeElement;
+        const bump = () => this.#measureTrigger.update((v) => v + 1);
+        const resizeObserver = new ResizeObserver(() => bump());
+        resizeObserver.observe(el);
+        const mutationObserver = new MutationObserver(() => bump());
+        mutationObserver.observe(el, { characterData: true, subtree: true, childList: true });
+        this.#destroyRef.onDestroy(() => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        });
+        // initial measurement now that the element has appeared
+        bump();
+    }
+    #createClone() {
+        const clone = this.#document.createElement('div');
+        clone.setAttribute('aria-hidden', 'true');
+        Object.assign(clone.style, {
+            inlineSize: 'fit-content',
+            whiteSpace: 'nowrap',
+            // `fixed` + pinned origin keeps the (potentially very wide) clone out of the
+            // document's scrollable overflow, so measuring never flashes a scrollbar.
+            position: 'fixed',
+            insetBlockStart: '0',
+            insetInlineStart: '0',
+            visibility: 'hidden',
+            pointerEvents: 'none',
+            contain: 'layout',
+        });
+        this.#document.body.appendChild(clone);
+        return clone;
+    }
+    #applyClonedStyles(clone, hostStyle) {
+        const { padding, borderWidth, borderStyle, boxSizing, fontFamily, fontWeight, fontStyle, fontSize } = hostStyle;
+        Object.assign(clone.style, { padding, borderWidth, borderStyle, boxSizing, fontFamily, fontWeight, fontStyle, fontSize });
     }
     onMouseEnter() {
         this.#action.set('open');
@@ -415,10 +472,10 @@ class LuTooltipTriggerDirective {
         }
         return x;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: LuTooltipTriggerDirective, isStandalone: true, selector: "[luTooltip]", inputs: { luTooltipInput: { classPropertyName: "luTooltipInput", publicName: "luTooltip", isSignal: true, isRequired: false, transformFunction: null }, luTooltipEnterDelay: { classPropertyName: "luTooltipEnterDelay", publicName: "luTooltipEnterDelay", isSignal: true, isRequired: false, transformFunction: null }, luTooltipLeaveDelay: { classPropertyName: "luTooltipLeaveDelay", publicName: "luTooltipLeaveDelay", isSignal: true, isRequired: false, transformFunction: null }, luTooltipDisabled: { classPropertyName: "luTooltipDisabled", publicName: "luTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, luTooltipOnlyForDisplay: { classPropertyName: "luTooltipOnlyForDisplay", publicName: "luTooltipOnlyForDisplay", isSignal: true, isRequired: false, transformFunction: null }, luTooltipPosition: { classPropertyName: "luTooltipPosition", publicName: "luTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, luTooltipWhenEllipsisInput: { classPropertyName: "luTooltipWhenEllipsisInput", publicName: "luTooltipWhenEllipsis", isSignal: true, isRequired: false, transformFunction: null }, luTooltipAnchor: { classPropertyName: "luTooltipAnchor", publicName: "luTooltipAnchor", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.aria-describedby": "ariaDescribedBy()", "attr.id": "id()" } }, exportAs: ["luTooltip"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.14", type: LuTooltipTriggerDirective, isStandalone: true, selector: "[luTooltip]", inputs: { luTooltipInput: { classPropertyName: "luTooltipInput", publicName: "luTooltip", isSignal: true, isRequired: false, transformFunction: null }, luTooltipEnterDelay: { classPropertyName: "luTooltipEnterDelay", publicName: "luTooltipEnterDelay", isSignal: true, isRequired: false, transformFunction: null }, luTooltipLeaveDelay: { classPropertyName: "luTooltipLeaveDelay", publicName: "luTooltipLeaveDelay", isSignal: true, isRequired: false, transformFunction: null }, luTooltipDisabled: { classPropertyName: "luTooltipDisabled", publicName: "luTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, luTooltipOnlyForDisplay: { classPropertyName: "luTooltipOnlyForDisplay", publicName: "luTooltipOnlyForDisplay", isSignal: true, isRequired: false, transformFunction: null }, luTooltipPosition: { classPropertyName: "luTooltipPosition", publicName: "luTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, luTooltipWhenEllipsisInput: { classPropertyName: "luTooltipWhenEllipsisInput", publicName: "luTooltipWhenEllipsis", isSignal: true, isRequired: false, transformFunction: null }, luTooltipAnchor: { classPropertyName: "luTooltipAnchor", publicName: "luTooltipAnchor", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()" }, properties: { "attr.aria-describedby": "ariaDescribedBy()", "attr.id": "id()" } }, exportAs: ["luTooltip"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipTriggerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipTriggerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[luTooltip]',
@@ -435,14 +492,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
         }], ctorParameters: () => [], propDecorators: { luTooltipInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltip", required: false }] }], luTooltipEnterDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipEnterDelay", required: false }] }], luTooltipLeaveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipLeaveDelay", required: false }] }], luTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipDisabled", required: false }] }], luTooltipOnlyForDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipOnlyForDisplay", required: false }] }], luTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipPosition", required: false }] }], luTooltipWhenEllipsisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipWhenEllipsis", required: false }] }], luTooltipAnchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipAnchor", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
 
 /**
- * @deprecated use `LuTooltipTriggerDirective, OverlayModule` instead
+ * @deprecated use `LuTooltipTriggerDirective` instead
  */
 class LuTooltipTriggerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipTriggerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipTriggerModule, imports: [LuTooltipTriggerDirective, OverlayModule], exports: [LuTooltipTriggerDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipTriggerModule, imports: [OverlayModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipTriggerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipTriggerModule, imports: [LuTooltipTriggerDirective, OverlayModule], exports: [LuTooltipTriggerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipTriggerModule, imports: [OverlayModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipTriggerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipTriggerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LuTooltipTriggerDirective, OverlayModule],
@@ -451,14 +508,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
         }] });
 
 /**
- * @deprecated use `LuTooltipTriggerDirective, OverlayModule, LuTooltipPanelComponent` instead
+ * @deprecated use `LuTooltipTriggerDirective, LuTooltipPanelComponent` instead
  */
 class LuTooltipModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipModule, imports: [LuTooltipTriggerModule, LuTooltipPanelComponent], exports: [LuTooltipTriggerModule, LuTooltipPanelComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipModule, imports: [LuTooltipTriggerModule, LuTooltipTriggerModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipModule, imports: [LuTooltipTriggerModule, LuTooltipPanelComponent], exports: [LuTooltipTriggerModule, LuTooltipPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipModule, imports: [LuTooltipTriggerModule, LuTooltipTriggerModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LuTooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [LuTooltipTriggerModule, LuTooltipPanelComponent],