@lucca/prisme 22.0.0-rc.5 → 22.0.0

package/fesm2022/lucca-prisme-tooltip.mjs

@@ -0,0 +1,630 @@
+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, computed, numberAttribute, booleanAttribute, 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 { DOCUMENT } from '@angular/common';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { isNotNil, ɵeffectWithDeps as _effectWithDeps, getPushPanelViewportMargin, isNil } from '@lucca/prisme/core';
+import { filter, debounce, tap, map } from 'rxjs/operators';
+
+const luTransformTooltip = trigger('transformTooltip', [
+    state('enter', style({
+        opacity: 1,
+        transform: `scale(1)`,
+    })),
+    transition('void => *', [
+        style({
+            opacity: 0,
+            transform: `scale(0)`,
+        }),
+        animate(`150ms cubic-bezier(0.25, 0.8, 0.25, 1)`),
+    ]),
+    transition('* => void', [animate('50ms 100ms linear', style({ opacity: 0 }))]),
+]);
+
+class LuTooltipPanelComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.mouseEnter$ = new Subject();
+        this.mouseLeave$ = new Subject();
+        this.content = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+        this.contentPositionClasses = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentPositionClasses" }] : /* istanbul ignore next */ []));
+    }
+    setPanelPosition(posX, posY) {
+        this.contentPositionClasses.set({
+            'is-before': posX === 'end',
+            'is-after': posX === 'start',
+            'is-above': posY === 'bottom',
+            'is-below': posY === 'top',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: LuTooltipPanelComponent, isStandalone: true, selector: "lu-tooltip-panel,pr-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){.tooltip_trigger.is-whenEllipsis: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: "22.0.8", ngImport: i0, type: LuTooltipPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lu-tooltip-panel,pr-tooltip-panel', host: {
+                        role: 'tooltip',
+                        '(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){.tooltip_trigger.is-whenEllipsis: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"] }]
+        }] });
+
+/**
+ * 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);
+    }
+    unobserve(element) {
+        this.#callbacks.delete(element);
+        this.#observer?.unobserve(element);
+    }
+    // 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: "22.0.8", ngImport: i0, type: TooltipVisibilityObserver, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipVisibilityObserver, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipVisibilityObserver, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+let nextId = 0;
+class LuTooltipTriggerDirective {
+    #overlay;
+    #host;
+    #renderer;
+    #document;
+    #injector;
+    #destroyRef;
+    #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 and a debounced 'open' action (see openTooltip) can
+    // fire after the view is destroyed; avoid touching the destroyed injector (NG0911) or
+    // recreating the overlay 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;
+    // pane the focus moved into when it last left this trigger, or null
+    #focusLeftToPane;
+    constructor() {
+        this.#overlay = inject(Overlay);
+        this.#host = inject(ElementRef);
+        this.#renderer = inject(Renderer2);
+        this.#document = inject(DOCUMENT);
+        this.#injector = inject(Injector);
+        this.#destroyRef = inject(DestroyRef);
+        this.#visibilityObserver = inject(TooltipVisibilityObserver);
+        this.luTooltipInput = input('', { ...(ngDevMode ? { debugName: "luTooltipInput" } : /* istanbul ignore next */ {}), alias: 'luTooltip' });
+        this.luTooltip = linkedSignal(() => this.luTooltipInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "luTooltip" }] : /* istanbul ignore next */ []));
+        this.prTooltipInput = input('', { ...(ngDevMode ? { debugName: "prTooltipInput" } : /* istanbul ignore next */ {}), alias: 'prTooltip' });
+        this.prTooltip = linkedSignal(() => this.prTooltipInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prTooltip" }] : /* istanbul ignore next */ []));
+        this.tooltipContent = computed(() => this.luTooltip() || this.prTooltip(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipContent" }] : /* istanbul ignore next */ []));
+        this.luTooltipEnterDelay = input(300, { ...(ngDevMode ? { debugName: "luTooltipEnterDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.prTooltipEnterDelay = input(300, { ...(ngDevMode ? { debugName: "prTooltipEnterDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.tooltipEnterDelay = computed(() => this.prTooltipEnterDelay() || this.luTooltipEnterDelay(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipEnterDelay" }] : /* istanbul ignore next */ []));
+        this.luTooltipLeaveDelay = input(100, { ...(ngDevMode ? { debugName: "luTooltipLeaveDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.prTooltipLeaveDelay = input(100, { ...(ngDevMode ? { debugName: "prTooltipLeaveDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.tooltipLeaveDelay = computed(() => this.prTooltipLeaveDelay() || this.luTooltipLeaveDelay(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipLeaveDelay" }] : /* istanbul ignore next */ []));
+        this.luTooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "luTooltipDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.prTooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "prTooltipDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.tooltipDisabled = computed(() => this.prTooltipDisabled() || this.luTooltipDisabled(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipDisabled" }] : /* istanbul ignore next */ []));
+        this.luTooltipOnlyForDisplay = input(false, { ...(ngDevMode ? { debugName: "luTooltipOnlyForDisplay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.prTooltipOnlyForDisplay = input(false, { ...(ngDevMode ? { debugName: "prTooltipOnlyForDisplay" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.tooltipOnlyForDisplay = computed(() => this.prTooltipOnlyForDisplay() || this.luTooltipOnlyForDisplay(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipOnlyForDisplay" }] : /* istanbul ignore next */ []));
+        this.luTooltipPosition = input('above', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "luTooltipPosition" }] : /* istanbul ignore next */ []));
+        this.prTooltipPosition = input('above', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prTooltipPosition" }] : /* istanbul ignore next */ []));
+        this.tooltipPosition = computed(() => this.prTooltipPosition() || this.luTooltipPosition(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
+        this.luTooltipWhenEllipsisInput = input(false, { ...(ngDevMode ? { debugName: "luTooltipWhenEllipsisInput" } : /* istanbul ignore next */ {}), alias: 'luTooltipWhenEllipsis', transform: booleanAttribute });
+        this.prTooltipWhenEllipsisInput = input(false, { ...(ngDevMode ? { debugName: "prTooltipWhenEllipsisInput" } : /* istanbul ignore next */ {}), alias: 'prTooltipWhenEllipsis', transform: booleanAttribute });
+        this.luTooltipWhenEllipsis = linkedSignal(() => this.luTooltipWhenEllipsisInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "luTooltipWhenEllipsis" }] : /* istanbul ignore next */ []));
+        this.prTooltipWhenEllipsis = linkedSignal(() => this.prTooltipWhenEllipsisInput(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prTooltipWhenEllipsis" }] : /* istanbul ignore next */ []));
+        this.tooltipWhenEllipsis = computed(() => this.prTooltipWhenEllipsis() || this.luTooltipWhenEllipsis(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipWhenEllipsis" }] : /* istanbul ignore next */ []));
+        this.luTooltipAnchor = input(this.#host, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "luTooltipAnchor" }] : /* istanbul ignore next */ []));
+        this.prTooltipAnchor = input(this.#host, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prTooltipAnchor" }] : /* istanbul ignore next */ []));
+        this.tooltipAnchor = computed(() => this.prTooltipAnchor() || this.luTooltipAnchor(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tooltipAnchor" }] : /* istanbul ignore next */ []));
+        this.id = input(`${this.#host.nativeElement.tagName.toLowerCase()}-tooltip-${nextId++}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+        this.ariaDescribedBy = computed(() => {
+            if (this.tooltipDisabled() || this.tooltipWhenEllipsis() || this.tooltipOnlyForDisplay()) {
+                return null;
+            }
+            return `${this.id()}-panel`;
+        }, /* @ts-ignore */
+        ...(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, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#measureTrigger" }] : /* istanbul ignore next */ []));
+        // guards the one-time setup of the persistent resize/mutation observers
+        this.#measurementObserversArmed = false;
+        // the IntersectionObserver callback and a debounced 'open' action (see openTooltip) can
+        // fire after the view is destroyed; avoid touching the destroyed injector (NG0911) or
+        // recreating the overlay when that happens
+        this.#destroyed = false;
+        // written only from the `read` phase of the afterRenderEffect below
+        this.#hasEllipsis = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#hasEllipsis" }] : /* istanbul ignore next */ []));
+        this.#action = signal(null, /* @ts-ignore */
+        ...(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;
+                }
+                // 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.tooltipDisabled()) {
+                    return previous?.value ?? null;
+                }
+                if (this.tooltipWhenEllipsis()) {
+                    return this.#hasEllipsis() ? 'open' : (previous?.value ?? null);
+                }
+                return 'open';
+            } });
+        // pane the focus moved into when it last left this trigger, or null
+        this.#focusLeftToPane = null;
+        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.tooltipEnterDelay() : this.tooltipLeaveDelay())), tap((event) => {
+            if (event === 'open') {
+                this.openTooltip();
+            }
+            else {
+                this.closeTooltip();
+            }
+        }), takeUntilDestroyed())
+            .subscribe();
+        effect(() => {
+            if (!this.tooltipDisabled() && (!this.tooltipWhenEllipsis() || this.#hasEllipsis())) {
+                this.setAccessibilityProperties(0);
+            }
+            else {
+                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.tooltipWhenEllipsis() || this.tooltipDisabled() || this.#measurementObserversArmed) {
+                return;
+            }
+            const el = this.#host.nativeElement;
+            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.tooltipDisabled() && this.tooltipWhenEllipsis();
+                if (!shouldMeasure) {
+                    return { measure: false };
+                }
+                const host = this.#host.nativeElement;
+                const hostStyle = getComputedStyle(host);
+                // No need to run a test if the element is not truncated
+                // or if its `display` property is set to `inline`
+                // (especially for Safari, which still calculates a width, unlike other browsers)
+                if (hostStyle.textOverflow !== 'ellipsis' || hostStyle.display === 'inline') {
+                    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;
+                }
+                // Computed `width`, unlike `getBoundingClientRect`, ignores ancestor CSS transforms
+                // (e.g. the popover's scale-in animation), so a mid-animation read can't mistake the
+                // host for narrower than it is and get stuck with a false "has ellipsis".
+                const cloneWidth = parseFloat(getComputedStyle(measurement.clone).width);
+                const hostWidth = parseFloat(getComputedStyle(measurement.host).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');
+    }
+    onMouseLeave() {
+        this.#action.set('close');
+    }
+    onFocus() {
+        const leftToPane = this.#focusLeftToPane;
+        this.#focusLeftToPane = null;
+        // A closing overlay hands the focus back to its trigger.
+        // That is not the user reaching the trigger, so the tooltip stays closed.
+        if (this.#isForeignPane(leftToPane)) {
+            return;
+        }
+        if (this.#host.nativeElement.getAttribute('aria-expanded') !== 'true') {
+            this.#action.set('open');
+        }
+    }
+    onFocusOut(event) {
+        // Captured on the way out.
+        // Some overlays dispose their pane before handing the focus back, leaving nothing to inspect.
+        this.#focusLeftToPane = event.relatedTarget instanceof Element ? this.#paneOf(event.relatedTarget) : null;
+    }
+    #isForeignPane(pane) {
+        // Panes, not the whole container.
+        // A trigger inside an overlay keeps its tooltip when the focus moves within that same overlay.
+        return isNotNil(pane) && pane !== this.#paneOf(this.#host.nativeElement);
+    }
+    #paneOf(element) {
+        return element.closest('.cdk-overlay-pane');
+    }
+    onBlur() {
+        this.#action.set('close');
+    }
+    onEscape(event) {
+        event.stopPropagation();
+        this.#action.set(null);
+        this.closeTooltip();
+    }
+    requestOpen() {
+        this.#action.set('open');
+    }
+    requestClose() {
+        this.#action.set('close');
+    }
+    ngOnDestroy() {
+        this.closeTooltip();
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            delete this.overlayRef;
+        }
+    }
+    prepareOverlay() {
+        if (this.overlayRef) {
+            return;
+        }
+        this.overlayRef = this.#overlay.create({
+            scrollStrategy: this.#overlay.scrollStrategies.close(),
+            disposeOnNavigation: true,
+        });
+        const describedBy = this.ariaDescribedBy();
+        if (describedBy !== null) {
+            this.overlayRef.overlayElement.id = describedBy;
+        }
+    }
+    openTooltip() {
+        // A pending debounced 'open' is flushed when `toObservable(#realAction)` completes on
+        // destroy (`debounce` re-emits the held value on completion), i.e. AFTER ngOnDestroy has
+        // disposed the overlay. Opening then would recreate an overlay anchored to a detached
+        // host — pinned to the viewport's top-left corner — that nothing would ever dispose.
+        if (this.#destroyed || 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
+            .pipe(takeUntilDestroyed(this.#destroyRef), map(({ connectionPair }) => connectionPair), startWith(position.positions[0]))
+            .subscribe(({ overlayX, overlayY }) => {
+            ref.instance.setPanelPosition(overlayX, overlayY);
+        });
+        if (this.tooltipContent()) {
+            this.#effectRef = _effectWithDeps([this.tooltipContent], (content) => {
+                ref.instance.content.set(content);
+            }, { injector: this.#injector });
+        }
+        else if (this.tooltipWhenEllipsis()) {
+            ref.instance.content.set(this.#host.nativeElement.innerText);
+        }
+        else {
+            ref.instance.content.set('');
+        }
+        ref.instance.mouseLeave$.pipe(takeUntilDestroyed(ref.instance.destroyRef)).subscribe(() => this.#action.set('close'));
+        ref.instance.mouseEnter$.pipe(takeUntilDestroyed(ref.instance.destroyRef)).subscribe(() => this.#action.set('open'));
+    }
+    closeTooltip() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+        }
+        this.#effectRef?.destroy();
+    }
+    setAccessibilityProperties(tabindex) {
+        if (tabindex === null) {
+            this.#renderer.removeAttribute(this.#host.nativeElement, 'tabindex');
+            return;
+        }
+        if (!this.tooltipWhenEllipsis() && !this.tooltipOnlyForDisplay()) {
+            this.prepareOverlay();
+        }
+        const tag = this.#host.nativeElement.tagName.toLowerCase();
+        const nativelyFocusableTags = ['a', 'button', 'input', 'select', 'textarea'];
+        const isNativelyFocusableTag = nativelyFocusableTags.includes(tag);
+        const hasATabIndex = this.#host.nativeElement.getAttribute('tabindex') !== null;
+        if (!isNativelyFocusableTag && !hasATabIndex) {
+            this.#renderer.setAttribute(this.#host.nativeElement, 'tabindex', tabindex.toString());
+        }
+        if (!isNativelyFocusableTag && !this.tooltipWhenEllipsis() && !this.tooltipOnlyForDisplay()) {
+            this.#renderer.setAttribute(this.#host.nativeElement, 'role', 'button');
+        }
+    }
+    // Legacy position builder to handle existing position API
+    legacyPositionBuilder() {
+        const connectionPosition = {
+            originX: 'start',
+            originY: 'top',
+        };
+        // Position
+        const position = this.tooltipPosition();
+        if (position === 'above') {
+            connectionPosition.originY = 'top';
+        }
+        else if (position === 'below') {
+            connectionPosition.originY = 'bottom';
+        }
+        else if (position === 'before') {
+            connectionPosition.originX = 'start';
+        }
+        else if (position === 'after') {
+            connectionPosition.originX = 'end';
+        }
+        // Alignment
+        if (position === 'above' || position === 'below') {
+            connectionPosition.originX = 'center';
+        }
+        else {
+            connectionPosition.originY = 'center';
+        }
+        const overlayPosition = {
+            overlayX: 'start',
+            overlayY: 'top',
+        };
+        if (position === 'above' || position === 'below') {
+            overlayPosition.overlayX = connectionPosition.originX;
+            overlayPosition.overlayY = position === 'above' ? 'bottom' : 'top';
+        }
+        else {
+            overlayPosition.overlayX = position === 'before' ? 'end' : 'start';
+            overlayPosition.overlayY = connectionPosition.originY;
+        }
+        return this.#overlay
+            .position()
+            .flexibleConnectedTo(this.#resolveAnchor())
+            .withViewportMargin(getPushPanelViewportMargin(this.#host.nativeElement))
+            .withPositions([
+            {
+                originX: connectionPosition.originX,
+                originY: connectionPosition.originY,
+                overlayX: overlayPosition.overlayX,
+                overlayY: overlayPosition.overlayY,
+            },
+            {
+                originX: connectionPosition.originX,
+                originY: this.invertVerticalPos(connectionPosition.originY),
+                overlayX: overlayPosition.overlayX,
+                overlayY: this.invertVerticalPos(overlayPosition.overlayY),
+            },
+            {
+                originX: this.invertHorizontalPos(connectionPosition.originX),
+                originY: connectionPosition.originY,
+                overlayX: this.invertHorizontalPos(overlayPosition.overlayX),
+                overlayY: overlayPosition.overlayY,
+            },
+            {
+                originX: this.invertHorizontalPos(connectionPosition.originX),
+                originY: this.invertVerticalPos(connectionPosition.originY),
+                overlayX: this.invertHorizontalPos(overlayPosition.overlayX),
+                overlayY: this.invertVerticalPos(overlayPosition.overlayY),
+            },
+        ]);
+    }
+    #resolveAnchor() {
+        const anchor = this.tooltipAnchor();
+        if (isNil(anchor)) {
+            return this.#host;
+        }
+        else if ('getElementRef' in anchor) {
+            return anchor.getElementRef();
+        }
+        else {
+            return anchor;
+        }
+    }
+    invertVerticalPos(y) {
+        if (y === 'top') {
+            return 'bottom';
+        }
+        else if (y === 'bottom') {
+            return 'top';
+        }
+        return y;
+    }
+    invertHorizontalPos(x) {
+        if (x === 'end') {
+            return 'start';
+        }
+        else if (x === 'start') {
+            return 'end';
+        }
+        return x;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: LuTooltipTriggerDirective, isStandalone: true, selector: "[luTooltip],[prTooltip]", inputs: { luTooltipInput: { classPropertyName: "luTooltipInput", publicName: "luTooltip", isSignal: true, isRequired: false, transformFunction: null }, prTooltipInput: { classPropertyName: "prTooltipInput", publicName: "prTooltip", isSignal: true, isRequired: false, transformFunction: null }, luTooltipEnterDelay: { classPropertyName: "luTooltipEnterDelay", publicName: "luTooltipEnterDelay", isSignal: true, isRequired: false, transformFunction: null }, prTooltipEnterDelay: { classPropertyName: "prTooltipEnterDelay", publicName: "prTooltipEnterDelay", isSignal: true, isRequired: false, transformFunction: null }, luTooltipLeaveDelay: { classPropertyName: "luTooltipLeaveDelay", publicName: "luTooltipLeaveDelay", isSignal: true, isRequired: false, transformFunction: null }, prTooltipLeaveDelay: { classPropertyName: "prTooltipLeaveDelay", publicName: "prTooltipLeaveDelay", isSignal: true, isRequired: false, transformFunction: null }, luTooltipDisabled: { classPropertyName: "luTooltipDisabled", publicName: "luTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, prTooltipDisabled: { classPropertyName: "prTooltipDisabled", publicName: "prTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, luTooltipOnlyForDisplay: { classPropertyName: "luTooltipOnlyForDisplay", publicName: "luTooltipOnlyForDisplay", isSignal: true, isRequired: false, transformFunction: null }, prTooltipOnlyForDisplay: { classPropertyName: "prTooltipOnlyForDisplay", publicName: "prTooltipOnlyForDisplay", isSignal: true, isRequired: false, transformFunction: null }, luTooltipPosition: { classPropertyName: "luTooltipPosition", publicName: "luTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, prTooltipPosition: { classPropertyName: "prTooltipPosition", publicName: "prTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, luTooltipWhenEllipsisInput: { classPropertyName: "luTooltipWhenEllipsisInput", publicName: "luTooltipWhenEllipsis", isSignal: true, isRequired: false, transformFunction: null }, prTooltipWhenEllipsisInput: { classPropertyName: "prTooltipWhenEllipsisInput", publicName: "prTooltipWhenEllipsis", isSignal: true, isRequired: false, transformFunction: null }, luTooltipAnchor: { classPropertyName: "luTooltipAnchor", publicName: "luTooltipAnchor", isSignal: true, isRequired: false, transformFunction: null }, prTooltipAnchor: { classPropertyName: "prTooltipAnchor", publicName: "prTooltipAnchor", 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()", "focusout": "onFocusOut($event)", "blur": "onBlur()", "keydown.escape": "onEscape($event)" }, properties: { "attr.aria-describedby": "ariaDescribedBy()", "attr.id": "id()", "class.is-whenEllipsis": "luTooltipWhenEllipsis()" }, classAttribute: "tooltip_trigger" }, exportAs: ["luTooltip"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[luTooltip],[prTooltip]',
+                    exportAs: 'luTooltip',
+                    host: {
+                        '[attr.aria-describedby]': 'ariaDescribedBy()',
+                        '[attr.id]': 'id()',
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                        '(focus)': 'onFocus()',
+                        '(focusout)': 'onFocusOut($event)',
+                        '(blur)': 'onBlur()',
+                        '(keydown.escape)': 'onEscape($event)',
+                        class: 'tooltip_trigger',
+                        '[class.is-whenEllipsis]': 'luTooltipWhenEllipsis()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { luTooltipInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltip", required: false }] }], prTooltipInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "prTooltip", required: false }] }], luTooltipEnterDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipEnterDelay", required: false }] }], prTooltipEnterDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "prTooltipEnterDelay", required: false }] }], luTooltipLeaveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipLeaveDelay", required: false }] }], prTooltipLeaveDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "prTooltipLeaveDelay", required: false }] }], luTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipDisabled", required: false }] }], prTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "prTooltipDisabled", required: false }] }], luTooltipOnlyForDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipOnlyForDisplay", required: false }] }], prTooltipOnlyForDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "prTooltipOnlyForDisplay", required: false }] }], luTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipPosition", required: false }] }], prTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "prTooltipPosition", required: false }] }], luTooltipWhenEllipsisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipWhenEllipsis", required: false }] }], prTooltipWhenEllipsisInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "prTooltipWhenEllipsis", required: false }] }], luTooltipAnchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "luTooltipAnchor", required: false }] }], prTooltipAnchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "prTooltipAnchor", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+
+/**
+ * @deprecated use `LuTooltipTriggerDirective` instead
+ */
+class LuTooltipTriggerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipTriggerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipTriggerModule, imports: [LuTooltipTriggerDirective, OverlayModule], exports: [LuTooltipTriggerDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipTriggerModule, imports: [OverlayModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipTriggerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LuTooltipTriggerDirective, OverlayModule],
+                    exports: [LuTooltipTriggerDirective],
+                }]
+        }] });
+
+/**
+ * @deprecated use `LuTooltipTriggerDirective, LuTooltipPanelComponent` instead
+ */
+class LuTooltipModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipModule, imports: [LuTooltipTriggerModule, LuTooltipPanelComponent], exports: [LuTooltipTriggerModule, LuTooltipPanelComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipModule, imports: [LuTooltipTriggerModule, LuTooltipTriggerModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: LuTooltipModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [LuTooltipTriggerModule, LuTooltipPanelComponent],
+                    exports: [LuTooltipTriggerModule, LuTooltipPanelComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LuTooltipModule, LuTooltipPanelComponent, LuTooltipTriggerDirective, LuTooltipTriggerModule, luTransformTooltip };
+//# sourceMappingURL=lucca-prisme-tooltip.mjs.map