@joanroucoux/cairn-ui 0.8.1 → 0.9.0

package/fesm2022/joanroucoux-cairn-ui-line-chart.mjs

@@ -1,553 +1,718 @@
-import * as i0 from '@angular/core';
-import { signal, inject, DestroyRef, input, booleanAttribute, ElementRef, viewChild, computed, afterNextRender, effect, untracked, Component } from '@angular/core';
-import { injectReducedMotion } from '@joanroucoux/cairn-ui/motion';
-import { scaleLinear } from 'd3-scale';
-import { curveMonotoneX, line } from 'd3-shape';
-
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, ElementRef, afterNextRender, booleanAttribute, computed, effect, inject, input, signal, untracked, viewChild } from "@angular/core";
+import { injectReducedMotion } from "@joanroucoux/cairn-ui/motion";
+import { scaleLinear } from "d3-scale";
+import { curveMonotoneX, line } from "d3-shape";
 const axisTicks = (points, maxTicks = 5) => {
-    if (points.length <= maxTicks) {
-        return [...points];
-    }
-    const count = Math.max(3, Math.min(maxTicks, points.length));
-    const step = (points.length - 1) / (count - 1);
-    const indexes = new Set();
-    for (let tick = 0; tick < count; tick++) {
-        indexes.add(Math.round(tick * step));
-    }
-    return [...indexes].sort((a, b) => a - b).map((index) => points[index]);
+	if (points.length <= maxTicks) return [...points];
+	const count = Math.max(3, Math.min(maxTicks, points.length));
+	const step = (points.length - 1) / (count - 1);
+	const indexes = /* @__PURE__ */ new Set();
+	for (let tick = 0; tick < count; tick++) indexes.add(Math.round(tick * step));
+	return [...indexes].sort((a, b) => a - b).map((index) => points[index]);
 };
 const isCoreTick = (index, count) => {
-    if (count <= 3) {
-        return true;
-    }
-    const middle = Math.floor((count - 1) / 2);
-    return index === 0 || index === count - 1 || index === middle;
+	if (count <= 3) return true;
+	const middle = Math.floor((count - 1) / 2);
+	return index === 0 || index === count - 1 || index === middle;
 };
 const firstOfEachRun = (labels, included) => {
-    let previous = null;
-    return labels.map((text, index) => {
-        if (!included(index)) {
-            return false;
-        }
-        const distinct = text !== previous;
-        previous = text;
-        return distinct;
-    });
+	let previous = null;
+	return labels.map((text, index) => {
+		if (!included(index)) return false;
+		const distinct = text !== previous;
+		previous = text;
+		return distinct;
+	});
 };
 const tickLabels = (ticks, format, mode) => {
-    const labels = ticks.map((tick) => format(tick.t));
-    const count = labels.length;
-    const core = (index) => isCoreTick(index, count);
-    const everyTick = firstOfEachRun(labels, () => true);
-    const coreTicks = firstOfEachRun(labels, core);
-    return labels.map((text, index) => {
-        const wide = mode === 3 ? coreTicks[index] : everyTick[index];
-        const narrow = coreTicks[index];
-        if (!wide && !narrow) {
-            return null;
-        }
-        const classes = mode === 'auto' ? `${narrow ? '' : 'max-sm:hidden'} ${wide ? '' : 'sm:hidden'}`.trim() : wide ? '' : 'hidden';
-        return { text, classes };
-    });
+	const labels = ticks.map((tick) => format(tick.t));
+	const count = labels.length;
+	const core = (index) => isCoreTick(index, count);
+	const everyTick = firstOfEachRun(labels, () => true);
+	const coreTicks = firstOfEachRun(labels, core);
+	return labels.map((text, index) => {
+		const wide = mode === 3 ? coreTicks[index] : everyTick[index];
+		const narrow = coreTicks[index];
+		if (!wide && !narrow) return null;
+		return {
+			text,
+			classes: mode === "auto" ? `${narrow ? "" : "max-sm:hidden"} ${wide ? "" : "sm:hidden"}`.trim() : wide ? "" : "hidden"
+		};
+	});
 };
-
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const nearestPointIndex = (points, x) => {
-    let nearest = 0;
-    let nearestDistance = Infinity;
-    points.forEach((point, index) => {
-        const distance = Math.abs(point.x - x);
-        if (distance < nearestDistance) {
-            nearestDistance = distance;
-            nearest = index;
-        }
-    });
-    return nearest;
+	let nearest = 0;
+	let nearestDistance = Infinity;
+	points.forEach((point, index) => {
+		const distance = Math.abs(point.x - x);
+		if (distance < nearestDistance) {
+			nearestDistance = distance;
+			nearest = index;
+		}
+	});
+	return nearest;
 };
 const navigateIndex = (key, current, last) => {
-    switch (key) {
-        case 'ArrowRight':
-            return { index: clamp((current ?? -1) + 1, 0, last), preventDefault: true };
-        case 'ArrowLeft':
-            return { index: clamp((current ?? last + 1) - 1, 0, last), preventDefault: true };
-        case 'Home':
-            return { index: 0, preventDefault: true };
-        case 'End':
-            return { index: last, preventDefault: true };
-        case 'Escape':
-            return { index: null, preventDefault: false };
-        default:
-            return null;
-    }
+	switch (key) {
+		case "ArrowRight": return {
+			index: clamp((current ?? -1) + 1, 0, last),
+			preventDefault: true
+		};
+		case "ArrowLeft": return {
+			index: clamp((current ?? last + 1) - 1, 0, last),
+			preventDefault: true
+		};
+		case "Home": return {
+			index: 0,
+			preventDefault: true
+		};
+		case "End": return {
+			index: last,
+			preventDefault: true
+		};
+		case "Escape": return {
+			index: null,
+			preventDefault: false
+		};
+		default: return null;
+	}
 };
-
-const START_LABEL_HEIGHT = 16;
 const AXIS_ROW = 17;
-const TOOLTIP_SIZES = ['compact', 'large'];
 const TOOLTIP_CLASSES = {
-    compact: { box: '-top-3 px-2.5', value: 'text-label', delta: 'text-caption' },
-    large: { box: 'top-0 px-3', value: 'text-body', delta: 'text-label' },
+	compact: {
+		box: "-top-3 px-2.5",
+		value: "text-label",
+		delta: "text-caption"
+	},
+	large: {
+		box: "top-0 px-3",
+		value: "text-body",
+		delta: "text-label"
+	}
 };
 const PLOT_PADDING_RATIO = 16 / 240;
 const SPARKLINE_PADDING = 4;
 const START_LABEL_BASELINE_OFFSET = 4;
 const TOOLTIP_OFFSET = 14;
