@agorapulse/ui-components 22.2.6 → 22.2.8-beta.1

package/fesm2022/agorapulse-ui-components-tooltip.mjs

@@ -1,8 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, NgZone, input, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, ViewContainerRef, DestroyRef, computed, TemplateRef } from '@angular/core';
+import { inject, ElementRef, NgZone, input, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, DestroyRef, TemplateRef } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import DOMPurify from 'dompurify';
 import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+import { createFloatingOverlay } from '@agorapulse/ui-components/floating';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import DOMPurify from 'dompurify';
 
 /**
  * Directive that triggers a tooltip to show/hide
@@ -24,9 +26,12 @@ class TooltipExternalTriggerDirective {
         return this.apTooltipExternalTrigger() ?? null;
     }
     ngAfterViewInit() {
-        if (!this.targetTooltip) {
+        const tooltip = this.targetTooltip;
+        if (!tooltip) {
             return;
         }
+        // Otherwise the CDK's outside-click dispatcher, which runs first in capture, closes and this toggle reopens.
+        tooltip.registerExternalTrigger(this.elementRef.nativeElement);
         this.setupEventListeners();
     }
     setupEventListeners() {
@@ -45,6 +50,7 @@ class TooltipExternalTriggerDirective {
         }
     }
     ngOnDestroy() {
+        this.targetTooltip?.unregisterExternalTrigger(this.elementRef.nativeElement);
         this.cleanupEventListeners();
     }
     onClick() {
@@ -100,41 +106,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tooltip', imports: [AvatarComponent], providers: [], encapsulation: ViewEncapsulation.None, template: "<div class=\"custom-tooltip-container\">\n    @switch (type()) {\n        @case (CUSTOM_TOOLTIP_TYPE.PRESENTATION) {\n            @let presentation = presentationContext();\n            @if (presentation) {\n                <div class=\"tooltip-presentation-title\">{{ presentation.title }}</div>\n                <div class=\"tooltip-presentation-caption\">{{ presentation.description }}</div>\n            }\n        }\n        @case (CUSTOM_TOOLTIP_TYPE.LIST) {\n            <div class=\"tooltip-list-container\">\n                @for (avatar of tooltipListItems(); track avatar) {\n                    <div class=\"tooltip-item\">\n                        <ap-avatar\n                            [profilePicture]=\"avatar.profilePicture\"\n                            [alt]=\"avatar.alt ?? ''\"\n                            [network]=\"avatar.network\"\n                            [size]=\"showCaption() && avatar.caption ? 32 : 24\"\n                            [username]=\"avatar.username\"\n                            [showInitials]=\"avatar.showInitials\"\n                            [bigNetwork]=\"avatar.bigNetwork ?? false\"\n                            [anonymous]=\"avatar.anonymous ?? false\"\n                            [online]=\"avatar.online ?? false\"\n                            [rounded]=\"avatar.rounded ?? true\" />\n\n                        <div class=\"tooltip-item-info\">\n                            <div class=\"tooltip-item-title\">\n                                {{ avatar.username }}\n                            </div>\n                            @if (showCaption() && avatar.caption) {\n                                <div class=\"tooltip-item-caption\">\n                                    {{ avatar.caption }}\n                                </div>\n                            }\n                        </div>\n                    </div>\n                }\n            </div>\n        }\n        @default {\n\n        }\n    }\n\n</div>\n", styles: [".custom-tooltip-container{display:flex;flex-direction:column;width:100%;height:100%;max-height:280px;overflow:auto;padding:var(--ref-spacing-xs);gap:var(--ref-spacing-xxxs);scrollbar-color:var(--ref-color-grey-20) transparent;scrollbar-width:thin}.custom-tooltip-container .tooltip-presentation-title{color:var(--ref-color-grey-100);font-family:Averta;font-size:var(--ref-font-size-md);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-lg)}.custom-tooltip-container .tooltip-presentation-caption{color:var(--ref-color-grey-80);font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-sm)}.custom-tooltip-container .tooltip-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ref-spacing-xs)}.custom-tooltip-container .tooltip-list-container .tooltip-item{display:flex;flex-direction:row;align-items:center;gap:var(--ref-spacing-xxs)}.custom-tooltip-container .tooltip-list-container .tooltip-item .tooltip-item-info{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.custom-tooltip-container .tooltip-list-container .tooltip-item .tooltip-item-info .tooltip-item-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;align-self:stretch;overflow:hidden;color:var(--ref-color-grey-100);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-sm);font-style:normal;font-weight:var(--ref-font-weight-bold);line-height:var(--ref-font-line-height-sm)}.custom-tooltip-container .tooltip-list-container .tooltip-item .tooltip-item-info .tooltip-item-caption{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;align-self:stretch;overflow:hidden;color:var(--ref-color-grey-80);text-overflow:ellipsis;font-family:Averta;font-size:var(--ref-font-size-xs);font-style:normal;font-weight:var(--ref-font-weight-regular);line-height:var(--ref-font-line-height-xs)}\n"] }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], presentationContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentationContext", required: false }] }], tooltipListItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipListItems", required: false }] }], showCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaption", required: false }] }] } });
 
-class TooltipService {
-    static defaultOffset = 12;
-    static getOuterWidth(el) {
-        return el.offsetWidth;
-    }
-    static getOuterHeight(el) {
-        return el.offsetHeight;
-    }
-    static getViewport() {
-        const win = window, d = document, e = d.documentElement, g = d.getElementsByTagName('body')[0], w = win.innerWidth || e.clientWidth || g.clientWidth, h = win.innerHeight || e.clientHeight || g.clientHeight;
-        return { width: w, height: h };
-    }
-    static getWindowScrollLeft() {
-        const doc = document.documentElement;
-        return (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
-    }
-    static getWindowScrollTop() {
-        const doc = document.documentElement;
-        return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipService });
+/**
+ * A tooltip's floating surface, internal to the directive: `role="tooltip"`, no focus handling — taking focus is `ap-popover`'s job.
+ * `ViewEncapsulation.None` and the `ap-tooltip*` class names stay: the styles are global, and the product overrides them by name.
+ * The host carries `ap-tooltip` because the engine reads the arrow's colour from the pane's first element child.
+ */
+class TooltipPanelComponent {
+    /** Plain-string content. Sanitised before it reaches the template. */
+    text = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Consumer template, which takes precedence over `text`. */
+    template = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "template" }] : /* istanbul ignore next */ []));
+    /** The consumer template's `ngTemplateOutletContext`, read through its `let-` bindings. */
+    templateContext = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "templateContext" }] : /* istanbul ignore next */ []));
+    type = input(CustomTooltipType.DEFAULT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    presentationContext = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "presentationContext" }] : /* istanbul ignore next */ []));
+    listItems = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "listItems" }] : /* istanbul ignore next */ []));
+    showCaption = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCaption" }] : /* istanbul ignore next */ []));
+    /** Only mirrored onto the host, for the class the product may hook onto. */
+    clickTriggered = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clickTriggered" }] : /* istanbul ignore next */ []));
+    isDefaultType = computed(() => !this.type() || this.type() === CustomTooltipType.DEFAULT, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDefaultType" }] : /* istanbul ignore next */ []));
+    hasTemplate = computed(() => this.template() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasTemplate" }] : /* istanbul ignore next */ []));
+    /** DOMPurify strips more than the `[innerHTML]` sanitiser that runs after it; neither pass adds anything. */
+    sanitizedText = computed(() => {
+        const text = this.text();
+        return text ? DOMPurify.sanitize(text) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sanitizedText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TooltipPanelComponent, isStandalone: true, selector: "ap-tooltip-panel", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, templateContext: { classPropertyName: "templateContext", publicName: "templateContext", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, presentationContext: { classPropertyName: "presentationContext", publicName: "presentationContext", isSignal: true, isRequired: false, transformFunction: null }, listItems: { classPropertyName: "listItems", publicName: "listItems", isSignal: true, isRequired: false, transformFunction: null }, showCaption: { classPropertyName: "showCaption", publicName: "showCaption", isSignal: true, isRequired: false, transformFunction: null }, clickTriggered: { classPropertyName: "clickTriggered", publicName: "clickTriggered", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "class.ap-predefined-tooltip": "!isDefaultType()", "class.ap-tooltip-custom-template": "hasTemplate()", "class.ap-tooltip-click-trigger": "!isDefaultType() && clickTriggered()" }, classAttribute: "ap-tooltip" }, ngImport: i0, template: "<div\n    class=\"ap-content-container\"\n    [class.ap-content-predefined-container]=\"!isDefaultType()\">\n    <!-- No arrow here: the engine draws it as the pane's `::before`, out of the accessibility tree. -->\n    @if (isDefaultType()) {\n        @if (template(); as content) {\n            <div class=\"ap-tooltip-text\">\n                <ng-container\n                    [ngTemplateOutlet]=\"content\"\n                    [ngTemplateOutletContext]=\"templateContext() ?? null\" />\n            </div>\n        } @else {\n            <div\n                class=\"ap-tooltip-text\"\n                [innerHTML]=\"sanitizedText()\"></div>\n        }\n    } @else {\n        <ap-tooltip\n            [type]=\"type()\"\n            [presentationContext]=\"presentationContext()\"\n            [tooltipListItems]=\"listItems()\"\n            [showCaption]=\"showCaption()\" />\n    }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "ap-tooltip", inputs: ["type", "presentationContext", "tooltipListItems", "showCaption"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipService, decorators: [{
-            type: Injectable
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipPanelComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tooltip-panel', imports: [NgTemplateOutlet, TooltipComponent], encapsulation: ViewEncapsulation.None, host: {
+                        role: 'tooltip',
+                        class: 'ap-tooltip',
+                        '[class.ap-predefined-tooltip]': '!isDefaultType()',
+                        '[class.ap-tooltip-custom-template]': 'hasTemplate()',
+                        '[class.ap-tooltip-click-trigger]': '!isDefaultType() && clickTriggered()',
+                    }, template: "<div\n    class=\"ap-content-container\"\n    [class.ap-content-predefined-container]=\"!isDefaultType()\">\n    <!-- No arrow here: the engine draws it as the pane's `::before`, out of the accessibility tree. -->\n    @if (isDefaultType()) {\n        @if (template(); as content) {\n            <div class=\"ap-tooltip-text\">\n                <ng-container\n                    [ngTemplateOutlet]=\"content\"\n                    [ngTemplateOutletContext]=\"templateContext() ?? null\" />\n            </div>\n        } @else {\n            <div\n                class=\"ap-tooltip-text\"\n                [innerHTML]=\"sanitizedText()\"></div>\n        }\n    } @else {\n        <ap-tooltip\n            [type]=\"type()\"\n            [presentationContext]=\"presentationContext()\"\n            [tooltipListItems]=\"listItems()\"\n            [showCaption]=\"showCaption()\" />\n    }\n</div>\n" }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: false }] }], templateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateContext", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], presentationContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "presentationContext", required: false }] }], listItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItems", required: false }] }], showCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCaption", required: false }] }], clickTriggered: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickTriggered", required: false }] }] } });
 
 class TooltipDirective {
     elementRef = inject(ElementRef);
     zone = inject(NgZone);
-    viewContainerRef = inject(ViewContainerRef);
     destroyRef = inject(DestroyRef);
-    documentClickListener;
+    /** Decides where the tooltip goes — flip, shift, scroll following, arrow; this directive only decides when. */
+    overlay = createFloatingOverlay();
     apTooltip = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "apTooltip" }] : /* istanbul ignore next */ []));
