ngwr 14.7.0 → 14.9.0

package/fesm2022/ngwr-popover.mjs

@@ -1,15 +1,577 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { ViewportRuler } from '@angular/cdk/scrolling';
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, PLATFORM_ID, Service, input, ViewEncapsulation, Component, output, ElementRef, ViewContainerRef, Injector, signal, computed, effect, afterNextRender, Directive } from '@angular/core';
+import { input, ViewEncapsulation, Component, inject, ElementRef, Injector, signal, computed, untracked, afterRenderEffect, DestroyRef, PLATFORM_ID, Service, output, ViewContainerRef, effect, afterNextRender, Directive } from '@angular/core';
+import { WR_OVERLAY, wrFollowDirection, WrOutsideClick, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet, wrMirrorOffsets } from 'ngwr/overlay';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { useI18nText } from 'ngwr/i18n';
-import { WR_OVERLAY, WrOutsideClick, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet, wrMirrorOffsets, wrFollowDirection } from 'ngwr/overlay';
 import { KEYS, numAttr } from 'ngwr/utils';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * The chip a chart's hover tooltip renders into. Not part of the template API —
+ * `useChartTooltip()` attaches it.
+ *
+ * It wears `.wr-tooltip` as well as its own class, so it IS the library's
+ * tooltip: the same surface, border, radius, type and arrow as
+ * `[wrPopover] mode="tooltip"`, and an app that retints `--wr-tooltip-bg`
+ * retints this one with the rest. Only the inside is its own — a swatch, a
+ * label and a value, laid out rather than joined into one string, so no
+ * separator has to be translated.
+ *
+ * @internal
+ */
+class WrChartTooltipPanel {
+    datum = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "datum" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrChartTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: WrChartTooltipPanel, isStandalone: true, selector: "wr-chart-tooltip", inputs: { datum: { classPropertyName: "datum", publicName: "datum", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wr-tooltip wr-chart-tooltip" }, ngImport: i0, template: "@let d = datum();\n@if (d.color) {\n  <span class=\"wr-chart-tooltip__swatch\" [style.background]=\"d.color\"></span>\n}\n@if (d.label) {\n  <span class=\"wr-chart-tooltip__label\">{{ d.label }}</span>\n}\n<span class=\"wr-chart-tooltip__value\">{{ d.value }}</span>\n", encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrChartTooltipPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-chart-tooltip', encapsulation: ViewEncapsulation.None, host: { class: 'wr-tooltip wr-chart-tooltip' }, template: "@let d = datum();\n@if (d.color) {\n  <span class=\"wr-chart-tooltip__swatch\" [style.background]=\"d.color\"></span>\n}\n@if (d.label) {\n  <span class=\"wr-chart-tooltip__label\">{{ d.label }}</span>\n}\n<span class=\"wr-chart-tooltip__value\">{{ d.value }}</span>\n" }]
+        }], propDecorators: { datum: [{ type: i0.Input, args: [{ isSignal: true, alias: "datum", required: true }] }] } });
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * How long the tooltip outlives the pointer leaving a section, or reporting another
+ * one on its way to the chip, in ms.
+ *
+ * Long enough to cross the 8px gap onto the chip, which is what keeps it hoverable,
+ * and to pass through the gutter between two bars or two heatmap days without a
+ * flash. The same order as `[wrPopover]`'s `hideDelay`.
+ */
+const GRACE = 100;
+/**
+ * How close the arrow's middle may come to the end of the chip's edge, in px from the
+ * padding box: the chip's inner corner radius (5px) plus half the rotated square's
+ * diagonal (4.24px), rounded up. An anchor further out than that — a chip pushed flush
+ * against the viewport by a section on its very edge — keeps the arrow on the straight
+ * part of the chip rather than off its corner.
+ */
+const ARROW_INSET = 10;
+/**
+ * How far back past its anchor a chip that runs AWAY from the anchor starts: far enough
+ * for the arrow to sit on the anchor without meeting `ARROW_INSET`.
+ */
+const REACH_BACK = ARROW_INSET + 4;
+const ABOVE = {
+    originX: 'center',
+    originY: 'top',
+    overlayX: 'center',
+    overlayY: 'bottom',
+    offsetY: -8,
+    arrow: 'bottom',
+};
+const BELOW = {
+    originX: 'center',
+    originY: 'bottom',
+    overlayX: 'center',
+    overlayY: 'top',
+    offsetY: 8,
+    arrow: 'top',
+};
+/**
+ * Every placement a side may take, best first.
+ *
+ * `top` and `bottom` flip to each other, the way every tooltip does. A side placement
+ * never flips to the far side: its anchor is a point on a donut's outer arc, and the far
+ * side of that point is the donut. Where there is no room beside the anchor — a 200px
+ * ring on a phone leaves about 85px either side — the chip goes above it, then below,
+ * running AWAY from the ring with the anchor just inside its near end. Measured in
+ * Chromium at 375px, a chip centred on the nine o'clock point lay 40px deep over the
+ * ring, and one running away from it 13px. Centred above and below come last, and when
+ * nothing fits `withPush` slides the best of them into view.
+ */
+const FALLBACKS = {
+    top: [ABOVE, BELOW],
+    bottom: [BELOW, ABOVE],
+    right: [
+        { originX: 'right', originY: 'center', overlayX: 'left', overlayY: 'center', offsetX: 8, arrow: 'left' },
+        { ...ABOVE, overlayX: 'left', offsetX: -REACH_BACK },
+        { ...BELOW, overlayX: 'left', offsetX: -REACH_BACK },
+        ABOVE,
+        BELOW,
+    ],
+    left: [
+        { originX: 'left', originY: 'center', overlayX: 'right', overlayY: 'center', offsetX: -8, arrow: 'right' },
+        { ...ABOVE, overlayX: 'right', offsetX: REACH_BACK },
+        { ...BELOW, overlayX: 'right', offsetX: REACH_BACK },
+        ABOVE,
+        BELOW,
+    ],
+};
+/**
+ * The position list for a side, in the logical vocabulary the CDK and the arrow
+ * stylesheet speak.
+ *
+ * A chart's geometry does not mirror — an SVG arc at three o'clock is on the right in
+ * both directions — so the list is written physically and translated here. The CDK
+ * resolves `start` / `end` against the overlay's direction, and applies `offsetX` as a
+ * physical translate, so under RTL the edges swap and the offsets stay as they are. The
+ * pane class names the edge the arrow hangs off in the stylesheet's terms: its side
+ * placements hang the arrow off an INLINE edge, so the chip's physical left edge is
+ * `--right` in LTR and `--left` in RTL. Along that edge the arrow is placed by
+ * measurement, so a chip that runs away from its anchor needs no class of its own.
+ */
+function chartTooltipPositions(side, rtl) {
+    const x = (edge) => edge === 'center' ? 'center' : (edge === 'left') !== rtl ? 'start' : 'end';
+    const arrowClass = {
+        top: 'bottom',
+        bottom: 'top',
+        left: rtl ? 'left' : 'right',
+        right: rtl ? 'right' : 'left',
+    };
+    return FALLBACKS[side].map(place => ({
+        originX: x(place.originX),
+        originY: place.originY,
+        overlayX: x(place.overlayX),
+        overlayY: place.overlayY,
+        offsetX: place.offsetX,
+        offsetY: place.offsetY,
+        panelClass: `wr-tooltip-overlay--${arrowClass[place.arrow]}`,
+    }));
+}
+/** Where an anchor is right now, in viewport pixels. */
+function boxOf(anchor) {
+    if (anchor instanceof Element)
+        return anchor.getBoundingClientRect();
+    const width = anchor.width ?? 0;
+    const height = anchor.height ?? 0;
+    return { left: anchor.x, top: anchor.y, right: anchor.x + width, bottom: anchor.y + height };
+}
+/**
+ * A hover tooltip for a chart's sections, with ONE overlay per chart.
+ *
+ * **Why not `[wrPopover] mode="tooltip"` on every section.** It fits the look
+ * and not the shape. A year of `wr-calendar-heatmap` is 371 days, and a directive
+ * per day is 371 focus monitors and 371 overlays-in-waiting for a tooltip only
+ * one of them can show; and most sections are not an element a directive could
+ * point at — a donut's slice is a `<path>` whose box is most of the ring, a
+ * sparkline's point is a coordinate. So the chart says which section is under
+ * the pointer and where to point, and this owns the single overlay, the timers
+ * and the teardown. What IS shared with the directive is everything a reader
+ * sees: the `.wr-tooltip` chip, its arrow, the placements with their flip, and
+ * Escape.
+ *
+ * **The chip points AT the section it describes**, with its arrow on the anchor:
+ * above a heatmap's day, above a bar's top edge, off the outside of a donut's arc.
+ * The arrow is placed from a measurement rather than centred, because the chip is
+ * not always centred on its anchor — `withPush` slides it along the viewport edge
+ * for the first and last week of a year — and an arrow at the chip's middle would
+ * then point at a neighbour. The measurement is written to
+ * `--wr-chart-tooltip-arrow` on the chip, and the stylesheet puts the arrow there.
+ *
+ * **A chip at its section sits over the sections beside it**, and it is hoverable
+ * (below), so the way onto it can cross another section: straight up from a heatmap
+ * day runs through the day above. Switching the moment that day reported itself
+ * would move the chip away from a pointer on its way to it — WCAG 1.4.13 with extra
+ * steps. So the strip between the anchor and the chip is a bridge: another section
+ * reported from inside it waits out the same grace a leave does, a pointer still
+ * closing in on the chip starts that grace again however slowly it moves, and
+ * landing on the chip cancels the switch. Anywhere else a new section switches at
+ * once, so scanning a row of days does not lag. The cost is in the other direction: a
+ * pointer that keeps on going up a heatmap's column is moving onto the chip, so it
+ * passes over it and the days under it read out only once it comes out the far side.
+ *
+ * **Why an overlay and not a positioned child, the way `wr-line-chart` draws its
+ * own.** A child is clipped by every `overflow` between it and the page, and a
+ * chart sits inside those constantly: `wr-calendar-heatmap` IS a scroll
+ * container, and a sparkline in a `wr-table` cell sits under two more.
+ *
+ * **Pointer only, deliberately.** No section of any chart is a tab stop, and
+ * this does not make one — a year of days in the tab order would be the defect.
+ * The pane is `aria-hidden`: every value it shows is already the section's
+ * accessible name or the chart's own, and an orphan tooltip nothing describes
+ * reads as a stray line at the end of the document. It is never the only way to
+ * a value.
+ *
+ * SSR-safe: nothing here touches the DOM until a pointer event has moved a
+ * section, and the render effect that opens the overlay never runs on a server.
+ *
+ * Call from an injection context — a chart's field initialiser.
+ *
+ * @param enabled The chart's `tooltip` input. Turning it off closes an open tooltip.
+ * @param resolve What to show for section `index`, and where. It runs after
+ *   render, so it may read the DOM the section just drew; the signals it reads
+ *   are tracked, so a data change under an open tooltip re-reads it, and a
+ *   section that no longer exists (`null`) closes it. It runs again whenever the
+ *   chart may have moved under an open chip — a scroll anywhere, a viewport
+ *   resize, the chart or its anchor element changing size.
+ * @param sectionAt For a chart whose sections are chosen by POSITION rather than by
+ *   element — a sparkline picks the point nearest the pointer's x, anywhere over the
+ *   drawing — the section at a viewport point, or `null` off the drawing. The chip
+ *   points at the point from inside the drawing, so without this a pointer scrubbing
+ *   above the line lands on the chip and the chart stops hearing it: measured in
+ *   Chromium, a scrub along the top of a sparkline showed 9 of its 12 values. Asked on
+ *   every pointer event while a chip is up, wherever the pointer is over the chart or its
+ *   own chip; straight up from a point onto its chip stays on that point, so the chip is
+ *   still hoverable. Anywhere else the chip closes after the usual grace.
+ *
+ * @internal
+ */
+function useChartTooltip(enabled, resolve, sectionAt) {
+    const overlay = inject(WR_OVERLAY);
+    const doc = inject(DOCUMENT);
+    const dir = inject(Directionality, { optional: true });
+    const viewport = inject(ViewportRuler);
+    const host = inject(ElementRef).nativeElement;
+    const injector = inject(Injector);
+    const hovered = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hovered" }] : /* istanbul ignore next */ []));
+    const active = computed(() => (enabled() ? hovered() : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+    /**
+     * The section Escape dismissed. It stays shut for as long as the pointer stays
+     * on that section — WCAG 1.4.13 asks for dismissal WITHOUT moving the pointer,
+     * and a sparkline re-reports its section on every `mousemove`, so a plain
+     * close would reopen on the next pixel.
+     */
+    let dismissed = null;
+    let overlayRef = null;
+    let strategy = null;
+    let panel = null;
+    let side = 'top';
+    let anchor = null;
+    let resized = null;
+    let observer = null;
+    let observed = null;
+    /** Where the pointer last was, while a chip is up. `null` until it moves. */
+    let pointer = null;
+    /**
+     * What the grace period settles on when it runs out: another section, `null` for
+     * none, or `undefined` for nothing pending — the chip stays as it is.
+     */
+    let pending;
+    let graceTimer = null;
+    /** The pointer's distance from the chip when the grace last (re)started. */
+    let approach = Number.POSITIVE_INFINITY;
+    const chipBox = () => {
+        const box = overlayRef?.overlayElement.getBoundingClientRect();
+        // Nothing laid out (a unit test, a pane not attached yet) is no chip to reach.
+        return box && box.width > 0 && box.height > 0 ? box : null;
+    };
+    /**
+     * Whether the pointer is in the strip between the anchor and the chip — as wide
+     * as the chip along the edge it hangs off, so a diagonal approach counts too.
+     */
+    const inBridge = () => {
+        const chip = chipBox();
+        if (!pointer || !chip || !anchor)
+            return false;
+        const at = boxOf(anchor);
+        const { x, y } = pointer;
+        const across = x >= chip.left && x <= chip.right;
+        const along = y >= chip.top && y <= chip.bottom;
+        if (chip.bottom <= at.top)
+            return across && y >= chip.bottom && y <= at.top;
+        if (chip.top >= at.bottom)
+            return across && y >= at.bottom && y <= chip.top;
+        if (chip.right <= at.left)
+            return along && x >= chip.right && x <= at.left;
+        if (chip.left >= at.right)
+            return along && x >= at.right && x <= chip.left;
+        return false;
+    };
+    const distanceToChip = () => {
+        const chip = chipBox();
+        if (!pointer || !chip)
+            return Number.POSITIVE_INFINITY;
+        const dx = Math.max(chip.left - pointer.x, 0, pointer.x - chip.right);
+        const dy = Math.max(chip.top - pointer.y, 0, pointer.y - chip.bottom);
+        return Math.hypot(dx, dy);
+    };
+    const cancelGrace = () => {
+        pending = undefined;
+        if (graceTimer === null)
+            return;
+        clearTimeout(graceTimer);
+        graceTimer = null;
+    };
+    const settle = () => {
+        const next = pending;
+        cancelGrace();
+        if (next !== undefined)
+            hovered.set(next);
+    };
+    const restartGrace = () => {
+        if (graceTimer !== null)
+            clearTimeout(graceTimer);
+        graceTimer = setTimeout(settle, GRACE);
+    };
+    // An armed grace is left to run rather than restarted: a grid reports the gap
+    // between two squares on every `mousemove`, and restarting would keep a tooltip
+    // up for as long as the pointer kept moving through it. Only closing in on the
+    // chip restarts it — see `track`.
+    const defer = (next) => {
+        pending = next;
+        if (graceTimer !== null)
+            return;
+        approach = distanceToChip();
+        restartGrace();
+    };
+    const enter = (index) => {
+        if (!enabled())
+            return;
+        if (index === dismissed) {
+            cancelGrace();
+            return;
+        }
+        dismissed = null;
+        const showing = hovered();
+        if (index === showing) {
+            cancelGrace();
+            return;
+        }
+        if (showing !== null && inBridge()) {
+            defer(index);
+            return;
+        }
+        cancelGrace();
+        hovered.set(index);
+    };
+    /**
+     * Put the arrow on the anchor, wherever the chip landed along it. Measured off the
+     * PANE, which is exactly the chip's box: the chip itself scales in from 96% and
+     * would read short for the length of its entry animation.
+     */
+    const aim = () => {
+        if (!overlayRef || !panel || !anchor)
+            return;
+        const pane = overlayRef.overlayElement;
+        const chip = panel.location.nativeElement;
+        const at = boxOf(anchor);
+        const box = pane.getBoundingClientRect();
+        const across = pane.classList.contains('wr-tooltip-overlay--top') || pane.classList.contains('wr-tooltip-overlay--bottom');
+        // The arrow is positioned inside the chip's padding box, so its border comes off.
+        const border = across ? chip.clientLeft : chip.clientTop;
+        const inner = (across ? box.width : box.height) - 2 * border;
+        if (inner <= 2 * ARROW_INSET)
+            return;
+        const target = across ? (at.left + at.right) / 2 - box.left : (at.top + at.bottom) / 2 - box.top;
+        const offset = Math.min(inner - ARROW_INSET, Math.max(ARROW_INSET, target - border));
+        chip.style.setProperty('--wr-chart-tooltip-arrow', `${Math.round(offset * 100) / 100}px`);
+    };
+    const place = () => {
+        if (!overlayRef || !strategy || !anchor)
+            return;
+        strategy.setOrigin(anchor);
+        overlayRef.updatePosition();
+        aim();
+    };
+    /** Watch whatever can move the anchor without a scroll or a viewport resize. */
+    const observe = () => {
+        const next = anchor instanceof Element ? anchor : null;
+        if (!observer || next === observed)
+            return;
+        if (observed)
+            observer.unobserve(observed);
+        observed = next;
+        if (next)
+            observer.observe(next);
+    };
+    /**
+     * Point the open chip at wherever its section is NOW. A box anchor is a set of
+     * viewport numbers, so it goes stale the moment anything scrolls, and the CDK's
+     * own reposition listens to the window and to registered `cdkScrollable`s only —
+     * not to `wr-calendar-heatmap`, which is a scroll container of its own, nor to a
+     * `wr-table` a sparkline sits in. One capture listener on the document hears
+     * every one of them; a viewport resize and a `ResizeObserver` on the chart cover
+     * the rest.
+     */
+    const reanchor = () => {
+        const index = untracked(active);
+        if (!overlayRef || index === null)
+            return;
+        const target = untracked(() => resolve(index));
+        if (!target?.anchor)
+            return;
+        anchor = target.anchor;
+        observe();
+        place();
+    };
+    /**
+     * The pointer, wherever it goes while a chip is up. Captured on the document, so it
+     * is current before any section's own `mouseenter` / `mousemove` handler runs.
+     */
+    const track = (event) => {
+        const { clientX: x, clientY: y } = event;
+        pointer = { x, y };
+        // A chart scrubbed by position hears the pointer wherever it is over the drawing,
+        // chip or not — see `sectionAt` — but only where what is under the pointer is the
+        // chart or its own chip. A box says nothing about what covers it: a chip from the
+        // chart beside it can lie over this drawing, and the drawing's edge is a fraction of
+        // a pixel wider than what hit-tests as it. A `mouseout` goes to the element left, so
+        // the one under the pointer is its `relatedTarget`.
+        const under = event.type === 'mouseout' ? event.relatedTarget : event.target;
+        const ours = under instanceof Node && (host.contains(under) || !!overlayRef?.overlayElement.contains(under));
+        const scrubbed = sectionAt && ours ? sectionAt(x, y) : null;
+        if (scrubbed !== null) {
+            enter(scrubbed);
+            return;
+        }
+        // On the chip: its own `mouseenter` cancels whatever is pending. Asked of the
+        // geometry rather than of the event, because the first event of that move is the
+        // section's `mouseout`, whose target is the section being left.
+        const chip = chipBox();
+        const onChip = chip !== null && x >= chip.left && x <= chip.right && y >= chip.top && y <= chip.bottom;
+        // Off the drawing of a chart scrubbed by position, nothing is hovered, whatever the
+        // drawing's own `mouseleave` did — it only fires once, and a chip can move over or
+        // off a resting pointer without any. Measured in Chromium before this: a pointer
+        // leaving a sparkline across its right edge re-entered the last point in the capture
+        // phase of the same move, cancelled the grace the leave was about to arm, and left
+        // the chip up for good beside the next chart's own.
+        if (sectionAt && !onChip && graceTimer === null)
+            defer(null);
+        if (graceTimer === null || onChip)
+            return;
+        if (inBridge()) {
+            const distance = distanceToChip();
+            if (distance < approach) {
+                approach = distance;
+                restartGrace();
+            }
+        }
+        else if (pending !== undefined && pending !== null) {
+            // Out of the bridge while a section waits: nothing is on its way to the chip.
+            settle();
+        }
+    };
+    const close = () => {
+        if (!overlayRef)
+            return;
+        doc.removeEventListener('scroll', reanchor, true);
+        for (const type of ['mousemove', 'mouseover', 'mouseout']) {
+            doc.removeEventListener(type, track, true);
+        }
+        resized?.unsubscribe();
+        observer?.disconnect();
+        // Disposing detaches the pane with its listeners and completes
+        // `keydownEvents()`, so nothing registered in `open()` outlives it.
+        overlayRef.dispose();
+        overlayRef = null;
+        strategy = null;
+        panel = null;
+        anchor = null;
+        resized = null;
+        observer = null;
+        observed = null;
+        pointer = null;
+    };
+    const open = (target) => {
+        const wanted = target.side ?? 'top';
+        anchor = target.anchor;
+        if (!overlayRef) {
+            side = wanted;
+            const direction = dir?.value ?? 'ltr';
+            // `withGrowAfterOpen`: past its first pass the CDK never gives the pane a box
+            // larger than the last one, and this pane is passed from section to section. A
+            // chip once pushed against the viewport edge — a donut's nine o'clock on a phone —
+            // left every later chip that box, so the next one overflowed its pane and the arrow,
+            // measured off the pane, pointed 9–13px wide of its slice. `wr-dropdown` hit the same.
+            strategy = overlay
+                .position()
+                .flexibleConnectedTo(anchor)
+                .withPositions(chartTooltipPositions(side, direction === 'rtl'))
+                .withPush(true)
+                .withGrowAfterOpen(true);
+            overlayRef = overlay.create({
+                positionStrategy: strategy,
+                // No scroll strategy: `reanchor` repositions, for every scroll container.
+                panelClass: 'wr-tooltip-overlay',
+                // The direction the list above was translated for — the CDK would otherwise
+                // take the document's, and a chart under a `[dir]` would open on the wrong side.
+                direction,
+            });
+            doc.addEventListener('scroll', reanchor, { capture: true, passive: true });
+            for (const type of ['mousemove', 'mouseover', 'mouseout']) {
+                doc.addEventListener(type, track, { capture: true, passive: true });
+            }
+            // After the CDK's own subscription, which re-applies against the stale anchor.
+            resized = viewport.change().subscribe(reanchor);
+            if (typeof ResizeObserver !== 'undefined') {
+                observer = new ResizeObserver(reanchor);
+                observer.observe(host);
+            }
+            // The chip lands on the same PHYSICAL side in both directions, so the list is
+            // translated again rather than the side changed, and the arrow's measurement holds.
+            wrFollowDirection(overlayRef, dir, injector, direction => strategy?.withPositions(chartTooltipPositions(side, direction === 'rtl')));
+            const pane = overlayRef.overlayElement;
+            pane.setAttribute('aria-hidden', 'true');
+            // Hoverable: the pointer may move onto the chip without losing it, and a switch
+            // or a hide it was racing is off. Leaving it starts the same grace a section
+            // does; landing back on a section decides through `enter()`.
+            pane.addEventListener('mouseenter', cancelGrace);
+            pane.addEventListener('mouseleave', () => defer(null));
+            // Escape reaches the topmost overlay wherever focus is — the CDK's keyboard
+            // dispatcher routes it — which is what makes a tooltip nothing can focus
+            // dismissible at all.
+            overlayRef.keydownEvents().subscribe(event => {
+                if (event.key !== 'Escape')
+                    return;
+                dismissed = hovered();
+                cancelGrace();
+                hovered.set(null);
+            });
+            panel = overlayRef.attach(new ComponentPortal(WrChartTooltipPanel, null, injector));
+        }
+        else if (wanted !== side) {
+            side = wanted;
+            strategy?.withPositions(chartTooltipPositions(side, overlayRef.getDirection() === 'rtl'));
+        }
+        observe();
+        panel?.setInput('datum', target.datum);
+        // Rendered NOW rather than on the next pass: the position is centred on the
+        // anchor, so it has to be measured against the text it is about to show, not
+        // the previous section's.
+        panel?.changeDetectorRef.detectChanges();
+        place();
+    };
+    afterRenderEffect(() => {
+        const index = active();
+        const target = index === null ? null : resolve(index);
+        // Untracked: the overlay's own construction reads signals (the direction
+        // follower creates an effect), and none of them should re-run this.
+        untracked(() => {
+            if (target?.anchor)
+                open({ ...target, anchor: target.anchor });
+            else
+                close();
+        });
+    });
+    inject(DestroyRef).onDestroy(() => {
+        cancelGrace();
+        close();
+    });
+    return {
+        active,
+        enter,
+        leave(event) {
+            dismissed = null;
+            // Straight onto the chip: its own `mouseenter` would cancel the grace a
+            // moment later anyway, and not arming it is what removes the race.
+            const to = event?.relatedTarget;
+            if (to instanceof Node && overlayRef?.overlayElement.contains(to))
+                return;
+            defer(null);
+        },
+    };
+}
 
 /**
  * @license
@@ -170,10 +732,10 @@ class WrCurrentKeystroke {
             this.doc.removeEventListener('keydown', record, { capture: true });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrCurrentKeystroke, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.6", ngImport: i0, type: WrCurrentKeystroke });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrCurrentKeystroke, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.7", ngImport: i0, type: WrCurrentKeystroke });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrCurrentKeystroke, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrCurrentKeystroke, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 
@@ -193,10 +755,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 class WrPopoverTextPanel {
     text = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrPopoverTextPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: WrPopoverTextPanel, isStandalone: true, selector: "wr-popover-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wr-tooltip" }, ngImport: i0, template: '{{ text() }}', isInline: true, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrPopoverTextPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: WrPopoverTextPanel, isStandalone: true, selector: "wr-popover-text", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wr-tooltip" }, ngImport: i0, template: '{{ text() }}', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrPopoverTextPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrPopoverTextPanel, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-popover-text',
@@ -741,10 +1303,10 @@ class WrPopover {
     isRtl() {
         return this.dir?.value === 'rtl';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: WrPopover, isStandalone: true, selector: "[wrPopover]", inputs: { content: { classPropertyName: "content", publicName: "wrPopover", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave($event)", "keydown.escape": "onEscape()" }, properties: { "attr.aria-haspopup": "isTooltip() ? null : \"dialog\"", "attr.aria-expanded": "isTooltip() ? null : isOpen()", "attr.aria-controls": "!isTooltip() && isOpen() ? panelId : null", "attr.aria-describedby": "isTooltip() && isOpen() ? panelId : null" }, classAttribute: "wr-popover-trigger" }, exportAs: ["wrPopover"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrPopover, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: WrPopover, isStandalone: true, selector: "[wrPopover]", inputs: { content: { classPropertyName: "content", publicName: "wrPopover", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, host: { listeners: { "click": "onClick($event)", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave($event)", "keydown.escape": "onEscape()" }, properties: { "attr.aria-haspopup": "isTooltip() ? null : \"dialog\"", "attr.aria-expanded": "isTooltip() ? null : isOpen()", "attr.aria-controls": "!isTooltip() && isOpen() ? panelId : null", "attr.aria-describedby": "isTooltip() && isOpen() ? panelId : null" }, classAttribute: "wr-popover-trigger" }, exportAs: ["wrPopover"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: WrPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: WrPopover, decorators: [{
             type: Directive,
             args: [{
                     selector: '[wrPopover]',
@@ -775,5 +1337,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { WrPopover };
+export { WrPopover, useChartTooltip };
 //# sourceMappingURL=ngwr-popover.mjs.map