-const TOOLTIP_FLIP_RATIO = 0.55;
+const TOOLTIP_FLIP_RATIO = .55;
 const plotHeightFor = (height, sparkline, axisGap, wide) => sparkline ? height : Math.max(height - resolveGap(axisGap, wide) - AXIS_ROW, 1);
 const plotPaddingFor = (plotHeight, sparkline) => sparkline ? SPARKLINE_PADDING : plotHeight * PLOT_PADDING_RATIO;
 const startLabelBaseline = (boxBottom) => boxBottom - START_LABEL_BASELINE_OFFSET;
 const tooltipPlacement = (ratio) => {
-    const flipped = ratio > TOOLTIP_FLIP_RATIO;
-    return `left: calc(${ratio * 100}% ${flipped ? '-' : '+'} ${TOOLTIP_OFFSET}px); transform: ${flipped ? 'translateX(-100%)' : 'none'}`;
+	const flipped = ratio > TOOLTIP_FLIP_RATIO;
+	return `left: calc(${ratio * 100}% ${flipped ? "-" : "+"} ${TOOLTIP_OFFSET}px); transform: ${flipped ? "translateX(-100%)" : "none"}`;
 };
-const deltaTone = (delta) => delta > 0 ? 'text-(--positive)' : delta < 0 ? 'text-(--negative)' : 'text-(--muted-foreground)';
-const DEFAULT_WIDTH = 640;
-const DEFAULT_HEIGHT = 240;
+const deltaTone = (delta) => delta > 0 ? "text-(--positive)" : delta < 0 ? "text-(--negative)" : "text-(--muted-foreground)";
 const identityValue = (value) => `${value}`;
-const identityDelta = (delta) => `${delta > 0 ? '+' : ''}${delta}`;
+const identityDelta = (delta) => `${delta > 0 ? "+" : ""}${delta}`;
 const identityTime = (time) => new Date(time).toISOString();
-const parseAxisTicks = (value) => value === 'auto' ? 'auto' : Number(value);
-const resolveGap = (gap, wide) => (gap === 'auto' ? (wide ? 16 : 12) : gap);
-const resolveTooltip = (size, wide) => size === 'auto' ? (wide ? 'large' : 'compact') : size;
+const parseAxisTicks = (value) => value === "auto" ? "auto" : Number(value);
+const resolveGap = (gap, wide) => gap === "auto" ? wide ? 16 : 12 : gap;
+const resolveTooltip = (size, wide) => size === "auto" ? wide ? "large" : "compact" : size;
 const tooltipClassesFor = (size, wide) => TOOLTIP_CLASSES[resolveTooltip(size, wide)];
-
 const CURVE = curveMonotoneX;
 const buildGeometry = (points, width, height, padding = {}) => {
-    if (points.length === 0) {
-        return null;
-    }
-    const { x: paddingX = 4, top: paddingTop = 4, bottom: paddingBottom = 4 } = padding;
-    const plotTop = paddingTop;
-    const plotBottom = height - paddingBottom;
-    const times = points.map((point) => point.t);
-    const values = points.map((point) => point.v);
-    const minValue = Math.min(...values);
-    const maxValue = Math.max(...values);
-    const x = scaleLinear()
-        .domain([Math.min(...times), Math.max(...times)])
-        .range([paddingX, width - paddingX]);
-    const y = minValue === maxValue
-        ? () => (plotTop + plotBottom) / 2
-        : scaleLinear().domain([minValue, maxValue]).range([plotBottom, plotTop]);
-    const toX = (point) => (points.length === 1 ? paddingX : x(point.t));
-    const lineGenerator = line()
-        .x(toX)
-        .y((point) => y(point.v))
-        .curve(CURVE);
-    const first = points[0];
-    const last = points.at(-1);
-    return {
-        line: lineGenerator(points),
-        end: { x: toX(last), y: y(last.v) },
-        start: { y: y(first.v) },
-        points: points.map((point) => ({ ...point, x: toX(point), y: y(point.v) })),
-        plotBottom,
-        plotTop,
-    };
+	if (points.length === 0) return null;
+	const { x: paddingX = 4, top: paddingTop = 4, bottom: paddingBottom = 4 } = padding;
+	const plotTop = paddingTop;
+	const plotBottom = height - paddingBottom;
+	const times = points.map((point) => point.t);
+	const values = points.map((point) => point.v);
+	const minValue = Math.min(...values);
+	const maxValue = Math.max(...values);
+	const x = scaleLinear().domain([Math.min(...times), Math.max(...times)]).range([paddingX, width - paddingX]);
+	const y = minValue === maxValue ? () => (plotTop + plotBottom) / 2 : scaleLinear().domain([minValue, maxValue]).range([plotBottom, plotTop]);
+	const toX = (point) => points.length === 1 ? paddingX : x(point.t);
+	const lineGenerator = line().x(toX).y((point) => y(point.v)).curve(CURVE);
+	const first = points[0];
+	const last = points.at(-1);
+	return {
+		line: lineGenerator(points),
+		end: {
+			x: toX(last),
+			y: y(last.v)
+		},
+		start: { y: y(first.v) },
+		points: points.map((point) => ({
+			...point,
+			x: toX(point),
+			y: y(point.v)
+		})),
+		plotBottom,
+		plotTop
+	};
 };
-
 const observeSize = (element, destroyRef, measured) => {
-    if (typeof ResizeObserver === 'undefined') {
-        return;
-    }
-    const { clientWidth: width, clientHeight: height } = element;
-    if (width > 0 && height > 0) {
-        measured({ width, height });
-    }
-    const observer = new ResizeObserver(([entry]) => {
-        if (entry) {
-            measured({ width: entry.contentRect.width, height: entry.contentRect.height });
-        }
-    });
-    observer.observe(element);
-    destroyRef.onDestroy(() => observer.disconnect());
+	if (typeof ResizeObserver === "undefined") return;
+	const { clientWidth: width, clientHeight: height } = element;
+	if (width > 0 && height > 0) measured({
+		width,
+		height
+	});
+	const observer = new ResizeObserver(([entry]) => {
+		if (entry) measured({
+			width: entry.contentRect.width,
+			height: entry.contentRect.height
+		});
+	});
+	observer.observe(element);
+	destroyRef.onDestroy(() => observer.disconnect());
 };