+    /** Where the panel opens, in the engine's vocabulary. */
     apTooltipPosition = input('top', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "apTooltipPosition" }] : /* istanbul ignore next */ []));
     apTooltipShowDelay = input(80, /* @ts-ignore */
@@ -153,6 +183,9 @@ class TooltipDirective {
     ...(ngDevMode ? [undefined, { debugName: "apTooltipVirtualScrollElement" }] : /* istanbul ignore next */ []));
     apTooltipTrigger = input('hover', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "apTooltipTrigger" }] : /* istanbul ignore next */ []));
+    /** Shows the arrow aimed at the trigger. */
+    apTooltipArrow = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "apTooltipArrow" }] : /* istanbul ignore next */ []));
     // Predefined template variables
     apTooltipType = input(CustomTooltipType.DEFAULT, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "apTooltipType" }] : /* istanbul ignore next */ []));
@@ -171,15 +204,38 @@ class TooltipDirective {
     ...(ngDevMode ? [{ debugName: "isValidPredefinedTooltip" }] : /* istanbul ignore next */ []));
     triggeredByClick = computed(() => this.apTooltipTrigger() === 'click' || this.externallyTriggerred, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggeredByClick" }] : /* istanbul ignore next */ []));
+    /** True while the panel is attached — not yet during the show delay. */
+    isOpen = this.overlay.isOpen;
     clickListener = undefined;
-    container = undefined;
     hideTimeout;
     mouseEnterListener = undefined;
     mouseLeaveListener = undefined;
     nativeElement = this.elementRef.nativeElement;
     showTimeout;
-    tooltipText;
     _externallyTriggerred = false;
+    panelRef = null;
+    /** Where the opening click landed, in viewport coordinates; `null` after a keyboard click. */
+    clickPoint = null;
+    /** The pointer while a click-opened tooltip is shown; `null` while unknown. */
+    pointer = null;
+    stopScrollDismissal = null;
+    /** `apTooltipExternalTrigger` elements: they carry their own toggle, so the engine must not count them as the outside. */
+    externalTriggers = new Set();
+    /** @internal Called by `apTooltipExternalTrigger`. */
+    registerExternalTrigger(element) {
+        this.externalTriggers.add(element);
+    }
+    /** @internal Called by `apTooltipExternalTrigger`. */
+    unregisterExternalTrigger(element) {
+        this.externalTriggers.delete(element);
+    }
+    /**
+     * The `.ap-tooltip` surface while one is shown.
+     * @deprecated Use {@link isOpen} to know whether a tooltip is shown.
+     */
+    get container() {
+        return this.panelRef?.location.nativeElement;
+    }
     ngOnInit() {
         const apTooltipVirtualScrollElement = this.apTooltipVirtualScrollElement();
         if (apTooltipVirtualScrollElement) {
@@ -195,7 +251,7 @@ class TooltipDirective {
     }
     setupEventListeners(trigger) {
         // Close any open tooltip when switching modes
-        if (this.container) {
+        if (this.isOpen()) {
             this.remove();
         }
         this.cleanupEventListeners();
@@ -225,13 +281,13 @@ class TooltipDirective {
         }
     }
     ngOnDestroy() {
-        if (this.container) {
+        if (this.isOpen()) {
             this.deactivate();
         }
         this.cleanupEventListeners();
     }
     onMouseEnter() {
-        if (!this.container) {
+        if (!this.isOpen()) {
             this.activate();
         }
     }
@@ -240,14 +296,16 @@ class TooltipDirective {
             this.deactivate();
         }
     }
-    onInputClick() {
+    onInputClick(event) {
         this.zone.run(() => {
             const trigger = this.apTooltipTrigger();
             if (trigger === 'click') {
-                if (this.container) {
+                if (this.isOpen()) {
                     this.deactivate();
                 }
                 else {
+                    // A click synthesised from the keyboard has `detail: 0` and sits at `(0, 0)`.
+                    this.clickPoint = event && event.detail > 0 ? { x: event.clientX, y: event.clientY } : null;
                     this.activate();
                 }
             }
@@ -258,9 +316,6 @@ class TooltipDirective {
     }
     activate() {
         this.clearHideTimeout();
-        if (this.triggeredByClick()) {
-            this.addDocumentClickListener();
-        }
         if (this.apTooltipShowDelay()) {
             this.showTimeout = window.setTimeout(() => {
                 this.show();
@@ -278,7 +333,6 @@ class TooltipDirective {
     }
     deactivate() {
         this.clearShowTimeout();
-        this.removeDocumentClickListener();
         if (this.apTooltipHideDelay()) {
             this.clearHideTimeout();
             this.hideTimeout = window.setTimeout(() => {
@@ -304,294 +358,101 @@ class TooltipDirective {
             return;
         }
         this.create();
-        // For predefined tooltips, alignment is deferred after component rendering
-        if (this.isDefaultTooltipType()) {
-            this.align();
-        }
+    }
+    remove() {
+        this.stopScrollDismissal?.();
+        this.overlay.close();
+        this.panelRef = null;
+        this.clearTimeouts();
+        this._externallyTriggerred = false;
     }
     create() {
-        if (this.container) {
+        if (this.isOpen()) {
             this.clearHideTimeout();
             this.remove();
         }
-        if (this.isDefaultTooltipType()) {
-            this.createDefaultTooltip();
-        }
-        else {
-            this.createPredefinedTooltip();
-        }
-    }
-    createDefaultTooltip() {
-        this.container = document.createElement('div');
-        this.container.setAttribute('role', 'tooltip');
-        this.tooltipText = document.createElement('div');
-        this.tooltipText.className = 'ap-tooltip-text';
-        this.updateText();
-        const contentContainer = document.createElement('div');
-        contentContainer.classList.add('ap-content-container');
-        contentContainer.appendChild(this.tooltipText);
-        contentContainer.appendChild(this.createSvgElement());
-        this.container.appendChild(contentContainer);
-        document.body.appendChild(this.container);
-        this.container.classList.add('ap-tooltip');
-        if (this.apTooltip() instanceof TemplateRef) {
-            this.container.classList.add('ap-tooltip-custom-template');
-        }
-        this.setCssVariables();
-    }
-    createPredefinedTooltip() {
-        const componentRef = this.viewContainerRef.createComponent(TooltipComponent);
-        // Set inputs
-        componentRef.setInput('type', this.apTooltipType());
-        componentRef.setInput('presentationContext', this.apTooltipPresentationContext());
-        componentRef.setInput('tooltipListItems', this.apTooltipListItems());
-        componentRef.setInput('showCaption', this.apTooltipShowAvatarCaption());
-        // Force change detection to render the component immediately
-        componentRef.changeDetectorRef.detectChanges();
-        this.container = document.createElement('div');
-        this.container.setAttribute('role', 'tooltip');
-        const contentContainer = document.createElement('div');
-        contentContainer.classList.add('ap-content-container', 'ap-content-predefined-container');
-        contentContainer.appendChild(componentRef.location.nativeElement);
-        contentContainer.appendChild(this.createSvgElement());
-        this.container.appendChild(contentContainer);
-        document.body.appendChild(this.container);
-        this.container.classList.add('ap-tooltip', 'ap-predefined-tooltip');
-        if (this.triggeredByClick()) {
-            this.container.classList.add('ap-tooltip-click-trigger');
-        }
-        // Has to wait for the TooltipComponent to be rendered in order to align and then set the CSS variable --ap-tooltip-height
-        requestAnimationFrame(() => {
-            this.align();
-            this.setCssVariables();
+        // Entered on purpose: hover is listened for outside the zone, where the panel's inputs would never render.
+        this.zone.run(() => {
+            const content = this.apTooltip();
+            const isTemplate = this.isDefaultTooltipType() && content instanceof TemplateRef;
+            this.panelRef = this.overlay.open(TooltipPanelComponent, this.nativeElement, {
+                placement: this.apTooltipPosition(),
+                arrow: this.apTooltipArrow(),
+                panelClass: this.paneClasses(isTemplate),
+                // Explicit dismissals skip the hide delay, which only exists to cross the gap to the panel.
+                onClose: () => this.zone.run(() => this.remove()),
+                additionalTriggers: () => [...this.externalTriggers],
+            });
+            if (!this.panelRef) {
+                return;
+            }
+            this.panelRef.setInput('text', content instanceof TemplateRef ? undefined : (content ?? undefined));
+            this.panelRef.setInput('template', isTemplate ? content : undefined);
+            this.panelRef.setInput('templateContext', this.apTooltipTemplateContext());
+            this.panelRef.setInput('type', this.apTooltipType());
+            this.panelRef.setInput('presentationContext', this.apTooltipPresentationContext());
+            this.panelRef.setInput('listItems', this.apTooltipListItems());
+            this.panelRef.setInput('showCaption', this.apTooltipShowAvatarCaption());
+            this.panelRef.setInput('clickTriggered', this.triggeredByClick());
+            // Render synchronously, then re-place: `attach()` measured an empty box, and background tabs stall timers and rAF.
+            this.panelRef.changeDetectorRef.detectChanges();
+            this.overlay.updatePosition();
+            this.listenForScrollDismissal();
         });
     }
-    createSvgElement() {
-        const svgNamespace = 'http://www.w3.org/2000/svg';
-        const arrowSvg = document.createElementNS(svgNamespace, 'svg');
-        arrowSvg.classList.add('ap-tooltip-arrow');
-        arrowSvg.setAttribute('xmlns', svgNamespace);
-        arrowSvg.setAttribute('viewBox', '0 0 16 8');
-        arrowSvg.setAttribute('fill', 'none');
-        const path = document.createElementNS(svgNamespace, 'path');
-        path.setAttribute('d', 'M6.68299 1.15238C7.43705 0.492586 8.56296 0.492588 9.31701 1.15238L16 7L0 7L6.68299 1.15238Z');
-        arrowSvg.appendChild(path);
-        return arrowSvg;
-    }
-    align() {
-        switch (this.apTooltipPosition()) {
-            case 'top-left':
-                this.alignTopLeft();
-                if (this.isOutOfBounds()) {
-                    this.alignBottom();
-                    if (this.isOutOfBounds()) {
-                        this.alignRight();
-                        if (this.isOutOfBounds()) {
-                            this.alignLeft();
-                        }
-                    }
-                }
-                break;
-            case 'top-right':
-                this.alignTopRight();
-                if (this.isOutOfBounds()) {
-                    this.alignBottom();
-                    if (this.isOutOfBounds()) {
-                        this.alignRight();
-                        if (this.isOutOfBounds()) {
-                            this.alignLeft();
-                        }
-                    }
-                }
-                break;
-            case 'top':
-                this.alignTop();
-                if (this.isOutOfBounds()) {
-                    this.alignBottom();
-                    if (this.isOutOfBounds()) {
-                        this.alignRight();
-                        if (this.isOutOfBounds()) {
-                            this.alignLeft();
-                        }
-                    }
-                }
-                break;
-            case 'bottom':
-                this.alignBottom();
-                if (this.isOutOfBounds()) {
-                    this.alignTop();
-                    if (this.isOutOfBounds()) {
-                        this.alignRight();
-                        if (this.isOutOfBounds()) {
-                            this.alignLeft();
-                        }
-                    }
-                }
-                break;
-            case 'bottom-left':
-                this.alignBottomLeft();
-                if (this.isOutOfBounds()) {
-                    this.alignTop();
-                    if (this.isOutOfBounds()) {
-                        this.alignRight();
-                        if (this.isOutOfBounds()) {
-                            this.alignLeft();
-                        }
-                    }
-                }
-                break;
-            case 'bottom-right':
-                this.alignBottomRight();
-                if (this.isOutOfBounds()) {
-                    this.alignTop();
-                    if (this.isOutOfBounds()) {
-                        this.alignRight();
-                        if (this.isOutOfBounds()) {
-                            this.alignLeft();
-                        }
-                    }
-                }
-                break;
-            case 'left':
-                this.alignLeft();
-                if (this.isOutOfBounds()) {
-                    this.alignRight();
-                    if (this.isOutOfBounds()) {
-                        this.alignTop();
-                        if (this.isOutOfBounds()) {
-                            this.alignBottom();
-                        }
-                    }
-                }
-                break;
-            case 'right':
-                this.alignRight();
-                if (this.isOutOfBounds()) {
-                    this.alignLeft();
-                    if (this.isOutOfBounds()) {
-                        this.alignTop();
-                        if (this.isOutOfBounds()) {
-                            this.alignBottom();
-                        }
-                    }
-                }
-                break;
-        }
-    }
-    alignRight() {
-        this.preAlign('right');
-        if (this.container) {
-            const hostOffset = this.getHostOffset();
-            const left = hostOffset.left + TooltipService.getOuterWidth(this.nativeElement) + TooltipService.defaultOffset;
-            const top = hostOffset.top + (TooltipService.getOuterHeight(this.nativeElement) - TooltipService.getOuterHeight(this.container)) / 2;
-            this.container.style.left = left + 'px';
-            this.container.style.top = top + 'px';
-        }
-    }
-    alignLeft() {
-        this.preAlign('left');
-        if (this.container) {
-            const hostOffset = this.getHostOffset();
-            const left = hostOffset.left - TooltipService.getOuterWidth(this.container) - TooltipService.defaultOffset;
-            const top = hostOffset.top + (TooltipService.getOuterHeight(this.nativeElement) - TooltipService.getOuterHeight(this.container)) / 2;
-            this.container.style.left = left + 'px';
-            this.container.style.top = top + 'px';
-        }
-    }
-    alignTop() {
-        this.preAlign('top');
-        if (this.container) {
-            const hostOffset = this.getHostOffset();
-            const left = hostOffset.left + (TooltipService.getOuterWidth(this.nativeElement) - TooltipService.getOuterWidth(this.container)) / 2;
-            const top = hostOffset.top - TooltipService.getOuterHeight(this.container) - TooltipService.defaultOffset;
-            this.container.style.left = left + 'px';
-            this.container.style.top = top + 'px';
-        }
-    }
-    alignTopLeft() {
-        this.preAlign('top-left');
-        if (this.container) {
-            const hostOffset = this.getHostOffset();
-            const left = hostOffset.left;
-            const top = hostOffset.top - TooltipService.getOuterHeight(this.container) - TooltipService.defaultOffset;
-            this.container.style.left = left + 'px';
-            this.container.style.top = top + 'px';
-        }
-    }
-    alignTopRight() {
-        this.preAlign('top-right');
-        if (this.container) {
-            const hostOffset = this.getHostOffset();
-            const left = hostOffset.left + TooltipService.getOuterWidth(this.nativeElement) - TooltipService.getOuterWidth(this.container);
-            const top = hostOffset.top - TooltipService.getOuterHeight(this.container) - TooltipService.defaultOffset;
-            this.container.style.left = left + 'px';
-            this.container.style.top = top + 'px';
-        }
-    }
-    alignBottom() {
-        this.preAlign('bottom');
-        if (this.container) {
-            const hostOffset = this.getHostOffset();
-            const left = hostOffset.left + (TooltipService.getOuterWidth(this.nativeElement) - TooltipService.getOuterWidth(this.container)) / 2;
-            const top = hostOffset.top + TooltipService.getOuterHeight(this.nativeElement) + TooltipService.defaultOffset;
-            this.container.style.left = left + 'px';
-            this.container.style.top = top + 'px';
-        }
-    }
-    alignBottomLeft() {
-        this.preAlign('bottom-left');
-        if (this.container) {
-            const hostOffset = this.getHostOffset();
-            const left = hostOffset.left;
-            const top = hostOffset.top + TooltipService.getOuterHeight(this.nativeElement) + TooltipService.defaultOffset;
-            this.container.style.left = left + 'px';
-            this.container.style.top = top + 'px';
-        }
-    }
-    alignBottomRight() {
-        this.preAlign('bottom-right');
-        if (this.container) {
-            const hostOffset = this.getHostOffset();
-            const left = hostOffset.left + (TooltipService.getOuterWidth(this.nativeElement) - TooltipService.getOuterWidth(this.container));
-            const top = hostOffset.top + TooltipService.getOuterHeight(this.nativeElement) + TooltipService.defaultOffset;
-            this.container.style.left = left + 'px';
-            this.container.style.top = top + 'px';
-        }
-    }
-    preAlign(position) {
-        this.removePreviousAlignHtmlClasses();
-        if (this.container) {
-            this.container.style.left = -999 + 'px';
-            this.container.style.top = -999 + 'px';
-            const defaultClassName = 'ap-tooltip-' + position;
-            this.container.classList.add(defaultClassName);
-        }
-    }
-    getHostOffset() {
-        const offset = this.nativeElement.getBoundingClientRect();
-        return { left: offset.left, top: offset.top };
-    }
-    isOutOfBounds() {
-        if (this.container) {
-            const offset = this.container.getBoundingClientRect();
-            const targetTop = offset.top;
-            const targetLeft = offset.left;
-            const width = TooltipService.getOuterWidth(this.container);
-            const height = TooltipService.getOuterHeight(this.container);
-            const viewport = TooltipService.getViewport();
-            return targetLeft + width > viewport.width || targetLeft < 0 || targetTop < 0 || targetTop + height > viewport.height;
+    /**
+     * A click-opened tooltip closes on scroll once the pointer is off its trigger; an unknown pointer counts as off.
+     * A scroll inside the panel never closes it. The trigger's box is measured, since browsers freeze `:hover` while scrolling.
+     */
+    listenForScrollDismissal() {
+        // Not `triggeredByClick()`: that `computed` reads the non-signal `externallyTriggerred` and can go stale.
+        if (this.apTooltipTrigger() !== 'click' && !this._externallyTriggerred) {
+            return;
         }
-        else {
+        const pane = this.overlay.overlayRef?.overlayElement;
+        this.pointer = this.clickPoint;
+        this.clickPoint = null;
+        const onPointer = (event) => {
+            this.pointer = { x: event.clientX, y: event.clientY };
+        };
+        const onScroll = (event) => {
+            const target = event.target;
+            if (pane && target instanceof Node && pane.contains(target)) {
+                return;
+            }
+            if (!this.isPointerOnTrigger()) {
+                this.zone.run(() => this.remove());
+            }
+        };
+        this.zone.runOutsideAngular(() => {
+            document.addEventListener('pointermove', onPointer, { capture: true, passive: true });
+            document.addEventListener('pointerdown', onPointer, { capture: true, passive: true });
+            document.addEventListener('scroll', onScroll, { capture: true, passive: true });
+        });
+        this.stopScrollDismissal = () => {
+            document.removeEventListener('pointermove', onPointer, { capture: true });
+            document.removeEventListener('pointerdown', onPointer, { capture: true });
+            document.removeEventListener('scroll', onScroll, { capture: true });
+            this.stopScrollDismissal = null;
+            this.pointer = null;
+        };
+    }
+    isPointerOnTrigger() {
+        const pointer = this.pointer;
+        if (!pointer) {
             return false;
         }
+        return [this.nativeElement, ...this.externalTriggers].some(element => {
+            const box = element.getBoundingClientRect();
+            return pointer.x >= box.left && pointer.x <= box.right && pointer.y >= box.top && pointer.y <= box.bottom;
+        });
     }
-    remove() {
-        if (this.container && this.container.parentElement) {
-            document.body.removeChild(this.container);
+    /** Pane classes: each of the three surfaces gives panel and tip a different shadow. */
+    paneClasses(isTemplate) {
+        if (!this.isDefaultTooltipType()) {
+            return ['ap-tooltip-pane', 'predefined'];
         }
-        this.clearTimeouts();
-        this._externallyTriggerred = false;
-        this.container = undefined;
+        return isTemplate ? ['ap-tooltip-pane', 'custom-template'] : ['ap-tooltip-pane'];
     }
     clearShowTimeout() {
         if (this.showTimeout) {
@@ -609,47 +470,6 @@ class TooltipDirective {
         this.clearShowTimeout();
         this.clearHideTimeout();
     }
-    updateText() {
-        const apTooltip = this.apTooltip();
-        if (apTooltip instanceof TemplateRef) {
-            const embeddedViewRef = this.viewContainerRef.createEmbeddedView(apTooltip);
-            embeddedViewRef.context = this.apTooltipTemplateContext();
-            embeddedViewRef.detectChanges();
-            embeddedViewRef.rootNodes.forEach(node => this.tooltipText?.appendChild(node));
-        }
-        else if (this.tooltipText) {
-            this.tooltipText.innerHTML = apTooltip ? DOMPurify.sanitize(apTooltip) : '';
-        }
-    }
-    setCssVariables() {
-        if (this.container) {
-            this.container.style.setProperty('--ap-tooltip-height', this.container.offsetHeight + 'px');
-        }
-    }
-    removePreviousAlignHtmlClasses() {
-        if (this.container) {
-            this.container.classList.remove('ap-tooltip-top', 'ap-tooltip-top-left', 'ap-tooltip-top-right', 'ap-tooltip-bottom', 'ap-tooltip-bottom-left', 'ap-tooltip-bottom-right', 'ap-tooltip-left', 'ap-tooltip-right');
-        }
-    }
-    addDocumentClickListener() {
-        if (this.documentClickListener)
-            return;
-        this.zone.runOutsideAngular(() => {
-            this.documentClickListener = (event) => {
-                const target = event.target;
-                if (this.container && !this.container.contains(target) && !this.nativeElement.contains(target)) {
-                    this.deactivate();
-                }
-            };
-            document.addEventListener('click', this.documentClickListener);
-        });
-    }
-    removeDocumentClickListener() {
-        if (!this.documentClickListener)
-            return;
-        document.removeEventListener('click', this.documentClickListener);
-        this.documentClickListener = undefined;
-    }
     get externallyTriggerred() {
         return this._externallyTriggerred;
     }
@@ -657,16 +477,16 @@ class TooltipDirective {
         this._externallyTriggerred = value;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: TooltipDirective, isStandalone: true, selector: "[apTooltip]", inputs: { apTooltip: { classPropertyName: "apTooltip", publicName: "apTooltip", isSignal: true, isRequired: true, transformFunction: null }, apTooltipPosition: { classPropertyName: "apTooltipPosition", publicName: "apTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, apTooltipShowDelay: { classPropertyName: "apTooltipShowDelay", publicName: "apTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, apTooltipHideDelay: { classPropertyName: "apTooltipHideDelay", publicName: "apTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, apTooltipDuration: { classPropertyName: "apTooltipDuration", publicName: "apTooltipDuration", isSignal: true, isRequired: false, transformFunction: null }, apTooltipDisabled: { classPropertyName: "apTooltipDisabled", publicName: "apTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, apTooltipTruncatedTextOnly: { classPropertyName: "apTooltipTruncatedTextOnly", publicName: "apTooltipTruncatedTextOnly", isSignal: true, isRequired: false, transformFunction: null }, apTooltipTemplateContext: { classPropertyName: "apTooltipTemplateContext", publicName: "apTooltipTemplateContext", isSignal: true, isRequired: false, transformFunction: null }, apTooltipVirtualScrollElement: { classPropertyName: "apTooltipVirtualScrollElement", publicName: "apTooltipVirtualScrollElement", isSignal: true, isRequired: false, transformFunction: null }, apTooltipTrigger: { classPropertyName: "apTooltipTrigger", publicName: "apTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, apTooltipType: { classPropertyName: "apTooltipType", publicName: "apTooltipType", isSignal: true, isRequired: false, transformFunction: null }, apTooltipPresentationContext: { classPropertyName: "apTooltipPresentationContext", publicName: "apTooltipPresentationContext", isSignal: true, isRequired: false, transformFunction: null }, apTooltipListItems: { classPropertyName: "apTooltipListItems", publicName: "apTooltipListItems", isSignal: true, isRequired: false, transformFunction: null }, apTooltipShowAvatarCaption: { classPropertyName: "apTooltipShowAvatarCaption", publicName: "apTooltipShowAvatarCaption", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["apTooltip"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: TooltipDirective, isStandalone: true, selector: "[apTooltip]", inputs: { apTooltip: { classPropertyName: "apTooltip", publicName: "apTooltip", isSignal: true, isRequired: true, transformFunction: null }, apTooltipPosition: { classPropertyName: "apTooltipPosition", publicName: "apTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, apTooltipShowDelay: { classPropertyName: "apTooltipShowDelay", publicName: "apTooltipShowDelay", isSignal: true, isRequired: false, transformFunction: null }, apTooltipHideDelay: { classPropertyName: "apTooltipHideDelay", publicName: "apTooltipHideDelay", isSignal: true, isRequired: false, transformFunction: null }, apTooltipDuration: { classPropertyName: "apTooltipDuration", publicName: "apTooltipDuration", isSignal: true, isRequired: false, transformFunction: null }, apTooltipDisabled: { classPropertyName: "apTooltipDisabled", publicName: "apTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, apTooltipTruncatedTextOnly: { classPropertyName: "apTooltipTruncatedTextOnly", publicName: "apTooltipTruncatedTextOnly", isSignal: true, isRequired: false, transformFunction: null }, apTooltipTemplateContext: { classPropertyName: "apTooltipTemplateContext", publicName: "apTooltipTemplateContext", isSignal: true, isRequired: false, transformFunction: null }, apTooltipVirtualScrollElement: { classPropertyName: "apTooltipVirtualScrollElement", publicName: "apTooltipVirtualScrollElement", isSignal: true, isRequired: false, transformFunction: null }, apTooltipTrigger: { classPropertyName: "apTooltipTrigger", publicName: "apTooltipTrigger", isSignal: true, isRequired: false, transformFunction: null }, apTooltipArrow: { classPropertyName: "apTooltipArrow", publicName: "apTooltipArrow", isSignal: true, isRequired: false, transformFunction: null }, apTooltipType: { classPropertyName: "apTooltipType", publicName: "apTooltipType", isSignal: true, isRequired: false, transformFunction: null }, apTooltipPresentationContext: { classPropertyName: "apTooltipPresentationContext", publicName: "apTooltipPresentationContext", isSignal: true, isRequired: false, transformFunction: null }, apTooltipListItems: { classPropertyName: "apTooltipListItems", publicName: "apTooltipListItems", isSignal: true, isRequired: false, transformFunction: null }, apTooltipShowAvatarCaption: { classPropertyName: "apTooltipShowAvatarCaption", publicName: "apTooltipShowAvatarCaption", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["apTooltip"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[apTooltip]', standalone: true, exportAs: 'apTooltip' }]
-        }], propDecorators: { apTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltip", required: true }] }], apTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipPosition", required: false }] }], apTooltipShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipShowDelay", required: false }] }], apTooltipHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipHideDelay", required: false }] }], apTooltipDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipDuration", required: false }] }], apTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipDisabled", required: false }] }], apTooltipTruncatedTextOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipTruncatedTextOnly", required: false }] }], apTooltipTemplateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipTemplateContext", required: false }] }], apTooltipVirtualScrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipVirtualScrollElement", required: false }] }], apTooltipTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipTrigger", required: false }] }], apTooltipType: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipType", required: false }] }], apTooltipPresentationContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipPresentationContext", required: false }] }], apTooltipListItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipListItems", required: false }] }], apTooltipShowAvatarCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipShowAvatarCaption", required: false }] }] } });
+        }], propDecorators: { apTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltip", required: true }] }], apTooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipPosition", required: false }] }], apTooltipShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipShowDelay", required: false }] }], apTooltipHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipHideDelay", required: false }] }], apTooltipDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipDuration", required: false }] }], apTooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipDisabled", required: false }] }], apTooltipTruncatedTextOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipTruncatedTextOnly", required: false }] }], apTooltipTemplateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipTemplateContext", required: false }] }], apTooltipVirtualScrollElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipVirtualScrollElement", required: false }] }], apTooltipTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipTrigger", required: false }] }], apTooltipArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipArrow", required: false }] }], apTooltipType: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipType", required: false }] }], apTooltipPresentationContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipPresentationContext", required: false }] }], apTooltipListItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipListItems", required: false }] }], apTooltipShowAvatarCaption: [{ type: i0.Input, args: [{ isSignal: true, alias: "apTooltipShowAvatarCaption", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CustomTooltipType, TooltipDirective, TooltipExternalTriggerDirective };
+export { CustomTooltipType, TooltipDirective, TooltipExternalTriggerDirective, TooltipPanelComponent };
 //# sourceMappingURL=agorapulse-ui-components-tooltip.mjs.map