@ojiepermana/angular 22.1.14 → 22.2.1

package/fesm2022/ojiepermana-angular-chart-primitives.mjs

@@ -1,39 +1,65 @@
-import * as i0 from '@angular/core';
-import { inject, input, computed, Component, viewChild, DestroyRef, signal, Directive, ElementRef, NgZone, PLATFORM_ID, afterNextRender, afterRenderEffect, contentChild, TemplateRef } from '@angular/core';
-import { CartesianContext, linearTicks, bandTicks, ChartContext, CategoricalViewportContext, ScatterViewportContext, nearestCategoryIndex, normalizeIndexRange, panIndexRange, panNumericDomain, indexRangeSize, normalizeNumericDomain, zoomNumericDomain, zoomIndexRange, seriesColorVar, effectiveIndexRange } from '@ojiepermana/angular/chart/core';
-import { DOCUMENT, isPlatformBrowser, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
-
-/**
- * X axis for a cartesian chart. Reads scales from `CartesianContext`.
- *
- * Renders as `<svg:g>` — must be placed inside the owning chart's SVG.
- */
-class ChartAxisX {
-    ctx = inject(CartesianContext);
-    /** Approximate tick count for linear (value) scales. */
-    tickCount = input(5, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
-    /** Show 6-px tick marks between the axis line and the labels. */
-    tickLine = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickLine" }] : /* istanbul ignore next */ []));
-    /** Formatter for numeric tick labels. */
-    tickFormat = input((v) => String(v), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickFormat" }] : /* istanbul ignore next */ []));
-    innerWidth = this.ctx.innerWidth;
-    transform = computed(() => `translate(0,${this.ctx.innerHeight()})`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
-    ticks = computed(() => {
-        const horizontal = this.ctx.orientation() === 'horizontal';
-        if (horizontal) {
-            const scale = this.ctx.valueScale();
-            return scale ? linearTicks(scale, this.tickCount(), this.tickFormat()) : [];
-        }
-        const scale = this.ctx.categoryScale();
-        return scale ? bandTicks(scale) : [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartAxisX, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChartAxisX, isStandalone: true, selector: "svg:g[ChartAxisX]", inputs: { tickCount: { classPropertyName: "tickCount", publicName: "tickCount", isSignal: true, isRequired: false, transformFunction: null }, tickLine: { classPropertyName: "tickLine", publicName: "tickLine", isSignal: true, isRequired: false, transformFunction: null }, tickFormat: { classPropertyName: "tickFormat", publicName: "tickFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.transform": "transform()" }, classAttribute: "chart-axis chart-axis-x text-muted-foreground" }, ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Directive, ElementRef, NgZone, PLATFORM_ID, TemplateRef, afterNextRender, afterRenderEffect, computed, contentChild, inject, input, signal, viewChild } from "@angular/core";
+import { CartesianContext, CategoricalViewportContext, ChartContext, ScatterViewportContext, bandTicks, effectiveIndexRange, indexRangeSize, linearTicks, nearestCategoryIndex, normalizeIndexRange, normalizeNumericDomain, panIndexRange, panNumericDomain, seriesColorVar, zoomIndexRange, zoomNumericDomain } from "@ojiepermana/angular/chart/core";
+import { DOCUMENT, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
+var ChartAxisX = class ChartAxisX {
+	ctx = inject(CartesianContext);
+	tickCount = input(5, ...ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []);
+	tickLine = input(true, ...ngDevMode ? [{ debugName: "tickLine" }] : /* istanbul ignore next */ []);
+	tickFormat = input((v) => String(v), ...ngDevMode ? [{ debugName: "tickFormat" }] : /* istanbul ignore next */ []);
+	innerWidth = this.ctx.innerWidth;
+	transform = computed(() => `translate(0,${this.ctx.innerHeight()})`, ...ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []);
+	ticks = computed(() => {
+		if (this.ctx.orientation() === "horizontal") {
+			const scale = this.ctx.valueScale();
+			return scale ? linearTicks(scale, this.tickCount(), this.tickFormat()) : [];
+		}
+		const scale = this.ctx.categoryScale();
+		return scale ? bandTicks(scale) : [];
+	}, ...ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChartAxisX,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ChartAxisX,
+		isStandalone: true,
+		selector: "svg:g[ChartAxisX]",
+		inputs: {
+			tickCount: {
+				classPropertyName: "tickCount",
+				publicName: "tickCount",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tickLine: {
+				classPropertyName: "tickLine",
+				publicName: "tickLine",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tickFormat: {
+				classPropertyName: "tickFormat",
+				publicName: "tickFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.transform": "transform()" },
+			classAttribute: "chart-axis chart-axis-x text-muted-foreground"
+		},
+		ngImport: i0,
+		template: `
     <svg:line class="stroke-border" [attr.x1]="0" [attr.x2]="innerWidth()" y1="0" y2="0" />
     @for (t of ticks(); track t.value) {
       <svg:g [attr.transform]="'translate(' + t.offset + ',0)'">
@@ -50,17 +76,24 @@ class ChartAxisX {
         </svg:text>
       </svg:g>
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartAxisX, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'svg:g[ChartAxisX]',
-                    host: {
-                        class: 'chart-axis chart-axis-x text-muted-foreground',
-                        '[attr.transform]': 'transform()',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartAxisX,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "svg:g[ChartAxisX]",
+			host: {
+				class: "chart-axis chart-axis-x text-muted-foreground",
+				"[attr.transform]": "transform()"
+			},
+			template: `
     <svg:line class="stroke-border" [attr.x1]="0" [attr.x2]="innerWidth()" y1="0" y2="0" />
     @for (t of ticks(); track t.value) {
       <svg:g [attr.transform]="'translate(' + t.offset + ',0)'">
@@ -77,36 +110,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </svg:text>
       </svg:g>
     }
-  `,
-                }]
-        }], propDecorators: { tickCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickCount", required: false }] }], tickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickLine", required: false }] }], tickFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickFormat", required: false }] }] } });
-
-/**
- * Y axis for a cartesian chart. Reads scales from `CartesianContext`.
- *
- * Renders as `<svg:g>` — must be placed inside the owning chart's SVG.
- */
-class ChartAxisY {
-    ctx = inject(CartesianContext);
-    tickCount = input(5, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
-    tickLine = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickLine" }] : /* istanbul ignore next */ []));
-    tickFormat = input((v) => String(v), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickFormat" }] : /* istanbul ignore next */ []));
-    innerHeight = this.ctx.innerHeight;
-    ticks = computed(() => {
-        const horizontal = this.ctx.orientation() === 'horizontal';
-        if (horizontal) {
-            const scale = this.ctx.categoryScale();
-            return scale ? bandTicks(scale) : [];
-        }
-        const scale = this.ctx.valueScale();
-        return scale ? linearTicks(scale, this.tickCount(), this.tickFormat()) : [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartAxisY, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChartAxisY, isStandalone: true, selector: "svg:g[ChartAxisY]", inputs: { tickCount: { classPropertyName: "tickCount", publicName: "tickCount", isSignal: true, isRequired: false, transformFunction: null }, tickLine: { classPropertyName: "tickLine", publicName: "tickLine", isSignal: true, isRequired: false, transformFunction: null }, tickFormat: { classPropertyName: "tickFormat", publicName: "tickFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "chart-axis chart-axis-y text-muted-foreground" }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	propDecorators: {
+		tickCount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tickCount",
+				required: false
+			}]
+		}],
+		tickLine: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tickLine",
+				required: false
+			}]
+		}],
+		tickFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tickFormat",
+				required: false
+			}]
+		}]
+	}
+});
+var ChartAxisY = class ChartAxisY {
+	ctx = inject(CartesianContext);
+	tickCount = input(5, ...ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []);
+	tickLine = input(true, ...ngDevMode ? [{ debugName: "tickLine" }] : /* istanbul ignore next */ []);
+	tickFormat = input((v) => String(v), ...ngDevMode ? [{ debugName: "tickFormat" }] : /* istanbul ignore next */ []);
+	innerHeight = this.ctx.innerHeight;
+	ticks = computed(() => {
+		if (this.ctx.orientation() === "horizontal") {
+			const scale = this.ctx.categoryScale();
+			return scale ? bandTicks(scale) : [];
+		}
+		const scale = this.ctx.valueScale();
+		return scale ? linearTicks(scale, this.tickCount(), this.tickFormat()) : [];
+	}, ...ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChartAxisY,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ChartAxisY,
+		isStandalone: true,
+		selector: "svg:g[ChartAxisY]",
+		inputs: {
+			tickCount: {
+				classPropertyName: "tickCount",
+				publicName: "tickCount",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tickLine: {
+				classPropertyName: "tickLine",
+				publicName: "tickLine",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tickFormat: {
+				classPropertyName: "tickFormat",
+				publicName: "tickFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "chart-axis chart-axis-y text-muted-foreground" },
+		ngImport: i0,
+		template: `
     <svg:line class="stroke-border" x1="0" x2="0" [attr.y1]="0" [attr.y2]="innerHeight()" />
     @for (t of ticks(); track t.value) {
       <svg:g [attr.transform]="'translate(0,' + t.offset + ')'">
@@ -124,16 +211,21 @@ class ChartAxisY {
         </svg:text>
       </svg:g>
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartAxisY, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'svg:g[ChartAxisY]',
-                    host: {
-                        class: 'chart-axis chart-axis-y text-muted-foreground',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartAxisY,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "svg:g[ChartAxisY]",
+			host: { class: "chart-axis chart-axis-y text-muted-foreground" },
+			template: `
     <svg:line class="stroke-border" x1="0" x2="0" [attr.y1]="0" [attr.y2]="innerHeight()" />
     @for (t of ticks(); track t.value) {
       <svg:g [attr.transform]="'translate(0,' + t.offset + ')'">
@@ -151,35 +243,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </svg:text>
       </svg:g>
     }
-  `,
-                }]
-        }], propDecorators: { tickCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickCount", required: false }] }], tickLine: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickLine", required: false }] }], tickFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickFormat", required: false }] }] } });
-
-/**
- * Horizontal / vertical grid lines for the cartesian plotting area.
- *
- * Reads tick positions from `CartesianContext.valueScale`. Direction of the
- * grid lines follows `orientation`:
- *  - vertical   → horizontal grid lines (one per y-tick)
- *  - horizontal → vertical grid lines (one per x-tick)
- */
-class ChartGrid {
-    ctx = inject(CartesianContext);
-    tickCount = input(5, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
-    ticks = computed(() => {
-        const scale = this.ctx.valueScale();
-        return scale ? linearTicks(scale, this.tickCount()) : [];
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
-    line = (offset) => {
-        if (this.ctx.orientation() === 'vertical') {
-            return { x1: 0, x2: this.ctx.innerWidth(), y1: offset, y2: offset };
-        }
-        return { x1: offset, x2: offset, y1: 0, y2: this.ctx.innerHeight() };
-    };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChartGrid, isStandalone: true, selector: "svg:g[ChartGrid]", inputs: { tickCount: { classPropertyName: "tickCount", publicName: "tickCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "chart-grid text-border" }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	propDecorators: {
+		tickCount: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tickCount",
+				required: false
+			}]
+		}],
+		tickLine: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tickLine",
+				required: false
+			}]
+		}],
+		tickFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tickFormat",
+				required: false
+			}]
+		}]
+	}
+});
+var ChartGrid = class ChartGrid {
+	ctx = inject(CartesianContext);
+	tickCount = input(5, ...ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []);
+	ticks = computed(() => {
+		const scale = this.ctx.valueScale();
+		return scale ? linearTicks(scale, this.tickCount()) : [];
+	}, ...ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []);
+	line = (offset) => {
+		if (this.ctx.orientation() === "vertical") return {
+			x1: 0,
+			x2: this.ctx.innerWidth(),
+			y1: offset,
+			y2: offset
+		};
+		return {
+			x1: offset,
+			x2: offset,
+			y1: 0,
+			y2: this.ctx.innerHeight()
+		};
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChartGrid,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ChartGrid,
+		isStandalone: true,
+		selector: "svg:g[ChartGrid]",
+		inputs: { tickCount: {
+			classPropertyName: "tickCount",
+			publicName: "tickCount",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { classAttribute: "chart-grid text-border" },
+		ngImport: i0,
+		template: `
     @for (t of ticks(); track t.value) {
       <svg:line
         class="stroke-border"
@@ -190,16 +328,21 @@ class ChartGrid {
         [attr.y2]="line(t.offset).y2"
       />
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartGrid, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'svg:g[ChartGrid]',
-                    host: {
-                        class: 'chart-grid text-border',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartGrid,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "svg:g[ChartGrid]",
+			host: { class: "chart-grid text-border" },
+			template: `
     @for (t of ticks(); track t.value) {
       <svg:line
         class="stroke-border"
@@ -210,37 +353,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         [attr.y2]="line(t.offset).y2"
       />
     }
-  `,
-                }]
-        }], propDecorators: { tickCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "tickCount", required: false }] }] } });
-
-/**
- * Crosshair primitive — a line drawn through the currently active data point
- * perpendicular to the categorical axis. Reads `activePoint` from
- * `ChartContext` and the scales from `CartesianContext`.
- *
- * Place inside a cartesian chart's SVG inner group.
- */
-class ChartCrosshair {
-    root = inject(ChartContext);
-    cart = inject(CartesianContext);
-    line = computed(() => {
-        const active = this.root.activePoint();
-        const scale = this.cart.categoryScale();
-        const categories = this.cart.categories();
-        if (!active || !scale || active.index < 0 || active.index >= categories.length) {
-            return null;
-        }
-        const base = scale(categories[active.index]) ?? 0;
-        const pos = base + scale.bandwidth() / 2;
-        if (this.cart.orientation() === 'vertical') {
-            return { x1: pos, x2: pos, y1: 0, y2: this.cart.innerHeight() };
-        }
-        return { x1: 0, x2: this.cart.innerWidth(), y1: pos, y2: pos };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartCrosshair, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChartCrosshair, isStandalone: true, selector: "svg:g[ChartCrosshair]", host: { classAttribute: "chart-crosshair" }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	propDecorators: { tickCount: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "tickCount",
+			required: false
+		}]
+	}] }
+});
+var ChartCrosshair = class ChartCrosshair {
+	root = inject(ChartContext);
+	cart = inject(CartesianContext);
+	line = computed(() => {
+		const active = this.root.activePoint();
+		const scale = this.cart.categoryScale();
+		const categories = this.cart.categories();
+		if (!active || !scale || active.index < 0 || active.index >= categories.length) return null;
+		const pos = (scale(categories[active.index]) ?? 0) + scale.bandwidth() / 2;
+		if (this.cart.orientation() === "vertical") return {
+			x1: pos,
+			x2: pos,
+			y1: 0,
+			y2: this.cart.innerHeight()
+		};
+		return {
+			x1: 0,
+			x2: this.cart.innerWidth(),
+			y1: pos,
+			y2: pos
+		};
+	}, ...ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChartCrosshair,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ChartCrosshair,
+		isStandalone: true,
+		selector: "svg:g[ChartCrosshair]",
+		host: { classAttribute: "chart-crosshair" },
+		ngImport: i0,
+		template: `
     @if (line(); as l) {
       <svg:line
         class="stroke-border"
@@ -251,14 +414,21 @@ class ChartCrosshair {
         [attr.y2]="l.y2"
       />
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartCrosshair, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'svg:g[ChartCrosshair]',
-                    host: { class: 'chart-crosshair' },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartCrosshair,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "svg:g[ChartCrosshair]",
+			host: { class: "chart-crosshair" },
+			template: `
     @if (line(); as l) {
       <svg:line
         class="stroke-border"
@@ -269,352 +439,311 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         [attr.y2]="l.y2"
       />
     }
-  `,
-                }]
-        }] });
-
+  `
+		}]
+	}]
+});
 function clamp(value, min, max) {
-    return Math.min(max, Math.max(min, value));
+	return Math.min(max, Math.max(min, value));
 }
 function sameDomain(a, b) {
-    return Math.abs(a[0] - b[0]) < 1e-9 && Math.abs(a[1] - b[1]) < 1e-9;
+	return Math.abs(a[0] - b[0]) < 1e-9 && Math.abs(a[1] - b[1]) < 1e-9;
 }
-class ChartBrush {
-    hitbox = viewChild.required('hitbox', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hitbox" }] : /* istanbul ignore next */ []));
-    cart = inject(CartesianContext, { optional: true });
-    categorical = inject(CategoricalViewportContext, { optional: true });
-    scatter = inject(ScatterViewportContext, { optional: true });
-    document = inject(DOCUMENT);
-    /**
-     * Torn down the moment a drag ends. Permanent `window:` bindings marked the
-     * view dirty for every pointer move anywhere on the page, brush or no brush.
-     */
-    detachDragListeners = null;
-    constructor() {
-        inject(DestroyRef).onDestroy(() => this.detachDragListeners?.());
-    }
-    mode = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-    activePointerId = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "activePointerId" }] : /* istanbul ignore next */ []));
-    categoryStartIndex = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "categoryStartIndex" }] : /* istanbul ignore next */ []));
-    categoryPanStart = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "categoryPanStart" }] : /* istanbul ignore next */ []));
-    scatterBrush = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scatterBrush" }] : /* istanbul ignore next */ []));
-    scatterPan = signal(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scatterPan" }] : /* istanbul ignore next */ []));
-    width = computed(() => this.scatter?.innerWidth() ?? this.cart?.innerWidth() ?? 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
-    height = computed(() => this.scatter?.innerHeight() ?? this.cart?.innerHeight() ?? 0, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
-    categoryPreview = computed(() => {
-        const cart = this.cart;
-        const viewport = this.categorical;
-        const range = viewport?.brushRange();
-        const scale = cart?.categoryScale();
-        const categories = cart?.categories() ?? [];
-        if (!cart || !viewport || !range || !scale || categories.length === 0) {
-            return null;
-        }
-        const visibleStart = viewport.zoomRange()?.startIndex ?? 0;
-        const startVisible = range.startIndex - visibleStart;
-        const endVisible = range.endIndex - visibleStart;
-        if (startVisible < 0 || endVisible >= categories.length) {
-            return null;
-        }
-        const first = scale(categories[startVisible]) ?? 0;
-        const last = (scale(categories[endVisible]) ?? 0) + scale.bandwidth();
-        if (cart.orientation() === 'vertical') {
-            return {
-                x: Math.min(first, last),
-                y: 0,
-                width: Math.abs(last - first),
-                height: cart.innerHeight(),
-            };
-        }
-        return {
-            x: 0,
-            y: Math.min(first, last),
-            width: cart.innerWidth(),
-            height: Math.abs(last - first),
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "categoryPreview" }] : /* istanbul ignore next */ []));
-    scatterPreviewRect = computed(() => {
-        const preview = this.scatterBrush();
-        if (!preview) {
-            return null;
-        }
-        return {
-            x: Math.min(preview.start.x, preview.current.x),
-            y: Math.min(preview.start.y, preview.current.y),
-            width: Math.abs(preview.current.x - preview.start.x),
-            height: Math.abs(preview.current.y - preview.start.y),
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "scatterPreviewRect" }] : /* istanbul ignore next */ []));
-    onPointerDown(event) {
-        if (this.activePointerId() != null) {
-            return;
-        }
-        const local = this.localPoint(event);
-        if (!local) {
-            return;
-        }
-        if (this.scatter) {
-            if (!this.scatter.fullXDomain() || !this.scatter.fullYDomain()) {
-                return;
-            }
-            event.preventDefault();
-            this.beginDrag(event);
-            this.onScatterPointerDown(event, local);
-            return;
-        }
-        if (!this.cart || !this.categorical) {
-            return;
-        }
-        const index = nearestCategoryIndex({
-            categoryScale: this.cart.categoryScale,
-            categories: this.cart.categories,
-            orientation: this.cart.orientation,
-        }, local.x, local.y);
-        if (index < 0) {
-            return;
-        }
-        event.preventDefault();
-        this.beginDrag(event);
-        const visibleStart = this.categorical.zoomRange()?.startIndex ?? 0;
-        const absoluteIndex = visibleStart + index;
-        if (event.pointerType === 'touch' && this.categorical.hasZoom()) {
-            this.mode.set('category-pan');
-            this.categoryPanStart.set({
-                coord: this.pointerAxis(local),
-                range: this.categorical.zoomRange(),
-            });
-            return;
-        }
-        this.mode.set('category-brush');
-        this.categoryStartIndex.set(absoluteIndex);
-        this.categorical.brushRange.set({ startIndex: absoluteIndex, endIndex: absoluteIndex });
-    }
-    onPointerMove(event) {
-        if (this.activePointerId() !== event.pointerId) {
-            return;
-        }
-        const local = this.localPoint(event);
-        if (!local) {
-            return;
-        }
-        if (this.mode() === 'category-brush' && this.cart && this.categorical) {
-            const startIndex = this.categoryStartIndex();
-            if (startIndex == null) {
-                return;
-            }
-            const index = nearestCategoryIndex({
-                categoryScale: this.cart.categoryScale,
-                categories: this.cart.categories,
-                orientation: this.cart.orientation,
-            }, local.x, local.y);
-            if (index < 0) {
-                return;
-            }
-            const visibleStart = this.categorical.zoomRange()?.startIndex ?? 0;
-            this.categorical.brushRange.set(normalizeIndexRange(startIndex, visibleStart + index, this.categorical.dataCount()));
-            return;
-        }
-        if (this.mode() === 'category-pan' && this.cart && this.categorical) {
-            const pan = this.categoryPanStart();
-            if (!pan) {
-                return;
-            }
-            const scale = this.cart.categoryScale();
-            const step = scale?.step?.() ?? scale?.bandwidth() ?? 0;
-            if (step <= 0) {
-                return;
-            }
-            const deltaSteps = Math.round((pan.coord - this.pointerAxis(local)) / step);
-            this.categorical.zoomRange.set(panIndexRange(pan.range, this.categorical.dataCount(), deltaSteps));
-            return;
-        }
-        if (this.mode() === 'scatter-brush') {
-            const preview = this.scatterBrush();
-            if (!preview) {
-                return;
-            }
-            this.scatterBrush.set({ start: preview.start, current: local });
-            return;
-        }
-        if (this.mode() === 'scatter-pan' && this.scatter) {
-            const pan = this.scatterPan();
-            const xScale = this.scatter.xScale();
-            const yScale = this.scatter.yScale();
-            const fullX = this.scatter.fullXDomain();
-            const fullY = this.scatter.fullYDomain();
-            if (!pan || !xScale || !yScale || !fullX || !fullY) {
-                return;
-            }
-            const deltaX = xScale.invert(pan.start.x) - xScale.invert(local.x);
-            const deltaY = yScale.invert(pan.start.y) - yScale.invert(local.y);
-            this.scatter.zoomXDomain.set(panNumericDomain(pan.xDomain, fullX, deltaX));
-            this.scatter.zoomYDomain.set(panNumericDomain(pan.yDomain, fullY, deltaY));
-        }
-    }
-    onPointerUp(event) {
-        if (event && this.activePointerId() !== event.pointerId) {
-            return;
-        }
-        if (this.mode() === 'category-brush' && this.categorical) {
-            const range = this.categorical.brushRange();
-            if (range && indexRangeSize(range, this.categorical.dataCount()) > 1) {
-                this.categorical.zoomRange.set(range);
-            }
-            this.categorical.brushRange.set(null);
-        }
-        if (this.mode() === 'scatter-brush' && this.scatter) {
-            const preview = this.scatterBrush();
-            const xScale = this.scatter.xScale();
-            const yScale = this.scatter.yScale();
-            const fullX = this.scatter.fullXDomain();
-            const fullY = this.scatter.fullYDomain();
-            if (preview && xScale && yScale && fullX && fullY) {
-                const width = Math.abs(preview.current.x - preview.start.x);
-                const height = Math.abs(preview.current.y - preview.start.y);
-                if (width >= 6 && height >= 6) {
-                    const nextX = normalizeNumericDomain(xScale.invert(preview.start.x), xScale.invert(preview.current.x));
-                    const nextY = normalizeNumericDomain(yScale.invert(preview.start.y), yScale.invert(preview.current.y));
-                    this.scatter.zoomXDomain.set(sameDomain(nextX, fullX) ? null : nextX);
-                    this.scatter.zoomYDomain.set(sameDomain(nextY, fullY) ? null : nextY);
-                }
-            }
-            this.scatterBrush.set(null);
-        }
-        this.mode.set(null);
-        this.categoryStartIndex.set(null);
-        this.categoryPanStart.set(null);
-        this.scatterPan.set(null);
-        this.endDrag(event);
-    }
-    onPointerCancel(event) {
-        if (this.activePointerId() !== event.pointerId) {
-            return;
-        }
-        this.mode.set(null);
-        this.categorical?.brushRange.set(null);
-        this.scatterBrush.set(null);
-        this.categoryStartIndex.set(null);
-        this.categoryPanStart.set(null);
-        this.scatterPan.set(null);
-        this.endDrag(event);
-    }
-    onWheel(event) {
-        const local = this.localPoint(event);
-        if (!local) {
-            return;
-        }
-        event.preventDefault();
-        if (this.scatter) {
-            const xScale = this.scatter.xScale();
-            const yScale = this.scatter.yScale();
-            const fullX = this.scatter.fullXDomain();
-            const fullY = this.scatter.fullYDomain();
-            if (!xScale || !yScale || !fullX || !fullY) {
-                return;
-            }
-            const factor = event.deltaY < 0 ? 0.8 : 1.25;
-            const currentX = this.scatter.zoomXDomain() ?? fullX;
-            const currentY = this.scatter.zoomYDomain() ?? fullY;
-            const nextX = zoomNumericDomain(currentX, fullX, xScale.invert(local.x), factor);
-            const nextY = zoomNumericDomain(currentY, fullY, yScale.invert(local.y), factor);
-            this.scatter.zoomXDomain.set(sameDomain(nextX, fullX) ? null : nextX);
-            this.scatter.zoomYDomain.set(sameDomain(nextY, fullY) ? null : nextY);
-            return;
-        }
-        if (!this.cart || !this.categorical) {
-            return;
-        }
-        const visibleIndex = nearestCategoryIndex({
-            categoryScale: this.cart.categoryScale,
-            categories: this.cart.categories,
-            orientation: this.cart.orientation,
-        }, local.x, local.y);
-        if (visibleIndex < 0) {
-            return;
-        }
-        const anchor = (this.categorical.zoomRange()?.startIndex ?? 0) + visibleIndex;
-        const factor = event.deltaY < 0 ? 0.75 : 1.25;
-        this.categorical.zoomRange.set(zoomIndexRange(this.categorical.zoomRange(), this.categorical.dataCount(), anchor, factor));
-        this.categorical.brushRange.set(null);
-    }
-    resetZoom() {
-        this.categorical?.resetZoom();
-        this.scatter?.resetZoom();
-        this.scatterBrush.set(null);
-    }
-    beginDrag(event) {
-        this.activePointerId.set(event.pointerId);
-        this.hitbox().nativeElement.setPointerCapture(event.pointerId);
-        const move = (next) => this.onPointerMove(next);
-        const up = (next) => this.onPointerUp(next);
-        const cancel = (next) => this.onPointerCancel(next);
-        this.document.addEventListener('pointermove', move);
-        this.document.addEventListener('pointerup', up);
-        this.document.addEventListener('pointercancel', cancel);
-        this.detachDragListeners = () => {
-            this.document.removeEventListener('pointermove', move);
-            this.document.removeEventListener('pointerup', up);
-            this.document.removeEventListener('pointercancel', cancel);
-            this.detachDragListeners = null;
-        };
-    }
-    endDrag(event) {
-        if (event && this.hitbox().nativeElement.hasPointerCapture(event.pointerId)) {
-            this.hitbox().nativeElement.releasePointerCapture(event.pointerId);
-        }
-        this.detachDragListeners?.();
-        this.activePointerId.set(null);
-    }
-    onScatterPointerDown(event, local) {
-        const fullX = this.scatter?.fullXDomain();
-        const fullY = this.scatter?.fullYDomain();
-        if (!this.scatter || !fullX || !fullY) {
-            return;
-        }
-        if (event.pointerType === 'touch' && this.scatter.hasZoom()) {
-            this.mode.set('scatter-pan');
-            this.scatterPan.set({
-                start: local,
-                xDomain: this.scatter.zoomXDomain() ?? fullX,
-                yDomain: this.scatter.zoomYDomain() ?? fullY,
-            });
-            return;
-        }
-        this.mode.set('scatter-brush');
-        this.scatterBrush.set({ start: local, current: local });
-    }
-    localPoint(event) {
-        const hitbox = this.hitbox()?.nativeElement;
-        const width = this.width();
-        const height = this.height();
-        if (!hitbox || width <= 0 || height <= 0) {
-            return null;
-        }
-        const rect = hitbox.getBoundingClientRect();
-        if (rect.width <= 0 || rect.height <= 0) {
-            return null;
-        }
-        return {
-            x: clamp(((event.clientX - rect.left) / rect.width) * width, 0, width),
-            y: clamp(((event.clientY - rect.top) / rect.height) * height, 0, height),
-        };
-    }
-    pointerAxis(local) {
-        return this.cart?.orientation() === 'horizontal' ? local.y : local.x;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartBrush, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChartBrush, isStandalone: true, selector: "svg:g[ChartBrush]", host: { classAttribute: "chart-brush" }, viewQueries: [{ propertyName: "hitbox", first: true, predicate: ["hitbox"], descendants: true, isSignal: true }], ngImport: i0, template: `
+var ChartBrush = class ChartBrush {
+	hitbox = viewChild.required("hitbox", ...ngDevMode ? [{ debugName: "hitbox" }] : /* istanbul ignore next */ []);
+	cart = inject(CartesianContext, { optional: true });
+	categorical = inject(CategoricalViewportContext, { optional: true });
+	scatter = inject(ScatterViewportContext, { optional: true });
+	document = inject(DOCUMENT);
+	detachDragListeners = null;
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.detachDragListeners?.());
+	}
+	mode = signal(null, ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	activePointerId = signal(null, ...ngDevMode ? [{ debugName: "activePointerId" }] : /* istanbul ignore next */ []);
+	categoryStartIndex = signal(null, ...ngDevMode ? [{ debugName: "categoryStartIndex" }] : /* istanbul ignore next */ []);
+	categoryPanStart = signal(null, ...ngDevMode ? [{ debugName: "categoryPanStart" }] : /* istanbul ignore next */ []);
+	scatterBrush = signal(null, ...ngDevMode ? [{ debugName: "scatterBrush" }] : /* istanbul ignore next */ []);
+	scatterPan = signal(null, ...ngDevMode ? [{ debugName: "scatterPan" }] : /* istanbul ignore next */ []);
+	width = computed(() => this.scatter?.innerWidth() ?? this.cart?.innerWidth() ?? 0, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = computed(() => this.scatter?.innerHeight() ?? this.cart?.innerHeight() ?? 0, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	categoryPreview = computed(() => {
+		const cart = this.cart;
+		const viewport = this.categorical;
+		const range = viewport?.brushRange();
+		const scale = cart?.categoryScale();
+		const categories = cart?.categories() ?? [];
+		if (!cart || !viewport || !range || !scale || categories.length === 0) return null;
+		const visibleStart = viewport.zoomRange()?.startIndex ?? 0;
+		const startVisible = range.startIndex - visibleStart;
+		const endVisible = range.endIndex - visibleStart;
+		if (startVisible < 0 || endVisible >= categories.length) return null;
+		const first = scale(categories[startVisible]) ?? 0;
+		const last = (scale(categories[endVisible]) ?? 0) + scale.bandwidth();
+		if (cart.orientation() === "vertical") return {
+			x: Math.min(first, last),
+			y: 0,
+			width: Math.abs(last - first),
+			height: cart.innerHeight()
+		};
+		return {
+			x: 0,
+			y: Math.min(first, last),
+			width: cart.innerWidth(),
+			height: Math.abs(last - first)
+		};
+	}, ...ngDevMode ? [{ debugName: "categoryPreview" }] : /* istanbul ignore next */ []);
+	scatterPreviewRect = computed(() => {
+		const preview = this.scatterBrush();
+		if (!preview) return null;
+		return {
+			x: Math.min(preview.start.x, preview.current.x),
+			y: Math.min(preview.start.y, preview.current.y),
+			width: Math.abs(preview.current.x - preview.start.x),
+			height: Math.abs(preview.current.y - preview.start.y)
+		};
+	}, ...ngDevMode ? [{ debugName: "scatterPreviewRect" }] : /* istanbul ignore next */ []);
+	onPointerDown(event) {
+		if (this.activePointerId() != null) return;
+		const local = this.localPoint(event);
+		if (!local) return;
+		if (this.scatter) {
+			if (!this.scatter.fullXDomain() || !this.scatter.fullYDomain()) return;
+			event.preventDefault();
+			this.beginDrag(event);
+			this.onScatterPointerDown(event, local);
+			return;
+		}
+		if (!this.cart || !this.categorical) return;
+		const index = nearestCategoryIndex({
+			categoryScale: this.cart.categoryScale,
+			categories: this.cart.categories,
+			orientation: this.cart.orientation
+		}, local.x, local.y);
+		if (index < 0) return;
+		event.preventDefault();
+		this.beginDrag(event);
+		const absoluteIndex = (this.categorical.zoomRange()?.startIndex ?? 0) + index;
+		if (event.pointerType === "touch" && this.categorical.hasZoom()) {
+			this.mode.set("category-pan");
+			this.categoryPanStart.set({
+				coord: this.pointerAxis(local),
+				range: this.categorical.zoomRange()
+			});
+			return;
+		}
+		this.mode.set("category-brush");
+		this.categoryStartIndex.set(absoluteIndex);
+		this.categorical.brushRange.set({
+			startIndex: absoluteIndex,
+			endIndex: absoluteIndex
+		});
+	}
+	onPointerMove(event) {
+		if (this.activePointerId() !== event.pointerId) return;
+		const local = this.localPoint(event);
+		if (!local) return;
+		if (this.mode() === "category-brush" && this.cart && this.categorical) {
+			const startIndex = this.categoryStartIndex();
+			if (startIndex == null) return;
+			const index = nearestCategoryIndex({
+				categoryScale: this.cart.categoryScale,
+				categories: this.cart.categories,
+				orientation: this.cart.orientation
+			}, local.x, local.y);
+			if (index < 0) return;
+			const visibleStart = this.categorical.zoomRange()?.startIndex ?? 0;
+			this.categorical.brushRange.set(normalizeIndexRange(startIndex, visibleStart + index, this.categorical.dataCount()));
+			return;
+		}
+		if (this.mode() === "category-pan" && this.cart && this.categorical) {
+			const pan = this.categoryPanStart();
+			if (!pan) return;
+			const scale = this.cart.categoryScale();
+			const step = scale?.step?.() ?? scale?.bandwidth() ?? 0;
+			if (step <= 0) return;
+			const deltaSteps = Math.round((pan.coord - this.pointerAxis(local)) / step);
+			this.categorical.zoomRange.set(panIndexRange(pan.range, this.categorical.dataCount(), deltaSteps));
+			return;
+		}
+		if (this.mode() === "scatter-brush") {
+			const preview = this.scatterBrush();
+			if (!preview) return;
+			this.scatterBrush.set({
+				start: preview.start,
+				current: local
+			});
+			return;
+		}
+		if (this.mode() === "scatter-pan" && this.scatter) {
+			const pan = this.scatterPan();
+			const xScale = this.scatter.xScale();
+			const yScale = this.scatter.yScale();
+			const fullX = this.scatter.fullXDomain();
+			const fullY = this.scatter.fullYDomain();
+			if (!pan || !xScale || !yScale || !fullX || !fullY) return;
+			const deltaX = xScale.invert(pan.start.x) - xScale.invert(local.x);
+			const deltaY = yScale.invert(pan.start.y) - yScale.invert(local.y);
+			this.scatter.zoomXDomain.set(panNumericDomain(pan.xDomain, fullX, deltaX));
+			this.scatter.zoomYDomain.set(panNumericDomain(pan.yDomain, fullY, deltaY));
+		}
+	}
+	onPointerUp(event) {
+		if (event && this.activePointerId() !== event.pointerId) return;
+		if (this.mode() === "category-brush" && this.categorical) {
+			const range = this.categorical.brushRange();
+			if (range && indexRangeSize(range, this.categorical.dataCount()) > 1) this.categorical.zoomRange.set(range);
+			this.categorical.brushRange.set(null);
+		}
+		if (this.mode() === "scatter-brush" && this.scatter) {
+			const preview = this.scatterBrush();
+			const xScale = this.scatter.xScale();
+			const yScale = this.scatter.yScale();
+			const fullX = this.scatter.fullXDomain();
+			const fullY = this.scatter.fullYDomain();
+			if (preview && xScale && yScale && fullX && fullY) {
+				const width = Math.abs(preview.current.x - preview.start.x);
+				const height = Math.abs(preview.current.y - preview.start.y);
+				if (width >= 6 && height >= 6) {
+					const nextX = normalizeNumericDomain(xScale.invert(preview.start.x), xScale.invert(preview.current.x));
+					const nextY = normalizeNumericDomain(yScale.invert(preview.start.y), yScale.invert(preview.current.y));
+					this.scatter.zoomXDomain.set(sameDomain(nextX, fullX) ? null : nextX);
+					this.scatter.zoomYDomain.set(sameDomain(nextY, fullY) ? null : nextY);
+				}
+			}
+			this.scatterBrush.set(null);
+		}
+		this.mode.set(null);
+		this.categoryStartIndex.set(null);
+		this.categoryPanStart.set(null);
+		this.scatterPan.set(null);
+		this.endDrag(event);
+	}
+	onPointerCancel(event) {
+		if (this.activePointerId() !== event.pointerId) return;
+		this.mode.set(null);
+		this.categorical?.brushRange.set(null);
+		this.scatterBrush.set(null);
+		this.categoryStartIndex.set(null);
+		this.categoryPanStart.set(null);
+		this.scatterPan.set(null);
+		this.endDrag(event);
+	}
+	onWheel(event) {
+		const local = this.localPoint(event);
+		if (!local) return;
+		event.preventDefault();
+		if (this.scatter) {
+			const xScale = this.scatter.xScale();
+			const yScale = this.scatter.yScale();
+			const fullX = this.scatter.fullXDomain();
+			const fullY = this.scatter.fullYDomain();
+			if (!xScale || !yScale || !fullX || !fullY) return;
+			const factor = event.deltaY < 0 ? .8 : 1.25;
+			const currentX = this.scatter.zoomXDomain() ?? fullX;
+			const currentY = this.scatter.zoomYDomain() ?? fullY;
+			const nextX = zoomNumericDomain(currentX, fullX, xScale.invert(local.x), factor);
+			const nextY = zoomNumericDomain(currentY, fullY, yScale.invert(local.y), factor);
+			this.scatter.zoomXDomain.set(sameDomain(nextX, fullX) ? null : nextX);
+			this.scatter.zoomYDomain.set(sameDomain(nextY, fullY) ? null : nextY);
+			return;
+		}
+		if (!this.cart || !this.categorical) return;
+		const visibleIndex = nearestCategoryIndex({
+			categoryScale: this.cart.categoryScale,
+			categories: this.cart.categories,
+			orientation: this.cart.orientation
+		}, local.x, local.y);
+		if (visibleIndex < 0) return;
+		const anchor = (this.categorical.zoomRange()?.startIndex ?? 0) + visibleIndex;
+		const factor = event.deltaY < 0 ? .75 : 1.25;
+		this.categorical.zoomRange.set(zoomIndexRange(this.categorical.zoomRange(), this.categorical.dataCount(), anchor, factor));
+		this.categorical.brushRange.set(null);
+	}
+	resetZoom() {
+		this.categorical?.resetZoom();
+		this.scatter?.resetZoom();
+		this.scatterBrush.set(null);
+	}
+	beginDrag(event) {
+		this.activePointerId.set(event.pointerId);
+		this.hitbox().nativeElement.setPointerCapture(event.pointerId);
+		const move = (next) => this.onPointerMove(next);
+		const up = (next) => this.onPointerUp(next);
+		const cancel = (next) => this.onPointerCancel(next);
+		this.document.addEventListener("pointermove", move);
+		this.document.addEventListener("pointerup", up);
+		this.document.addEventListener("pointercancel", cancel);
+		this.detachDragListeners = () => {
+			this.document.removeEventListener("pointermove", move);
+			this.document.removeEventListener("pointerup", up);
+			this.document.removeEventListener("pointercancel", cancel);
+			this.detachDragListeners = null;
+		};
+	}
+	endDrag(event) {
+		if (event && this.hitbox().nativeElement.hasPointerCapture(event.pointerId)) this.hitbox().nativeElement.releasePointerCapture(event.pointerId);
+		this.detachDragListeners?.();
+		this.activePointerId.set(null);
+	}
+	onScatterPointerDown(event, local) {
+		const fullX = this.scatter?.fullXDomain();
+		const fullY = this.scatter?.fullYDomain();
+		if (!this.scatter || !fullX || !fullY) return;
+		if (event.pointerType === "touch" && this.scatter.hasZoom()) {
+			this.mode.set("scatter-pan");
+			this.scatterPan.set({
+				start: local,
+				xDomain: this.scatter.zoomXDomain() ?? fullX,
+				yDomain: this.scatter.zoomYDomain() ?? fullY
+			});
+			return;
+		}
+		this.mode.set("scatter-brush");
+		this.scatterBrush.set({
+			start: local,
+			current: local
+		});
+	}
+	localPoint(event) {
+		const hitbox = this.hitbox()?.nativeElement;
+		const width = this.width();
+		const height = this.height();
+		if (!hitbox || width <= 0 || height <= 0) return null;
+		const rect = hitbox.getBoundingClientRect();
+		if (rect.width <= 0 || rect.height <= 0) return null;
+		return {
+			x: clamp((event.clientX - rect.left) / rect.width * width, 0, width),
+			y: clamp((event.clientY - rect.top) / rect.height * height, 0, height)
+		};
+	}
+	pointerAxis(local) {
+		return this.cart?.orientation() === "horizontal" ? local.y : local.x;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChartBrush,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ChartBrush,
+		isStandalone: true,
+		selector: "svg:g[ChartBrush]",
+		host: { classAttribute: "chart-brush" },
+		viewQueries: [{
+			propertyName: "hitbox",
+			first: true,
+			predicate: ["hitbox"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     <svg:rect
       #hitbox
       class="fill-transparent touch-none"
@@ -648,14 +777,21 @@ class ChartBrush {
         stroke-dasharray="4 3"
       />
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartBrush, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'svg:g[ChartBrush]',
-                    host: { class: 'chart-brush' },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartBrush,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "svg:g[ChartBrush]",
+			host: { class: "chart-brush" },
+			template: `
     <svg:rect
       #hitbox
       class="fill-transparent touch-none"
@@ -689,268 +825,310 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         stroke-dasharray="4 3"
       />
     }
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { hitbox: [{ type: i0.ViewChild, args: ['hitbox', { isSignal: true }] }] } });
-
-/**
- * Attach to a chart's `<svg:svg>` to publish pointer-driven active-point
- * state into the surrounding `ChartContext`.
- *
- * Computes the local (x, y) of the pointer relative to the inner plotting
- * area, resolves the nearest category, and updates
- * `ChartContext.activePoint`. Clears it on `pointerleave`.
- */
-class ChartPointerTracker {
-    root = inject(ChartContext);
-    cart = inject(CartesianContext);
-    viewport = inject(CategoricalViewportContext, { optional: true });
-    onMove(event) {
-        const target = event.currentTarget;
-        if (!target)
-            return;
-        const rect = target.getBoundingClientRect();
-        if (rect.width === 0 || rect.height === 0)
-            return;
-        const { width, height } = this.root.dimensions();
-        // Map client coords → viewBox coords (SVG uses `0 0 width height`,
-        // preserveAspectRatio="none" so axes scale independently).
-        const scaleX = width / rect.width;
-        const scaleY = height / rect.height;
-        const viewX = (event.clientX - rect.left) * scaleX;
-        const viewY = (event.clientY - rect.top) * scaleY;
-        const margin = this.cart.margin();
-        const localX = viewX - margin.left;
-        const localY = viewY - margin.top;
-        const index = nearestCategoryIndex({
-            categoryScale: this.cart.categoryScale,
-            categories: this.cart.categories,
-            orientation: this.cart.orientation,
-        }, localX, localY);
-        if (index < 0) {
-            this.root.activePoint.set(null);
-            return;
-        }
-        this.root.activePoint.set({
-            index,
-            datumIndex: (this.viewport?.zoomRange()?.startIndex ?? 0) + index,
-            clientX: event.clientX,
-            clientY: event.clientY,
-        });
-    }
-    onLeave() {
-        this.root.activePoint.set(null);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartPointerTracker, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ChartPointerTracker, isStandalone: true, selector: "svg:svg[ChartPointerTracker]", host: { listeners: { "pointermove": "onMove($event)", "pointerleave": "onLeave()" } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartPointerTracker, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'svg:svg[ChartPointerTracker]',
-                    host: {
-                        '(pointermove)': 'onMove($event)',
-                        '(pointerleave)': 'onLeave()',
-                    },
-                }]
-        }] });
-
-/** Locate the chart container DOM in order to position the tooltip. */
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: { hitbox: [{
+		type: i0.ViewChild,
+		args: ["hitbox", { isSignal: true }]
+	}] }
+});
+var ChartPointerTracker = class ChartPointerTracker {
+	root = inject(ChartContext);
+	cart = inject(CartesianContext);
+	viewport = inject(CategoricalViewportContext, { optional: true });
+	onMove(event) {
+		const target = event.currentTarget;
+		if (!target) return;
+		const rect = target.getBoundingClientRect();
+		if (rect.width === 0 || rect.height === 0) return;
+		const { width, height } = this.root.dimensions();
+		const scaleX = width / rect.width;
+		const scaleY = height / rect.height;
+		const viewX = (event.clientX - rect.left) * scaleX;
+		const viewY = (event.clientY - rect.top) * scaleY;
+		const margin = this.cart.margin();
+		const localX = viewX - margin.left;
+		const localY = viewY - margin.top;
+		const index = nearestCategoryIndex({
+			categoryScale: this.cart.categoryScale,
+			categories: this.cart.categories,
+			orientation: this.cart.orientation
+		}, localX, localY);
+		if (index < 0) {
+			this.root.activePoint.set(null);
+			return;
+		}
+		this.root.activePoint.set({
+			index,
+			datumIndex: (this.viewport?.zoomRange()?.startIndex ?? 0) + index,
+			clientX: event.clientX,
+			clientY: event.clientY
+		});
+	}
+	onLeave() {
+		this.root.activePoint.set(null);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChartPointerTracker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: ChartPointerTracker,
+		isStandalone: true,
+		selector: "svg:svg[ChartPointerTracker]",
+		host: { listeners: {
+			"pointermove": "onMove($event)",
+			"pointerleave": "onLeave()"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartPointerTracker,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "svg:svg[ChartPointerTracker]",
+			host: {
+				"(pointermove)": "onMove($event)",
+				"(pointerleave)": "onLeave()"
+			}
+		}]
+	}]
+});
 function chartContainerElement(el) {
-    // Climb to the nearest `[data-chart]` (the ChartContainer host).
-    let node = el;
-    while (node && !node.hasAttribute('data-chart')) {
-        node = node.parentElement;
-    }
-    return node;
+	let node = el;
+	while (node && !node.hasAttribute("data-chart")) node = node.parentElement;
+	return node;
 }
-/** Card width assumed before the card has ever been laid out. */
 const FALLBACK_TOOLTIP_WIDTH = 128;
-/**
- * Tooltip overlay — renders the default tooltip card (or a user-supplied
- * template) anchored to the currently active data point.
- *
- * Shadcn-compatible knobs:
- * - `indicator="line"` / `"none"` / `"dashed"` — swap the row glyph
- * - `hideLabel` — drop the header row
- * - `label="Activities"` — override the header text
- * - `labelKey="activities"` — resolve the header from `config[labelKey].label`
- * - `labelFormatter` — transform the header (e.g. ISO date → long date)
- * - `formatter` — format per-row values (e.g. `"380 kcal"`)
- * - `valueKey` — for pie/radial/radar, read row value from a single field
- * - Icons are picked up automatically from `config[key].icon`.
- */
-class ChartTooltip {
-    root = inject(ChartContext);
-    host = inject((ElementRef));
-    zone = inject(NgZone);
-    platformId = inject(PLATFORM_ID);
-    destroyRef = inject(DestroyRef);
-    /**
-     * The two measurements `position` needs, taken outside it.
-     *
-     * `position` used to call `getBoundingClientRect` and read `offsetWidth`
-     * while the template evaluated it, which forced layout on every tick and left
-     * the tooltip stale after a resize — a computed only re-runs for the signals
-     * it reads, and a DOM box is not one.
-     */
-    containerBox = signal(null, { ...(ngDevMode ? { debugName: "containerBox" } : /* istanbul ignore next */ {}), equal: (a, b) => a?.left === b?.left && a?.top === b?.top && a?.width === b?.width });
-    tooltipBox = signal({ width: FALLBACK_TOOLTIP_WIDTH, height: 0 }, { ...(ngDevMode ? { debugName: "tooltipBox" } : /* istanbul ignore next */ {}), equal: (a, b) => a.width === b.width && a.height === b.height });
-    constructor() {
-        if (!isPlatformBrowser(this.platformId)) {
-            return;
-        }
-        afterNextRender(() => this.observeContainer());
-        afterRenderEffect(() => {
-            // Reading the payload ties the measurement to the card's content, so a
-            // wider row re-measures without the computed ever touching the DOM.
-            this.payload();
-            this.measure();
-        });
-    }
-    /** Data key on each datum whose value is the category label (x-axis). */
-    xKey = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
-    /** Data source (optional — if omitted tooltip reads from chart data via activePoint.datumIndex). */
-    data = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    /**
-     * Optional key for per-datum value lookup (pie / radial / radar datasets
-     * store values on a single field like `visitors` instead of one field per
-     * series). When set and `activePoint.seriesKey` is active, the tooltip row
-     * reads `datum[valueKey]` for its value.
-     */
-    valueKey = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
-    /** Indicator variant next to each row. Default `'dot'`. */
-    indicator = input('dot', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
-    /** Hide the header label entirely. */
-    hideLabel = input(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
-    /** Override the header label with a fixed string. Takes precedence over `labelKey`. */
-    label = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /**
-     * Resolve the header label from `config[labelKey].label`. Useful when the
-     * header should come from a config entry rather than the datum itself
-     * (shadcn's "Custom label" variant).
-     */
-    labelKey = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
-    /** Transform the final header string (e.g. ISO date → long date). */
-    labelFormatter = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "labelFormatter" }] : /* istanbul ignore next */ []));
-    /** Format each row's value (return string — HTML is not interpreted). */
-    formatter = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []));
-    customTpl = contentChild((TemplateRef), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "customTpl" }] : /* istanbul ignore next */ []));
-    visible = computed(() => this.root.activePoint() !== null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
-    payload = computed(() => {
-        const active = this.root.activePoint();
-        const rows = this.data();
-        if (!active || !rows)
-            return null;
-        const dataIndex = active.datumIndex != null && active.datumIndex < rows.length
-            ? active.datumIndex
-            : active.index;
-        if (dataIndex < 0 || dataIndex >= rows.length)
-            return null;
-        const cfg = this.root.config();
-        const visibleKeys = this.root.visibleSeriesKeys();
-        const datum = rows[dataIndex];
-        const xKey = this.xKey();
-        const category = xKey && xKey in datum ? String(datum[xKey]) : String(active.index);
-        // When the active point targets a single series (pie/radial/radar hover),
-        // collapse the tooltip to just that row.
-        const activeSeriesKey = active.seriesKey && visibleKeys.includes(active.seriesKey) ? active.seriesKey : null;
-        const keys = activeSeriesKey ? [activeSeriesKey] : visibleKeys;
-        const valueKey = this.valueKey();
-        const tooltipRows = keys.map((k) => {
-            // For single-slice hover on pie/radial/radar the value lives on a
-            // shared `valueKey` field, not on a per-series column.
-            const rawValue = valueKey != null && activeSeriesKey === k ? datum[valueKey] : datum[k];
-            return {
-                seriesKey: k,
-                label: cfg[k]?.label ?? k,
-                value: rawValue,
-                color: seriesColorVar(k),
-                icon: cfg[k]?.icon,
-            };
-        });
-        return { category, datum, rows: tooltipRows };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
-    /** Resolve the header string honoring `label`, `labelKey`, then `labelFormatter`. */
-    headerText(p) {
-        if (this.hideLabel())
-            return null;
-        const override = this.label();
-        const labelKey = this.labelKey();
-        const cfg = this.root.config();
-        const fromKey = labelKey ? (cfg[labelKey]?.label ?? labelKey) : null;
-        const raw = override ?? fromKey ?? p.category;
-        const fmt = this.labelFormatter();
-        return fmt ? fmt(raw, p) : raw;
-    }
-    /** Apply per-row value formatter (or stringify). */
-    formatRow(row, p) {
-        const fmt = this.formatter();
-        if (fmt)
-            return fmt(row.value, row, p);
-        return row.value == null ? '' : String(row.value);
-    }
-    position = computed(() => {
-        const active = this.root.activePoint();
-        const box = this.containerBox();
-        if (!active || active.clientX == null || active.clientY == null || !box) {
-            return { x: 0, y: 0 };
-        }
-        // Map client coords → offset within the chart container (the element
-        // marked with `data-chart`, which is our positioning ancestor).
-        const { width: tooltipWidth, height: tooltipHeight } = this.tooltipBox();
-        const padding = 8;
-        const minX = padding + tooltipWidth / 2;
-        const maxX = Math.max(minX, box.width - padding - tooltipWidth / 2);
-        const x = Math.min(maxX, Math.max(minX, active.clientX - box.left));
-        // Y is the tooltip's bottom edge because the card is translated upward.
-        const minY = padding + tooltipHeight;
-        const y = Math.max(minY, active.clientY - box.top - padding);
-        return { x, y };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    observeContainer() {
-        const container = chartContainerElement(this.host.nativeElement);
-        if (!container) {
-            return;
-        }
-        this.measureContainer(container);
-        if (typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const observer = new ResizeObserver(() => this.zone.run(() => this.measureContainer(container)));
-        observer.observe(container);
-        this.destroyRef.onDestroy(() => observer.disconnect());
-    }
-    measure() {
-        const container = chartContainerElement(this.host.nativeElement);
-        if (container) {
-            this.measureContainer(container);
-        }
-        const card = this.host.nativeElement.querySelector('[role="tooltip"]');
-        this.tooltipBox.set({
-            width: card?.offsetWidth || FALLBACK_TOOLTIP_WIDTH,
-            height: card?.offsetHeight ?? 0,
-        });
-    }
-    measureContainer(container) {
-        const rect = container.getBoundingClientRect();
-        this.containerBox.set({ left: rect.left, top: rect.top, width: rect.width });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChartTooltip, isStandalone: true, selector: "ChartTooltip", inputs: { xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: false, transformFunction: null }, indicator: { classPropertyName: "indicator", publicName: "indicator", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, labelFormatter: { classPropertyName: "labelFormatter", publicName: "labelFormatter", isSignal: true, isRequired: false, transformFunction: null }, formatter: { classPropertyName: "formatter", publicName: "formatter", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-hidden": "!visible()" }, classAttribute: "pointer-events-none absolute inset-0 z-10" }, queries: [{ propertyName: "customTpl", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0, template: `
+var ChartTooltip = class ChartTooltip {
+	root = inject(ChartContext);
+	host = inject(ElementRef);
+	zone = inject(NgZone);
+	platformId = inject(PLATFORM_ID);
+	destroyRef = inject(DestroyRef);
+	containerBox = signal(null, {
+		...ngDevMode ? { debugName: "containerBox" } : /* istanbul ignore next */ {},
+		equal: (a, b) => a?.left === b?.left && a?.top === b?.top && a?.width === b?.width
+	});
+	tooltipBox = signal({
+		width: FALLBACK_TOOLTIP_WIDTH,
+		height: 0
+	}, {
+		...ngDevMode ? { debugName: "tooltipBox" } : /* istanbul ignore next */ {},
+		equal: (a, b) => a.width === b.width && a.height === b.height
+	});
+	constructor() {
+		if (!isPlatformBrowser(this.platformId)) return;
+		afterNextRender(() => this.observeContainer());
+		afterRenderEffect(() => {
+			this.payload();
+			this.measure();
+		});
+	}
+	xKey = input(null, ...ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []);
+	data = input(null, ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	valueKey = input(null, ...ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []);
+	indicator = input("dot", ...ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []);
+	hideLabel = input(false, ...ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []);
+	label = input(null, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	labelKey = input(null, ...ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []);
+	labelFormatter = input(null, ...ngDevMode ? [{ debugName: "labelFormatter" }] : /* istanbul ignore next */ []);
+	formatter = input(null, ...ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []);
+	customTpl = contentChild(TemplateRef, ...ngDevMode ? [{ debugName: "customTpl" }] : /* istanbul ignore next */ []);
+	visible = computed(() => this.root.activePoint() !== null, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	payload = computed(() => {
+		const active = this.root.activePoint();
+		const rows = this.data();
+		if (!active || !rows) return null;
+		const dataIndex = active.datumIndex != null && active.datumIndex < rows.length ? active.datumIndex : active.index;
+		if (dataIndex < 0 || dataIndex >= rows.length) return null;
+		const cfg = this.root.config();
+		const visibleKeys = this.root.visibleSeriesKeys();
+		const datum = rows[dataIndex];
+		const xKey = this.xKey();
+		const category = xKey && xKey in datum ? String(datum[xKey]) : String(active.index);
+		const activeSeriesKey = active.seriesKey && visibleKeys.includes(active.seriesKey) ? active.seriesKey : null;
+		const keys = activeSeriesKey ? [activeSeriesKey] : visibleKeys;
+		const valueKey = this.valueKey();
+		return {
+			category,
+			datum,
+			rows: keys.map((k) => {
+				const rawValue = valueKey != null && activeSeriesKey === k ? datum[valueKey] : datum[k];
+				return {
+					seriesKey: k,
+					label: cfg[k]?.label ?? k,
+					value: rawValue,
+					color: seriesColorVar(k),
+					icon: cfg[k]?.icon
+				};
+			})
+		};
+	}, ...ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []);
+	headerText(p) {
+		if (this.hideLabel()) return null;
+		const override = this.label();
+		const labelKey = this.labelKey();
+		const cfg = this.root.config();
+		const fromKey = labelKey ? cfg[labelKey]?.label ?? labelKey : null;
+		const raw = override ?? fromKey ?? p.category;
+		const fmt = this.labelFormatter();
+		return fmt ? fmt(raw, p) : raw;
+	}
+	formatRow(row, p) {
+		const fmt = this.formatter();
+		if (fmt) return fmt(row.value, row, p);
+		return row.value == null ? "" : String(row.value);
+	}
+	position = computed(() => {
+		const active = this.root.activePoint();
+		const box = this.containerBox();
+		if (!active || active.clientX == null || active.clientY == null || !box) return {
+			x: 0,
+			y: 0
+		};
+		const { width: tooltipWidth, height: tooltipHeight } = this.tooltipBox();
+		const padding = 8;
+		const minX = padding + tooltipWidth / 2;
+		const maxX = Math.max(minX, box.width - padding - tooltipWidth / 2);
+		const x = Math.min(maxX, Math.max(minX, active.clientX - box.left));
+		const minY = padding + tooltipHeight;
+		return {
+			x,
+			y: Math.max(minY, active.clientY - box.top - padding)
+		};
+	}, ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	observeContainer() {
+		const container = chartContainerElement(this.host.nativeElement);
+		if (!container) return;
+		this.measureContainer(container);
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => this.zone.run(() => this.measureContainer(container)));
+		observer.observe(container);
+		this.destroyRef.onDestroy(() => observer.disconnect());
+	}
+	measure() {
+		const container = chartContainerElement(this.host.nativeElement);
+		if (container) this.measureContainer(container);
+		const card = this.host.nativeElement.querySelector("[role=\"tooltip\"]");
+		this.tooltipBox.set({
+			width: card?.offsetWidth || FALLBACK_TOOLTIP_WIDTH,
+			height: card?.offsetHeight ?? 0
+		});
+	}
+	measureContainer(container) {
+		const rect = container.getBoundingClientRect();
+		this.containerBox.set({
+			left: rect.left,
+			top: rect.top,
+			width: rect.width
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChartTooltip,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ChartTooltip,
+		isStandalone: true,
+		selector: "ChartTooltip",
+		inputs: {
+			xKey: {
+				classPropertyName: "xKey",
+				publicName: "xKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueKey: {
+				classPropertyName: "valueKey",
+				publicName: "valueKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			indicator: {
+				classPropertyName: "indicator",
+				publicName: "indicator",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hideLabel: {
+				classPropertyName: "hideLabel",
+				publicName: "hideLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelKey: {
+				classPropertyName: "labelKey",
+				publicName: "labelKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labelFormatter: {
+				classPropertyName: "labelFormatter",
+				publicName: "labelFormatter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			formatter: {
+				classPropertyName: "formatter",
+				publicName: "formatter",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: { "attr.aria-hidden": "!visible()" },
+			classAttribute: "pointer-events-none absolute inset-0 z-10"
+		},
+		queries: [{
+			propertyName: "customTpl",
+			first: true,
+			predicate: TemplateRef,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
     @if (payload(); as p) {
       <div
         role="tooltip"
@@ -1012,18 +1190,48 @@ class ChartTooltip {
         {{ p.category }}
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartTooltip, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ChartTooltip',
-                    imports: [NgTemplateOutlet, NgComponentOutlet],
-                    host: {
-                        class: 'pointer-events-none absolute inset-0 z-10',
-                        '[attr.aria-hidden]': '!visible()',
-                    },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			kind: "directive",
+			type: NgComponentOutlet,
+			selector: "[ngComponentOutlet]",
+			inputs: [
+				"ngComponentOutlet",
+				"ngComponentOutletInputs",
+				"ngComponentOutletInjector",
+				"ngComponentOutletEnvironmentInjector",
+				"ngComponentOutletContent",
+				"ngComponentOutletNgModule"
+			],
+			exportAs: ["ngComponentOutlet"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartTooltip,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ChartTooltip",
+			imports: [NgTemplateOutlet, NgComponentOutlet],
+			host: {
+				class: "pointer-events-none absolute inset-0 z-10",
+				"[attr.aria-hidden]": "!visible()"
+			},
+			template: `
     @if (payload(); as p) {
       <div
         role="tooltip"
@@ -1085,40 +1293,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         {{ p.category }}
       }
     </div>
-  `,
-                }]
-        }], ctorParameters: () => [], propDecorators: { xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: false }] }], indicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicator", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], labelFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelFormatter", required: false }] }], formatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatter", required: false }] }], customTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
-
-/**
- * Legend — renders a list of series swatches. Clicking an item toggles
- * visibility via `ChartContext.toggleSeries`.
- *
- * Place as a child of `<Chart>`:
- * ```html
- * <Chart [config]="cfg">
- *   <ChartBar ... />
- *   <ChartLegend />
- * </Chart>
- * ```
- */
-class ChartLegend {
-    root = inject(ChartContext);
-    items = computed(() => {
-        const cfg = this.root.config();
-        const hidden = this.root.hiddenSeries();
-        return this.root.seriesKeys().map((key) => ({
-            seriesKey: key,
-            label: cfg[key]?.label ?? key,
-            color: seriesColorVar(key),
-            hidden: hidden.has(key),
-        }));
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
-    toggle(key) {
-        this.root.toggleSeries(key);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChartLegend, isStandalone: true, selector: "ChartLegend", host: { classAttribute: "block pt-3" }, ngImport: i0, template: `
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		xKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "xKey",
+				required: false
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		valueKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueKey",
+				required: false
+			}]
+		}],
+		indicator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indicator",
+				required: false
+			}]
+		}],
+		hideLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideLabel",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		labelKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelKey",
+				required: false
+			}]
+		}],
+		labelFormatter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelFormatter",
+				required: false
+			}]
+		}],
+		formatter: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formatter",
+				required: false
+			}]
+		}],
+		customTpl: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => TemplateRef), { isSignal: true }]
+		}]
+	}
+});
+var ChartLegend = class ChartLegend {
+	root = inject(ChartContext);
+	items = computed(() => {
+		const cfg = this.root.config();
+		const hidden = this.root.hiddenSeries();
+		return this.root.seriesKeys().map((key) => ({
+			seriesKey: key,
+			label: cfg[key]?.label ?? key,
+			color: seriesColorVar(key),
+			hidden: hidden.has(key)
+		}));
+	}, ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	toggle(key) {
+		this.root.toggleSeries(key);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChartLegend,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ChartLegend,
+		isStandalone: true,
+		selector: "ChartLegend",
+		host: { classAttribute: "block pt-3" },
+		ngImport: i0,
+		template: `
     <ul
       class="flex flex-wrap items-center justify-center gap-3 text-xs"
       aria-label="Toggle chart series visibility"
@@ -1142,14 +1431,21 @@ class ChartLegend {
         </li>
       }
     </ul>
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartLegend, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ChartLegend',
-                    host: { class: 'block pt-3' },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartLegend,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ChartLegend",
+			host: { class: "block pt-3" },
+			template: `
     <ul
       class="flex flex-wrap items-center justify-center gap-3 text-xs"
       aria-label="Toggle chart series visibility"
@@ -1173,51 +1469,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </li>
       }
     </ul>
-  `,
-                }]
-        }] });
-
+  `
+		}]
+	}]
+});
 function formatNumber(value) {
-    return Math.abs(value) >= 10 ? value.toFixed(0) : value.toFixed(1);
+	return Math.abs(value) >= 10 ? value.toFixed(0) : value.toFixed(1);
 }
-class ChartZoomControls {
-    categorical = inject(CategoricalViewportContext, { optional: true });
-    scatter = inject(ScatterViewportContext, { optional: true });
-    status = computed(() => {
-        if (this.categorical?.hasZoom()) {
-            const count = this.categorical.dataCount();
-            // The chart renders the renormalized window, so the status has to quote
-            // the same one; the raw range can still name rows the data no longer has.
-            const range = effectiveIndexRange(this.categorical.zoomRange(), count);
-            if (!range) {
-                return null;
-            }
-            return `Showing ${range.startIndex + 1}-${range.endIndex + 1} of ${count}`;
-        }
-        if (this.scatter?.hasZoom()) {
-            const xDomain = this.scatter.zoomXDomain() ?? this.scatter.fullXDomain();
-            const yDomain = this.scatter.zoomYDomain() ?? this.scatter.fullYDomain();
-            if (!xDomain || !yDomain) {
-                return null;
-            }
-            return `X ${formatNumber(xDomain[0])}-${formatNumber(xDomain[1])} · Y ${formatNumber(yDomain[0])}-${formatNumber(yDomain[1])}`;
-        }
-        return null;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
-    hint = computed(() => {
-        if (this.scatter) {
-            return 'Drag to brush a region. Use the wheel to zoom and one-finger touch drag to pan while zoomed.';
-        }
-        return 'Drag to select a category range. Use the wheel to zoom and one-finger touch drag to pan while zoomed.';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
-    resetZoom() {
-        this.categorical?.resetZoom();
-        this.scatter?.resetZoom();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartZoomControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ChartZoomControls, isStandalone: true, selector: "ChartZoomControls", host: { classAttribute: "mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground" }, ngImport: i0, template: `
+var ChartZoomControls = class ChartZoomControls {
+	categorical = inject(CategoricalViewportContext, { optional: true });
+	scatter = inject(ScatterViewportContext, { optional: true });
+	status = computed(() => {
+		if (this.categorical?.hasZoom()) {
+			const count = this.categorical.dataCount();
+			const range = effectiveIndexRange(this.categorical.zoomRange(), count);
+			if (!range) return null;
+			return `Showing ${range.startIndex + 1}-${range.endIndex + 1} of ${count}`;
+		}
+		if (this.scatter?.hasZoom()) {
+			const xDomain = this.scatter.zoomXDomain() ?? this.scatter.fullXDomain();
+			const yDomain = this.scatter.zoomYDomain() ?? this.scatter.fullYDomain();
+			if (!xDomain || !yDomain) return null;
+			return `X ${formatNumber(xDomain[0])}-${formatNumber(xDomain[1])} · Y ${formatNumber(yDomain[0])}-${formatNumber(yDomain[1])}`;
+		}
+		return null;
+	}, ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+	hint = computed(() => {
+		if (this.scatter) return "Drag to brush a region. Use the wheel to zoom and one-finger touch drag to pan while zoomed.";
+		return "Drag to select a category range. Use the wheel to zoom and one-finger touch drag to pan while zoomed.";
+	}, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	resetZoom() {
+		this.categorical?.resetZoom();
+		this.scatter?.resetZoom();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChartZoomControls,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ChartZoomControls,
+		isStandalone: true,
+		selector: "ChartZoomControls",
+		host: { classAttribute: "mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground" },
+		ngImport: i0,
+		template: `
     <p>{{ hint() }}</p>
 
     @if (status(); as currentStatus) {
@@ -1236,16 +1537,21 @@ class ChartZoomControls {
         </button>
       </div>
     }
-  `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ChartZoomControls, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ChartZoomControls',
-                    host: {
-                        class: 'mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground',
-                    },
-                    template: `
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChartZoomControls,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ChartZoomControls",
+			host: { class: "mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground" },
+			template: `
     <p>{{ hint() }}</p>
 
     @if (status(); as currentStatus) {
@@ -1264,42 +1570,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </button>
       </div>
     }
-  `,
-                }]
-        }] });
-
-class PieCenter {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PieCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: PieCenter, isStandalone: true, selector: "ChartPieCenter", host: { classAttribute: "flex max-w-40 flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: PieCenter, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ChartPieCenter',
-                    host: {
-                        class: 'flex max-w-40 flex-col items-center justify-center text-center',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }] });
-
-class RadialCenter {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RadialCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RadialCenter, isStandalone: true, selector: "ChartRadialCenter", host: { classAttribute: "flex max-w-40 flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RadialCenter, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ChartRadialCenter',
-                    host: {
-                        class: 'flex max-w-40 flex-col items-center justify-center text-center',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ChartAxisX, ChartAxisY, ChartBrush, ChartCrosshair, ChartGrid, ChartLegend, ChartPointerTracker, ChartTooltip, ChartZoomControls, PieCenter, RadialCenter };
+  `
+		}]
+	}]
+});
+var PieCenter = class PieCenter {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PieCenter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: PieCenter,
+		isStandalone: true,
+		selector: "ChartPieCenter",
+		host: { classAttribute: "flex max-w-40 flex-col items-center justify-center text-center" },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PieCenter,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ChartPieCenter",
+			host: { class: "flex max-w-40 flex-col items-center justify-center text-center" },
+			template: `<ng-content />`
+		}]
+	}]
+});
+var RadialCenter = class RadialCenter {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RadialCenter,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.2",
+		type: RadialCenter,
+		isStandalone: true,
+		selector: "ChartRadialCenter",
+		host: { classAttribute: "flex max-w-40 flex-col items-center justify-center text-center" },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RadialCenter,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ChartRadialCenter",
+			host: { class: "flex max-w-40 flex-col items-center justify-center text-center" },
+			template: `<ng-content />`
+		}]
+	}]
+});
+export { ChartAxisX, ChartAxisY, ChartBrush, ChartCrosshair, ChartGrid, ChartLegend, ChartPointerTracker, ChartTooltip, ChartZoomControls, PieCenter, RadialCenter };