-
 const LINE_GAP = 6;
 const COLLISION_MARGIN = 6;
 const EDGE_TOLERANCE = 3;
 const candidateSlots = (startY, box, label) => {
-    const aboveTop = startY - LINE_GAP - label.height;
-    const aboveBottom = startY - LINE_GAP;
-    const belowTop = startY + LINE_GAP;
-    const belowBottom = startY + LINE_GAP + label.height;
-    const slots = [
-        { anchor: 'end', x: box.width, y: aboveBottom, top: aboveTop, bottom: aboveBottom },
-        { anchor: 'end', x: box.width, y: belowBottom, top: belowTop, bottom: belowBottom },
-        { anchor: 'start', x: 0, y: aboveBottom, top: aboveTop, bottom: aboveBottom },
-        { anchor: 'start', x: 0, y: belowBottom, top: belowTop, bottom: belowBottom },
-        { anchor: 'end', x: box.width, y: label.height, top: 0, bottom: label.height },
-        { anchor: 'start', x: 0, y: label.height, top: 0, bottom: label.height },
-        { anchor: 'end', x: box.width, y: box.height, top: box.height - label.height, bottom: box.height },
-        { anchor: 'start', x: 0, y: box.height, top: box.height - label.height, bottom: box.height },
-    ];
-    return slots.filter((slot) => slot.top >= -EDGE_TOLERANCE && slot.bottom <= box.height + EDGE_TOLERANCE);
+	const aboveTop = startY - LINE_GAP - label.height;
+	const aboveBottom = startY - LINE_GAP;
+	const belowTop = startY + LINE_GAP;
+	const belowBottom = startY + LINE_GAP + label.height;
+	return [
+		{
+			anchor: "end",
+			x: box.width,
+			y: aboveBottom,
+			top: aboveTop,
+			bottom: aboveBottom
+		},
+		{
+			anchor: "end",
+			x: box.width,
+			y: belowBottom,
+			top: belowTop,
+			bottom: belowBottom
+		},
+		{
+			anchor: "start",
+			x: 0,
+			y: aboveBottom,
+			top: aboveTop,
+			bottom: aboveBottom
+		},
+		{
+			anchor: "start",
+			x: 0,
+			y: belowBottom,
+			top: belowTop,
+			bottom: belowBottom
+		},
+		{
+			anchor: "end",
+			x: box.width,
+			y: label.height,
+			top: 0,
+			bottom: label.height
+		},
+		{
+			anchor: "start",
+			x: 0,
+			y: label.height,
+			top: 0,
+			bottom: label.height
+		},
+		{
+			anchor: "end",
+			x: box.width,
+			y: box.height,
+			top: box.height - label.height,
+			bottom: box.height
+		},
+		{
+			anchor: "start",
+			x: 0,
+			y: box.height,
+			top: box.height - label.height,
+			bottom: box.height
+		}
+	].filter((slot) => slot.top >= -3 && slot.bottom <= box.height + EDGE_TOLERANCE);
 };
 const hitsFor = (slot, label, points) => {
-    const left = slot.anchor === 'end' ? slot.x - label.width : slot.x;
-    const right = slot.anchor === 'end' ? slot.x : slot.x + label.width;
-    const top = slot.top - COLLISION_MARGIN;
-    const bottom = slot.bottom + COLLISION_MARGIN;
-    return points.filter((point) => point.x >= left && point.x <= right && point.y >= top && point.y <= bottom).length;
+	const left = slot.anchor === "end" ? slot.x - label.width : slot.x;
+	const right = slot.anchor === "end" ? slot.x : slot.x + label.width;
+	const top = slot.top - COLLISION_MARGIN;
+	const bottom = slot.bottom + COLLISION_MARGIN;
+	return points.filter((point) => point.x >= left && point.x <= right && point.y >= top && point.y <= bottom).length;
 };
 const placeStartLabel = (points, startY, box, label) => {
-    let best = null;
-    for (const slot of candidateSlots(startY, box, label)) {
-        const hits = hitsFor(slot, label, points);
-        if (!best || hits < best.hits) {
-            best = { slot, hits };
-        }
-        if (hits === 0) {
-            break;
-        }
-    }
-    if (!best) {
-        return { anchor: 'end', x: box.width, y: label.height };
-    }
-    const { anchor, x, y } = best.slot;
-    return { anchor, x, y };
+	let best = null;
+	for (const slot of candidateSlots(startY, box, label)) {
+		const hits = hitsFor(slot, label, points);
+		if (!best || hits < best.hits) best = {
+			slot,
+			hits
+		};
+		if (hits === 0) break;
+	}
+	if (!best) return {
+		anchor: "end",
+		x: box.width,
+		y: label.height
+	};
+	const { anchor, x, y } = best.slot;
+	return {
+		anchor,
+		x,
+		y
+	};
 };
-
-const TRANSITION_SAMPLES = 120;
-const TRANSITION_DURATION = 260;
 const easeOutQuint = (t) => 1 - (1 - t) ** 5;
 const durationFrom = (value) => {
-    const match = /^\s*([\d.]+)(ms|s)\s*$/.exec(value);
-    const duration = match ? Number(match[1]) * (match[2] === 's' ? 1000 : 1) : Number.NaN;
-    return Number.isFinite(duration) ? duration : TRANSITION_DURATION;
+	const match = /^\s*([\d.]+)(ms|s)\s*$/.exec(value);
+	const duration = match ? Number(match[1]) * (match[2] === "s" ? 1e3 : 1) : NaN;
+	return Number.isFinite(duration) ? duration : 260;
 };
