@ojiepermana/angular 21.3.3 → 22.0.1

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

@@ -67,22 +67,29 @@ function seriesColorVar(seriesKey) {
  */
 class ChartContext {
     /** Stable instance id — used in the `data-chart` attribute and CSS scope. */
-    id = signal('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    id = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     /** User-provided series config. */
-    config = signal({}, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    config = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     /** Measured render-area dimensions (ResizeObserver-driven). */
-    dimensions = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "dimensions" }] : /* istanbul ignore next */ []));
+    dimensions = signal({ width: 0, height: 0 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dimensions" }] : /* istanbul ignore next */ []));
     /** Currently highlighted data point (tooltip / crosshair). */
-    activePoint = signal(null, ...(ngDevMode ? [{ debugName: "activePoint" }] : /* istanbul ignore next */ []));
+    activePoint = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePoint" }] : /* istanbul ignore next */ []));
     /** Series keys the user has toggled off via legend. */
-    hiddenSeries = signal(new Set(), ...(ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []));
+    hiddenSeries = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []));
     /** Ordered list of series keys (from `config`). */
-    seriesKeys = computed(() => Object.keys(this.config()), ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
+    seriesKeys = computed(() => Object.keys(this.config()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
     /** Series keys currently visible (config order minus `hiddenSeries`). */
     visibleSeriesKeys = computed(() => {
         const hidden = this.hiddenSeries();
         return this.seriesKeys().filter((k) => !hidden.has(k));
-    }, ...(ngDevMode ? [{ debugName: "visibleSeriesKeys" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleSeriesKeys" }] : /* istanbul ignore next */ []));
     /** Toggle visibility of a series. */
     toggleSeries(key) {
         this.hiddenSeries.update((set) => {
@@ -96,10 +103,10 @@ class ChartContext {
             return next;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartContext });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartContext, decorators: [{
             type: Injectable
         }] });
 
@@ -120,7 +127,8 @@ class ChartStyle {
     host = inject((ElementRef));
     renderer = inject(Renderer2);
     styleEl = null;
-    css = computed(() => buildChartCss(this.ctx.id(), this.ctx.config()), ...(ngDevMode ? [{ debugName: "css" }] : /* istanbul ignore next */ []));
+    css = computed(() => buildChartCss(this.ctx.id(), this.ctx.config()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "css" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const css = this.css();
@@ -131,10 +139,10 @@ class ChartStyle {
             this.styleEl.textContent = css;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: ChartStyle, isStandalone: true, selector: "ui-chart-style", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartStyle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: ChartStyle, isStandalone: true, selector: "ui-chart-style", ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartStyle, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-chart-style',
@@ -164,18 +172,22 @@ class ChartContainer {
     platformId = inject(PLATFORM_ID);
     destroyRef = inject(DestroyRef);
     /** Series configuration. Required for color / label resolution. */
-    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    config = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
     /**
      * Tailwind aspect-ratio utility for the container. Defaults to `aspect-video`
      * for cartesian charts; override with `aspect-square` for radial / pie layouts.
      */
-    aspect = input('aspect-video', ...(ngDevMode ? [{ debugName: "aspect" }] : /* istanbul ignore next */ []));
-    hostClass = computed(() => `relative flex ${this.aspect()} justify-center text-xs`, ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    aspect = input('aspect-video', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "aspect" }] : /* istanbul ignore next */ []));
+    hostClass = computed(() => `relative flex ${this.aspect()} justify-center text-xs`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
     /**
      * Optional explicit id override. When omitted, a stable auto-id is
      * generated (`chart-<n>`), unique across the document.
      */
-    chartId = input(null, ...(ngDevMode ? [{ debugName: "chartId" }] : /* istanbul ignore next */ []));
+    chartId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "chartId" }] : /* istanbul ignore next */ []));
     constructor() {
         const autoId = `chart-${++chartIdCounter}`;
         // Sync id + config into the shared context.
@@ -207,13 +219,13 @@ class ChartContainer {
         observer.observe(el);
         this.destroyRef.onDestroy(() => observer.disconnect());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: ChartContainer, isStandalone: true, selector: "ui-chart-container", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, chartId: { classPropertyName: "chartId", publicName: "chartId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-chart": "ctx.id()", "class": "hostClass()" } }, providers: [ChartContext], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: ChartContainer, isStandalone: true, selector: "ui-chart-container", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, aspect: { classPropertyName: "aspect", publicName: "aspect", isSignal: true, isRequired: false, transformFunction: null }, chartId: { classPropertyName: "chartId", publicName: "chartId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-chart": "ctx.id()", "class": "hostClass()" } }, providers: [ChartContext], ngImport: i0, template: `
     <ui-chart-style />
     <ng-content />
   `, isInline: true, dependencies: [{ kind: "component", type: ChartStyle, selector: "ui-chart-style" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-chart-container',
@@ -241,23 +253,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  */
 class CartesianContext {
     /** Inner width (outer width − margin.left − margin.right). */
-    innerWidth = signal(0, ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
     /** Inner height (outer height − margin.top − margin.bottom). */
-    innerHeight = signal(0, ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    innerHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
     /** Margins around the plotting area. */
-    margin = signal({ top: 8, right: 8, bottom: 24, left: 40 }, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    margin = signal({ top: 8, right: 8, bottom: 24, left: 40 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
     /** Layout orientation (drives which axis holds the band scale). */
-    orientation = signal('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    orientation = signal('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
     /** Band (categorical) scale. */
-    categoryScale = signal(null, ...(ngDevMode ? [{ debugName: "categoryScale" }] : /* istanbul ignore next */ []));
+    categoryScale = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categoryScale" }] : /* istanbul ignore next */ []));
     /** Linear (numeric) scale. */
-    valueScale = signal(null, ...(ngDevMode ? [{ debugName: "valueScale" }] : /* istanbul ignore next */ []));
+    valueScale = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueScale" }] : /* istanbul ignore next */ []));
     /** Ordered category domain (e.g. x labels for vertical, y labels for horizontal). */
-    categories = signal([], ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CartesianContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CartesianContext });
+    categories = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categories" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CartesianContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CartesianContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CartesianContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CartesianContext, decorators: [{
             type: Injectable
         }] });
 /** Resolve the scale that maps to the X axis for a given orientation. */
@@ -382,13 +401,17 @@ function panNumericDomain(current, full, delta) {
 class ChartAxisX {
     ctx = inject(CartesianContext);
     /** Approximate tick count for linear (value) scales. */
-    tickCount = input(5, ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
+    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, ...(ngDevMode ? [{ debugName: "tickLine" }] : /* istanbul ignore next */ []));
+    tickLine = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tickLine" }] : /* istanbul ignore next */ []));
     /** Formatter for numeric tick labels. */
-    tickFormat = input((v) => String(v), ...(ngDevMode ? [{ debugName: "tickFormat" }] : /* istanbul ignore next */ []));
+    tickFormat = input((v) => String(v), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tickFormat" }] : /* istanbul ignore next */ []));
     innerWidth = this.ctx.innerWidth;
-    transform = computed(() => `translate(0,${this.ctx.innerHeight()})`, ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    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) {
@@ -397,9 +420,10 @@ class ChartAxisX {
         }
         const scale = this.ctx.categoryScale();
         return scale ? bandTicks(scale) : [];
-    }, ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartAxisX, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChartAxisX, isStandalone: true, selector: "svg:g[ui-chart-axis-x]", 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: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartAxisX, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ChartAxisX, isStandalone: true, selector: "svg:g[ui-chart-axis-x]", 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)'">
@@ -417,7 +441,7 @@ class ChartAxisX {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartAxisX, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartAxisX, decorators: [{
             type: Component,
             args: [{
                     selector: 'svg:g[ui-chart-axis-x]',
@@ -453,9 +477,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  */
 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 */ []));
+    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';
@@ -465,9 +492,10 @@ class ChartAxisY {
         }
         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: "21.2.14", ngImport: i0, type: ChartAxisY, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChartAxisY, isStandalone: true, selector: "svg:g[ui-chart-axis-y]", 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: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartAxisY, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ChartAxisY, isStandalone: true, selector: "svg:g[ui-chart-axis-y]", 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 + ')'">
@@ -486,7 +514,7 @@ class ChartAxisY {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartAxisY, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartAxisY, decorators: [{
             type: Component,
             args: [{
                     selector: 'svg:g[ui-chart-axis-y]',
@@ -525,19 +553,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
  */
 class ChartGrid {
     ctx = inject(CartesianContext);
-    tickCount = input(5, ...(ngDevMode ? [{ debugName: "tickCount" }] : /* istanbul ignore next */ []));
+    tickCount = input(5, /* @ts-ignore */
+    ...(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 */ []));
+    }, /* @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: "21.2.14", ngImport: i0, type: ChartGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChartGrid, isStandalone: true, selector: "svg:g[ui-chart-grid]", inputs: { tickCount: { classPropertyName: "tickCount", publicName: "tickCount", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "chart-grid text-border" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ChartGrid, isStandalone: true, selector: "svg:g[ui-chart-grid]", 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"
@@ -549,7 +579,7 @@ class ChartGrid {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartGrid, decorators: [{
             type: Component,
             args: [{
                     selector: 'svg:g[ui-chart-grid]',
@@ -594,9 +624,10 @@ class ChartCrosshair {
             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: "21.2.14", ngImport: i0, type: ChartCrosshair, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChartCrosshair, isStandalone: true, selector: "svg:g[ui-chart-crosshair]", host: { classAttribute: "chart-crosshair" }, ngImport: i0, template: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "line" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartCrosshair, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ChartCrosshair, isStandalone: true, selector: "svg:g[ui-chart-crosshair]", host: { classAttribute: "chart-crosshair" }, ngImport: i0, template: `
     @if (line(); as l) {
       <svg:line
         class="stroke-border"
@@ -608,7 +639,7 @@ class ChartCrosshair {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartCrosshair, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartCrosshair, decorators: [{
             type: Component,
             args: [{
                     selector: 'svg:g[ui-chart-crosshair]',
@@ -629,43 +660,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }] });
 
 class CategoricalViewportContext {
-    dataCount = signal(0, ...(ngDevMode ? [{ debugName: "dataCount" }] : /* istanbul ignore next */ []));
-    brushRange = signal(null, ...(ngDevMode ? [{ debugName: "brushRange" }] : /* istanbul ignore next */ []));
-    zoomRange = signal(null, ...(ngDevMode ? [{ debugName: "zoomRange" }] : /* istanbul ignore next */ []));
+    dataCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataCount" }] : /* istanbul ignore next */ []));
+    brushRange = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brushRange" }] : /* istanbul ignore next */ []));
+    zoomRange = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomRange" }] : /* istanbul ignore next */ []));
     hasZoom = computed(() => {
         const range = this.zoomRange();
         const count = this.dataCount();
         return !!range && count > 0 && (range.startIndex > 0 || range.endIndex < count - 1);
-    }, ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
     resetZoom() {
         this.brushRange.set(null);
         this.zoomRange.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CategoricalViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CategoricalViewportContext });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CategoricalViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CategoricalViewportContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: CategoricalViewportContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: CategoricalViewportContext, decorators: [{
             type: Injectable
         }] });
 
 class ScatterViewportContext {
-    innerWidth = signal(0, ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = signal(0, ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
-    fullXDomain = signal(null, ...(ngDevMode ? [{ debugName: "fullXDomain" }] : /* istanbul ignore next */ []));
-    fullYDomain = signal(null, ...(ngDevMode ? [{ debugName: "fullYDomain" }] : /* istanbul ignore next */ []));
-    zoomXDomain = signal(null, ...(ngDevMode ? [{ debugName: "zoomXDomain" }] : /* istanbul ignore next */ []));
-    zoomYDomain = signal(null, ...(ngDevMode ? [{ debugName: "zoomYDomain" }] : /* istanbul ignore next */ []));
-    xScale = signal(null, ...(ngDevMode ? [{ debugName: "xScale" }] : /* istanbul ignore next */ []));
-    yScale = signal(null, ...(ngDevMode ? [{ debugName: "yScale" }] : /* istanbul ignore next */ []));
-    hasZoom = computed(() => this.zoomXDomain() !== null || this.zoomYDomain() !== null, ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
+    innerWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    fullXDomain = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullXDomain" }] : /* istanbul ignore next */ []));
+    fullYDomain = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullYDomain" }] : /* istanbul ignore next */ []));
+    zoomXDomain = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomXDomain" }] : /* istanbul ignore next */ []));
+    zoomYDomain = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zoomYDomain" }] : /* istanbul ignore next */ []));
+    xScale = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xScale" }] : /* istanbul ignore next */ []));
+    yScale = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yScale" }] : /* istanbul ignore next */ []));
+    hasZoom = computed(() => this.zoomXDomain() !== null || this.zoomYDomain() !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasZoom" }] : /* istanbul ignore next */ []));
     resetZoom() {
         this.zoomXDomain.set(null);
         this.zoomYDomain.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ScatterViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ScatterViewportContext });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScatterViewportContext, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScatterViewportContext });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ScatterViewportContext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScatterViewportContext, decorators: [{
             type: Injectable
         }] });
 
@@ -726,14 +770,22 @@ class ChartBrush {
     cart = inject(CartesianContext, { optional: true });
     categorical = inject(CategoricalViewportContext, { optional: true });
     scatter = inject(ScatterViewportContext, { optional: true });
-    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 */ []));
+    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;
@@ -755,7 +807,8 @@ class ChartBrush {
             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 */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "categoryPreview" }] : /* istanbul ignore next */ []));
     scatterPreviewRect = computed(() => {
         const preview = this.scatterBrush();
         if (!preview) {
@@ -767,7 +820,8 @@ class ChartBrush {
             width: Math.abs(preview.current.x - preview.start.x),
             height: Math.abs(preview.current.y - preview.start.y),
         };
-    }, ...(ngDevMode ? [{ debugName: "scatterPreviewRect" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scatterPreviewRect" }] : /* istanbul ignore next */ []));
     onPointerDown(event) {
         if (this.activePointerId() != null) {
             return;
@@ -1007,8 +1061,8 @@ class ChartBrush {
     pointerAxis(local) {
         return this.cart?.orientation() === 'horizontal' ? local.y : local.x;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartBrush, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChartBrush, isStandalone: true, selector: "svg:g[ui-chart-brush]", host: { listeners: { "window:pointermove": "onPointerMove($event)", "window:pointerup": "onPointerUp($event)", "window:pointercancel": "onPointerCancel($event)" }, classAttribute: "chart-brush" }, viewQueries: [{ propertyName: "hitbox", first: true, predicate: ["hitbox"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartBrush, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ChartBrush, isStandalone: true, selector: "svg:g[ui-chart-brush]", host: { listeners: { "window:pointermove": "onPointerMove($event)", "window:pointerup": "onPointerUp($event)", "window:pointercancel": "onPointerCancel($event)" }, 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"
@@ -1044,7 +1098,7 @@ class ChartBrush {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartBrush, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartBrush, decorators: [{
             type: Component,
             args: [{
                     selector: 'svg:g[ui-chart-brush]',
@@ -1141,10 +1195,10 @@ class ChartPointerTracker {
     onLeave() {
         this.root.activePoint.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartPointerTracker, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.14", type: ChartPointerTracker, isStandalone: true, selector: "svg:svg[uiChartPointerTracker]", host: { listeners: { "pointermove": "onMove($event)", "pointerleave": "onLeave()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartPointerTracker, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: ChartPointerTracker, isStandalone: true, selector: "svg:svg[uiChartPointerTracker]", host: { listeners: { "pointermove": "onMove($event)", "pointerleave": "onLeave()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartPointerTracker, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartPointerTracker, decorators: [{
             type: Directive,
             args: [{
                     selector: 'svg:svg[uiChartPointerTracker]',
@@ -1182,34 +1236,45 @@ class ChartTooltip {
     root = inject(ChartContext);
     host = inject((ElementRef));
     /** Data key on each datum whose value is the category label (x-axis). */
-    xKey = input(null, ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    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, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    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, ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
+    valueKey = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
     /** Indicator variant next to each row. Default `'dot'`. */
-    indicator = input('dot', ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
+    indicator = input('dot', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
     /** Hide the header label entirely. */
-    hideLabel = input(false, ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
+    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, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    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, ...(ngDevMode ? [{ debugName: "labelKey" }] : /* istanbul ignore next */ []));
+    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, ...(ngDevMode ? [{ debugName: "labelFormatter" }] : /* istanbul ignore next */ []));
+    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, ...(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 */ []));
+    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();
@@ -1241,7 +1306,8 @@ class ChartTooltip {
             };
         });
         return { category, datum, rows: tooltipRows };
-    }, ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "payload" }] : /* istanbul ignore next */ []));
     /** Resolve the header string honoring `label`, `labelKey`, then `labelFormatter`. */
     headerText(p) {
         if (this.hideLabel())
@@ -1282,9 +1348,10 @@ class ChartTooltip {
         const minY = padding + tooltipHeight;
         const y = Math.max(minY, active.clientY - rect.top - padding);
         return { x, y };
-    }, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChartTooltip, isStandalone: true, selector: "ui-chart-tooltip", 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: `
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ChartTooltip, isStandalone: true, selector: "ui-chart-tooltip", 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"
@@ -1342,7 +1409,7 @@ class ChartTooltip {
     </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartTooltip, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-chart-tooltip',
@@ -1435,12 +1502,13 @@ class ChartLegend {
             color: seriesColorVar(key),
             hidden: hidden.has(key),
         }));
-    }, ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     toggle(key) {
         this.root.toggleSeries(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChartLegend, isStandalone: true, selector: "ui-chart-legend", host: { classAttribute: "block pt-3" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ChartLegend, isStandalone: true, selector: "ui-chart-legend", 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">
       @for (item of items(); track item.seriesKey) {
         <li>
@@ -1459,7 +1527,7 @@ class ChartLegend {
     </ul>
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartLegend, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartLegend, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-chart-legend',
@@ -1510,19 +1578,21 @@ class ChartZoomControls {
             return `X ${formatNumber(xDomain[0])}-${formatNumber(xDomain[1])} · Y ${formatNumber(yDomain[0])}-${formatNumber(yDomain[1])}`;
         }
         return null;
-    }, ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    }, /* @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.';
-    }, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
     resetZoom() {
         this.categorical?.resetZoom();
         this.scatter?.resetZoom();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartZoomControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ChartZoomControls, isStandalone: true, selector: "ui-chart-zoom-controls", host: { classAttribute: "mt-3 flex flex-wrap items-center justify-between gap-3 text-xs text-muted-foreground" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartZoomControls, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ChartZoomControls, isStandalone: true, selector: "ui-chart-zoom-controls", 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) {
@@ -1540,7 +1610,7 @@ class ChartZoomControls {
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartZoomControls, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ChartZoomControls, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-chart-zoom-controls',
@@ -1567,10 +1637,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }] });
 
 class PieCenter {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PieCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: PieCenter, isStandalone: true, selector: "ui-pie-center", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PieCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: PieCenter, isStandalone: true, selector: "ui-pie-center", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PieCenter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PieCenter, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-pie-center',
@@ -1583,10 +1653,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }] });
 
 class RadialCenter {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadialCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.14", type: RadialCenter, isStandalone: true, selector: "ui-radial-center", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RadialCenter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: RadialCenter, isStandalone: true, selector: "ui-radial-center", host: { classAttribute: "flex max-w-[10rem] flex-col items-center justify-center text-center" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadialCenter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RadialCenter, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-radial-center',
@@ -1808,22 +1878,37 @@ const defaultBarValueFormatter = (value) => `${value}`;
 class BarChart {
     root = inject(ChartContext);
     cart = inject(CartesianContext);
-    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    xKey = input.required(...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
-    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    variant = input('grouped', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$6, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    bandPadding = input(0.2, ...(ngDevMode ? [{ debugName: "bandPadding" }] : /* istanbul ignore next */ []));
-    groupPadding = input(0.05, ...(ngDevMode ? [{ debugName: "groupPadding" }] : /* istanbul ignore next */ []));
-    cornerRadius = input(4, ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
-    colorKey = input(undefined, ...(ngDevMode ? [{ debugName: "colorKey" }] : /* istanbul ignore next */ []));
-    activeKey = input(undefined, ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
-    activeValue = input(undefined, ...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
-    showValueLabels = input(false, ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
-    valueLabelFormat = input(defaultBarValueFormatter, ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    variant = input('grouped', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$6, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    bandPadding = input(0.2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bandPadding" }] : /* istanbul ignore next */ []));
+    groupPadding = input(0.05, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groupPadding" }] : /* istanbul ignore next */ []));
+    cornerRadius = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
+    colorKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorKey" }] : /* istanbul ignore next */ []));
+    activeKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []));
+    activeValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
+    showValueLabels = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
+    valueLabelFormat = input(defaultBarValueFormatter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
     barClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
     layout = computed(() => computeBarLayout({
         data: this.data(),
         xKey: this.xKey(),
@@ -1837,18 +1922,23 @@ class BarChart {
         colorKey: this.colorKey(),
         activeKey: this.activeKey(),
         activeValue: this.activeValue(),
-    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    bars = computed(() => this.layout().bars, ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    bars = computed(() => this.layout().bars, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
     viewBox = computed(() => {
         const { width, height } = this.root.dimensions();
         return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
-    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
     ariaSummary = computed(() => {
         const keys = this.root.visibleSeriesKeys();
         const n = this.data().length;
         return `Bar chart, ${n} categories, ${keys.length} series: ${keys.join(', ')}.`;
-    }, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const layout = this.layout();
@@ -1910,8 +2000,8 @@ class BarChart {
         const label = this.root.config()[bar.seriesKey]?.label ?? bar.seriesKey;
         return `${label} in ${bar.category}: ${bar.value}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: BarChart, isStandalone: true, selector: "ui-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, bandPadding: { classPropertyName: "bandPadding", publicName: "bandPadding", isSignal: true, isRequired: false, transformFunction: null }, groupPadding: { classPropertyName: "groupPadding", publicName: "groupPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [CartesianContext], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: BarChart, isStandalone: true, selector: "ui-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, bandPadding: { classPropertyName: "bandPadding", publicName: "bandPadding", isSignal: true, isRequired: false, transformFunction: null }, groupPadding: { classPropertyName: "groupPadding", publicName: "groupPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, colorKey: { classPropertyName: "colorKey", publicName: "colorKey", isSignal: true, isRequired: false, transformFunction: null }, activeKey: { classPropertyName: "activeKey", publicName: "activeKey", isSignal: true, isRequired: false, transformFunction: null }, activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [CartesianContext], ngImport: i0, template: `
     <svg:svg
       uiChartPointerTracker
       class="block h-full w-full overflow-visible"
@@ -1964,7 +2054,7 @@ class BarChart {
     <ng-content select="ui-chart-legend" />
   `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[uiChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: BarChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: BarChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-bar-chart',
@@ -2280,24 +2370,41 @@ class LineChart {
     root = inject(ChartContext);
     cart = inject(CartesianContext);
     viewport = inject(CategoricalViewportContext);
-    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    xKey = input.required(...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
-    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    curve = input('monotone', ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$5, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
-    showDots = input(true, ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
-    dotRadius = input(3, ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
-    dotColorKey = input(undefined, ...(ngDevMode ? [{ debugName: "dotColorKey" }] : /* istanbul ignore next */ []));
-    dotStrokeColor = input(undefined, ...(ngDevMode ? [{ debugName: "dotStrokeColor" }] : /* istanbul ignore next */ []));
-    dotStrokeWidth = input(0, ...(ngDevMode ? [{ debugName: "dotStrokeWidth" }] : /* istanbul ignore next */ []));
-    showValueLabels = input(false, ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
-    valueLabelFormat = input(defaultLineValueFormatter, ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    curve = input('monotone', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    showDots = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
+    dotRadius = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
+    dotColorKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotColorKey" }] : /* istanbul ignore next */ []));
+    dotStrokeColor = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotStrokeColor" }] : /* istanbul ignore next */ []));
+    dotStrokeWidth = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotStrokeWidth" }] : /* istanbul ignore next */ []));
+    showValueLabels = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
+    valueLabelFormat = input(defaultLineValueFormatter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
     pointClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
-    visibleStartIndex = computed(() => this.viewport.zoomRange()?.startIndex ?? 0, ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : /* istanbul ignore next */ []));
-    visibleData = computed(() => sliceByIndexRange(this.data(), this.viewport.zoomRange()), ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    visibleStartIndex = computed(() => this.viewport.zoomRange()?.startIndex ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : /* istanbul ignore next */ []));
+    visibleData = computed(() => sliceByIndexRange(this.data(), this.viewport.zoomRange()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
     layout = computed(() => computeLineLayout({
         data: this.visibleData(),
         xKey: this.xKey(),
@@ -2306,17 +2413,22 @@ class LineChart {
         innerWidth: this.innerWidth(),
         innerHeight: this.innerHeight(),
         curve: this.curve(),
-    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    series = computed(() => this.layout().series, ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    series = computed(() => this.layout().series, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
     viewBox = computed(() => {
         const { width, height } = this.root.dimensions();
         return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
-    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
     ariaSummary = computed(() => {
         const keys = this.root.visibleSeriesKeys();
         return `Line chart, ${this.visibleData().length} points, ${keys.length} series: ${keys.join(', ')}.`;
-    }, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const layout = this.layout();
@@ -2384,8 +2496,8 @@ class LineChart {
         const label = this.root.config()[p.seriesKey]?.label ?? p.seriesKey;
         return `${label} at ${p.category}: ${p.value}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: LineChart, isStandalone: true, selector: "ui-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null }, dotColorKey: { classPropertyName: "dotColorKey", publicName: "dotColorKey", isSignal: true, isRequired: false, transformFunction: null }, dotStrokeColor: { classPropertyName: "dotStrokeColor", publicName: "dotStrokeColor", isSignal: true, isRequired: false, transformFunction: null }, dotStrokeWidth: { classPropertyName: "dotStrokeWidth", publicName: "dotStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: LineChart, isStandalone: true, selector: "ui-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null }, dotColorKey: { classPropertyName: "dotColorKey", publicName: "dotColorKey", isSignal: true, isRequired: false, transformFunction: null }, dotStrokeColor: { classPropertyName: "dotStrokeColor", publicName: "dotStrokeColor", isSignal: true, isRequired: false, transformFunction: null }, dotStrokeWidth: { classPropertyName: "dotStrokeWidth", publicName: "dotStrokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
     <svg:svg
       uiChartPointerTracker
       class="block h-full w-full overflow-visible"
@@ -2447,7 +2559,7 @@ class LineChart {
     <ng-content select="ui-chart-zoom-controls" />
   `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[uiChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LineChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: LineChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-line-chart',
@@ -2532,22 +2644,37 @@ class AreaChart {
     root = inject(ChartContext);
     cart = inject(CartesianContext);
     viewport = inject(CategoricalViewportContext);
-    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    xKey = input.required(...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
-    orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
-    stacked = input(false, ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
-    expanded = input(false, ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    gradient = input(true, ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
-    curve = input('monotone', ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$4, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
-    showDots = input(false, ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
-    dotRadius = input(3, ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    stacked = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
+    expanded = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    gradient = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gradient" }] : /* istanbul ignore next */ []));
+    curve = input('monotone', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    showDots = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
+    dotRadius = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
     pointClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
-    visibleStartIndex = computed(() => this.viewport.zoomRange()?.startIndex ?? 0, ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : /* istanbul ignore next */ []));
-    visibleData = computed(() => sliceByIndexRange(this.data(), this.viewport.zoomRange()), ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    visibleStartIndex = computed(() => this.viewport.zoomRange()?.startIndex ?? 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleStartIndex" }] : /* istanbul ignore next */ []));
+    visibleData = computed(() => sliceByIndexRange(this.data(), this.viewport.zoomRange()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
     layout = computed(() => computeAreaLayout({
         data: this.visibleData(),
         xKey: this.xKey(),
@@ -2558,17 +2685,22 @@ class AreaChart {
         curve: this.curve(),
         stacked: this.stacked(),
         expanded: this.expanded(),
-    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    series = computed(() => this.layout().series, ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    series = computed(() => this.layout().series, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
     viewBox = computed(() => {
         const { width, height } = this.root.dimensions();
         return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
-    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
     ariaSummary = computed(() => {
         const keys = this.root.visibleSeriesKeys();
         return `Area chart, ${this.visibleData().length} points, ${keys.length} series: ${keys.join(', ')}.`;
-    }, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const layout = this.layout();
@@ -2611,8 +2743,8 @@ class AreaChart {
         const label = this.root.config()[p.seriesKey]?.label ?? p.seriesKey;
         return `${label} at ${p.category}: ${p.value}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AreaChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: AreaChart, isStandalone: true, selector: "ui-area-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AreaChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: AreaChart, isStandalone: true, selector: "ui-area-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, gradient: { classPropertyName: "gradient", publicName: "gradient", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [CartesianContext, CategoricalViewportContext], ngImport: i0, template: `
     <svg:svg
       uiChartPointerTracker
       class="block h-full w-full overflow-visible"
@@ -2677,7 +2809,7 @@ class AreaChart {
     <ng-content select="ui-chart-zoom-controls" />
   `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[uiChartPointerTracker]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AreaChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: AreaChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-area-chart',
@@ -2797,22 +2929,37 @@ function computePieLayout(input) {
 const DEFAULT_MARGIN$3 = { top: 8, right: 8, bottom: 8, left: 8 };
 class PieChart {
     root = inject(ChartContext);
-    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    valueKey = input.required(...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
-    nameKey = input.required(...(ngDevMode ? [{ debugName: "nameKey" }] : /* istanbul ignore next */ []));
-    seriesKeys = input(undefined, ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$3, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    innerRadius = input(0, ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
-    padAngle = input(0.01, ...(ngDevMode ? [{ debugName: "padAngle" }] : /* istanbul ignore next */ []));
-    cornerRadius = input(0, ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
-    startAngle = input(-Math.PI / 2, ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
-    endAngle = input((3 * Math.PI) / 2, ...(ngDevMode ? [{ debugName: "endAngle" }] : /* istanbul ignore next */ []));
-    showLabels = input(false, ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
-    activeIndex = input(undefined, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
-    activeOffset = input(12, ...(ngDevMode ? [{ debugName: "activeOffset" }] : /* istanbul ignore next */ []));
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    valueKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
+    nameKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nameKey" }] : /* istanbul ignore next */ []));
+    seriesKeys = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    innerRadius = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerRadius" }] : /* istanbul ignore next */ []));
+    padAngle = input(0.01, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "padAngle" }] : /* istanbul ignore next */ []));
+    cornerRadius = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
+    startAngle = input(-Math.PI / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
+    endAngle = input((3 * Math.PI) / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endAngle" }] : /* istanbul ignore next */ []));
+    showLabels = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    activeIndex = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    activeOffset = input(12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeOffset" }] : /* istanbul ignore next */ []));
     sliceClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
     layout = computed(() => computePieLayout({
         data: this.data(),
         valueKey: this.valueKey(),
@@ -2827,13 +2974,17 @@ class PieChart {
         endAngle: this.endAngle(),
         activeIndex: this.activeIndex(),
         activeOffset: this.activeOffset(),
-    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     viewBox = computed(() => {
         const { width, height } = this.root.dimensions();
         return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
-    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
-    ariaSummary = computed(() => `Pie chart, ${this.data().length} slices.`, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => `Pie chart, ${this.data().length} slices.`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
     sliceAriaLabel(s) {
         return `${s.name}: ${s.value}`;
     }
@@ -2863,8 +3014,8 @@ class PieChart {
     clearActive() {
         this.root.activePoint.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PieChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PieChart, isStandalone: true, selector: "ui-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: true, transformFunction: null }, nameKey: { classPropertyName: "nameKey", publicName: "nameKey", isSignal: true, isRequired: true, transformFunction: null }, seriesKeys: { classPropertyName: "seriesKeys", publicName: "seriesKeys", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, innerRadius: { classPropertyName: "innerRadius", publicName: "innerRadius", isSignal: true, isRequired: false, transformFunction: null }, padAngle: { classPropertyName: "padAngle", publicName: "padAngle", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, startAngle: { classPropertyName: "startAngle", publicName: "startAngle", isSignal: true, isRequired: false, transformFunction: null }, endAngle: { classPropertyName: "endAngle", publicName: "endAngle", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, activeOffset: { classPropertyName: "activeOffset", publicName: "activeOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliceClick: "sliceClick" }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PieChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: PieChart, isStandalone: true, selector: "ui-pie-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: true, transformFunction: null }, nameKey: { classPropertyName: "nameKey", publicName: "nameKey", isSignal: true, isRequired: true, transformFunction: null }, seriesKeys: { classPropertyName: "seriesKeys", publicName: "seriesKeys", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, innerRadius: { classPropertyName: "innerRadius", publicName: "innerRadius", isSignal: true, isRequired: false, transformFunction: null }, padAngle: { classPropertyName: "padAngle", publicName: "padAngle", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, startAngle: { classPropertyName: "startAngle", publicName: "startAngle", isSignal: true, isRequired: false, transformFunction: null }, endAngle: { classPropertyName: "endAngle", publicName: "endAngle", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null }, activeOffset: { classPropertyName: "activeOffset", publicName: "activeOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sliceClick: "sliceClick" }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
     <svg:svg
       class="block h-full w-full overflow-visible"
       [attr.viewBox]="viewBox()"
@@ -2912,7 +3063,7 @@ class PieChart {
     <ng-content select="ui-chart-legend" />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PieChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: PieChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-pie-chart',
@@ -3037,23 +3188,40 @@ function polygonPath(points) {
 const DEFAULT_MARGIN$2 = { top: 24, right: 24, bottom: 24, left: 24 };
 class RadarChart {
     root = inject(ChartContext);
-    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    axisKey = input.required(...(ngDevMode ? [{ debugName: "axisKey" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$2, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    curve = input('linear', ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
-    levels = input(4, ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
-    maxValue = input(undefined, ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
-    strokeWidth = input(2, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
-    fillOpacity = input(0.2, ...(ngDevMode ? [{ debugName: "fillOpacity" }] : /* istanbul ignore next */ []));
-    showLabels = input(true, ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
-    showDots = input(true, ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
-    dotRadius = input(3, ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
-    grid = input('circle', ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
-    gridFilled = input(false, ...(ngDevMode ? [{ debugName: "gridFilled" }] : /* istanbul ignore next */ []));
-    showAxes = input(true, ...(ngDevMode ? [{ debugName: "showAxes" }] : /* istanbul ignore next */ []));
-    linesOnly = input(false, ...(ngDevMode ? [{ debugName: "linesOnly" }] : /* istanbul ignore next */ []));
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    axisKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "axisKey" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    curve = input('linear', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []));
+    levels = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "levels" }] : /* istanbul ignore next */ []));
+    maxValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    strokeWidth = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    fillOpacity = input(0.2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fillOpacity" }] : /* istanbul ignore next */ []));
+    showLabels = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLabels" }] : /* istanbul ignore next */ []));
+    showDots = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDots" }] : /* istanbul ignore next */ []));
+    dotRadius = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotRadius" }] : /* istanbul ignore next */ []));
+    grid = input('circle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+    gridFilled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridFilled" }] : /* istanbul ignore next */ []));
+    showAxes = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showAxes" }] : /* istanbul ignore next */ []));
+    linesOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "linesOnly" }] : /* istanbul ignore next */ []));
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
     layout = computed(() => computeRadarLayout({
         data: this.data(),
         axisKey: this.axisKey(),
@@ -3064,16 +3232,20 @@ class RadarChart {
         levels: this.levels(),
         curve: this.curve(),
         grid: this.grid(),
-    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     viewBox = computed(() => {
         const { width, height } = this.root.dimensions();
         return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
-    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
     ariaSummary = computed(() => {
         const keys = this.root.visibleSeriesKeys();
         return `Radar chart, ${this.data().length} axes, ${keys.length} series.`;
-    }, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
     gridFill() {
         return this.gridFilled() ? 'hsl(var(--muted))' : 'none';
     }
@@ -3092,8 +3264,8 @@ class RadarChart {
     clearActive() {
         this.root.activePoint.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RadarChart, isStandalone: true, selector: "ui-radar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, axisKey: { classPropertyName: "axisKey", publicName: "axisKey", isSignal: true, isRequired: true, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, levels: { classPropertyName: "levels", publicName: "levels", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, gridFilled: { classPropertyName: "gridFilled", publicName: "gridFilled", isSignal: true, isRequired: false, transformFunction: null }, showAxes: { classPropertyName: "showAxes", publicName: "showAxes", isSignal: true, isRequired: false, transformFunction: null }, linesOnly: { classPropertyName: "linesOnly", publicName: "linesOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RadarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: RadarChart, isStandalone: true, selector: "ui-radar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, axisKey: { classPropertyName: "axisKey", publicName: "axisKey", isSignal: true, isRequired: true, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, levels: { classPropertyName: "levels", publicName: "levels", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, showDots: { classPropertyName: "showDots", publicName: "showDots", isSignal: true, isRequired: false, transformFunction: null }, dotRadius: { classPropertyName: "dotRadius", publicName: "dotRadius", isSignal: true, isRequired: false, transformFunction: null }, grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: false, transformFunction: null }, gridFilled: { classPropertyName: "gridFilled", publicName: "gridFilled", isSignal: true, isRequired: false, transformFunction: null }, showAxes: { classPropertyName: "showAxes", publicName: "showAxes", isSignal: true, isRequired: false, transformFunction: null }, linesOnly: { classPropertyName: "linesOnly", publicName: "linesOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
     <svg:svg
       class="block h-full w-full overflow-visible"
       [attr.viewBox]="viewBox()"
@@ -3173,7 +3345,7 @@ class RadarChart {
     <ng-content select="ui-chart-legend" />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadarChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RadarChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-radar-chart',
@@ -3302,22 +3474,37 @@ const DEFAULT_MARGIN$1 = { top: 8, right: 8, bottom: 8, left: 8 };
 const defaultRadialValueFormatter = (value) => `${value}`;
 class RadialChart {
     root = inject(ChartContext);
-    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    nameKey = input.required(...(ngDevMode ? [{ debugName: "nameKey" }] : /* istanbul ignore next */ []));
-    valueKey = input.required(...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
-    seriesKeys = input(undefined, ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN$1, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    trackPadding = input(4, ...(ngDevMode ? [{ debugName: "trackPadding" }] : /* istanbul ignore next */ []));
-    cornerRadius = input(8, ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
-    startAngle = input(-Math.PI / 2, ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
-    endAngle = input((3 * Math.PI) / 2, ...(ngDevMode ? [{ debugName: "endAngle" }] : /* istanbul ignore next */ []));
-    maxValue = input(undefined, ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
-    showTrack = input(true, ...(ngDevMode ? [{ debugName: "showTrack" }] : /* istanbul ignore next */ []));
-    showValueLabels = input(false, ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
-    valueLabelFormat = input(defaultRadialValueFormatter, ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    nameKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nameKey" }] : /* istanbul ignore next */ []));
+    valueKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []));
+    seriesKeys = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seriesKeys" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN$1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    trackPadding = input(4, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "trackPadding" }] : /* istanbul ignore next */ []));
+    cornerRadius = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []));
+    startAngle = input(-Math.PI / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "startAngle" }] : /* istanbul ignore next */ []));
+    endAngle = input((3 * Math.PI) / 2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "endAngle" }] : /* istanbul ignore next */ []));
+    maxValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxValue" }] : /* istanbul ignore next */ []));
+    showTrack = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showTrack" }] : /* istanbul ignore next */ []));
+    showValueLabels = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []));
+    valueLabelFormat = input(defaultRadialValueFormatter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []));
     barClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
     layout = computed(() => computeRadialLayout({
         data: this.data(),
         nameKey: this.nameKey(),
@@ -3330,13 +3517,17 @@ class RadialChart {
         endAngle: this.endAngle(),
         cornerRadius: this.cornerRadius(),
         maxValue: this.maxValue(),
-    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     viewBox = computed(() => {
         const { width, height } = this.root.dimensions();
         return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
-    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
-    ariaSummary = computed(() => `Radial bar chart, ${this.data().length} tracks.`, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => `Radial bar chart, ${this.data().length} tracks.`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
     barAriaLabel(b) {
         return `${b.name}: ${b.value}`;
     }
@@ -3377,8 +3568,8 @@ class RadialChart {
     clearActive() {
         this.root.activePoint.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadialChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: RadialChart, isStandalone: true, selector: "ui-radial-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nameKey: { classPropertyName: "nameKey", publicName: "nameKey", isSignal: true, isRequired: true, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: true, transformFunction: null }, seriesKeys: { classPropertyName: "seriesKeys", publicName: "seriesKeys", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, trackPadding: { classPropertyName: "trackPadding", publicName: "trackPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, startAngle: { classPropertyName: "startAngle", publicName: "startAngle", isSignal: true, isRequired: false, transformFunction: null }, endAngle: { classPropertyName: "endAngle", publicName: "endAngle", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, showTrack: { classPropertyName: "showTrack", publicName: "showTrack", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RadialChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: RadialChart, isStandalone: true, selector: "ui-radial-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nameKey: { classPropertyName: "nameKey", publicName: "nameKey", isSignal: true, isRequired: true, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: true, isRequired: true, transformFunction: null }, seriesKeys: { classPropertyName: "seriesKeys", publicName: "seriesKeys", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, trackPadding: { classPropertyName: "trackPadding", publicName: "trackPadding", isSignal: true, isRequired: false, transformFunction: null }, cornerRadius: { classPropertyName: "cornerRadius", publicName: "cornerRadius", isSignal: true, isRequired: false, transformFunction: null }, startAngle: { classPropertyName: "startAngle", publicName: "startAngle", isSignal: true, isRequired: false, transformFunction: null }, endAngle: { classPropertyName: "endAngle", publicName: "endAngle", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "maxValue", isSignal: true, isRequired: false, transformFunction: null }, showTrack: { classPropertyName: "showTrack", publicName: "showTrack", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, valueLabelFormat: { classPropertyName: "valueLabelFormat", publicName: "valueLabelFormat", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
     <svg:svg
       class="block h-full w-full overflow-visible"
       [attr.viewBox]="viewBox()"
@@ -3426,7 +3617,7 @@ class RadialChart {
     <ng-content select="ui-chart-legend" />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: RadialChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RadialChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-radial-chart',
@@ -3552,30 +3743,45 @@ const DEFAULT_MARGIN = { top: 8, right: 8, bottom: 24, left: 40 };
 class ScatterChart {
     root = inject(ChartContext);
     viewport = inject(ScatterViewportContext);
-    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-    xKey = input.required(...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
-    yKey = input.required(...(ngDevMode ? [{ debugName: "yKey" }] : /* istanbul ignore next */ []));
+    data = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    xKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []));
+    yKey = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yKey" }] : /* istanbul ignore next */ []));
     /** Optional numeric field to drive point radius. */
-    sizeKey = input(undefined, ...(ngDevMode ? [{ debugName: "sizeKey" }] : /* istanbul ignore next */ []));
+    sizeKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeKey" }] : /* istanbul ignore next */ []));
     /** Optional field on each datum used as color key. */
-    seriesKey = input(undefined, ...(ngDevMode ? [{ debugName: "seriesKey" }] : /* istanbul ignore next */ []));
-    margin = input(DEFAULT_MARGIN, ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    minPointRadius = input(3, ...(ngDevMode ? [{ debugName: "minPointRadius" }] : /* istanbul ignore next */ []));
-    maxPointRadius = input(12, ...(ngDevMode ? [{ debugName: "maxPointRadius" }] : /* istanbul ignore next */ []));
-    xDomain = input(undefined, ...(ngDevMode ? [{ debugName: "xDomain" }] : /* istanbul ignore next */ []));
-    yDomain = input(undefined, ...(ngDevMode ? [{ debugName: "yDomain" }] : /* istanbul ignore next */ []));
+    seriesKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "seriesKey" }] : /* istanbul ignore next */ []));
+    margin = input(DEFAULT_MARGIN, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
+    minPointRadius = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minPointRadius" }] : /* istanbul ignore next */ []));
+    maxPointRadius = input(12, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxPointRadius" }] : /* istanbul ignore next */ []));
+    xDomain = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "xDomain" }] : /* istanbul ignore next */ []));
+    yDomain = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "yDomain" }] : /* istanbul ignore next */ []));
     pointClick = output();
-    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
-    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
+    innerWidth = computed(() => Math.max(0, this.root.dimensions().width - this.margin().left - this.margin().right), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerWidth" }] : /* istanbul ignore next */ []));
+    innerHeight = computed(() => Math.max(0, this.root.dimensions().height - this.margin().top - this.margin().bottom), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerHeight" }] : /* istanbul ignore next */ []));
     resolvedDomains = computed(() => resolveScatterDomains({
         data: this.data(),
         xKey: this.xKey(),
         yKey: this.yKey(),
         xDomain: this.xDomain(),
         yDomain: this.yDomain(),
-    }), ...(ngDevMode ? [{ debugName: "resolvedDomains" }] : /* istanbul ignore next */ []));
-    currentXDomain = computed(() => this.viewport.zoomXDomain() ?? this.resolvedDomains().xDomain, ...(ngDevMode ? [{ debugName: "currentXDomain" }] : /* istanbul ignore next */ []));
-    currentYDomain = computed(() => this.viewport.zoomYDomain() ?? this.resolvedDomains().yDomain, ...(ngDevMode ? [{ debugName: "currentYDomain" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedDomains" }] : /* istanbul ignore next */ []));
+    currentXDomain = computed(() => this.viewport.zoomXDomain() ?? this.resolvedDomains().xDomain, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentXDomain" }] : /* istanbul ignore next */ []));
+    currentYDomain = computed(() => this.viewport.zoomYDomain() ?? this.resolvedDomains().yDomain, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentYDomain" }] : /* istanbul ignore next */ []));
     layout = computed(() => computeScatterLayout({
         data: this.data(),
         xKey: this.xKey(),
@@ -3589,14 +3795,19 @@ class ScatterChart {
         maxPointRadius: this.maxPointRadius(),
         xDomain: this.currentXDomain(),
         yDomain: this.currentYDomain(),
-    }), ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     viewBox = computed(() => {
         const { width, height } = this.root.dimensions();
         return `0 0 ${Math.max(0, width)} ${Math.max(0, height)}`;
-    }, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
-    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
-    clipPathId = computed(() => `${this.root.id()}-scatter-clip`, ...(ngDevMode ? [{ debugName: "clipPathId" }] : /* istanbul ignore next */ []));
-    ariaSummary = computed(() => `Scatter chart, ${this.data().length} points.`, ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
+    innerTransform = computed(() => `translate(${this.margin().left},${this.margin().top})`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "innerTransform" }] : /* istanbul ignore next */ []));
+    clipPathId = computed(() => `${this.root.id()}-scatter-clip`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clipPathId" }] : /* istanbul ignore next */ []));
+    ariaSummary = computed(() => `Scatter chart, ${this.data().length} points.`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const domains = this.resolvedDomains();
@@ -3621,8 +3832,8 @@ class ScatterChart {
             datum: this.data()[p.datumIndex],
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ScatterChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ScatterChart, isStandalone: true, selector: "ui-scatter-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, yKey: { classPropertyName: "yKey", publicName: "yKey", isSignal: true, isRequired: true, transformFunction: null }, sizeKey: { classPropertyName: "sizeKey", publicName: "sizeKey", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, minPointRadius: { classPropertyName: "minPointRadius", publicName: "minPointRadius", isSignal: true, isRequired: false, transformFunction: null }, maxPointRadius: { classPropertyName: "maxPointRadius", publicName: "maxPointRadius", isSignal: true, isRequired: false, transformFunction: null }, xDomain: { classPropertyName: "xDomain", publicName: "xDomain", isSignal: true, isRequired: false, transformFunction: null }, yDomain: { classPropertyName: "yDomain", publicName: "yDomain", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [ScatterViewportContext], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScatterChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.0", type: ScatterChart, isStandalone: true, selector: "ui-scatter-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, xKey: { classPropertyName: "xKey", publicName: "xKey", isSignal: true, isRequired: true, transformFunction: null }, yKey: { classPropertyName: "yKey", publicName: "yKey", isSignal: true, isRequired: true, transformFunction: null }, sizeKey: { classPropertyName: "sizeKey", publicName: "sizeKey", isSignal: true, isRequired: false, transformFunction: null }, seriesKey: { classPropertyName: "seriesKey", publicName: "seriesKey", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, minPointRadius: { classPropertyName: "minPointRadius", publicName: "minPointRadius", isSignal: true, isRequired: false, transformFunction: null }, maxPointRadius: { classPropertyName: "maxPointRadius", publicName: "maxPointRadius", isSignal: true, isRequired: false, transformFunction: null }, xDomain: { classPropertyName: "xDomain", publicName: "xDomain", isSignal: true, isRequired: false, transformFunction: null }, yDomain: { classPropertyName: "yDomain", publicName: "yDomain", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick" }, host: { classAttribute: "relative block h-full w-full" }, providers: [ScatterViewportContext], ngImport: i0, template: `
     <svg:svg
       class="block h-full w-full overflow-visible"
       [attr.viewBox]="viewBox()"
@@ -3657,7 +3868,7 @@ class ScatterChart {
     <ng-content select="ui-chart-zoom-controls" />
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ScatterChart, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: ScatterChart, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-scatter-chart',