@lucca-front/ng 21.1.3 → 21.2.0-rc.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, 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, 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 { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toObservable, toSignal, 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 { debounceTime, filter as filter$1, debounce, tap, map } from 'rxjs/operators';
 import { DOCUMENT } from '@angular/common';
 
 const luTransformTooltip = trigger('transformTooltip', [
@@ -30,6 +30,7 @@ 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) {
@@ -41,75 +42,115 @@ 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()" } }, 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()" }, 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 }); }
 }
 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 {
-    #document = inject(DOCUMENT);
-    #parentMasked = this.#document.createElement('div');
+    // 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;
     constructor() {
-        this.#parentMasked.classList.add('pr-u-mask');
-        this.#parentMasked.setAttribute('aria-hidden', 'true');
-        this.#document.body.appendChild(this.#parentMasked);
+        // 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);
     }
     /**
-     * Checks for ellipsis by cloning the node and comparing its unconstrained width against the original element.
+     * Hacky af but let's explain everything
+     * This method checks for ellipsis by cloning the node and checking its width against 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) {
-        await this.#nextFrame();
-        const elementStyle = getComputedStyle(element);
-        const bodyStyle = getComputedStyle(this.#document.body);
+        let elementStyle;
+        let bodyStyle;
+        await this.#readOperation(() => {
+            elementStyle = getComputedStyle(element);
+            bodyStyle = getComputedStyle(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,
+        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;
         });
-        this.#parentMasked.appendChild(elementCloned);
-        elementCloned.innerHTML = element.innerHTML;
+        // To avoid multiple reflows, we wait for the next microtask before calculating the width
         try {
-            const clonedElementWidth = elementCloned.getBoundingClientRect().width;
-            const elementWidth = element.getBoundingClientRect().width;
+            let clonedElementWidth;
+            let elementWidth;
+            await this.#readOperation(() => {
+                clonedElementWidth = elementCloned.getBoundingClientRect().width;
+                elementWidth = element.getBoundingClientRect().width;
+            });
             return clonedElementWidth > elementWidth;
         }
         catch {
             return false;
         }
         finally {
-            this.#parentMasked.removeChild(elementCloned);
+            await this.#writeOperation(() => {
+                this.parentMasked.removeChild(elementCloned);
+            });
         }
     }
-    #nextFrame() {
-        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    // 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();
     }
     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' }); }
@@ -125,21 +166,40 @@ class LuTooltipTriggerDirective {
     #host;
     #renderer;
     #ruler;
+    #zone;
     #injector;
     #destroyRef;
-    #isVisible;
-    #ellipsisTrigger;
+    #previousTickContent;
+    #innerTextChange$;
+    #hasEllipsis$;
     #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 });
@@ -151,20 +211,30 @@ 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.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.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.#action = signal(null, ...(ngDevMode ? [{ debugName: "#action" }] : []));
         this.#realAction = linkedSignal({ ...(ngDevMode ? { debugName: "#realAction" } : {}), source: this.#action,
             computation: (action, previous) => {
@@ -174,16 +244,23 @@ 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 ?? null;
+                    return previous?.value;
                 }
+                // If not disabled, let's check for ellipsis if needed
                 if (this.luTooltipWhenEllipsis()) {
-                    return this.#hasEllipsis() ? 'open' : (previous?.value ?? null);
+                    return this.#hasEllipsis() ? 'open' : previous.value;
                 }
+                // If it's not disabled and is not triggered based on ellipsis, just return true
                 return 'open';
             } });
-        // Action debounce pipeline — kept as Observable since signals can't debounce
+        this.ariaDescribedBy = computed(() => {
+            if (this.luTooltipDisabled() || this.luTooltipWhenEllipsis() || this.luTooltipOnlyForDisplay()) {
+                return null;
+            }
+            return `${this.id()}-panel`;
+        }, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
         toObservable(this.#realAction)
-            .pipe(filter(isNotNil), debounce((action) => timer(action === 'open' ? this.luTooltipEnterDelay() : this.luTooltipLeaveDelay())), tap((event) => {
+            .pipe(filter$1(isNotNil), debounce((action) => timer(action === 'open' ? this.luTooltipEnterDelay() : this.luTooltipLeaveDelay())), tap((event) => {
             if (event === 'open') {
                 this.openTooltip();
             }
@@ -200,88 +277,27 @@ 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();
-            });
-        });
     }
-    onMouseEnter() {
-        this.#action.set('open');
-    }
-    onMouseLeave() {
-        this.#action.set('close');
-    }
-    onFocus() {
-        if (this.#host.nativeElement.getAttribute('aria-expanded') !== 'true') {
-            this.#action.set('open');
+    ngAfterContentChecked() {
+        if (this.#previousTickContent != this.#host.nativeElement.innerText) {
+            this.#innerTextChange$.next();
+            this.#previousTickContent = this.#host.nativeElement.innerText;
         }
     }
-    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;
-        }
     }
-    prepareOverlay() {
+    openTooltip() {
+        // If tooltip is already opened, don't do anything
         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
@@ -300,23 +316,27 @@ 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);
@@ -328,7 +348,14 @@ class LuTooltipTriggerDirective {
             this.#renderer.setAttribute(this.#host.nativeElement, 'role', 'button');
         }
     }
-    // Legacy position builder to handle existing position API
+    runOutsideZoneJS(callback) {
+        return this.#zone ? this.#zone.runOutsideAngular(callback) : callback();
+    }
+    /**********************
+     *
+     * LEGACY STUFF TO HANDLE EXISTING POSITIONS
+     *
+     ***********************/
     legacyPositionBuilder() {
         const connectionPosition = {
             originX: 'start',
@@ -415,6 +442,12 @@ 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 }); }
 }