@lucca-front/ng 21.1.2 → 21.1.3

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

@@ -1,12 +1,12 @@
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, signal, ChangeDetectionStrategy, Component, Injectable, ElementRef, Renderer2, NgZone, Injector, input, linkedSignal, numberAttribute, booleanAttribute, computed, effect, Directive, NgModule } from '@angular/core';
-import { Subject, timer, shareReplay, filter, firstValueFrom, Observable, combineLatest, switchMap, startWith } from 'rxjs';
+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 { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { isNotNil, ɵeffectWithDeps as _effectWithDeps } from '@lucca-front/ng/core';
-import { debounceTime, filter as filter$1, debounce, tap, map } from 'rxjs/operators';
+import { debounceTime, filter, debounce, tap, map } from 'rxjs/operators';
 import { DOCUMENT } from '@angular/common';
 
 const luTransformTooltip = trigger('transformTooltip', [
@@ -30,7 +30,6 @@ class LuTooltipPanelComponent {
         this.mouseEnter$ = new Subject();
         this.mouseLeave$ = new Subject();
         this.content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
-        this.id = signal(null, ...(ngDevMode ? [{ debugName: "id" }] : []));
         this.contentPositionClasses = signal({}, ...(ngDevMode ? [{ debugName: "contentPositionClasses" }] : []));
     }
     setPanelPosition(posX, posY) {
@@ -42,115 +41,75 @@ class LuTooltipPanelComponent {
         });
     }
     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()" }, properties: { "attr.id": "id" } }, 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.ɵ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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: LuTooltipPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lu-tooltip-panel', host: {
                         role: 'tooltip',
-                        '[attr.id]': 'id',
                         '(mouseenter)': 'mouseEnter$.next()',
                         '(mouseleave)': 'mouseLeave$.next()',
                     }, 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 {
-    // As EllipsisRuler is a singleton, we can use shareReplay so the first subscriber starts the timer and the last one stops it
-    // The timer allows us to alternate between read and write phases
-    #interval;
-    #readPhase;
-    #writePhase;
-    #document;
+    #document = inject(DOCUMENT);
+    #parentMasked = this.#document.createElement('div');
     constructor() {
-        // As EllipsisRuler is a singleton, we can use shareReplay so the first subscriber starts the timer and the last one stops it
-        // The timer allows us to alternate between read and write phases
-        this.#interval = timer(100, 100).pipe(shareReplay({ refCount: true, bufferSize: 1 }));
-        this.#readPhase = this.#interval.pipe(filter((n) => n % 2 === 0));
-        this.#writePhase = this.#interval.pipe(filter((n) => n % 2 === 1));
-        this.#document = inject(DOCUMENT);
-        this.parentMasked = this.#document.createElement('div');
-        this.parentMasked.classList.add('pr-u-mask');
-        this.parentMasked.setAttribute('aria-hidden', 'true');
-        this.#document.body.appendChild(this.parentMasked);
+        this.#parentMasked.classList.add('pr-u-mask');
+        this.#parentMasked.setAttribute('aria-hidden', 'true');
+        this.#document.body.appendChild(this.#parentMasked);
     }
     /**
-     * Hacky af but let's explain everything
-     * This method checks for ellipsis by cloning the node and checking its width against original 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.
-     *
-     * To avoid doing multiple reflow per check, we wait for the next microtask on each key step of the process:
-     * - After computing element style
-     * - After cloning the element and appending it to the DOM
-     * - After computing the width of the cloned element
-     * - After removing the cloned element from the DOM
-     *
-     * This way, we have 2 reflows per check, no matter how many elements are checked in a row.
      */
     async hasEllipsis(element) {
-        let elementStyle;
-        let bodyStyle;
-        await this.#readOperation(() => {
-            elementStyle = getComputedStyle(element);
-            bodyStyle = getComputedStyle(document.body);
-        });
+        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';
-        let elementCloned;
-        await this.#writeOperation(() => {
-            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;
+        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,
         });
-        // To avoid multiple reflows, we wait for the next microtask before calculating the width
+        this.#parentMasked.appendChild(elementCloned);
+        elementCloned.innerHTML = element.innerHTML;
         try {
-            let clonedElementWidth;
-            let elementWidth;
-            await this.#readOperation(() => {
-                clonedElementWidth = elementCloned.getBoundingClientRect().width;
-                elementWidth = element.getBoundingClientRect().width;
-            });
+            const clonedElementWidth = elementCloned.getBoundingClientRect().width;
+            const elementWidth = element.getBoundingClientRect().width;
             return clonedElementWidth > elementWidth;
         }
         catch {
             return false;
         }
         finally {
-            await this.#writeOperation(() => {
-                this.parentMasked.removeChild(elementCloned);
-            });
+            this.#parentMasked.removeChild(elementCloned);
         }
     }