-const sameSeries = (a, b) => a === b ||
-    (b !== null &&
-        a.length === b.length &&
-        a.every((point, index) => point.t === b[index].t && point.v === b[index].v));
+const sameSeries = (a, b) => a === b || b !== null && a.length === b.length && a.every((point, index) => point.t === b[index].t && point.v === b[index].v);
 const monotoneTangents = (xs, ys) => {
-    const n = xs.length;
-    const slopes = [];
-    for (let i = 0; i < n - 1; i++) {
-        const dx = xs[i + 1] - xs[i];
-        slopes.push(dx === 0 ? 0 : (ys[i + 1] - ys[i]) / dx);
-    }
-    const tangents = new Array(n).fill(0);
-    tangents[0] = slopes[0];
-    tangents[n - 1] = slopes[n - 2];
-    for (let i = 1; i < n - 1; i++) {
-        const a = slopes[i - 1];
-        const b = slopes[i];
-        tangents[i] = a * b <= 0 ? 0 : (a + b) / 2;
-    }
-    for (let i = 0; i < n - 1; i++) {
-        const slope = slopes[i];
-        if (slope === 0) {
-            tangents[i] = 0;
-            tangents[i + 1] = 0;
-            continue;
-        }
-        const a = tangents[i] / slope;
-        const b = tangents[i + 1] / slope;
-        const s = a * a + b * b;
-        if (s > 9) {
-            const t = 3 / Math.sqrt(s);
-            tangents[i] = t * a * slope;
-            tangents[i + 1] = t * b * slope;
-        }
-    }
-    return tangents;
+	const n = xs.length;
+	const slopes = [];
+	for (let i = 0; i < n - 1; i++) {
+		const dx = xs[i + 1] - xs[i];
+		slopes.push(dx === 0 ? 0 : (ys[i + 1] - ys[i]) / dx);
+	}
+	const tangents = new Array(n).fill(0);
+	tangents[0] = slopes[0];
+	tangents[n - 1] = slopes[n - 2];
+	for (let i = 1; i < n - 1; i++) {
+		const a = slopes[i - 1];
+		const b = slopes[i];
+		tangents[i] = a * b <= 0 ? 0 : (a + b) / 2;
+	}
+	for (let i = 0; i < n - 1; i++) {
+		const slope = slopes[i];
+		if (slope === 0) {
+			tangents[i] = 0;
+			tangents[i + 1] = 0;
+			continue;
+		}
+		const a = tangents[i] / slope;
+		const b = tangents[i + 1] / slope;
+		const s = a * a + b * b;
+		if (s > 9) {
+			const t = 3 / Math.sqrt(s);
+			tangents[i] = t * a * slope;
+			tangents[i + 1] = t * b * slope;
+		}
+	}
+	return tangents;
 };
 const sampleMonotone = (points, sampleXs) => {
-    const xs = points.map((point) => point.x);
-    const ys = points.map((point) => point.y);
-    const tangents = monotoneTangents(xs, ys);
-    let segment = 0;
-    return sampleXs.map((x) => {
-        while (segment < xs.length - 2 && x > xs[segment + 1]) {
-            segment++;
-        }
-        const x0 = xs[segment];
-        const x1 = xs[segment + 1];
-        const dx = x1 - x0;
-        const f = dx === 0 ? 0 : (x - x0) / dx;
-        const f2 = f * f;
-        const f3 = f2 * f;
-        const y0 = ys[segment];
-        const y1 = ys[segment + 1];
-        const m0 = tangents[segment];
-        const m1 = tangents[segment + 1];
-        return (2 * f3 - 3 * f2 + 1) * y0 + (f3 - 2 * f2 + f) * m0 * dx + (-2 * f3 + 3 * f2) * y1 + (f3 - f2) * m1 * dx;
-    });
+	const xs = points.map((point) => point.x);
+	const ys = points.map((point) => point.y);
+	const tangents = monotoneTangents(xs, ys);
+	let segment = 0;
+	return sampleXs.map((x) => {
+		while (segment < xs.length - 2 && x > xs[segment + 1]) segment++;
+		const x0 = xs[segment];
+		const dx = xs[segment + 1] - x0;
+		const f = dx === 0 ? 0 : (x - x0) / dx;
+		const f2 = f * f;
+		const f3 = f2 * f;
+		const y0 = ys[segment];
+		const y1 = ys[segment + 1];
+		const m0 = tangents[segment];
+		const m1 = tangents[segment + 1];
+		return (2 * f3 - 3 * f2 + 1) * y0 + (f3 - 2 * f2 + f) * m0 * dx + (-2 * f3 + 3 * f2) * y1 + (f3 - f2) * m1 * dx;
+	});
 };
-const polyline = (xs, ys) => xs.map((x, index) => `${index === 0 ? 'M' : 'L'}${x.toFixed(2)},${ys[index].toFixed(2)}`).join(' ');
+const polyline = (xs, ys) => xs.map((x, index) => `${index === 0 ? "M" : "L"}${x.toFixed(2)},${ys[index].toFixed(2)}`).join(" ");
 const shapeTransition = (from, to) => {
-    const left = to[0].x;
-    const right = to.at(-1).x;
-    const xs = Array.from({ length: TRANSITION_SAMPLES }, (_, index) => left + ((right - left) * index) / (TRANSITION_SAMPLES - 1));
-    return { xs, from: sampleMonotone(from, xs), to: sampleMonotone(to, xs) };
+	const left = to[0].x;
+	const right = to.at(-1).x;
+	const xs = Array.from({ length: 120 }, (_, index) => left + (right - left) * index / 119);
+	return {
+		xs,
+		from: sampleMonotone(from, xs),
+		to: sampleMonotone(to, xs)
+	};
 };
 const shapeAt = (transition, progress) => transition.from.map((fromY, index) => fromY + (transition.to[index] - fromY) * progress);
 const animateShape = (from, to, duration, draw, done) => {
-    const transition = shapeTransition(from, to);
-    const start = performance.now();
-    let frame = 0;
-    const step = (now) => {
-        const t = Math.min(1, Math.max(0, (now - start) / duration));
-        if (t === 1) {
-            done();
-            return;
-        }
-        const ys = shapeAt(transition, easeOutQuint(t));
-        draw(transition.xs.map((x, index) => ({ x, y: ys[index] })), polyline(transition.xs, ys));
-        frame = requestAnimationFrame(step);
-    };
-    frame = requestAnimationFrame(step);
-    return () => cancelAnimationFrame(frame);
+	const transition = shapeTransition(from, to);
+	const start = performance.now();
+	let frame = 0;
+	const step = (now) => {
+		const t = Math.min(1, Math.max(0, (now - start) / duration));
+		if (t === 1) {
+			done();
+			return;
+		}
+		const ys = shapeAt(transition, easeOutQuint(t));
+		draw(transition.xs.map((x, index) => ({
+			x,
+			y: ys[index]
+		})), polyline(transition.xs, ys));
+		frame = requestAnimationFrame(step);
+	};
+	frame = requestAnimationFrame(step);
+	return () => cancelAnimationFrame(frame);
 };
