@ojiepermana/angular 22.1.13 → 22.2.0

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

@@ -1,524 +1,547 @@
-import * as i0 from '@angular/core';
-import { inject, input, output, computed, Component } from '@angular/core';
-import { resolveSeriesColor, seriesColorVar, readNumber, zeroBaselineDomain, ChartContext, CartesianContext, ChartThemeRadius, resolveChartStyle, ChartThemeSpace, resolveChartMargin, DEFAULT_CARTESIAN_MARGIN_UNITS, setupCartesianChart, ChartRovingFocus, ChartMarkFocus, ChartDataTable } from '@ojiepermana/angular/chart/core';
-import { scaleBand, scaleLinear } from 'd3-scale';
-import { min, max } from 'd3-array';
-import { stack } from 'd3-shape';
-import { ChartPointerTracker } from '@ojiepermana/angular/chart/primitives';
-
+import * as i0 from "@angular/core";
+import { Component, computed, inject, input, output } from "@angular/core";
+import { CartesianContext, ChartContext, ChartDataTable, ChartMarkFocus, ChartRovingFocus, ChartThemeRadius, ChartThemeSpace, DEFAULT_CARTESIAN_MARGIN_UNITS, readNumber, resolveChartMargin, resolveChartStyle, resolveSeriesColor, seriesColorVar, setupCartesianChart, zeroBaselineDomain } from "@ojiepermana/angular/chart/core";
+import { scaleBand, scaleLinear } from "d3-scale";
+import { max, min } from "d3-array";
+import { stack } from "d3-shape";
+import { ChartPointerTracker } from "@ojiepermana/angular/chart/primitives";
 function resolveBarColor(datum, seriesKey, colorKey) {
-    return resolveSeriesColor(colorKey ? datum[colorKey] : undefined, seriesColorVar(seriesKey));
+	return resolveSeriesColor(colorKey ? datum[colorKey] : void 0, seriesColorVar(seriesKey));
 }
 function isActiveBar(datum, activeKey, activeValue) {
-    if (!activeKey || activeValue === undefined) {
-        return false;
-    }
-    const value = datum[activeKey];
-    if (typeof value === 'number' && typeof activeValue === 'number') {
-        return value === activeValue;
-    }
-    return String(value ?? '') === String(activeValue);
+	if (!activeKey || activeValue === void 0) return false;
+	const value = datum[activeKey];
+	if (typeof value === "number" && typeof activeValue === "number") return value === activeValue;
+	return String(value ?? "") === String(activeValue);
 }