-    // To avoid multiple reflows, we wait for the next read phase before computing/reading element style
-    async #readOperation(operation) {
-        await firstValueFrom(this.#readPhase);
-        operation();
-    }
-    // To avoid multiple reflows, we wait for the next write before inserting/removing the cloned element
-    async #writeOperation(operation) {
-        await firstValueFrom(this.#writePhase);
-        operation();
+    #nextFrame() {
+        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
     }
     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' }); }
@@ -166,40 +125,21 @@ class LuTooltipTriggerDirective {
     #host;
     #renderer;
     #ruler;
-    #zone;
     #injector;
     #destroyRef;
-    #previousTickContent;
-    #innerTextChange$;
-    #hasEllipsis$;
+    #isVisible;
+    #ellipsisTrigger;
     #hasEllipsis;
     #action;
     #realAction;
-    onMouseEnter() {
-        this.#action.set('open');
-    }
-    onMouseLeave() {
-        this.#action.set('close');
-    }
-    onFocus() {
-        if (this.#host.nativeElement.getAttribute('aria-expanded') !== 'true') {
-            this.#action.set('open');
-        }
-    }
-    onBlur() {
-        this.#action.set('close');
-    }
     #effectRef;
-    #idEffectRef;
     constructor() {
         this.#overlay = inject(Overlay);
         this.#host = inject(ElementRef);
         this.#renderer = inject(Renderer2);
         this.#ruler = inject(EllipsisRuler);
-        this.#zone = inject(NgZone, { optional: true });
         this.#injector = inject(Injector);
         this.#destroyRef = inject(DestroyRef);
-        this.#previousTickContent = this.#host.nativeElement.innerText;
         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 });