-class ShapeMotion {
-    #view;
-    #points = null;
-    #rangeKey = null;
-    #target = null;
-    #held = null;
-    #drawn = null;
-    #stop = null;
-    constructor(view) {
-        this.#view = view;
-    }
-    follow(points, geometry, options) {
-        const newSeries = !sameSeries(points, this.#points);
-        const newRange = options.rangeKey === null || options.rangeKey !== this.#rangeKey;
-        this.#points = points;
-        if (newSeries) {
-            this.#rangeKey = options.rangeKey;
-        }
-        if (this.#stop && !newSeries && !options.reduced && geometry?.line === this.#target?.line) {
-            this.#target = geometry;
-            return;
-        }
-        const from = this.#drawn;
-        const held = this.#held ?? this.#target;
-        this.#target = geometry;
-        this.stop();
-        if (!newSeries ||
-            !newRange ||
-            !geometry ||
-            !from ||
-            from.length < 2 ||
-            geometry.points.length < 2 ||
-            options.reduced) {
-            this.#settle(geometry);
-            return;
-        }
-        const duration = options.duration();
-        if (duration <= 0) {
-            this.#settle(geometry);
-            return;
-        }
-        this.#hold(held);
-        this.#stop = animateShape(from, geometry.points, duration, (shape, line) => this.#draw(shape, line, shape.at(-1)), () => this.#settle(geometry));
-    }
-    stop() {
-        this.#stop?.();
-        this.#stop = null;
-    }
-    #hold(geometry) {
-        this.#held = geometry;
-        this.#view.hold(geometry);
-    }
-    #settle(geometry) {
-        this.#stop = null;
-        this.#hold(null);
-        this.#drawn = null;
-        if (geometry) {
-            this.#draw(geometry.points, geometry.line, geometry.end);
-        }
-    }
-    #draw(shape, line, end) {
-        this.#drawn = shape;
-        this.#view.draw(line, end);
-    }
-}
-
-const WIDE_QUERY = '(min-width: 64rem)';
+var ShapeMotion = class {
+	#view;
+	#points = null;
+	#rangeKey = null;
+	#target = null;
+	#held = null;
+	#drawn = null;
+	#stop = null;
+	constructor(view) {
+		this.#view = view;
+	}
+	follow(points, geometry, options) {
+		const newSeries = !sameSeries(points, this.#points);
+		const newRange = options.rangeKey === null || options.rangeKey !== this.#rangeKey;
+		this.#points = points;
+		if (newSeries) this.#rangeKey = options.rangeKey;
+		if (this.#stop && !newSeries && !options.reduced && geometry?.line === this.#target?.line) {
+			this.#target = geometry;
+			return;
+		}
+		const from = this.#drawn;
+		const held = this.#held ?? this.#target;
+		this.#target = geometry;
+		this.stop();
+		if (!newSeries || !newRange || !geometry || !from || from.length < 2 || geometry.points.length < 2 || options.reduced) {
+			this.#settle(geometry);
+			return;
+		}
+		const duration = options.duration();
+		if (duration <= 0) {
+			this.#settle(geometry);
+			return;
+		}
+		this.#hold(held);
+		this.#stop = animateShape(from, geometry.points, duration, (shape, line) => this.#draw(shape, line, shape.at(-1)), () => this.#settle(geometry));
+	}
+	stop() {
+		this.#stop?.();
+		this.#stop = null;
+	}
+	#hold(geometry) {
+		this.#held = geometry;
+		this.#view.hold(geometry);
+	}
+	#settle(geometry) {
+		this.#stop = null;
+		this.#hold(null);
+		this.#drawn = null;
+		if (geometry) this.#draw(geometry.points, geometry.line, geometry.end);
+	}
+	#draw(shape, line, end) {
+		this.#drawn = shape;
+		this.#view.draw(line, end);
+	}
+};
+const WIDE_QUERY = "(min-width: 64rem)";
 const wideViewport = () => {
-    const query = typeof matchMedia === 'function' ? matchMedia(WIDE_QUERY) : null;
-    const wide = signal(query?.matches ?? false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "wide" }] : /* istanbul ignore next */ []));
-    const onChange = (event) => wide.set(event.matches);
-    if (query) {
-        query.onchange = onChange;
-        inject(DestroyRef).onDestroy(() => (query.onchange = null));
-    }
-    return wide;
+	const query = typeof matchMedia === "function" ? matchMedia(WIDE_QUERY) : null;
+	const wide = signal(query?.matches ?? false, ...ngDevMode ? [{ debugName: "wide" }] : /* istanbul ignore next */ []);
+	const onChange = (event) => wide.set(event.matches);
+	if (query) {
+		query.onchange = onChange;
+		inject(DestroyRef).onDestroy(() => query.onchange = null);
+	}
+	return wide;
 };