-/** Build all bar rectangles for the given config. */
 function computeBarLayout(input) {
-    const { data, xKey, seriesKeys, variant, orientation, innerWidth, innerHeight, bandPadding, groupPadding, colorKey, activeKey, activeValue, } = input;
-    const categories = data.map((d) => String(d[xKey] ?? ''));
-    const isVertical = orientation === 'vertical';
-    const categoryScale = scaleBand()
-        .domain(categories)
-        .range(isVertical ? [0, innerWidth] : [0, innerHeight])
-        .padding(bandPadding);
-    const valueScale = scaleLinear();
-    if (variant === 'stacked' && seriesKeys.length > 0) {
-        return stackedLayout({
-            data,
-            xKey,
-            seriesKeys,
-            orientation,
-            innerWidth,
-            innerHeight,
-            categoryScale,
-            valueScale,
-            categories,
-            colorKey,
-            activeKey,
-            activeValue,
-        });
-    }
-    return groupedLayout({
-        data,
-        xKey,
-        seriesKeys,
-        orientation,
-        innerWidth,
-        innerHeight,
-        categoryScale,
-        valueScale,
-        groupPadding,
-        categories,
-        colorKey,
-        activeKey,
-        activeValue,
-    });
+	const { data, xKey, seriesKeys, variant, orientation, innerWidth, innerHeight, bandPadding, groupPadding, colorKey, activeKey, activeValue } = input;
+	const categories = data.map((d) => String(d[xKey] ?? ""));
+	const isVertical = orientation === "vertical";
+	const categoryScale = scaleBand().domain(categories).range(isVertical ? [0, innerWidth] : [0, innerHeight]).padding(bandPadding);
+	const valueScale = scaleLinear();
+	if (variant === "stacked" && seriesKeys.length > 0) return stackedLayout({
+		data,
+		xKey,
+		seriesKeys,
+		orientation,
+		innerWidth,
+		innerHeight,
+		categoryScale,
+		valueScale,
+		categories,
+		colorKey,
+		activeKey,
+		activeValue
+	});
+	return groupedLayout({
+		data,
+		xKey,
+		seriesKeys,
+		orientation,
+		innerWidth,
+		innerHeight,
+		categoryScale,
+		valueScale,
+		groupPadding,
+		categories,
+		colorKey,
+		activeKey,
+		activeValue
+	});
 }
 function groupedLayout(input) {
-    const { data, seriesKeys, orientation, innerWidth, innerHeight, categoryScale, valueScale, groupPadding, categories, colorKey, activeKey, activeValue, } = input;
-    const isVertical = orientation === 'vertical';
-    const minValue = min(data, (d) => min(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 0;
-    const maxValue = max(data, (d) => max(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 0;
-    const [domainMin, domainMax] = zeroBaselineDomain(minValue, maxValue);
-    valueScale
-        .domain([domainMin, domainMax])
-        .nice()
-        .range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
-    const baseline = valueScale(0);
-    const subScale = scaleBand()
-        .domain(seriesKeys)
-        .range([0, categoryScale.bandwidth()])
-        .padding(groupPadding);
-    const bars = [];
-    data.forEach((datum, datumIndex) => {
-        const category = categories[datumIndex];
-        const bandStart = categoryScale(category) ?? 0;
-        seriesKeys.forEach((seriesKey) => {
-            const value = readNumber(datum, seriesKey);
-            const sub = subScale(seriesKey) ?? 0;
-            const scaledValue = valueScale(value);
-            const color = resolveBarColor(datum, seriesKey, colorKey);
-            const active = isActiveBar(datum, activeKey, activeValue);
-            const rect = isVertical
-                ? {
-                    key: `${datumIndex}-${seriesKey}`,
-                    seriesKey,
-                    datumIndex,
-                    category,
-                    value,
-                    x: bandStart + sub,
-                    y: Math.min(scaledValue, baseline),
-                    width: subScale.bandwidth(),
-                    height: Math.abs(baseline - scaledValue),
-                    color,
-                    active,
-                }
-                : {
-                    key: `${datumIndex}-${seriesKey}`,
-                    seriesKey,
-                    datumIndex,
-                    category,
-                    value,
-                    x: Math.min(scaledValue, baseline),
-                    y: bandStart + sub,
-                    width: Math.abs(baseline - scaledValue),
-                    height: subScale.bandwidth(),
-                    color,
-                    active,
-                };
-            bars.push(rect);
-        });
-    });
-    return { bars, categoryScale, valueScale, categories };
+	const { data, seriesKeys, orientation, innerWidth, innerHeight, categoryScale, valueScale, groupPadding, categories, colorKey, activeKey, activeValue } = input;
+	const isVertical = orientation === "vertical";
+	const minValue = min(data, (d) => min(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 0;
+	const maxValue = max(data, (d) => max(seriesKeys, (k) => readNumber(d, k)) ?? 0) ?? 0;
+	const [domainMin, domainMax] = zeroBaselineDomain(minValue, maxValue);
+	valueScale.domain([domainMin, domainMax]).nice().range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
+	const baseline = valueScale(0);
+	const subScale = scaleBand().domain(seriesKeys).range([0, categoryScale.bandwidth()]).padding(groupPadding);
+	const bars = [];
+	data.forEach((datum, datumIndex) => {
+		const category = categories[datumIndex];
+		const bandStart = categoryScale(category) ?? 0;
+		seriesKeys.forEach((seriesKey) => {
+			const value = readNumber(datum, seriesKey);
+			const sub = subScale(seriesKey) ?? 0;
+			const scaledValue = valueScale(value);
+			const color = resolveBarColor(datum, seriesKey, colorKey);
+			const active = isActiveBar(datum, activeKey, activeValue);
+			const rect = isVertical ? {
+				key: `${datumIndex}-${seriesKey}`,
+				seriesKey,
+				datumIndex,
+				category,
+				value,
+				x: bandStart + sub,
+				y: Math.min(scaledValue, baseline),
+				width: subScale.bandwidth(),
+				height: Math.abs(baseline - scaledValue),
+				color,
+				active
+			} : {
+				key: `${datumIndex}-${seriesKey}`,
+				seriesKey,
+				datumIndex,
+				category,
+				value,
+				x: Math.min(scaledValue, baseline),
+				y: bandStart + sub,
+				width: Math.abs(baseline - scaledValue),
+				height: subScale.bandwidth(),
+				color,
+				active
+			};
+			bars.push(rect);
+		});
+	});
+	return {
+		bars,
+		categoryScale,
+		valueScale,
+		categories
+	};
 }
 function stackedLayout(input) {
-    const { data, seriesKeys, orientation, innerWidth, innerHeight, categoryScale, valueScale, categories, colorKey, activeKey, activeValue, } = input;
-    const isVertical = orientation === 'vertical';
-    const normalized = data.map((d) => {
-        const out = {};
-        for (const k of seriesKeys) {
-            out[k] = readNumber(d, k);
-        }
-        return out;
-    });
-    const series = stack().keys(seriesKeys)(normalized);
-    // Every layer is measured, not just the last one: a stack that runs below the
-    // baseline puts its extreme on whichever layer carries the negative values.
-    const minTotal = min(series, (layer) => min(layer, (p) => Math.min(p[0], p[1]))) ?? 0;
-    const maxTotal = max(series, (layer) => max(layer, (p) => Math.max(p[0], p[1]))) ?? 0;
-    const [domainMin, domainMax] = zeroBaselineDomain(minTotal, maxTotal);
-    valueScale
-        .domain([domainMin, domainMax])
-        .nice()
-        .range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
-    const bars = [];
-    series.forEach((layer) => {
-        const seriesKey = layer.key;
-        layer.forEach((point, datumIndex) => {
-            const [lower, upper] = point;
-            const value = upper - lower;
-            const category = categories[datumIndex];
-            const bandStart = categoryScale(category) ?? 0;
-            const color = resolveBarColor(data[datumIndex], seriesKey, colorKey);
-            const active = isActiveBar(data[datumIndex], activeKey, activeValue);
-            // A negative segment stacks downward, so `upper` lands on the far side of
-            // the baseline from `lower`. Taking the near edge and the absolute span
-            // keeps the rectangle drawable whichever way round the pair sits.
-            const lowerCoord = valueScale(lower);
-            const upperCoord = valueScale(upper);
-            const span = Math.abs(upperCoord - lowerCoord);
-            const rect = isVertical
-                ? {
-                    key: `${datumIndex}-${seriesKey}`,
-                    seriesKey,
-                    datumIndex,
-                    category,
-                    value,
-                    x: bandStart,
-                    y: Math.min(lowerCoord, upperCoord),
-                    width: categoryScale.bandwidth(),
-                    height: span,
-                    color,
-                    active,
-                }
-                : {
-                    key: `${datumIndex}-${seriesKey}`,
-                    seriesKey,
-                    datumIndex,
-                    category,
-                    value,
-                    x: Math.min(lowerCoord, upperCoord),
-                    y: bandStart,
-                    width: span,
-                    height: categoryScale.bandwidth(),
-                    color,
-                    active,
-                };
-            bars.push(rect);
-        });
-    });
-    return { bars, categoryScale, valueScale, categories };
+	const { data, seriesKeys, orientation, innerWidth, innerHeight, categoryScale, valueScale, categories, colorKey, activeKey, activeValue } = input;
+	const isVertical = orientation === "vertical";
+	const normalized = data.map((d) => {
+		const out = {};
+		for (const k of seriesKeys) out[k] = readNumber(d, k);
+		return out;
+	});
+	const series = stack().keys(seriesKeys)(normalized);
+	const minTotal = min(series, (layer) => min(layer, (p) => Math.min(p[0], p[1]))) ?? 0;
+	const maxTotal = max(series, (layer) => max(layer, (p) => Math.max(p[0], p[1]))) ?? 0;
+	const [domainMin, domainMax] = zeroBaselineDomain(minTotal, maxTotal);
+	valueScale.domain([domainMin, domainMax]).nice().range(isVertical ? [innerHeight, 0] : [0, innerWidth]);
+	const bars = [];
+	series.forEach((layer) => {
+		const seriesKey = layer.key;
+		layer.forEach((point, datumIndex) => {
+			const [lower, upper] = point;
+			const value = upper - lower;
+			const category = categories[datumIndex];
+			const bandStart = categoryScale(category) ?? 0;
+			const color = resolveBarColor(data[datumIndex], seriesKey, colorKey);
+			const active = isActiveBar(data[datumIndex], activeKey, activeValue);
+			const lowerCoord = valueScale(lower);
+			const upperCoord = valueScale(upper);
+			const span = Math.abs(upperCoord - lowerCoord);
+			const rect = isVertical ? {
+				key: `${datumIndex}-${seriesKey}`,
+				seriesKey,
+				datumIndex,
+				category,
+				value,
+				x: bandStart,
+				y: Math.min(lowerCoord, upperCoord),
+				width: categoryScale.bandwidth(),
+				height: span,
+				color,
+				active
+			} : {
+				key: `${datumIndex}-${seriesKey}`,
+				seriesKey,
+				datumIndex,
+				category,
+				value,
+				x: Math.min(lowerCoord, upperCoord),
+				y: bandStart,
+				width: span,
+				height: categoryScale.bandwidth(),
+				color,
+				active
+			};
+			bars.push(rect);
+		});
+	});
+	return {
+		bars,
+		categoryScale,
+		valueScale,
+		categories
+	};
 }
-
-/** Hard cap so degenerate inputs (tiny `dotSize`) cannot explode the DOM. */
 const MAX_ROWS_PER_COLUMN = 400;
-const EDGE_TOLERANCE = 0.5;
-/**
- * Build the dot-matrix cells for the `dot` bar style.
- *
- * Cells tile a global grid anchored at the value baseline, so stacked
- * segments snap to the same rows and never overlap. A bar fills every cell
- * whose center lies inside its value range; bars too short to cover a center
- * still claim the cell nearest their midpoint when it is free.
- */
+const EDGE_TOLERANCE = .5;
 function computeBarDotCells(input) {
-    const { bars, orientation, innerWidth, innerHeight, baseline, dotSize, dotGap } = input;
-    const isVertical = orientation === 'vertical';
-    const innerLength = isVertical ? innerHeight : innerWidth;
-    const track = [];
-    const values = [];
-    if (innerLength <= 0 || bars.length === 0) {
-        return { track, values };
-    }
-    const columns = groupColumns(bars, isVertical);
-    columns.forEach((column, columnIndex) => {
-        const cellLength = dotSize ?? column.thickness;
-        const step = cellLength + dotGap;
-        if (cellLength <= 0 || step <= EDGE_TOLERANCE) {
-            return;
-        }
-        // Signed row index r anchored at the baseline: r = 0 is the first cell on
-        // the positive-value side, negative r tiles the negative side.
-        // `rowStart(r)` is the cell's lower main-axis coordinate (top edge for
-        // vertical, left edge for horizontal); `rowAt(c)` is the fractional row
-        // whose cell center sits at coordinate c.
-        const rowStart = (r) => isVertical ? baseline - r * step - cellLength : baseline + r * step;
-        const rowAt = (c) => isVertical ? (baseline - c - cellLength / 2) / step : (c - baseline - cellLength / 2) / step;
-        // Rows whose cell lies fully inside the plot area.
-        const rMin = Math.ceil(isVertical
-            ? (baseline - innerLength - EDGE_TOLERANCE) / step
-            : (-baseline - EDGE_TOLERANCE) / step);
-        let rMax = Math.floor(isVertical
-            ? (baseline - cellLength + EDGE_TOLERANCE) / step
-            : (innerLength - baseline - cellLength + EDGE_TOLERANCE) / step);
-        if (rMax - rMin + 1 > MAX_ROWS_PER_COLUMN) {
-            rMax = rMin + MAX_ROWS_PER_COLUMN - 1;
-        }
-        const cellRect = (r) => isVertical
-            ? { x: column.pos, y: rowStart(r), width: column.thickness, height: cellLength }
-            : { x: rowStart(r), y: column.pos, width: cellLength, height: column.thickness };
-        for (let r = rMin; r <= rMax; r++) {
-            track.push({ key: `${columnIndex}:${r}`, ...cellRect(r) });
-        }
-        const usedRows = new Set();
-        for (const bar of column.bars) {
-            const barLength = isVertical ? bar.height : bar.width;
-            if (barLength <= EDGE_TOLERANCE) {
-                continue;
-            }
-            const barStart = isVertical ? bar.y : bar.x;
-            const barEnd = barStart + barLength;
-            // Rows whose cell center falls inside [barStart, barEnd] (± tolerance).
-            const rA = rowAt(barStart);
-            const rB = rowAt(barEnd);
-            const first = Math.max(Math.ceil(Math.min(rA, rB) - EDGE_TOLERANCE / step), rMin);
-            const last = Math.min(Math.floor(Math.max(rA, rB) + EDGE_TOLERANCE / step), rMax);
-            const rows = [];
-            for (let r = first; r <= last; r++) {
-                rows.push(r);
-            }
-            // Guarantee visibility: a non-zero bar shorter than one cell claims the
-            // row nearest its midpoint when that row is still free.
-            if (rows.length === 0) {
-                const r = Math.round(rowAt(barStart + barLength / 2));
-                if (r >= rMin && r <= rMax && !usedRows.has(r)) {
-                    rows.push(r);
-                }
-            }
-            for (const r of rows) {
-                if (usedRows.has(r)) {
-                    continue;
-                }
-                usedRows.add(r);
-                values.push({
-                    key: `${bar.key}:${r}`,
-                    ...cellRect(r),
-                    seriesKey: bar.seriesKey,
-                    datumIndex: bar.datumIndex,
-                    color: bar.color,
-                    active: bar.active,
-                });
-            }
-        }
-    });
-    return { track, values };
+	const { bars, orientation, innerWidth, innerHeight, baseline, dotSize, dotGap } = input;
+	const isVertical = orientation === "vertical";
+	const innerLength = isVertical ? innerHeight : innerWidth;
+	const track = [];
+	const values = [];
+	if (innerLength <= 0 || bars.length === 0) return {
+		track,
+		values
+	};
+	groupColumns(bars, isVertical).forEach((column, columnIndex) => {
+		const cellLength = dotSize ?? column.thickness;
+		const step = cellLength + dotGap;
+		if (cellLength <= 0 || step <= EDGE_TOLERANCE) return;
+		const rowStart = (r) => isVertical ? baseline - r * step - cellLength : baseline + r * step;
+		const rowAt = (c) => isVertical ? (baseline - c - cellLength / 2) / step : (c - baseline - cellLength / 2) / step;
+		const rMin = Math.ceil(isVertical ? (baseline - innerLength - EDGE_TOLERANCE) / step : (-baseline - EDGE_TOLERANCE) / step);
+		let rMax = Math.floor(isVertical ? (baseline - cellLength + EDGE_TOLERANCE) / step : (innerLength - baseline - cellLength + EDGE_TOLERANCE) / step);
+		if (rMax - rMin + 1 > MAX_ROWS_PER_COLUMN) rMax = rMin + MAX_ROWS_PER_COLUMN - 1;
+		const cellRect = (r) => isVertical ? {
+			x: column.pos,
+			y: rowStart(r),
+			width: column.thickness,
+			height: cellLength
+		} : {
+			x: rowStart(r),
+			y: column.pos,
+			width: cellLength,
+			height: column.thickness
+		};
+		for (let r = rMin; r <= rMax; r++) track.push({
+			key: `${columnIndex}:${r}`,
+			...cellRect(r)
+		});
+		const usedRows = /* @__PURE__ */ new Set();
+		for (const bar of column.bars) {
+			const barLength = isVertical ? bar.height : bar.width;
+			if (barLength <= EDGE_TOLERANCE) continue;
+			const barStart = isVertical ? bar.y : bar.x;
+			const barEnd = barStart + barLength;
+			const rA = rowAt(barStart);
+			const rB = rowAt(barEnd);
+			const first = Math.max(Math.ceil(Math.min(rA, rB) - EDGE_TOLERANCE / step), rMin);
+			const last = Math.min(Math.floor(Math.max(rA, rB) + EDGE_TOLERANCE / step), rMax);
+			const rows = [];
+			for (let r = first; r <= last; r++) rows.push(r);
+			if (rows.length === 0) {
+				const r = Math.round(rowAt(barStart + barLength / 2));
+				if (r >= rMin && r <= rMax && !usedRows.has(r)) rows.push(r);
+			}
+			for (const r of rows) {
+				if (usedRows.has(r)) continue;
+				usedRows.add(r);
+				values.push({
+					key: `${bar.key}:${r}`,
+					...cellRect(r),
+					seriesKey: bar.seriesKey,
+					datumIndex: bar.datumIndex,
+					color: bar.color,
+					active: bar.active
+				});
+			}
+		}
+	});
+	return {
+		track,
+		values
+	};
 }
-/** Group bars sharing the same cross-axis band into one cell column. */
 function groupColumns(bars, isVertical) {
-    const map = new Map();
-    for (const bar of bars) {
-        const pos = isVertical ? bar.x : bar.y;
-        const thickness = isVertical ? bar.width : bar.height;
-        if (thickness <= 0) {
-            continue;
-        }
-        const key = `${pos.toFixed(2)}:${thickness.toFixed(2)}`;
-        const existing = map.get(key);
-        if (existing) {
-            existing.bars.push(bar);
-        }
-        else {
-            map.set(key, { pos, thickness, bars: [bar] });
-        }
-    }
-    return [...map.values()];
+	const map = /* @__PURE__ */ new Map();
+	for (const bar of bars) {
+		const pos = isVertical ? bar.x : bar.y;
+		const thickness = isVertical ? bar.width : bar.height;
+		if (thickness <= 0) continue;
+		const key = `${pos.toFixed(2)}:${thickness.toFixed(2)}`;
+		const existing = map.get(key);
+		if (existing) existing.bars.push(bar);
+		else map.set(key, {
+			pos,
+			thickness,
+			bars: [bar]
+		});
+	}
+	return [...map.values()];
 }
-
 const defaultBarValueFormatter = (value) => `${value}`;
-/**
- * Bar chart — composable within `<Chart>`.
- *
- * Layout variants (via inputs):
- * - `orientation`: `'vertical'` (default) or `'horizontal'`
- * - `variant`:     `'grouped'`  (default) or `'stacked'`
- * - `styles`:      `'base'`     (default) or `'dot'` (dot-matrix cells)
- */
-class BarChart {
-    root = inject(ChartContext);
-    cart = inject(CartesianContext);
-    themeRadius = inject(ChartThemeRadius);
-    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 */ []));
-    /**
-     * Presentational style of the chart.
-     *
-     * Replaces `styles`, which read like a CSS styles bag rather than a single
-     * variant. Named `styleVariant` and not `variant` because `ChartBar` already
-     * publishes a `variant` input for its grouped versus stacked axis, and one
-     * name cannot mean two things across the family.
-     */
-    styleVariant = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "styleVariant" }] : /* istanbul ignore next */ []));
-    /**
-     * @deprecated Use `styleVariant`. Still fully supported; when both are bound,
-     *   `styleVariant` wins. Due for removal in the next major.
-     */
-    styles = input('base', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []));
-    /** The style actually in effect. Bind this, never `styles()`. */
-    chartStyle = resolveChartStyle(this.styleVariant, this.styles);
-    themeSpace = inject(ChartThemeSpace);
-    /**
-     * Plot gutters. Leave it unset and they follow the theme-space density
-     * axis; set it and your numbers win, unchanged, whatever the axis says.
-     */
-    margin = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []));
-    /** The margin actually in effect. Bind this, never `margin()`. */
-    plotMargin = resolveChartMargin(this.margin, DEFAULT_CARTESIAN_MARGIN_UNITS, this.themeSpace);
-    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(null, /* @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 */ []));
-    /** Cell length along the value axis for the `dot` style; defaults to the bar thickness. */
-    dotSize = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotSize" }] : /* istanbul ignore next */ []));
-    /** Gap between consecutive cells along the value axis for the `dot` style. */
-    dotGap = input(2, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotGap" }] : /* istanbul ignore next */ []));
-    /** Corner radius of each `dot` cell. */
-    dotCornerRadius = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotCornerRadius" }] : /* istanbul ignore next */ []));
-    /** Render the faint full-height cell track behind the `dot` values. */
-    showDotTrack = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showDotTrack" }] : /* istanbul ignore next */ []));
-    barClick = output();
-    /**
-     * The shared cartesian scaffolding: geometry, the layout effect, and the click
-     * plus active-point plus aria-label handlers. No `viewport` here, so the bar
-     * chart always renders its whole dataset and `resolveDatumIndex` is the
-     * identity.
-     *
-     * Declared before `layout` because the layout computed reads its geometry.
-     */
-    cx = setupCartesianChart({
-        data: () => this.data(),
-        margin: () => this.plotMargin(),
-        cartesian: { context: this.cart, orientation: () => this.orientation() },
-        publishLayout: () => {
-            const layout = this.layout();
-            this.cart.categoryScale.set(layout.categoryScale);
-            this.cart.valueScale.set(layout.valueScale);
-            this.cart.categories.set(layout.categories);
-        },
-        click: {
-            emit: (event) => this.barClick.emit(event),
-            payload: (bar, datumIndex, datum) => ({
-                seriesKey: bar.seriesKey,
-                datumIndex,
-                category: bar.category,
-                value: bar.value,
-                datum,
-            }),
-        },
-        ariaLabel: (bar, label) => `${label} in ${bar.category}: ${bar.value}`,
-    });
-    /** Bar corner radius; an unset input follows the live theme-radius axis. */
-    resolvedCornerRadius = computed(() => this.cornerRadius() ?? this.themeRadius.px(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedCornerRadius" }] : /* istanbul ignore next */ []));
-    /** Dot-cell corner radius; an unset input follows the theme-radius axis (smaller, SVG clamps to half the cell). */
-    resolvedDotCornerRadius = computed(() => this.dotCornerRadius() ?? Math.min(this.themeRadius.px() * 0.5, 4), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedDotCornerRadius" }] : /* istanbul ignore next */ []));
-    layout = computed(() => computeBarLayout({
-        data: this.data(),
-        xKey: this.xKey(),
-        seriesKeys: this.root.visibleSeriesKeys(),
-        variant: this.variant(),
-        orientation: this.orientation(),
-        innerWidth: this.cx.innerWidth(),
-        innerHeight: this.cx.innerHeight(),
-        bandPadding: this.bandPadding(),
-        groupPadding: this.groupPadding(),
-        colorKey: this.colorKey(),
-        activeKey: this.activeKey(),
-        activeValue: this.activeValue(),
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    bars = computed(() => this.layout().bars, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
-    dotLayout = computed(() => {
-        if (this.chartStyle() !== 'dot') {
-            return null;
-        }
-        const layout = this.layout();
-        return computeBarDotCells({
-            bars: layout.bars,
-            orientation: this.orientation(),
-            innerWidth: this.cx.innerWidth(),
-            innerHeight: this.cx.innerHeight(),
-            baseline: layout.valueScale(0),
-            dotSize: this.dotSize(),
-            dotGap: this.dotGap(),
-        });
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotLayout" }] : /* istanbul ignore next */ []));
-    dotTrackCells = computed(() => this.showDotTrack() ? (this.dotLayout()?.track ?? []) : [], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotTrackCells" }] : /* istanbul ignore next */ []));
-    dotValueCells = computed(() => this.dotLayout()?.values ?? [], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dotValueCells" }] : /* 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(', ')}.`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
-    visibleSeriesKeys = computed(() => this.root.visibleSeriesKeys(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visibleSeriesKeys" }] : /* istanbul ignore next */ []));
-    dataColumns = computed(() => [this.xKey(), ...this.visibleSeriesKeys()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []));
-    barOpacity(bar) {
-        return this.emphasisOpacity(bar.active);
-    }
-    dotCellOpacity(cell) {
-        return this.emphasisOpacity(cell.active);
-    }
-    /** In `dot` style the bar rect stays as an invisible interaction target. */
-    barFill(bar) {
-        return this.chartStyle() === 'dot' ? 'transparent' : bar.color;
-    }
-    emphasisOpacity(active) {
-        return this.activeKey() && this.activeValue() !== undefined ? (active ? 1 : 0.42) : 1;
-    }
-    formatValueLabel(bar) {
-        return this.valueLabelFormat()(bar.value);
-    }
-    barLabelX(bar) {
-        if (this.orientation() === 'vertical') {
-            return bar.x + bar.width / 2;
-        }
-        return bar.value >= 0 ? bar.x + bar.width + 6 : bar.x - 6;
-    }
-    barLabelY(bar) {
-        if (this.orientation() === 'vertical') {
-            return bar.value >= 0 ? bar.y - 8 : bar.y + bar.height + 10;
-        }
-        return bar.y + bar.height / 2;
-    }
-    barLabelAnchor(bar) {
-        if (this.orientation() === 'vertical') {
-            return 'middle';
-        }
-        return bar.value >= 0 ? 'start' : 'end';
-    }
-    onKeydown(event, index) {
-        const key = event.key;
-        let targetIndex = -1;
-        if (key === 'ArrowRight' || key === 'ArrowDown') {
-            targetIndex = index + 1;
-        }
-        else if (key === 'ArrowLeft' || key === 'ArrowUp') {
-            targetIndex = index - 1;
-        }
-        if (targetIndex >= 0 && targetIndex < this.bars().length) {
-            event.preventDefault();
-            const svgEl = event.currentTarget;
-            const parent = svgEl.parentElement;
-            if (parent) {
-                const rects = parent.querySelectorAll('.chart-bar');
-                const targetRect = rects[targetIndex];
-                if (targetRect) {
-                    targetRect.focus();
-                }
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: BarChart, isStandalone: true, selector: "ChartBar", 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 }, styleVariant: { classPropertyName: "styleVariant", publicName: "styleVariant", isSignal: true, isRequired: false, transformFunction: null }, styles: { classPropertyName: "styles", publicName: "styles", 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 }, dotSize: { classPropertyName: "dotSize", publicName: "dotSize", isSignal: true, isRequired: false, transformFunction: null }, dotGap: { classPropertyName: "dotGap", publicName: "dotGap", isSignal: true, isRequired: false, transformFunction: null }, dotCornerRadius: { classPropertyName: "dotCornerRadius", publicName: "dotCornerRadius", isSignal: true, isRequired: false, transformFunction: null }, showDotTrack: { classPropertyName: "showDotTrack", publicName: "showDotTrack", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { barClick: "barClick" }, host: { properties: { "attr.data-style": "chartStyle()" }, classAttribute: "relative block h-full w-full" }, providers: [CartesianContext], ngImport: i0, template: `
+var BarChart = class BarChart {
+	root = inject(ChartContext);
+	cart = inject(CartesianContext);
+	themeRadius = inject(ChartThemeRadius);
+	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 */ []);
+	styleVariant = input(void 0, ...ngDevMode ? [{ debugName: "styleVariant" }] : /* istanbul ignore next */ []);
+	styles = input("base", ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+	chartStyle = resolveChartStyle(this.styleVariant, this.styles);
+	themeSpace = inject(ChartThemeSpace);
+	margin = input(null, ...ngDevMode ? [{ debugName: "margin" }] : /* istanbul ignore next */ []);
+	plotMargin = resolveChartMargin(this.margin, DEFAULT_CARTESIAN_MARGIN_UNITS, this.themeSpace);
+	bandPadding = input(.2, ...ngDevMode ? [{ debugName: "bandPadding" }] : /* istanbul ignore next */ []);
+	groupPadding = input(.05, ...ngDevMode ? [{ debugName: "groupPadding" }] : /* istanbul ignore next */ []);
+	cornerRadius = input(null, ...ngDevMode ? [{ debugName: "cornerRadius" }] : /* istanbul ignore next */ []);
+	colorKey = input(void 0, ...ngDevMode ? [{ debugName: "colorKey" }] : /* istanbul ignore next */ []);
+	activeKey = input(void 0, ...ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []);
+	activeValue = input(void 0, ...ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []);
+	showValueLabels = input(false, ...ngDevMode ? [{ debugName: "showValueLabels" }] : /* istanbul ignore next */ []);
+	valueLabelFormat = input(defaultBarValueFormatter, ...ngDevMode ? [{ debugName: "valueLabelFormat" }] : /* istanbul ignore next */ []);
+	dotSize = input(void 0, ...ngDevMode ? [{ debugName: "dotSize" }] : /* istanbul ignore next */ []);
+	dotGap = input(2, ...ngDevMode ? [{ debugName: "dotGap" }] : /* istanbul ignore next */ []);
+	dotCornerRadius = input(null, ...ngDevMode ? [{ debugName: "dotCornerRadius" }] : /* istanbul ignore next */ []);
+	showDotTrack = input(true, ...ngDevMode ? [{ debugName: "showDotTrack" }] : /* istanbul ignore next */ []);
+	barClick = output();
+	cx = setupCartesianChart({
+		data: () => this.data(),
+		margin: () => this.plotMargin(),
+		cartesian: {
+			context: this.cart,
+			orientation: () => this.orientation()
+		},
+		publishLayout: () => {
+			const layout = this.layout();
+			this.cart.categoryScale.set(layout.categoryScale);
+			this.cart.valueScale.set(layout.valueScale);
+			this.cart.categories.set(layout.categories);
+		},
+		click: {
+			emit: (event) => this.barClick.emit(event),
+			payload: (bar, datumIndex, datum) => ({
+				seriesKey: bar.seriesKey,
+				datumIndex,
+				category: bar.category,
+				value: bar.value,
+				datum
+			})
+		},
+		ariaLabel: (bar, label) => `${label} in ${bar.category}: ${bar.value}`
+	});
+	resolvedCornerRadius = computed(() => this.cornerRadius() ?? this.themeRadius.px(), ...ngDevMode ? [{ debugName: "resolvedCornerRadius" }] : /* istanbul ignore next */ []);
+	resolvedDotCornerRadius = computed(() => this.dotCornerRadius() ?? Math.min(this.themeRadius.px() * .5, 4), ...ngDevMode ? [{ debugName: "resolvedDotCornerRadius" }] : /* istanbul ignore next */ []);
+	layout = computed(() => computeBarLayout({
+		data: this.data(),
+		xKey: this.xKey(),
+		seriesKeys: this.root.visibleSeriesKeys(),
+		variant: this.variant(),
+		orientation: this.orientation(),
+		innerWidth: this.cx.innerWidth(),
+		innerHeight: this.cx.innerHeight(),
+		bandPadding: this.bandPadding(),
+		groupPadding: this.groupPadding(),
+		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 */ []);
+	dotLayout = computed(() => {
+		if (this.chartStyle() !== "dot") return null;
+		const layout = this.layout();
+		return computeBarDotCells({
+			bars: layout.bars,
+			orientation: this.orientation(),
+			innerWidth: this.cx.innerWidth(),
+			innerHeight: this.cx.innerHeight(),
+			baseline: layout.valueScale(0),
+			dotSize: this.dotSize(),
+			dotGap: this.dotGap()
+		});
+	}, ...ngDevMode ? [{ debugName: "dotLayout" }] : /* istanbul ignore next */ []);
+	dotTrackCells = computed(() => this.showDotTrack() ? this.dotLayout()?.track ?? [] : [], ...ngDevMode ? [{ debugName: "dotTrackCells" }] : /* istanbul ignore next */ []);
+	dotValueCells = computed(() => this.dotLayout()?.values ?? [], ...ngDevMode ? [{ debugName: "dotValueCells" }] : /* istanbul ignore next */ []);
+	ariaSummary = computed(() => {
+		const keys = this.root.visibleSeriesKeys();
+		return `Bar chart, ${this.data().length} categories, ${keys.length} series: ${keys.join(", ")}.`;
+	}, ...ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []);
+	visibleSeriesKeys = computed(() => this.root.visibleSeriesKeys(), ...ngDevMode ? [{ debugName: "visibleSeriesKeys" }] : /* istanbul ignore next */ []);
+	dataColumns = computed(() => [this.xKey(), ...this.visibleSeriesKeys()], ...ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []);
+	barOpacity(bar) {
+		return this.emphasisOpacity(bar.active);
+	}
+	dotCellOpacity(cell) {
+		return this.emphasisOpacity(cell.active);
+	}
+	barFill(bar) {
+		return this.chartStyle() === "dot" ? "transparent" : bar.color;
+	}
+	emphasisOpacity(active) {
+		return this.activeKey() && this.activeValue() !== void 0 ? active ? 1 : .42 : 1;
+	}
+	formatValueLabel(bar) {
+		return this.valueLabelFormat()(bar.value);
+	}
+	barLabelX(bar) {
+		if (this.orientation() === "vertical") return bar.x + bar.width / 2;
+		return bar.value >= 0 ? bar.x + bar.width + 6 : bar.x - 6;
+	}
+	barLabelY(bar) {
+		if (this.orientation() === "vertical") return bar.value >= 0 ? bar.y - 8 : bar.y + bar.height + 10;
+		return bar.y + bar.height / 2;
+	}
+	barLabelAnchor(bar) {
+		if (this.orientation() === "vertical") return "middle";
+		return bar.value >= 0 ? "start" : "end";
+	}
+	onKeydown(event, index) {
+		const key = event.key;
+		let targetIndex = -1;
+		if (key === "ArrowRight" || key === "ArrowDown") targetIndex = index + 1;
+		else if (key === "ArrowLeft" || key === "ArrowUp") targetIndex = index - 1;
+		if (targetIndex >= 0 && targetIndex < this.bars().length) {
+			event.preventDefault();
+			const parent = event.currentTarget.parentElement;
+			if (parent) {
+				const targetRect = parent.querySelectorAll(".chart-bar")[targetIndex];
+				if (targetRect) targetRect.focus();
+			}
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: BarChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: BarChart,
+		isStandalone: true,
+		selector: "ChartBar",
+		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
+			},
+			styleVariant: {
+				classPropertyName: "styleVariant",
+				publicName: "styleVariant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			styles: {
+				classPropertyName: "styles",
+				publicName: "styles",
+				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
+			},
+			dotSize: {
+				classPropertyName: "dotSize",
+				publicName: "dotSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dotGap: {
+				classPropertyName: "dotGap",
+				publicName: "dotGap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dotCornerRadius: {
+				classPropertyName: "dotCornerRadius",
+				publicName: "dotCornerRadius",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showDotTrack: {
+				classPropertyName: "showDotTrack",
+				publicName: "showDotTrack",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { barClick: "barClick" },
+		host: {
+			properties: { "attr.data-style": "chartStyle()" },
+			classAttribute: "relative block h-full w-full"
+		},
+		providers: [CartesianContext],
+		ngImport: i0,
+		template: `
     <svg:svg
       ChartPointerTracker
       ChartRovingFocus
@@ -612,16 +635,59 @@ class BarChart {
       [rowHeaderKey]="xKey()"
       [label]="ariaSummary()"
     />
-  `, isInline: true, dependencies: [{ kind: "directive", type: ChartPointerTracker, selector: "svg:svg[ChartPointerTracker]" }, { kind: "directive", type: ChartRovingFocus, selector: "svg[ChartRovingFocus]" }, { kind: "directive", type: ChartMarkFocus, selector: "[ChartMarkFocus]" }, { kind: "component", type: ChartDataTable, selector: "ChartDataTable", inputs: ["data", "columns", "label", "rowHeaderKey"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: BarChart, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ChartBar',
-                    providers: [CartesianContext],
-                    imports: [ChartPointerTracker, ChartRovingFocus, ChartMarkFocus, ChartDataTable],
-                    host: { class: 'relative block h-full w-full', '[attr.data-style]': 'chartStyle()' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: ChartPointerTracker,
+				selector: "svg:svg[ChartPointerTracker]"
+			},
+			{
+				kind: "directive",
+				type: ChartRovingFocus,
+				selector: "svg[ChartRovingFocus]"
+			},
+			{
+				kind: "directive",
+				type: ChartMarkFocus,
+				selector: "[ChartMarkFocus]"
+			},
+			{
+				kind: "component",
+				type: ChartDataTable,
+				selector: "ChartDataTable",
+				inputs: [
+					"data",
+					"columns",
+					"label",
+					"rowHeaderKey"
+				]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: BarChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ChartBar",
+			providers: [CartesianContext],
+			imports: [
+				ChartPointerTracker,
+				ChartRovingFocus,
+				ChartMarkFocus,
+				ChartDataTable
+			],
+			host: {
+				class: "relative block h-full w-full",
+				"[attr.data-style]": "chartStyle()"
+			},
+			template: `
     <svg:svg
       ChartPointerTracker
       ChartRovingFocus
@@ -715,12 +781,166 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
       [rowHeaderKey]="xKey()"
       [label]="ariaSummary()"
     />
-  `,
-                }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], xKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "xKey", required: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], styleVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleVariant", required: false }] }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }], margin: [{ type: i0.Input, args: [{ isSignal: true, alias: "margin", required: false }] }], bandPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "bandPadding", required: false }] }], groupPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupPadding", required: false }] }], cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], colorKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorKey", required: false }] }], activeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeKey", required: false }] }], activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], valueLabelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelFormat", required: false }] }], dotSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotSize", required: false }] }], dotGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotGap", required: false }] }], dotCornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotCornerRadius", required: false }] }], showDotTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDotTrack", required: false }] }], barClick: [{ type: i0.Output, args: ["barClick"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { BarChart, computeBarDotCells, computeBarLayout };
+  `
+		}]
+	}],
+	propDecorators: {
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: true
+			}]
+		}],
+		xKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "xKey",
+				required: true
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		styleVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleVariant",
+				required: false
+			}]
+		}],
+		styles: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styles",
+				required: false
+			}]
+		}],
+		margin: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "margin",
+				required: false
+			}]
+		}],
+		bandPadding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "bandPadding",
+				required: false
+			}]
+		}],
+		groupPadding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupPadding",
+				required: false
+			}]
+		}],
+		cornerRadius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cornerRadius",
+				required: false
+			}]
+		}],
+		colorKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colorKey",
+				required: false
+			}]
+		}],
+		activeKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeKey",
+				required: false
+			}]
+		}],
+		activeValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeValue",
+				required: false
+			}]
+		}],
+		showValueLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValueLabels",
+				required: false
+			}]
+		}],
+		valueLabelFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueLabelFormat",
+				required: false
+			}]
+		}],
+		dotSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dotSize",
+				required: false
+			}]
+		}],
+		dotGap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dotGap",
+				required: false
+			}]
+		}],
+		dotCornerRadius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dotCornerRadius",
+				required: false
+			}]
+		}],
+		showDotTrack: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDotTrack",
+				required: false
+			}]
+		}],
+		barClick: [{
+			type: i0.Output,
+			args: ["barClick"]
+		}]
+	}
+});
+export { BarChart, computeBarDotCells, computeBarLayout };