@@ -211,30 +151,20 @@ class LuTooltipTriggerDirective {
         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.resize$ = new Observable((observer) => {
-            const resizeObserver = new ResizeObserver(() => {
-                observer.next();
-            });
-            resizeObserver.observe(this.#host.nativeElement);
-            return () => {
-                resizeObserver.disconnect();
-            };
-        });
-        this.#innerTextChange$ = new Subject();
-        this.#hasEllipsis$ = combineLatest([
-            toObservable(
-            // 1. Group necessary inputs
-            computed(() => ({ whenEllipsis: this.luTooltipWhenEllipsis(), disabled: this.luTooltipDisabled() }))),
-            // Resend resize events to trigger the check
-            this.resize$.pipe(debounceTime(150)),
-            // Include content changes
-            this.#innerTextChange$,
-        ]).pipe(
-        // 2. Keep only necessary inputs
-        filter$1(([{ whenEllipsis, disabled }]) => !disabled && whenEllipsis), 
-        // 3. Check for ellipsis
-        switchMap(() => this.runOutsideZoneJS(() => this.#ruler.hasEllipsis(this.#host.nativeElement))));
-        this.#hasEllipsis = toSignal(this.#hasEllipsis$, { initialValue: false });
+        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,
             computation: (action, previous) => {
@@ -244,23 +174,16 @@ class LuTooltipTriggerDirective {
                 // We only filter open events because even if it's disabled while opened,
                 // we want the tooltip to be able to close itself no matter what
                 if (this.luTooltipDisabled()) {
-                    return previous?.value;
+                    return previous?.value ?? null;
                 }
-                // If not disabled, let's check for ellipsis if needed
                 if (this.luTooltipWhenEllipsis()) {
-                    return this.#hasEllipsis() ? 'open' : previous.value;
+                    return this.#hasEllipsis() ? 'open' : (previous?.value ?? null);
                 }
-                // If it's not disabled and is not triggered based on ellipsis, just return true
                 return 'open';
             } });
-        this.ariaDescribedBy = computed(() => {
-            if (this.luTooltipDisabled() || this.luTooltipWhenEllipsis() || this.luTooltipOnlyForDisplay()) {
-                return null;
-            }
-            return `${this.id()}-panel`;
-        }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+        // Action debounce pipeline — kept as Observable since signals can't debounce
         toObservable(this.#realAction)
-            .pipe(filter$1(isNotNil), debounce((action) => timer(action === 'open' ? this.luTooltipEnterDelay() : this.luTooltipLeaveDelay())), tap((event) => {
+            .pipe(filter(isNotNil), debounce((action) => timer(action === 'open' ? this.luTooltipEnterDelay() : this.luTooltipLeaveDelay())), tap((event) => {
             if (event === 'open') {
                 this.openTooltip();
             }
@@ -277,27 +200,88 @@ class LuTooltipTriggerDirective {
                 this.setAccessibilityProperties(null);
             }
         });
+        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()) {
+                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();
+            });
+        });
     }
-    ngAfterContentChecked() {
-        if (this.#previousTickContent != this.#host.nativeElement.innerText) {
-            this.#innerTextChange$.next();
-            this.#previousTickContent = this.#host.nativeElement.innerText;
+    onMouseEnter() {
+        this.#action.set('open');
+    }
+    onMouseLeave() {
+        this.#action.set('close');
+    }
+    onFocus() {
+        if (this.#host.nativeElement.getAttribute('aria-expanded') !== 'true') {
+            this.#action.set('open');
         }
     }
+    onBlur() {
+        this.#action.set('close');
+    }
+    requestOpen() {
+        this.#action.set('open');
+    }
+    requestClose() {
+        this.#action.set('close');
+    }
     ngOnDestroy() {
         this.closeTooltip();
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            delete this.overlayRef;
+        }
     }
-    openTooltip() {
-        // If tooltip is already opened, don't do anything
+    prepareOverlay() {
         if (this.overlayRef) {
             return;
         }
-        const position = this.legacyPositionBuilder();
         this.overlayRef = this.#overlay.create({
-            positionStrategy: position,
             scrollStrategy: this.#overlay.scrollStrategies.close(),
             disposeOnNavigation: true,
         });
+        const describedBy = this.ariaDescribedBy();
+        if (describedBy !== null) {
+            this.overlayRef.overlayElement.id = describedBy;
+        }
+    }
+    openTooltip() {
+        if (this.overlayRef?.hasAttached()) {
+            return;
+        }
+        const position = this.legacyPositionBuilder();
+        if (!this.overlayRef) {
+            this.overlayRef = this.#overlay.create({
+                positionStrategy: position,
+                scrollStrategy: this.#overlay.scrollStrategies.close(),
+                disposeOnNavigation: true,
+            });
+        }
+        else {
+            this.overlayRef.updatePositionStrategy(position);
+        }
         const portal = new ComponentPortal(LuTooltipPanelComponent);
         const ref = this.overlayRef.attach(portal);
         position.positionChanges
@@ -316,27 +300,23 @@ class LuTooltipTriggerDirective {
         else {
             ref.instance.content.set('');
         }
-        this.#idEffectRef = _effectWithDeps([this.ariaDescribedBy], (ariaDescribedBy) => {
-            ref.instance.id.set(ariaDescribedBy);
-        }, { injector: this.#injector });
-        // On tooltip leave => trigger close
         ref.instance.mouseLeave$.pipe(takeUntilDestroyed(ref.instance.destroyRef)).subscribe(() => this.#action.set('close'));
-        // On tooltip enter => trigger open to keep it opened
         ref.instance.mouseEnter$.pipe(takeUntilDestroyed(ref.instance.destroyRef)).subscribe(() => this.#action.set('open'));
     }
     closeTooltip() {
         if (this.overlayRef) {
             this.overlayRef.detach();
-            delete this.overlayRef;
         }
         this.#effectRef?.destroy();
-        this.#idEffectRef?.destroy();
     }
     setAccessibilityProperties(tabindex) {
         if (tabindex === null) {
             this.#renderer.removeAttribute(this.#host.nativeElement, 'tabindex');
             return;
         }
+        if (!this.luTooltipWhenEllipsis() && !this.luTooltipOnlyForDisplay()) {
+            this.prepareOverlay();
+        }
         const tag = this.#host.nativeElement.tagName.toLowerCase();
         const nativelyFocusableTags = ['a', 'button', 'input', 'select', 'textarea'];
         const isNativelyFocusableTag = nativelyFocusableTags.includes(tag);
@@ -348,14 +328,7 @@ class LuTooltipTriggerDirective {
             this.#renderer.setAttribute(this.#host.nativeElement, 'role', 'button');
         }
     }
-    runOutsideZoneJS(callback) {
-        return this.#zone ? this.#zone.runOutsideAngular(callback) : callback();
-    }
-    /**********************
-     *
-     * LEGACY STUFF TO HANDLE EXISTING POSITIONS
-     *
-     ***********************/
+    // Legacy position builder to handle existing position API
     legacyPositionBuilder() {
         const connectionPosition = {
             originX: 'start',
@@ -442,12 +415,6 @@ class LuTooltipTriggerDirective {
         }
         return x;
     }
-    requestClose() {
-        this.#action.set('close');
-    }
-    requestOpen() {
-        this.#action.set('open');
-    }
     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 }); }
 }