@edvak99/voice-receptionist-widget 1.1.13 → 1.1.15

package/fesm2022/edvak99-voice-receptionist-widget-smart-tooltip.directive-ChEdIem3.mjs

@@ -0,0 +1,1220 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, NgZone, ApplicationRef, SecurityContext, isDevMode, Input, Directive } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+// smart-tooltip.directive.ts
+/**
+ * SmartTooltipDirective - Enterprise-grade tooltip system for Angular 19
+ *
+ * A fully-featured, accessible tooltip directive with support for:
+ * - Multiple content types (text, HTML, Angular templates)
+ * - Intelligent positioning with auto-placement and collision detection
+ * - Hover intent to prevent accidental triggers
+ * - Full keyboard and screen reader support (WCAG 2.1 AA compliant)
+ * - Touch device support with long-press activation
+ * - Performance optimized with RAF throttling and zone.runOutsideAngular
+ * - Memory leak prevention with proper cleanup
+ * - XSS protection via DomSanitizer
+ *
+ * @example
+ * // Basic text tooltip
+ * <button smartTooltip="Save your changes">Save</button>
+ *
+ * @example
+ * // HTML content (sanitized)
+ * <button
+ *   smartTooltip="<strong>Warning:</strong> This action cannot be undone"
+ *   [tooltipAllowHtml]="true">
+ *   Delete
+ * </button>
+ *
+ * @example
+ * // Angular template
+ * <button [smartTooltip]="null" [tooltipTemplate]="myTemplate">Info</button>
+ * <ng-template #myTemplate let-data>
+ *   <div>Custom content with {{data.value}}</div>
+ * </ng-template>
+ */
+/* ───────────────────────────────── UID helper ─────────────────────────────────
+   Ensures each tooltip gets a unique id for aria-describedby.
+   Example sequence: "tip-1", "tip-2", "tip-3", ...
+   
+   This is crucial for screen reader accessibility - each tooltip must have a
+   unique ID that can be referenced by the host element's aria-describedby attribute.
+----------------------------------------------------------------------------- */
+let _uid = 0;
+function uid(prefix = 'tip-') {
+    _uid += 1;
+    return `${prefix}${_uid}`;
+}
+/* ───────────────────────────── Directive ──────────────────────────────────── */
+class SmartTooltipDirective {
+    constructor() {
+        /* ───────────── Injected services ───────────── */
+        this.host = inject((ElementRef));
+        this.r = inject(Renderer2);
+        this.zone = inject(NgZone);
+        this.appRef = inject(ApplicationRef);
+        this.sanitizer = inject(DomSanitizer);
+        /* ───────────── Public inputs (component API) ───────────── */
+        /**
+         * Tooltip text content. If null/empty, tooltip won't show.
+         * @example <button smartTooltip="Save">Save</button>
+         */
+        this.text = null;
+        /**
+         * Treat text input as HTML and render it (sanitized) inside the tooltip.
+         * Content is sanitized using Angular's DomSanitizer to prevent XSS attacks.
+         * @default false
+         */
+        this.tooltipAllowHtml = false;
+        /**
+         * Context passed into tooltipTemplate when rendering it.
+         * @example
+         * <button [tooltipTemplate]="tpl" [tooltipTemplateContext]="{user: currentUser}">
+         * <ng-template #tpl let-user="user">Hello {{user.name}}</ng-template>
+         */
+        this.tooltipTemplateContext = null;
+        /**
+         * Placement: fixed sides or 'auto' to choose best fit based on available space.
+         * Auto mode intelligently selects the placement with the most available space.
+         * @default 'top'
+         */
+        this.tooltipPlacement = 'top';
+        /**
+         * What triggers show/hide. Can be a single trigger or array of triggers.
+         * - 'hover': Show on mouseenter, hide on mouseleave (with hover intent)
+         * - 'focus': Show on focus, hide on blur
+         * - 'click': Toggle on click, close on outside click
+         * - 'manual': Programmatic control only (use show()/hide() methods)
+         * @default ['hover', 'focus']
+         */
+        this.tooltipTrigger = ['hover', 'focus'];
+        /**
+         * Delay before showing tooltip (milliseconds).
+         * Prevents tooltips from appearing too quickly during fast mouse movements.
+         * @default 80
+         */
+        this.tooltipDelayShow = 80;
+        /**
+         * Delay before hiding tooltip (milliseconds).
+         * @default 80
+         */
+        this.tooltipDelayHide = 80;
+        /**
+         * Gap between host element and tooltip (pixels).
+         * @default 8
+         */
+        this.tooltipOffset = 8;
+        /**
+         * Maximum tooltip width (pixels).
+         * Content will wrap to fit within this constraint.
+         * @default 280
+         */
+        this.tooltipMaxWidth = 280;
+        /**
+         * Stacking order for the body-appended tooltip.
+         * Use a higher value (e.g. 100200) inside ui-dialog overlays (z-index 100100).
+         * @default 99999
+         */
+        this.tooltipZIndex = 99999;
+        /**
+         * Extra CSS classes to apply to the tooltip container.
+         * Useful for custom styling or theming.
+         * @example tooltipClass="dark-theme large-text"
+         */
+        this.tooltipClass = '';
+        /**
+         * Master disable switch. When true, tooltip will never show.
+         * @default false
+         */
+        this.tooltipDisabled = false;
+        /**
+         * Render arrow pointing to host element.
+         * @default false
+         */
+        this.tooltipArrow = false;
+        /**
+         * Hover-intent timing (milliseconds).
+         * User must keep mouse relatively still for this duration before tooltip shows.
+         * Prevents tooltips from appearing during fast mouse sweeps across the UI.
+         * @default 220
+         */
+        this.tooltipHoverIntentMs = 220;
+        /**
+         * Hover-intent radius (pixels).
+         * Mouse movement within this radius resets the hover intent timer.
+         * @default 6
+         */
+        this.tooltipHoverIntentRadius = 6;
+        /**
+         * ARIA role for screen readers.
+         * @default 'tooltip'
+         */
+        this.tooltipRole = 'tooltip';
+        /**
+         * Animation enter duration (milliseconds).
+         * Time for fade-in and scale-up animation when tooltip appears.
+         * @default 220
+         */
+        this.tooltipAnimEnterMs = 220;
+        /**
+         * Animation exit duration (milliseconds).
+         * Time for fade-out animation when tooltip disappears.
+         * @default 160
+         */
+        this.tooltipAnimExitMs = 160;
+        /**
+         * Animation timing function (CSS easing).
+         * Controls the acceleration curve of the animation.
+         * @default 'cubic-bezier(.22,.95,.5,1)'
+         */
+        this.tooltipAnimEasing = 'cubic-bezier(.22,.95,.5,1)';
+        /**
+         * Allow the mouse to hover over the tooltip (keeps it open).
+         * When enabled, users can move their mouse from the host to the tooltip
+         * without it disappearing. Text selection is still prevented.
+         * @default true
+         */
+        this.tooltipHoverable = true;
+        /**
+         * Extra grace time to cross the gap from host → tooltip (milliseconds).
+         * When mouse leaves the host, tooltip stays open for this duration to allow
+         * the user to move their cursor onto the tooltip surface.
+         * @default 180
+         */
+        this.tooltipHandoffMs = 180;
+        /**
+         * When true, the tooltip is shown immediately and stays visible until this becomes false
+         * (e.g. validation state cleared). Use with `tooltipTrigger="manual"` so hover does not fight it.
+         * While true, programmatic hide from hover/focus is suppressed.
+         */
+        this.tooltipOpen = false;
+        /**
+         * When true, only show the tooltip if the host (or a child with `.truncate`) is visually
+         * truncated (scrollWidth/Height exceeds clientWidth/Height). Default false keeps existing call sites unchanged.
+         */
+        this.tooltipOnlyWhenTruncated = false;
+        /* ───────────── Internal state (private) ───────────── */
+        /** Tooltip container element (created once, reused until destroyed). */
+        this.tipEl = null;
+        /** Optional arrow element (only created when tooltipArrow is true). */
+        this.arrowEl = null;
+        /** Cached reference to content element (avoids repeated querySelector calls). */
+        this.contentEl = null;
+        /** Timer references for delayed show/hide/hover-intent operations. */
+        this.showTimer = null;
+        this.hideTimer = null;
+        this.hoverTimer = null;
+        /** Touch long-press timer; cleared on destroy to prevent show-after-destroy. */
+        this.touchTimer = null;
+        /**
+         * Collected listener unsubscribers - host-scoped (persist for directive lifetime).
+         * These listeners are attached to the host element and window, cleaned up in ngOnDestroy.
+         */
+        this.cleanupFns = [];
+        /**
+         * Collected listener unsubscribers - tooltip-scoped (cleaned when tooltip destroyed).
+         * These listeners are attached to the tooltip element and scroll ancestors,
+         * must be cleaned up when tooltip is removed from DOM to prevent memory leaks.
+         */
+        this.tipCleanupFns = [];
+        /**
+         * Scrollable ancestors of the host element.
+         * We listen to scroll events on these to reposition the tooltip.
+         * Cleared when tooltip is destroyed to prevent memory leaks.
+         */
+        this.scrollingAncestors = [];
+        /** Current visibility state of the tooltip. */
+        this.isVisible = false;
+        /** Last recorded pointer position for hover-intent tracking. */
+        this.lastPointerX = 0;
+        this.lastPointerY = 0;
+        /**
+         * Timestamp until which hover triggers are blocked (after wheel scroll).
+         * Prevents tooltips from appearing immediately after user scrolls.
+         */
+        this.wheelBlockUntil = 0;
+        /** Whether the pointer is currently over the tooltip surface. */
+        this.overTip = false;
+        /**
+         * Internal: pending hide timeout used for the handoff window.
+         * Allows time for mouse to move from host element to tooltip.
+         */
+        this.handoffHideTimer = null;
+    }
+    /* ───────────────────────── Lifecycle ───────────────────────── */
+    /**
+     * Setup: inject global CSS, compute ids, bind triggers, install observers.
+     * All high-frequency event listeners run outside Angular zone for performance.
+     */
+    ngOnInit() {
+        this.ensureGlobalCssOnce();
+        this.tipId = this.tooltipId || uid();
+        // Create a single RAF-throttled position updater to reuse everywhere
+        // This prevents memory leaks from creating multiple closures
+        this.rafUpdatePosition = this.rafThrottled(() => this.updatePosition());
+        const triggers = this.normalizeTriggers();
+        // High-frequency events outside Angular for performance
+        // This prevents unnecessary change detection cycles
+        this.zone.runOutsideAngular(() => {
+            this.bindTriggers(triggers);
+            // Reuse the same throttled function for window resize
+            this.cleanupFns.push(this.r.listen(window, 'resize', this.rafUpdatePosition));
+            // Watch for host element size changes
+            if ('ResizeObserver' in window) {
+                this.ro = new ResizeObserver(this.rafUpdatePosition);
+                this.ro.observe(this.host.nativeElement);
+            }
+            // Hide tooltip when host scrolls completely out of view
+            if ('IntersectionObserver' in window) {
+                this.io = new IntersectionObserver((entries) => {
+                    const [e] = entries;
+                    if (!e || !this.isVisible)
+                        return;
+                    if (e.intersectionRatio === 0)
+                        this.hide(0); // host fully out of view
+                }, { threshold: 0 });
+                this.io.observe(this.host.nativeElement);
+            }
+            // Suppress hover-show briefly after scrolling (reduces accidental pops)
+            // Users often scroll past elements, we don't want tooltips appearing during scroll
+            this.cleanupFns.push(this.r.listen(document, 'wheel', () => {
+                this.wheelBlockUntil = performance.now() + 200;
+            }));
+        });
+    }
+    /**
+     * React to @Input() changes.
+     * Content changes trigger re-render and repositioning.
+     * Disabling or removing content while visible triggers immediate hide.
+     */
+    ngOnChanges(changes) {
+        const contentChanged = changes['text'] || changes['tooltipAllowHtml'] ||
+            changes['tooltipTemplate'] || changes['tooltipTemplateContext'];
+        if (this.tipEl && contentChanged) {
+            this.refreshTooltipContent();
+            this.updatePosition();
+        }
+        // Hide immediately if disabled or text removed while showing
+        if (changes['tooltipDisabled'] && this.tooltipDisabled)
+            this.hide(0);
+        if (contentChanged && !this.hasTooltipContent() && this.isVisible)
+            this.hide(0);
+        // Update tooltip classes when tooltipClass input changes
+        if (changes['tooltipClass'] && this.tipEl) {
+            this.tipEl.className = `smart-tooltip-container ${this.tooltipClass || ''}`.trim();
+        }
+        if (changes['tooltipOpen']) {
+            if (this.tooltipOpen && this.hasTooltipContent() && !this.tooltipDisabled) {
+                this.zone.runOutsideAngular(() => {
+                    setTimeout(() => this.show(0), 0);
+                });
+            }
+            else if (!this.tooltipOpen && this.isVisible) {
+                this.zone.runOutsideAngular(() => this.hide(0));
+            }
+        }
+    }
+    ngAfterViewInit() {
+        if (this.tooltipOpen && this.hasTooltipContent() && !this.tooltipDisabled) {
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => this.show(0), 0);
+            });
+        }
+    }
+    /**
+     * Tear down: timers, DOM, listeners, observers, ARIA links.
+     * Critical for preventing memory leaks in long-lived applications.
+     */
+    ngOnDestroy() {
+        this.clearTimers();
+        this.destroyTooltip();
+        // Clean up host-scoped listeners
+        for (const fn of this.cleanupFns) {
+            try {
+                fn();
+            }
+            catch { /* listener cleanup; ignore */ }
+        }
+        this.cleanupFns = [];
+        this.hoverMoveUnsub?.();
+        this.hoverMoveUnsub = undefined;
+        // Properly disconnect and unobserve all elements
+        if (this.ro) {
+            this.ro.unobserve(this.host.nativeElement);
+            this.ro.disconnect();
+        }
+        if (this.io) {
+            this.io.unobserve(this.host.nativeElement);
+            this.io.disconnect();
+        }
+        this.unbindDocEsc();
+        this.activePlacement = undefined;
+        // Remove our id from aria-describedby on the same target we attached to
+        const target = this.descTargetEl || this.getFocusTarget();
+        if (this.tipId) {
+            const remaining = (target.getAttribute('aria-describedby') || '')
+                .split(/\s+/).filter(Boolean).filter(id => id !== this.tipId);
+            if (remaining.length)
+                target.setAttribute('aria-describedby', remaining.join(' '));
+            else
+                target.removeAttribute('aria-describedby');
+        }
+    }
+    /* ─────────────────────── Triggers & binding ─────────────────────── */
+    /**
+     * Normalize triggers to array form for consistent handling.
+     * Allows single trigger or array of triggers as input.
+     */
+    normalizeTriggers() {
+        return Array.isArray(this.tooltipTrigger) ? this.tooltipTrigger : [this.tooltipTrigger];
+    }
+    /**
+     * Bind hover/focus/click/touch triggers with cleanup.
+     * Each trigger type has specific behavior optimized for that interaction pattern.
+     */
+    bindTriggers(triggers) {
+        const el = this.host.nativeElement;
+        // HOVER with intent (prevents instant pop on fast sweeps)
+        // Hover intent requires the mouse to stay relatively still before showing tooltip
+        if (triggers.includes('hover')) {
+            const startHoverIntent = (e) => {
+                if (this.tooltipDisabled)
+                    return;
+                if (performance.now() < this.wheelBlockUntil)
+                    return; // skip right after wheel
+                this.clearTimers();
+                this.lastPointerX = e.clientX;
+                this.lastPointerY = e.clientY;
+                // Track mouse movement to detect if user is still hovering intentionally
+                const onMove = (ev) => {
+                    const dx = Math.abs(ev.clientX - this.lastPointerX);
+                    const dy = Math.abs(ev.clientY - this.lastPointerY);
+                    if (dx > this.tooltipHoverIntentRadius || dy > this.tooltipHoverIntentRadius) {
+                        this.lastPointerX = ev.clientX;
+                        this.lastPointerY = ev.clientY;
+                        // Reset timer if mouse moves beyond threshold
+                        if (this.hoverTimer) {
+                            clearTimeout(this.hoverTimer);
+                            this.hoverTimer = null;
+                        }
+                        this.hoverTimer = setTimeout(() => this.show(this.tooltipDelayShow), this.tooltipHoverIntentMs);
+                    }
+                };
+                // Arm initial intent timer
+                this.hoverTimer = setTimeout(() => this.show(this.tooltipDelayShow), this.tooltipHoverIntentMs);
+                // Bind per-hover mousemove (cleaned on leave/show)
+                this.hoverMoveUnsub?.();
+                this.hoverMoveUnsub = this.r.listen(el, 'mousemove', onMove);
+            };
+            const cancelHoverIntent = (ev) => {
+                // If moving from host into the tooltip surface, keep it open immediately
+                if (this.tipEl && ev?.relatedTarget instanceof Node) {
+                    if (this.tipEl.contains(ev.relatedTarget))
+                        return;
+                }
+                // Cancel intent timer & per-hover mousemove
+                if (!this.isVisible && this.hoverTimer) {
+                    clearTimeout(this.hoverTimer);
+                    this.hoverTimer = null;
+                }
+                this.hoverMoveUnsub?.();
+                this.hoverMoveUnsub = undefined;
+                // Start short handoff timer: if mouse enters tooltip during this window, cancel hide
+                // This allows users to move from host to tooltip without it disappearing
+                if (this.handoffHideTimer)
+                    clearTimeout(this.handoffHideTimer);
+                this.handoffHideTimer = setTimeout(() => {
+                    this.hide(this.tooltipDelayHide);
+                    this.handoffHideTimer = null;
+                }, this.tooltipHandoffMs);
+            };
+            this.cleanupFns.push(this.r.listen(el, 'mouseenter', (e) => startHoverIntent(e)));
+            this.cleanupFns.push(this.r.listen(el, 'mouseleave', (e) => cancelHoverIntent(e)));
+        }
+        // FOCUS (keyboard/screen reader)
+        // Essential for accessibility - keyboard users must be able to trigger tooltips
+        if (triggers.includes('focus')) {
+            this.cleanupFns.push(this.r.listen(el, 'focusin', () => {
+                if (this.tooltipDisabled)
+                    return;
+                this.show(this.tooltipDelayShow);
+            }));
+            this.cleanupFns.push(this.r.listen(el, 'focusout', () => {
+                if (!this.isVisible)
+                    return;
+                this.hide(this.tooltipDelayHide);
+            }));
+            this.cleanupFns.push(this.r.listen(el, 'keydown', (e) => {
+                if (e.key === 'Escape' && this.isVisible) {
+                    e.stopPropagation();
+                    this.hide(0);
+                }
+            }));
+        }
+        // CLICK (toggle)
+        // Click trigger toggles tooltip and closes on outside click
+        if (triggers.includes('click')) {
+            this.cleanupFns.push(this.r.listen(el, 'click', () => {
+                if (this.tooltipDisabled)
+                    return;
+                this.isVisible ? this.hide(this.tooltipDelayHide) : this.show(this.tooltipDelayShow);
+            }));
+            this.cleanupFns.push(this.r.listen(document, 'click', (e) => {
+                if (!this.isVisible)
+                    return;
+                const t = e.target;
+                const withinHost = el.contains(t);
+                const withinTip = this.tipEl?.contains(t);
+                if (!withinHost && !withinTip)
+                    this.hide(this.tooltipDelayHide);
+            }));
+        }
+        // TOUCH (long-press to show; tap elsewhere to hide)
+        // Touch support for mobile devices - requires longer press to prevent accidental triggers
+        const longPressMs = Math.max(400, this.tooltipDelayShow + 200);
+        this.cleanupFns.push(this.r.listen(el, 'touchstart', () => {
+            if (this.tooltipDisabled)
+                return;
+            this.clearTimers();
+            this.touchTimer = setTimeout(() => this.show(), longPressMs);
+        }));
+        this.cleanupFns.push(this.r.listen(el, 'touchend', () => {
+            if (this.touchTimer) {
+                clearTimeout(this.touchTimer);
+                this.touchTimer = null;
+            }
+        }));
+        this.cleanupFns.push(this.r.listen(document, 'touchstart', (e) => {
+            if (!this.isVisible)
+                return;
+            const t = e.target;
+            const withinHost = el.contains(t);
+            const withinTip = this.tipEl?.contains(t);
+            if (!withinHost && !withinTip)
+                this.hide(0);
+        }));
+    }
+    /* ────────────────────── Show / Hide logic ────────────────────── */
+    /**
+     * Show tooltip after optional delay (creates DOM if first time).
+     * Delays are important for preventing tooltip spam during rapid interactions.
+     */
+    show(delay = 0) {
+        if (!this.hasTooltipContent() || this.tooltipDisabled)
+            return;
+        if (this.tooltipOnlyWhenTruncated && !this.isTruncationTargetOverflowing())
+            return;
+        this.clearTimers();
+        if (this.handoffHideTimer) {
+            clearTimeout(this.handoffHideTimer);
+            this.handoffHideTimer = null;
+        }
+        this.showTimer = setTimeout(() => {
+            this.hoverMoveUnsub?.();
+            this.hoverMoveUnsub = undefined;
+            // Re-check at fire time: layout may have changed during the delay / hover-intent wait
+            if (this.tooltipOnlyWhenTruncated && !this.isTruncationTargetOverflowing())
+                return;
+            if (!this.tipEl)
+                this.createTooltip();
+            if (!this.tipEl)
+                return;
+            this.isVisible = true;
+            this.tipEl.style.display = 'block';
+            this.tipEl.setAttribute('data-show', 'true');
+            void this.tipEl.offsetWidth; // Force reflow for animation
+            this.tipEl.setAttribute('aria-hidden', 'false');
+            this.bindDocEsc();
+            this.updatePosition();
+            // Double RAF ensures position is updated after display:block takes effect
+            requestAnimationFrame(() => this.updatePosition());
+        }, delay);
+    }
+    /**
+     * True when the host or a `.truncate` descendant is visually ellipsized / clipped.
+     * Uses a 1px slack for subpixel rounding.
+     */
+    isTruncationTargetOverflowing() {
+        const host = this.host.nativeElement;
+        if (this.elementOverflows(host))
+            return true;
+        const truncateChild = host.querySelector('.truncate');
+        return truncateChild instanceof HTMLElement && this.elementOverflows(truncateChild);
+    }
+    elementOverflows(el) {
+        return el.scrollWidth > el.clientWidth + 1 || el.scrollHeight > el.clientHeight + 1;
+    }
+    /**
+     * Hide tooltip after optional delay.
+     * Animation duration is respected before setting display:none.
+     */
+    hide(delay = 0) {
+        if (this.tooltipOpen)
+            return;
+        this.clearTimers();
+        if (this.handoffHideTimer) {
+            clearTimeout(this.handoffHideTimer);
+            this.handoffHideTimer = null;
+        }
+        this.hideTimer = setTimeout(() => {
+            this.isVisible = false;
+            this.activePlacement = undefined;
+            if (this.tipEl) {
+                this.tipEl.removeAttribute('data-show');
+                this.tipEl.setAttribute('aria-hidden', 'true');
+                const exitMs = this.tooltipAnimExitMs || 0;
+                const el = this.tipEl;
+                el.style.pointerEvents = 'none';
+                // Wait for exit animation before hiding
+                setTimeout(() => {
+                    if (!this.isVisible && this.tipEl === el) {
+                        el.style.display = 'none';
+                    }
+                }, exitMs);
+            }
+            this.unbindDocEsc();
+        }, delay);
+    }
+    /**
+     * Clear all timers safely.
+     * Critical to prevent stale callbacks from executing.
+     */
+    clearTimers() {
+        if (this.showTimer)
+            clearTimeout(this.showTimer);
+        if (this.hideTimer)
+            clearTimeout(this.hideTimer);
+        if (this.hoverTimer)
+            clearTimeout(this.hoverTimer);
+        if (this.handoffHideTimer)
+            clearTimeout(this.handoffHideTimer);
+        if (this.touchTimer)
+            clearTimeout(this.touchTimer);
+        this.showTimer = this.hideTimer = this.hoverTimer = this.handoffHideTimer = this.touchTimer = null;
+    }
+    /* ───────────────── DOM creation / destruction ───────────────── */
+    /**
+     * Create tooltip container + content (and arrow if enabled), attach to <body>.
+     * Tooltip is positioned fixed and appended to body to avoid z-index/overflow issues.
+     */
+    createTooltip() {
+        const doc = document;
+        // Container
+        const tip = this.r.createElement('div');
+        this.tipEl = tip;
+        tip.id = this.tipId;
+        tip.className = `smart-tooltip-container ${this.tooltipClass || ''}`.trim();
+        tip.setAttribute('role', this.tooltipRole);
+        tip.setAttribute('aria-hidden', 'true');
+        tip.style.position = 'fixed';
+        tip.style.zIndex = String(this.tooltipZIndex ?? 99999);
+        tip.style.maxWidth = `${this.tooltipMaxWidth}px`;
+        // Instance animation variables (CSS custom properties)
+        // This allows per-instance animation timing without creating separate CSS classes
+        tip.style.setProperty('--ed-tip-enter-ms', `${this.tooltipAnimEnterMs}ms`);
+        tip.style.setProperty('--ed-tip-exit-ms', `${this.tooltipAnimExitMs}ms`);
+        tip.style.setProperty('--ed-tip-ease', this.tooltipAnimEasing);
+        // Optional arrow
+        if (this.tooltipArrow) {
+            const arrow = this.r.createElement('div');
+            this.arrowEl = arrow;
+            arrow.className = 'smart-tooltip-arrow';
+            tip.appendChild(arrow);
+        }
+        // Content - cache reference for performance
+        const content = this.r.createElement('div');
+        this.contentEl = content;
+        content.className = 'smart-tooltip-content';
+        this.populateContent(content);
+        content.style.userSelect = 'none'; // keep text non-selectable
+        tip.appendChild(content);
+        // Attach to body (avoids overflow:hidden and z-index issues from parent elements)
+        this.r.appendChild(doc.body, tip);
+        // Add tooltip to ResizeObserver to track content size changes
+        // Important for dynamic content that might resize after initial render
+        if (this.ro) {
+            this.ro.observe(tip);
+        }
+        // Allow handoff: cancel hide if mouse enters tooltip during grace window
+        this.tipCleanupFns.push(this.r.listen(tip, 'mouseenter', () => {
+            if (this.handoffHideTimer) {
+                clearTimeout(this.handoffHideTimer);
+                this.handoffHideTimer = null;
+            }
+        }));
+        this.tipCleanupFns.push(this.r.listen(tip, 'mouseleave', () => {
+            this.hide(this.tooltipDelayHide);
+        }));
+        // If hoverable, keep open when pointer is on tooltip, hide after leaving it
+        if (this.tooltipHoverable) {
+            this.tipCleanupFns.push(this.r.listen(tip, 'mouseenter', () => {
+                this.overTip = true;
+                this.clearTimers(); // cancel pending hides when entering the tip
+            }));
+            this.tipCleanupFns.push(this.r.listen(tip, 'mouseleave', () => {
+                this.overTip = false;
+                this.hide(this.tooltipDelayHide);
+            }));
+        }
+        // ARIA: attach describedby to the actual focus target (inner control)
+        // This ensures screen readers announce the tooltip when the element receives focus
+        const target = (this.descTargetEl = this.getFocusTarget());
+        const existing = (target.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+        if (!existing.includes(tip.id)) {
+            existing.push(tip.id);
+            target.setAttribute('aria-describedby', existing.join(' '));
+        }
+        // Reposition on scroll of overflow ancestors (reuse cached RAF function)
+        // This ensures tooltip stays aligned with host when scrolling
+        this.scrollingAncestors = this.getScrollableAncestors(this.host.nativeElement);
+        for (const sc of this.scrollingAncestors) {
+            this.tipCleanupFns.push(this.r.listen(sc, 'scroll', this.rafUpdatePosition));
+        }
+    }
+    /**
+     * Remove tooltip DOM from the document and clean up all associated resources.
+     * Critical for preventing memory leaks - must clean up listeners BEFORE removing DOM.
+     */
+    destroyTooltip() {
+        // Clean up tooltip-specific listeners BEFORE removing DOM
+        // This prevents memory leaks from listeners holding references to removed elements
+        for (const fn of this.tipCleanupFns) {
+            try {
+                fn();
+            }
+            catch { /* listener cleanup; ignore */ }
+        }
+        this.tipCleanupFns = [];
+        // Unobserve tooltip from ResizeObserver
+        if (this.ro && this.tipEl) {
+            this.ro.unobserve(this.tipEl);
+        }
+        // Remove tooltip from DOM
+        if (this.tipEl && this.tipEl.parentNode) {
+            this.tipEl.parentNode.removeChild(this.tipEl);
+        }
+        this.destroyTemplateView();
+        // Clear all references to prevent memory leaks
+        this.tipEl = null;
+        this.arrowEl = null;
+        this.contentEl = null;
+        this.scrollingAncestors = [];
+    }
+    /**
+     * Inject a single global <style> for animations/appearance (idempotent, async).
+     * Uses RAF to prevent blocking the initial render.
+     * Only one style tag is created even if multiple tooltips exist.
+     */
+    ensureGlobalCssOnce() {
+        const id = 'smart-tooltip-global-styles';
+        if (document.getElementById(id))
+            return;
+        // Use RAF to prevent blocking initial render
+        requestAnimationFrame(() => {
+            // Double-check after async boundary
+            if (document.getElementById(id))
+                return;
+            const style = this.r.createElement('style');
+            style.id = id;
+            style.textContent = `
+        .smart-tooltip-container{
+          pointer-events: none; /* hidden by default: don't block clicks */
+          --_dur: var(--ed-tip-exit-ms,160ms);
+          --_ease: var(--ed-tip-ease,cubic-bezier(.22,.95,.5,1));
+          opacity: 0;
+          transform: translateY(6px);
+          filter: blur(2px);
+          will-change: opacity, transform, filter;
+          transition:
+            opacity var(--_dur) var(--_ease),
+            transform var(--_dur) var(--_ease),
+            filter var(--_dur) var(--_ease);
+        }
+        .smart-tooltip-container[data-show]{
+          pointer-events: auto; /* interactive only while visible */
+          --_dur: var(--ed-tip-enter-ms,220ms);
+          opacity: 1;
+          transform: translateY(0) scale(1);
+          filter: blur(0);
+        }
+        .smart-tooltip-content{
+          font-size: 12px;
+          background: var(--color-tooltip-bg, rgba(17,24,39,.95));
+          color: var(--color-tooltip-text, #fff);
+          border-radius: 4px;
+          padding: 4px 6px;
+          box-shadow: 0 8px 24px rgba(0,0,0,.18);
+          user-select: none;
+        }
+        .smart-tooltip-arrow{
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          transform: rotate(45deg);
+          background: var(--color-tooltip-bg, rgba(17,24,39,.95));
+        }
+        .smart-tooltip-container[data-place="top"] .smart-tooltip-arrow{bottom:-5px}
+        .smart-tooltip-container[data-place="bottom"] .smart-tooltip-arrow{top:-5px}
+        .smart-tooltip-container[data-place="left"] .smart-tooltip-arrow{right:-5px}
+        .smart-tooltip-container[data-place="right"] .smart-tooltip-arrow{left:-5px}
+
+        @media (prefers-reduced-motion: reduce){
+          .smart-tooltip-container{
+            transition: none !important;
+            transform: none !important;
+            filter: none !important;
+          }
+        }
+      `;
+            this.r.appendChild(document.head, style);
+        });
+    }
+    /* ─────────────────── Positioning & utilities ─────────────────── */
+    /**
+     * Recompute placement, clamp to viewport, and (optionally) position arrow.
+     * Uses cached measurements to avoid layout thrashing.
+     */
+    updatePosition() {
+        if (!this.isVisible || !this.tipEl)
+            return;
+        const host = this.host.nativeElement;
+        const rect = host.getBoundingClientRect();
+        const tipRect = this.tipEl.getBoundingClientRect();
+        // Determine optimal placement (consolidated logic)
+        const placement = this.determinePlacement(rect, tipRect);
+        this.activePlacement = placement;
+        // Transform origin improves perceived motion direction
+        // Tooltip appears to grow from the direction it's pointing
+        const origin = placement === 'top' ? 'center bottom' :
+            placement === 'bottom' ? 'center top' :
+                placement === 'left' ? 'right center' :
+                    'left center';
+        this.tipEl.style.transformOrigin = origin;
+        this.tipEl.setAttribute('data-place', placement);
+        this.tipEl.setAttribute('aria-hidden', 'false');
+        // Compute coordinates using the measured tipRect
+        const offset = this.tooltipOffset;
+        let top = 0, left = 0;
+        switch (placement) {
+            case 'top':
+                top = rect.top - tipRect.height - offset;
+                left = rect.left + rect.width / 2 - tipRect.width / 2;
+                break;
+            case 'bottom':
+                top = rect.bottom + offset;
+                left = rect.left + rect.width / 2 - tipRect.width / 2;
+                break;
+            case 'left':
+                top = rect.top + rect.height / 2 - tipRect.height / 2;
+                left = rect.left - tipRect.width - offset;
+                break;
+            case 'right':
+                top = rect.top + rect.height / 2 - tipRect.height / 2;
+                left = rect.right + offset;
+                break;
+        }
+        // Clamp to viewport with padding
+        // Ensures tooltip never extends beyond visible area
+        const vpPad = 4;
+        const vw = window.innerWidth, vh = window.innerHeight;
+        top = Math.max(vpPad, Math.min(top, vh - tipRect.height - vpPad));
+        left = Math.max(vpPad, Math.min(left, vw - tipRect.width - vpPad));
+        this.tipEl.style.top = `${top}px`;
+        this.tipEl.style.left = `${left}px`;
+        if (this.tooltipArrow) {
+            this.positionArrow(rect, tipRect, placement);
+        }
+    }
+    /**
+     * Determine optimal placement considering current state and clipping.
+     * Tries to maintain current placement for stability, falls back to best available.
+     */
+    determinePlacement(hostRect, tipRect) {
+        const offset = this.tooltipOffset;
+        // Try to keep current placement if it doesn't clip
+        // This reduces jitter and flip-flopping during scroll
+        if (this.activePlacement && !this.placementWouldClip(hostRect, tipRect, this.activePlacement, offset)) {
+            return this.activePlacement;
+        }
+        // Choose new placement based on configuration
+        return this.tooltipPlacement === 'auto'
+            ? this.chooseAutoPlacement(hostRect)
+            : this.resolveWithFlips(hostRect, this.tooltipPlacement);
+    }
+    /**
+     * Choose best placement based on available space.
+     * Prefers placements with more available room.
+     */
+    chooseAutoPlacement(hostRect) {
+        const order = ['top', 'bottom', 'left', 'right'];
+        // Sort by available space (most space first); copy so we don't mutate shared array
+        const sorted = [...order].sort((a, b) => this.availableSpace(hostRect, b) - this.availableSpace(hostRect, a));
+        for (const p of sorted) {
+            const resolved = this.resolveWithFlips(hostRect, p);
+            if (resolved === p)
+                return p;
+        }
+        return sorted[0];
+    }
+    /**
+     * Try desired placement; if it clips viewport/ancestors, flip to opposite/orthogonals.
+     * Prevents tooltip from being cut off by viewport edges or scrollable containers.
+     */
+    resolveWithFlips(hostRect, desired) {
+        if (!this.tipEl)
+            return desired;
+        const tipRect = this.tipEl.getBoundingClientRect();
+        const offset = this.tooltipOffset;
+        const wouldClip = (p) => {
+            const pos = this.previewPos(hostRect, tipRect, p, offset);
+            return this.clipsViewport(pos) || this.clipsAncestors(pos);
+        };
+        if (!wouldClip(desired))
+            return desired;
+        // Try opposite side
+        const opposite = {
+            top: 'bottom', bottom: 'top', left: 'right', right: 'left',
+        };
+        const flipped = opposite[desired];
+        if (!wouldClip(flipped))
+            return flipped;
+        // Try orthogonal sides
+        const orth = desired === 'top' || desired === 'bottom' ? ['left', 'right'] : ['top', 'bottom'];
+        for (const p of orth)
+            if (!wouldClip(p))
+                return p;
+        return desired; // if all clip, we clamp later
+    }
+    /**
+     * True if the given placement would clip now.
+     * Used to check if we should keep current placement.
+     */
+    placementWouldClip(hostRect, tipRect, p, offset) {
+        const pos = this.previewPos(hostRect, tipRect, p, offset);
+        return this.clipsViewport(pos) || this.clipsAncestors(pos);
+    }
+    /**
+     * Hypothetical rect for a placement (no DOM mutation).
+     * Allows us to test placements without actually moving the tooltip.
+     */
+    previewPos(hostRect, tipRect, p, offset) {
+        let top = 0, left = 0;
+        switch (p) {
+            case 'top':
+                top = hostRect.top - tipRect.height - offset;
+                left = hostRect.left + hostRect.width / 2 - tipRect.width / 2;
+                break;
+            case 'bottom':
+                top = hostRect.bottom + offset;
+                left = hostRect.left + hostRect.width / 2 - tipRect.width / 2;
+                break;
+            case 'left':
+                top = hostRect.top + hostRect.height / 2 - tipRect.height / 2;
+                left = hostRect.left - tipRect.width - offset;
+                break;
+            case 'right':
+                top = hostRect.top + hostRect.height / 2 - tipRect.height / 2;
+                left = hostRect.right + offset;
+                break;
+        }
+        return new DOMRect(left, top, tipRect.width, tipRect.height);
+    }
+    /**
+     * Is the rect outside the viewport?
+     * Checks if any edge extends beyond window boundaries.
+     */
+    clipsViewport(r) {
+        const vw = window.innerWidth, vh = window.innerHeight;
+        return r.left < 0 || r.top < 0 || r.right > vw || r.bottom > vh;
+    }
+    /**
+     * Is the rect fully outside any scrollable ancestor's content box?
+     * Prevents tooltips from appearing when host is scrolled out of view in container.
+     */
+    clipsAncestors(r) {
+        for (const anc of this.scrollingAncestors) {
+            const a = anc.getBoundingClientRect();
+            const interLeft = Math.max(a.left, r.left);
+            const interTop = Math.max(a.top, r.top);
+            const interRight = Math.min(a.right, r.right);
+            const interBottom = Math.min(a.bottom, r.bottom);
+            const intersects = interRight - interLeft > 0 && interBottom - interTop > 0;
+            if (!intersects)
+                return true;
+        }
+        return false;
+    }
+    /**
+     * Pixels of space on each side around the host.
+     * Used to determine which placement has the most available room.
+     */
+    availableSpace(hostRect, p) {
+        const vw = window.innerWidth, vh = window.innerHeight;
+        switch (p) {
+            case 'top': return hostRect.top;
+            case 'bottom': return vh - hostRect.bottom;
+            case 'left': return hostRect.left;
+            case 'right': return vw - hostRect.right;
+        }
+    }
+    /**
+     * Position arrow toward host center along active edge.
+     * Arrow stays within tooltip bounds and points toward center of host element.
+     */
+    positionArrow(hostRect, tipRect, placement) {
+        if (!this.arrowEl || !this.tipEl)
+            return;
+        const size = 10;
+        const half = size / 2;
+        const pad = 10; // Minimum distance from tooltip edge
+        switch (placement) {
+            case 'top':
+            case 'bottom': {
+                const hostCenterX = hostRect.left + hostRect.width / 2;
+                let left = hostCenterX - tipRect.left - half;
+                left = Math.max(pad, Math.min(left, tipRect.width - pad - size));
+                this.arrowEl.style.left = `${left}px`;
+                this.arrowEl.style.top = placement === 'top' ? `${tipRect.height - half}px` : `${-half}px`;
+                break;
+            }
+            case 'left':
+            case 'right': {
+                const hostCenterY = hostRect.top + hostRect.height / 2;
+                let top = hostCenterY - tipRect.top - half;
+                top = Math.max(pad, Math.min(top, tipRect.height - pad - size));
+                this.arrowEl.style.top = `${top}px`;
+                this.arrowEl.style.left = placement === 'left' ? `${tipRect.width - half}px` : `${-half}px`;
+                break;
+            }
+        }
+    }
+    /**
+     * Collect scrollable ancestors to reposition on their scroll.
+     * Walks up the DOM tree finding elements with overflow: scroll/auto.
+     */
+    getScrollableAncestors(el) {
+        const list = [];
+        let node = el.parentElement;
+        const scrollRegex = /(auto|scroll|overlay)/;
+        while (node && node !== document.body) {
+            const cs = getComputedStyle(node);
+            if (scrollRegex.test(cs.overflowY) || scrollRegex.test(cs.overflowX)) {
+                list.push(node);
+            }
+            node = node.parentElement;
+        }
+        return list;
+    }
+    /**
+     * The element that actually receives focus (inner control if present).
+     * Searches for focusable elements inside the host, falls back to host itself.
+     * Critical for proper ARIA relationships.
+     */
+    getFocusTarget() {
+        const host = this.host.nativeElement;
+        const nativelyFocusable = /^(A|BUTTON|INPUT|SELECT|TEXTAREA)$/;
+        if (nativelyFocusable.test(host.tagName))
+            return host;
+        const found = host.querySelector('button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        return found || host;
+    }
+    /**
+     * Bind document-level ESC to dismiss tooltip.
+     * Allows users to dismiss tooltip with Escape key from anywhere.
+     */
+    bindDocEsc() {
+        if (this.docKeydownUnsub)
+            return;
+        this.docKeydownUnsub = this.r.listen(document, 'keydown', (e) => {
+            if (e.key === 'Escape' && this.isVisible)
+                this.hide(0);
+        });
+    }
+    /**
+     * Remove document-level ESC handler.
+     * Cleaned up when tooltip is hidden to prevent unnecessary event processing.
+     */
+    unbindDocEsc() {
+        if (this.docKeydownUnsub) {
+            try {
+                this.docKeydownUnsub();
+            }
+            catch { /* listener cleanup; ignore */ }
+        }
+        this.docKeydownUnsub = undefined;
+    }
+    /**
+     * RAF-throttled wrapper to coalesce frequent events.
+     * Ensures position updates happen at most once per frame, preventing layout thrashing.
+     */
+    rafThrottled(fn) {
+        let ticking = false;
+        const wrapper = ((...args) => {
+            if (ticking)
+                return;
+            ticking = true;
+            requestAnimationFrame(() => {
+                ticking = false;
+                fn(...args);
+            });
+        });
+        return wrapper;
+    }
+    /**
+     * Whether there is content (text or template) to show.
+     * Prevents creating empty tooltips.
+     */
+    hasTooltipContent() {
+        if (this.tooltipTemplate)
+            return true;
+        return !!(this.text && this.text.trim().length);
+    }
+    /**
+     * Inject the right type of content into the tooltip container.
+     * Supports three content types: template, HTML (sanitized), and plain text.
+     */
+    populateContent(content) {
+        content.innerHTML = '';
+        this.destroyTemplateView();
+        // Priority 1: Angular template (most flexible)
+        if (this.tooltipTemplate) {
+            const view = this.tooltipTemplate.createEmbeddedView(this.tooltipTemplateContext || {});
+            this.templateView = view;
+            this.appRef.attachView(view);
+            view.detectChanges();
+            for (const node of view.rootNodes) {
+                if (node instanceof Node)
+                    content.appendChild(node);
+            }
+            return;
+        }
+        // Priority 2: HTML content (sanitized for XSS protection)
+        if (this.tooltipAllowHtml && this.text) {
+            content.innerHTML = this.sanitizeHtml(this.text);
+            return;
+        }
+        // Priority 3: Plain text (safest, default)
+        content.textContent = this.text || '';
+    }
+    /**
+     * Re-render the tooltip content when inputs change.
+     * Uses RAF to batch DOM reads/writes and prevent layout thrashing.
+     */
+    refreshTooltipContent() {
+        if (!this.contentEl)
+            return;
+        // Use RAF to batch DOM reads/writes and prevent layout thrashing
+        requestAnimationFrame(() => {
+            if (!this.contentEl)
+                return; // Re-check after async boundary
+            this.populateContent(this.contentEl);
+            // Update position after content changes
+            requestAnimationFrame(() => {
+                this.updatePosition();
+            });
+        });
+    }
+    /**
+     * Safely sanitize arbitrary HTML before injecting.
+     * Prevents XSS attacks while providing helpful feedback for blocked content.
+     */
+    sanitizeHtml(html) {
+        const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, html);
+        if (sanitized === null) {
+            // Log warning in development, provide user-friendly message
+            if (!this.isProduction()) {
+                console.warn('[SmartTooltip] Potentially unsafe HTML was blocked:', html);
+            }
+            return '⚠️ Content blocked for security';
+        }
+        return sanitized;
+    }
+    /**
+     * Check if running in production mode.
+     * Used to conditionally log warnings only in development.
+     */
+    isProduction() {
+        return !isDevMode();
+    }
+    /**
+     * Tear down a previously created template view.
+     * Proper cleanup prevents memory leaks from embedded views.
+     */
+    destroyTemplateView() {
+        if (!this.templateView)
+            return;
+        try {
+            this.appRef.detachView(this.templateView);
+            this.templateView.destroy();
+        }
+        catch {
+            // Ignore detach errors if view already destroyed
+        }
+        this.templateView = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SmartTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: SmartTooltipDirective, isStandalone: true, selector: "[smartTooltip]", inputs: { text: ["smartTooltip", "text"], tooltipAllowHtml: "tooltipAllowHtml", tooltipTemplate: "tooltipTemplate", tooltipTemplateContext: "tooltipTemplateContext", tooltipPlacement: "tooltipPlacement", tooltipTrigger: "tooltipTrigger", tooltipDelayShow: "tooltipDelayShow", tooltipDelayHide: "tooltipDelayHide", tooltipOffset: "tooltipOffset", tooltipMaxWidth: "tooltipMaxWidth", tooltipZIndex: "tooltipZIndex", tooltipClass: "tooltipClass", tooltipDisabled: "tooltipDisabled", tooltipArrow: "tooltipArrow", tooltipHoverIntentMs: "tooltipHoverIntentMs", tooltipHoverIntentRadius: "tooltipHoverIntentRadius", tooltipId: "tooltipId", tooltipRole: "tooltipRole", tooltipAnimEnterMs: "tooltipAnimEnterMs", tooltipAnimExitMs: "tooltipAnimExitMs", tooltipAnimEasing: "tooltipAnimEasing", tooltipHoverable: "tooltipHoverable", tooltipHandoffMs: "tooltipHandoffMs", tooltipOpen: "tooltipOpen", tooltipOnlyWhenTruncated: "tooltipOnlyWhenTruncated" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SmartTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[smartTooltip]',
+                    standalone: true,
+                }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: ['smartTooltip']
+            }], tooltipAllowHtml: [{
+                type: Input
+            }], tooltipTemplate: [{
+                type: Input
+            }], tooltipTemplateContext: [{
+                type: Input
+            }], tooltipPlacement: [{
+                type: Input
+            }], tooltipTrigger: [{
+                type: Input
+            }], tooltipDelayShow: [{
+                type: Input
+            }], tooltipDelayHide: [{
+                type: Input
+            }], tooltipOffset: [{
+                type: Input
+            }], tooltipMaxWidth: [{
+                type: Input
+            }], tooltipZIndex: [{
+                type: Input
+            }], tooltipClass: [{
+                type: Input
+            }], tooltipDisabled: [{
+                type: Input
+            }], tooltipArrow: [{
+                type: Input
+            }], tooltipHoverIntentMs: [{
+                type: Input
+            }], tooltipHoverIntentRadius: [{
+                type: Input
+            }], tooltipId: [{
+                type: Input
+            }], tooltipRole: [{
+                type: Input
+            }], tooltipAnimEnterMs: [{
+                type: Input
+            }], tooltipAnimExitMs: [{
+                type: Input
+            }], tooltipAnimEasing: [{
+                type: Input
+            }], tooltipHoverable: [{
+                type: Input
+            }], tooltipHandoffMs: [{
+                type: Input
+            }], tooltipOpen: [{
+                type: Input
+            }], tooltipOnlyWhenTruncated: [{
+                type: Input
+            }] } });
+
+export { SmartTooltipDirective as S };
+//# sourceMappingURL=edvak99-voice-receptionist-widget-smart-tooltip.directive-ChEdIem3.mjs.map