-
-/**
- * Value over time: a monotone curve with a dashed line at the starting value and a tooltip.
- *
- * Axis labels are never repeated: a tick whose `axisFormat` text equals the previous drawn label is
- * not rendered. The first tick always is, so only the last edge label can drop. With `axisTicks="3"`
- * only the first, middle and last ticks count; with `auto` every tick counts from `sm` up and the
- * three core ticks below it. Tick positions are unchanged.
- *
- * A new series interpolates from the drawn curve, fading the start label and the dashed line. With
- * `rangeKey` bound, only a series that comes with a new key does so: a new series under the same key
- * (a reload after a buy) is drawn at once, with no fade. The key may change before its series arrives.
- *
- * @example
- * <ui-line-chart [points]="points" label="Net worth over one month" startLabel="Since" [valueFormat]="formatEur" />
- */
-class UiLineChart {
-    points = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []));
-    label = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    valueFormat = input(identityValue, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []));
-    tooltipFormat = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "tooltipFormat" }] : /* istanbul ignore next */ []));
-    deltaFormat = input(identityDelta, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "deltaFormat" }] : /* istanbul ignore next */ []));
-    timeFormat = input(identityTime, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
-    axisFormat = input(identityTime, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "axisFormat" }] : /* istanbul ignore next */ []));
-    startLabel = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []));
-    timeColumnLabel = input('Time', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "timeColumnLabel" }] : /* istanbul ignore next */ []));
-    valueColumnLabel = input('Value', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueColumnLabel" }] : /* istanbul ignore next */ []));
-    sparkline = input(false, { ...(ngDevMode ? { debugName: "sparkline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    tooltip = input('compact', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
-    tooltipDelta = input(true, { ...(ngDevMode ? { debugName: "tooltipDelta" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    axisGap = input(12, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "axisGap" }] : /* istanbul ignore next */ []));
-    axisTicks = input('auto', { ...(ngDevMode ? { debugName: "axisTicks" } : /* istanbul ignore next */ {}), transform: parseAxisTicks });
-    rangeKey = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rangeKey" }] : /* istanbul ignore next */ []));
-    #destroyRef = inject(DestroyRef);
-    #host = inject(ElementRef);
-    #wide = wideViewport();
-    #reducedMotion = injectReducedMotion();
-    #motion = new ShapeMotion({
-        hold: (geometry) => {
-            this.held.set(geometry);
-            this.activeIndex.update((index) => (geometry ? null : index));
-        },
-        draw: (line, end) => {
-            this.lineRef()?.nativeElement.setAttribute('d', line);
-            this.endRef()?.nativeElement.setAttribute('cx', String(end.x));
-            this.endRef()?.nativeElement.setAttribute('cy', String(end.y));
-        },
-    });
-    svgRef = viewChild.required('svgRef', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "svgRef" }] : /* istanbul ignore next */ []));
-    lineRef = viewChild('lineRef', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "lineRef" }] : /* istanbul ignore next */ []));
-    endRef = viewChild('endRef', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "endRef" }] : /* istanbul ignore next */ []));
-    activeIndex = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    held = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []));
-    measuredSize = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "measuredSize" }] : /* istanbul ignore next */ []));
-    effectiveWidth = computed(() => this.measuredSize()?.width ?? DEFAULT_WIDTH, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []));
-    effectiveHeight = computed(() => this.measuredSize()?.height ?? DEFAULT_HEIGHT, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effectiveHeight" }] : /* istanbul ignore next */ []));
-    plotHeight = computed(() => plotHeightFor(this.effectiveHeight(), this.sparkline(), this.axisGap(), this.#wide()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "plotHeight" }] : /* istanbul ignore next */ []));
-    tooltipStyle = (point) => tooltipPlacement(point.x / this.effectiveWidth());
-    tooltipClasses = computed(() => tooltipClassesFor(this.tooltip(), this.#wide()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tooltipClasses" }] : /* istanbul ignore next */ []));
-    geometry = computed(() => {
-        const plotHeight = this.plotHeight();
-        const padding = plotPaddingFor(plotHeight, this.sparkline());
-        return buildGeometry(this.points(), this.effectiveWidth(), plotHeight, { x: 0, top: padding, bottom: padding });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []));
-    shown = computed(() => this.held() ?? this.geometry(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
-    startFade = computed(() => this.held() ? 'opacity-0 duration-(--duration-exit)' : 'duration-(--duration-fast)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "startFade" }] : /* istanbul ignore next */ []));
-    ticks = computed(() => axisTicks(this.geometry().points), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
-    tickTexts = computed(() => tickLabels(this.ticks(), this.axisFormat(), this.axisTicks()), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickTexts" }] : /* istanbul ignore next */ []));
-    active = computed(() => {
-        const geometry = this.geometry();
-        const index = this.activeIndex();
-        return geometry && index !== null && !this.held() ? geometry.points[index] : null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
-    startLabelInfo = computed(() => {
-        const text = this.startLabel();
-        const geometry = this.shown();
-        if (!text || !geometry) {
-            return null;
-        }
-        const label = `${text} ${this.valueFormat()(geometry.points[0].v)}`;
-        const size = { width: label.length * 0.56 * 12 + 8, height: START_LABEL_HEIGHT };
-        const placement = placeStartLabel(geometry.points, geometry.start.y, { width: this.effectiveWidth(), height: this.plotHeight() }, size);
-        return { label, placement: { ...placement, y: startLabelBaseline(placement.y) } };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "startLabelInfo" }] : /* istanbul ignore next */ []));
-    #renderRef = afterNextRender(() => {
-        this.#destroyRef.onDestroy(() => this.#renderRef.destroy());
-        observeSize(this.svgRef().nativeElement, this.#destroyRef, (size) => this.measuredSize.set(size));
-    });
-    constructor() {
-        effect(() => {
-            const points = this.points();
-            const geometry = this.geometry();
-            const reduced = this.#reducedMotion();
-            untracked(() => this.#motion.follow(points, geometry, {
-                reduced,
-                rangeKey: this.rangeKey(),
-                duration: () => durationFrom(getComputedStyle(this.#host.nativeElement).getPropertyValue('--duration-base')),
-            }));
-        });
-        this.#destroyRef.onDestroy(() => this.#motion.stop());
-    }
-    deltaFor(point) {
-        return point.v - this.points()[0].v;
-    }
-    deltaClasses(point) {
-        return `${this.tooltipClasses().delta} ${deltaTone(this.deltaFor(point))}`;
-    }
-    onPointerMove(event) {
-        const geometry = this.geometry();
-        if (this.sparkline() || !geometry || geometry.points.length === 0) {
-            return;
-        }
-        const rect = this.svgRef().nativeElement.getBoundingClientRect();
-        const ratio = rect.width === 0 ? 1 : this.effectiveWidth() / rect.width;
-        const x = (event.clientX - rect.left) * ratio;
-        this.activeIndex.set(nearestPointIndex(geometry.points, x));
-    }
-    onPointerLeave() {
-        this.activeIndex.set(null);
-    }
-    onKeydown(event) {
-        const geometry = this.geometry();
-        if (this.sparkline() || !geometry || geometry.points.length === 0) {
-            return;
-        }
-        const navigation = navigateIndex(event.key, this.activeIndex(), geometry.points.length - 1);
-        if (!navigation) {
-            return;
-        }
-        if (navigation.preventDefault) {
-            event.preventDefault();
-        }
-        this.activeIndex.set(navigation.index);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiLineChart, isStandalone: true, selector: "ui-line-chart", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, tooltipFormat: { classPropertyName: "tooltipFormat", publicName: "tooltipFormat", isSignal: true, isRequired: false, transformFunction: null }, deltaFormat: { classPropertyName: "deltaFormat", publicName: "deltaFormat", isSignal: true, isRequired: false, transformFunction: null }, timeFormat: { classPropertyName: "timeFormat", publicName: "timeFormat", isSignal: true, isRequired: false, transformFunction: null }, axisFormat: { classPropertyName: "axisFormat", publicName: "axisFormat", isSignal: true, isRequired: false, transformFunction: null }, startLabel: { classPropertyName: "startLabel", publicName: "startLabel", isSignal: true, isRequired: false, transformFunction: null }, timeColumnLabel: { classPropertyName: "timeColumnLabel", publicName: "timeColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, valueColumnLabel: { classPropertyName: "valueColumnLabel", publicName: "valueColumnLabel", isSignal: true, isRequired: false, transformFunction: null }, sparkline: { classPropertyName: "sparkline", publicName: "sparkline", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipDelta: { classPropertyName: "tooltipDelta", publicName: "tooltipDelta", isSignal: true, isRequired: false, transformFunction: null }, axisGap: { classPropertyName: "axisGap", publicName: "axisGap", isSignal: true, isRequired: false, transformFunction: null }, axisTicks: { classPropertyName: "axisTicks", publicName: "axisTicks", isSignal: true, isRequired: false, transformFunction: null }, rangeKey: { classPropertyName: "rangeKey", publicName: "rangeKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block h-full" }, viewQueries: [{ propertyName: "svgRef", first: true, predicate: ["svgRef"], descendants: true, isSignal: true }, { propertyName: "lineRef", first: true, predicate: ["lineRef"], descendants: true, isSignal: true }, { propertyName: "endRef", first: true, predicate: ["endRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+var UiLineChart = class UiLineChart {
+	points = input.required(...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	valueFormat = input(identityValue, ...ngDevMode ? [{ debugName: "valueFormat" }] : /* istanbul ignore next */ []);
+	tooltipFormat = input(...ngDevMode ? [void 0, { debugName: "tooltipFormat" }] : /* istanbul ignore next */ []);
+	deltaFormat = input(identityDelta, ...ngDevMode ? [{ debugName: "deltaFormat" }] : /* istanbul ignore next */ []);
+	deltaSuffix = input("", ...ngDevMode ? [{ debugName: "deltaSuffix" }] : /* istanbul ignore next */ []);
+	timeFormat = input(identityTime, ...ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []);
+	axisFormat = input(identityTime, ...ngDevMode ? [{ debugName: "axisFormat" }] : /* istanbul ignore next */ []);
+	startLabel = input("", ...ngDevMode ? [{ debugName: "startLabel" }] : /* istanbul ignore next */ []);
+	timeColumnLabel = input("Time", ...ngDevMode ? [{ debugName: "timeColumnLabel" }] : /* istanbul ignore next */ []);
+	valueColumnLabel = input("Value", ...ngDevMode ? [{ debugName: "valueColumnLabel" }] : /* istanbul ignore next */ []);
+	sparkline = input(false, {
+		...ngDevMode ? { debugName: "sparkline" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	tooltip = input("compact", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
+	tooltipDelta = input(true, {
+		...ngDevMode ? { debugName: "tooltipDelta" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	axisGap = input(12, ...ngDevMode ? [{ debugName: "axisGap" }] : /* istanbul ignore next */ []);
+	axisTicks = input("auto", {
+		...ngDevMode ? { debugName: "axisTicks" } : /* istanbul ignore next */ {},
+		transform: parseAxisTicks
+	});
+	rangeKey = input(null, ...ngDevMode ? [{ debugName: "rangeKey" }] : /* istanbul ignore next */ []);
+	#destroyRef = inject(DestroyRef);
+	#host = inject(ElementRef);
+	#wide = wideViewport();
+	#reducedMotion = injectReducedMotion();
+	#motion = new ShapeMotion({
+		hold: (geometry) => {
+			this.held.set(geometry);
+			this.activeIndex.update((index) => geometry ? null : index);
+		},
+		draw: (line, end) => {
+			this.lineRef()?.nativeElement.setAttribute("d", line);
+			this.endRef()?.nativeElement.setAttribute("cx", String(end.x));
+			this.endRef()?.nativeElement.setAttribute("cy", String(end.y));
+		}
+	});
+	svgRef = viewChild.required("svgRef", ...ngDevMode ? [{ debugName: "svgRef" }] : /* istanbul ignore next */ []);
+	lineRef = viewChild("lineRef", ...ngDevMode ? [{ debugName: "lineRef" }] : /* istanbul ignore next */ []);
+	endRef = viewChild("endRef", ...ngDevMode ? [{ debugName: "endRef" }] : /* istanbul ignore next */ []);
+	activeIndex = signal(null, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	held = signal(null, ...ngDevMode ? [{ debugName: "held" }] : /* istanbul ignore next */ []);
+	measuredSize = signal(null, ...ngDevMode ? [{ debugName: "measuredSize" }] : /* istanbul ignore next */ []);
+	spacedDeltaSuffix = computed(() => this.deltaSuffix() ? ` ${this.deltaSuffix()}` : "", ...ngDevMode ? [{ debugName: "spacedDeltaSuffix" }] : /* istanbul ignore next */ []);
+	effectiveWidth = computed(() => this.measuredSize()?.width ?? 640, ...ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []);
+	effectiveHeight = computed(() => this.measuredSize()?.height ?? 240, ...ngDevMode ? [{ debugName: "effectiveHeight" }] : /* istanbul ignore next */ []);
+	plotHeight = computed(() => plotHeightFor(this.effectiveHeight(), this.sparkline(), this.axisGap(), this.#wide()), ...ngDevMode ? [{ debugName: "plotHeight" }] : /* istanbul ignore next */ []);
+	tooltipStyle = (point) => tooltipPlacement(point.x / this.effectiveWidth());
+	tooltipClasses = computed(() => tooltipClassesFor(this.tooltip(), this.#wide()), ...ngDevMode ? [{ debugName: "tooltipClasses" }] : /* istanbul ignore next */ []);
+	geometry = computed(() => {
+		const plotHeight = this.plotHeight();
+		const padding = plotPaddingFor(plotHeight, this.sparkline());
+		return buildGeometry(this.points(), this.effectiveWidth(), plotHeight, {
+			x: 0,
+			top: padding,
+			bottom: padding
+		});
+	}, ...ngDevMode ? [{ debugName: "geometry" }] : /* istanbul ignore next */ []);
+	shown = computed(() => this.held() ?? this.geometry(), ...ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []);
+	startFade = computed(() => this.held() ? "opacity-0 duration-(--duration-exit)" : "duration-(--duration-fast)", ...ngDevMode ? [{ debugName: "startFade" }] : /* istanbul ignore next */ []);
+	ticks = computed(() => axisTicks(this.geometry().points), ...ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []);
+	tickTexts = computed(() => tickLabels(this.ticks(), this.axisFormat(), this.axisTicks()), ...ngDevMode ? [{ debugName: "tickTexts" }] : /* istanbul ignore next */ []);
+	active = computed(() => {
+		const geometry = this.geometry();
+		const index = this.activeIndex();
+		return geometry && index !== null && !this.held() ? geometry.points[index] : null;
+	}, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	startLabelInfo = computed(() => {
+		const text = this.startLabel();
+		const geometry = this.shown();
+		if (!text || !geometry) return null;
+		const label = `${text} ${this.valueFormat()(geometry.points[0].v)}`;
+		const size = {
+			width: label.length * .56 * 12 + 8,
+			height: 16
+		};
+		const placement = placeStartLabel(geometry.points, geometry.start.y, {
+			width: this.effectiveWidth(),
+			height: this.plotHeight()
+		}, size);
+		return {
+			label,
+			placement: {
+				...placement,
+				y: startLabelBaseline(placement.y)
+			}
+		};
+	}, ...ngDevMode ? [{ debugName: "startLabelInfo" }] : /* istanbul ignore next */ []);
+	#renderRef = afterNextRender(() => {
+		this.#destroyRef.onDestroy(() => this.#renderRef.destroy());
+		observeSize(this.svgRef().nativeElement, this.#destroyRef, (size) => this.measuredSize.set(size));
+	});
+	constructor() {
+		effect(() => {
+			const points = this.points();
+			const geometry = this.geometry();
+			const reduced = this.#reducedMotion();
+			untracked(() => this.#motion.follow(points, geometry, {
+				reduced,
+				rangeKey: this.rangeKey(),
+				duration: () => durationFrom(getComputedStyle(this.#host.nativeElement).getPropertyValue("--duration-base"))
+			}));
+		});
+		this.#destroyRef.onDestroy(() => this.#motion.stop());
+	}
+	deltaFor(point) {
+		return point.v - this.points()[0].v;
+	}
+	deltaClasses(point) {
+		return `${this.tooltipClasses().delta} ${deltaTone(this.deltaFor(point))}`;
+	}
+	onPointerMove(event) {
+		const geometry = this.geometry();
+		if (this.sparkline() || !geometry || geometry.points.length === 0) return;
+		const rect = this.svgRef().nativeElement.getBoundingClientRect();
+		const ratio = rect.width === 0 ? 1 : this.effectiveWidth() / rect.width;
+		const x = (event.clientX - rect.left) * ratio;
+		this.activeIndex.set(nearestPointIndex(geometry.points, x));
+	}
+	onPointerLeave() {
+		this.activeIndex.set(null);
+	}
+	onKeydown(event) {
+		const geometry = this.geometry();
+		if (this.sparkline() || !geometry || geometry.points.length === 0) return;
+		const navigation = navigateIndex(event.key, this.activeIndex(), geometry.points.length - 1);
+		if (!navigation) return;
+		if (navigation.preventDefault) event.preventDefault();
+		this.activeIndex.set(navigation.index);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: UiLineChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: UiLineChart,
+		isStandalone: true,
+		selector: "ui-line-chart",
+		inputs: {
+			points: {
+				classPropertyName: "points",
+				publicName: "points",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			valueFormat: {
+				classPropertyName: "valueFormat",
+				publicName: "valueFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltipFormat: {
+				classPropertyName: "tooltipFormat",
+				publicName: "tooltipFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			deltaFormat: {
+				classPropertyName: "deltaFormat",
+				publicName: "deltaFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			deltaSuffix: {
+				classPropertyName: "deltaSuffix",
+				publicName: "deltaSuffix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			timeFormat: {
+				classPropertyName: "timeFormat",
+				publicName: "timeFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			axisFormat: {
+				classPropertyName: "axisFormat",
+				publicName: "axisFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			startLabel: {
+				classPropertyName: "startLabel",
+				publicName: "startLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			timeColumnLabel: {
+				classPropertyName: "timeColumnLabel",
+				publicName: "timeColumnLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueColumnLabel: {
+				classPropertyName: "valueColumnLabel",
+				publicName: "valueColumnLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sparkline: {
+				classPropertyName: "sparkline",
+				publicName: "sparkline",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltip: {
+				classPropertyName: "tooltip",
+				publicName: "tooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltipDelta: {
+				classPropertyName: "tooltipDelta",
+				publicName: "tooltipDelta",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			axisGap: {
+				classPropertyName: "axisGap",
+				publicName: "axisGap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			axisTicks: {
+				classPropertyName: "axisTicks",
+				publicName: "axisTicks",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rangeKey: {
+				classPropertyName: "rangeKey",
+				publicName: "rangeKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block h-full" },
+		viewQueries: [
+			{
+				propertyName: "svgRef",
+				first: true,
+				predicate: ["svgRef"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "lineRef",
+				first: true,
+				predicate: ["lineRef"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "endRef",
+				first: true,
+				predicate: ["endRef"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: `
     <div class="relative h-full">
       <svg
         #svgRef
-        class="block h-full w-full touch-pan-y overflow-visible"
+        class="block h-full w-full touch-none overflow-visible"
         role="img"
         [attr.aria-label]="label()"
         [attr.height]="effectiveHeight()"
@@ -555,6 +720,8 @@ class UiLineChart {
         [attr.viewBox]="'0 0 ' + effectiveWidth() + ' ' + effectiveHeight()"
         [attr.width]="effectiveWidth()"
         (keydown)="onKeydown($event)"
+        (pointercancel)="onPointerLeave()"
+        (pointerdown)="onPointerMove($event)"
         (pointerleave)="onPointerLeave()"
         (pointermove)="onPointerMove($event)"
       >
@@ -656,7 +823,9 @@ class UiLineChart {
             {{ tooltipFormat()?.(point) ?? valueFormat()(point.v) }}
           </p>
           @if (tooltipDelta()) {
-            <p data-chart-delta [class]="deltaClasses(point)">{{ deltaFormat()(deltaFor(point)) }}</p>
+            <p data-chart-delta [class]="deltaClasses(point)">
+              {{ deltaFormat()(deltaFor(point)) }}{{ spacedDeltaSuffix() }}
+            </p>
           }
           <p class="text-caption text-(--subtle-foreground)" data-chart-date>{{ timeFormat()(point.t) }}</p>
         </div>
@@ -683,17 +852,24 @@ class UiLineChart {
         </div>
       }
     </div>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiLineChart, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ui-line-chart',
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: UiLineChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-line-chart",
+			template: `
     <div class="relative h-full">
       <svg
         #svgRef
-        class="block h-full w-full touch-pan-y overflow-visible"
+        class="block h-full w-full touch-none overflow-visible"
         role="img"
         [attr.aria-label]="label()"
         [attr.height]="effectiveHeight()"
@@ -701,6 +877,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
         [attr.viewBox]="'0 0 ' + effectiveWidth() + ' ' + effectiveHeight()"
         [attr.width]="effectiveWidth()"
         (keydown)="onKeydown($event)"
+        (pointercancel)="onPointerLeave()"
+        (pointerdown)="onPointerMove($event)"
         (pointerleave)="onPointerLeave()"
         (pointermove)="onPointerMove($event)"
       >
@@ -802,7 +980,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
             {{ tooltipFormat()?.(point) ?? valueFormat()(point.v) }}
           </p>
           @if (tooltipDelta()) {
-            <p data-chart-delta [class]="deltaClasses(point)">{{ deltaFormat()(deltaFor(point)) }}</p>
+            <p data-chart-delta [class]="deltaClasses(point)">
+              {{ deltaFormat()(deltaFor(point)) }}{{ spacedDeltaSuffix() }}
+            </p>
           }
           <p class="text-caption text-(--subtle-foreground)" data-chart-date>{{ timeFormat()(point.t) }}</p>
         </div>
@@ -830,15 +1010,161 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
       }
     </div>
   `,
-                    host: {
-                        class: 'block h-full',
-                    },
-                }]
-        }], ctorParameters: () => [], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], tooltipFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipFormat", required: false }] }], deltaFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaFormat", required: false }] }], timeFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeFormat", required: false }] }], axisFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisFormat", required: false }] }], startLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startLabel", required: false }] }], timeColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeColumnLabel", required: false }] }], valueColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColumnLabel", required: false }] }], sparkline: [{ type: i0.Input, args: [{ isSignal: true, alias: "sparkline", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDelta", required: false }] }], axisGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisGap", required: false }] }], axisTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "axisTicks", required: false }] }], rangeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeKey", required: false }] }], svgRef: [{ type: i0.ViewChild, args: ['svgRef', { isSignal: true }] }], lineRef: [{ type: i0.ViewChild, args: ['lineRef', { isSignal: true }] }], endRef: [{ type: i0.ViewChild, args: ['endRef', { isSignal: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+			host: { class: "block h-full" }
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		points: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "points",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		valueFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueFormat",
+				required: false
+			}]
+		}],
+		tooltipFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltipFormat",
+				required: false
+			}]
+		}],
+		deltaFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deltaFormat",
+				required: false
+			}]
+		}],
+		deltaSuffix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "deltaSuffix",
+				required: false
+			}]
+		}],
+		timeFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeFormat",
+				required: false
+			}]
+		}],
+		axisFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "axisFormat",
+				required: false
+			}]
+		}],
+		startLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "startLabel",
+				required: false
+			}]
+		}],
+		timeColumnLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "timeColumnLabel",
+				required: false
+			}]
+		}],
+		valueColumnLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueColumnLabel",
+				required: false
+			}]
+		}],
+		sparkline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sparkline",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		tooltipDelta: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltipDelta",
+				required: false
+			}]
+		}],
+		axisGap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "axisGap",
+				required: false
+			}]
+		}],
+		axisTicks: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "axisTicks",
+				required: false
+			}]
+		}],
+		rangeKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rangeKey",
+				required: false
+			}]
+		}],
+		svgRef: [{
+			type: i0.ViewChild,
+			args: ["svgRef", { isSignal: true }]
+		}],
+		lineRef: [{
+			type: i0.ViewChild,
+			args: ["lineRef", { isSignal: true }]
+		}],
+		endRef: [{
+			type: i0.ViewChild,
+			args: ["endRef", { isSignal: true }]
+		}]
+	}
+});
 export { UiLineChart };
-//# sourceMappingURL=joanroucoux-cairn-ui-line-chart.mjs.map
+
+//# sourceMappingURL=joanroucoux-cairn-ui-line-chart.mjs.map