@ojiepermana/angular 22.1.14 → 22.2.0

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

@@ -1,170 +1,254 @@
-import { arc } from 'd3-shape';
-import { max } from 'd3-array';
-import { readNumber, seriesColorVar, ChartContext, ChartThemeRadius, resolveChartStyle, ChartThemeSpace, resolveChartMargin, DEFAULT_POLAR_MARGIN_UNITS, setupPolarChart, ChartRovingFocus, ChartMarkFocus, ChartDataTable } from '@ojiepermana/angular/chart/core';
-import * as i0 from '@angular/core';
-import { inject, input, output, computed, Component } from '@angular/core';
-
+import { arc } from "d3-shape";
+import { max } from "d3-array";
+import { ChartContext, ChartDataTable, ChartMarkFocus, ChartRovingFocus, ChartThemeRadius, ChartThemeSpace, DEFAULT_POLAR_MARGIN_UNITS, readNumber, resolveChartMargin, resolveChartStyle, seriesColorVar, setupPolarChart } from "@ojiepermana/angular/chart/core";
+import * as i0 from "@angular/core";
+import { Component, computed, inject, input, output } from "@angular/core";
 function computeRadialLayout(input) {
-    const { data, nameKey, valueKey, innerWidth, innerHeight, seriesKeys, hiddenSeriesKeys, trackPadding, startAngle, endAngle, cornerRadius, } = input;
-    const outerRadius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);
-    const centerX = innerWidth / 2;
-    const centerY = innerHeight / 2;
-    // `datumIndex` is carried through the filter, so a track keeps addressing the
-    // row it came from however many siblings the legend has hidden.
-    const entries = data
-        .map((datum, datumIndex) => ({
-        datum,
-        datumIndex,
-        seriesKey: seriesKeys?.[datumIndex] ?? String(datum[nameKey] ?? datumIndex),
-    }))
-        .filter((entry) => !hiddenSeriesKeys?.has(entry.seriesKey));
-    if (entries.length === 0 || outerRadius === 0) {
-        return { centerX, centerY, outerRadius, bars: [], maxValue: 0 };
-    }
-    const maxValue = input.maxValue ?? max(data, (d) => readNumber(d, valueKey)) ?? 1;
-    const trackCount = entries.length;
-    const safeTrackPadding = trackCount > 1
-        ? Math.min(Math.max(trackPadding, 0), outerRadius / (trackCount - 1))
-        : Math.max(trackPadding, 0);
-    const availableRadius = Math.max(0, outerRadius - (trackCount - 1) * safeTrackPadding);
-    const trackThickness = availableRadius / trackCount;
-    const bars = entries.map((entry, i) => {
-        const { datum: d, datumIndex, seriesKey: key } = entry;
-        const inner = i * (trackThickness + safeTrackPadding);
-        const outer = inner + trackThickness;
-        const value = readNumber(d, valueKey);
-        const pct = maxValue === 0 ? 0 : value / maxValue;
-        const sweep = (endAngle - startAngle) * pct;
-        const valueEndAngle = startAngle + sweep;
-        const arcGen = arc()
-            .innerRadius(inner)
-            .outerRadius(outer)
-            .cornerRadius(cornerRadius);
-        return {
-            seriesKey: key,
-            name: String(d[nameKey] ?? key),
-            value,
-            datumIndex,
-            color: seriesColorVar(key),
-            arcPath: arcGen.startAngle(startAngle).endAngle(valueEndAngle)(null) ?? '',
-            backgroundPath: arcGen.startAngle(startAngle).endAngle(endAngle)(null) ?? '',
-            innerRadius: inner,
-            outerRadius: outer,
-            endAngle: valueEndAngle,
-        };
-    });
-    return { centerX, centerY, outerRadius, bars, maxValue };
+	const { data, nameKey, valueKey, innerWidth, innerHeight, seriesKeys, hiddenSeriesKeys, trackPadding, startAngle, endAngle, cornerRadius } = input;
+	const outerRadius = Math.max(0, Math.min(innerWidth, innerHeight) / 2);
+	const centerX = innerWidth / 2;
+	const centerY = innerHeight / 2;
+	const entries = data.map((datum, datumIndex) => ({
+		datum,
+		datumIndex,
+		seriesKey: seriesKeys?.[datumIndex] ?? String(datum[nameKey] ?? datumIndex)
+	})).filter((entry) => !hiddenSeriesKeys?.has(entry.seriesKey));
+	if (entries.length === 0 || outerRadius === 0) return {
+		centerX,
+		centerY,
+		outerRadius,
+		bars: [],
+		maxValue: 0
+	};
+	const maxValue = input.maxValue ?? max(data, (d) => readNumber(d, valueKey)) ?? 1;
+	const trackCount = entries.length;
+	const safeTrackPadding = trackCount > 1 ? Math.min(Math.max(trackPadding, 0), outerRadius / (trackCount - 1)) : Math.max(trackPadding, 0);
+	const trackThickness = Math.max(0, outerRadius - (trackCount - 1) * safeTrackPadding) / trackCount;
+	return {
+		centerX,
+		centerY,
+		outerRadius,
+		bars: entries.map((entry, i) => {
+			const { datum: d, datumIndex, seriesKey: key } = entry;
+			const inner = i * (trackThickness + safeTrackPadding);
+			const outer = inner + trackThickness;
+			const value = readNumber(d, valueKey);
+			const pct = maxValue === 0 ? 0 : value / maxValue;
+			const sweep = (endAngle - startAngle) * pct;
+			const valueEndAngle = startAngle + sweep;
+			const arcGen = arc().innerRadius(inner).outerRadius(outer).cornerRadius(cornerRadius);
+			return {
+				seriesKey: key,
+				name: String(d[nameKey] ?? key),
+				value,
+				datumIndex,
+				color: seriesColorVar(key),
+				arcPath: arcGen.startAngle(startAngle).endAngle(valueEndAngle)(null) ?? "",
+				backgroundPath: arcGen.startAngle(startAngle).endAngle(endAngle)(null) ?? "",
+				innerRadius: inner,
+				outerRadius: outer,
+				endAngle: valueEndAngle
+			};
+		}),
+		maxValue
+	};
 }
-
 const defaultRadialValueFormatter = (value) => `${value}`;
-class RadialChart {
-    root = inject(ChartContext);
-    themeRadius = inject(ChartThemeRadius);
-    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 */ []));
-    /**
-     * 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_POLAR_MARGIN_UNITS, this.themeSpace);
-    trackPadding = input(4, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "trackPadding" }] : /* istanbul ignore next */ []));
-    cornerRadius = input(null, /* @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();
-    resolvedCornerRadius = computed(() => this.cornerRadius() ?? this.themeRadius.px(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedCornerRadius" }] : /* istanbul ignore next */ []));
-    polar = setupPolarChart({ margin: () => this.plotMargin() });
-    layout = computed(() => computeRadialLayout({
-        data: this.data(),
-        nameKey: this.nameKey(),
-        valueKey: this.valueKey(),
-        seriesKeys: this.seriesKeys(),
-        hiddenSeriesKeys: this.root.hiddenSeries(),
-        innerWidth: this.polar.innerWidth(),
-        innerHeight: this.polar.innerHeight(),
-        trackPadding: this.trackPadding(),
-        startAngle: this.startAngle(),
-        endAngle: this.endAngle(),
-        cornerRadius: this.resolvedCornerRadius(),
-        maxValue: this.maxValue(),
-    }), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
-    ariaSummary = computed(() => `Radial bar chart, ${this.layout().bars.length} tracks.`, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []));
-    dataColumns = computed(() => [this.nameKey(), this.valueKey()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []));
-    barAriaLabel(b) {
-        return `${b.name}: ${b.value}`;
-    }
-    formatValueLabel(b) {
-        return this.valueLabelFormat()(b.value, b.name);
-    }
-    barLabelX(b) {
-        const radius = (b.innerRadius + b.outerRadius) / 2 + 10;
-        return Math.sin(b.endAngle) * radius;
-    }
-    barLabelY(b) {
-        const radius = (b.innerRadius + b.outerRadius) / 2 + 10;
-        return -Math.cos(b.endAngle) * radius;
-    }
-    barLabelAnchor(b) {
-        return this.barLabelX(b) >= 0 ? 'start' : 'end';
-    }
-    emitClick(b) {
-        this.barClick.emit({
-            seriesKey: b.seriesKey,
-            datumIndex: b.datumIndex,
-            // `category` is the shared name for what this family calls `name`; both are
-            // emitted so a handler written against either shape works.
-            category: b.name,
-            name: b.name,
-            value: b.value,
-            datum: this.data()[b.datumIndex],
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RadialChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: RadialChart, isStandalone: true, selector: "ChartRadial", 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 }, 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 }, 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: { properties: { "attr.data-style": "chartStyle()" }, classAttribute: "relative block h-full w-full" }, ngImport: i0, template: `
+var RadialChart = class RadialChart {
+	root = inject(ChartContext);
+	themeRadius = inject(ChartThemeRadius);
+	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(void 0, ...ngDevMode ? [{ debugName: "seriesKeys" }] : /* 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_POLAR_MARGIN_UNITS, this.themeSpace);
+	trackPadding = input(4, ...ngDevMode ? [{ debugName: "trackPadding" }] : /* istanbul ignore next */ []);
+	cornerRadius = input(null, ...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(void 0, ...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 */ []);
+	barClick = output();
+	resolvedCornerRadius = computed(() => this.cornerRadius() ?? this.themeRadius.px(), ...ngDevMode ? [{ debugName: "resolvedCornerRadius" }] : /* istanbul ignore next */ []);
+	polar = setupPolarChart({ margin: () => this.plotMargin() });
+	layout = computed(() => computeRadialLayout({
+		data: this.data(),
+		nameKey: this.nameKey(),
+		valueKey: this.valueKey(),
+		seriesKeys: this.seriesKeys(),
+		hiddenSeriesKeys: this.root.hiddenSeries(),
+		innerWidth: this.polar.innerWidth(),
+		innerHeight: this.polar.innerHeight(),
+		trackPadding: this.trackPadding(),
+		startAngle: this.startAngle(),
+		endAngle: this.endAngle(),
+		cornerRadius: this.resolvedCornerRadius(),
+		maxValue: this.maxValue()
+	}), ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	ariaSummary = computed(() => `Radial bar chart, ${this.layout().bars.length} tracks.`, ...ngDevMode ? [{ debugName: "ariaSummary" }] : /* istanbul ignore next */ []);
+	dataColumns = computed(() => [this.nameKey(), this.valueKey()], ...ngDevMode ? [{ debugName: "dataColumns" }] : /* istanbul ignore next */ []);
+	barAriaLabel(b) {
+		return `${b.name}: ${b.value}`;
+	}
+	formatValueLabel(b) {
+		return this.valueLabelFormat()(b.value, b.name);
+	}
+	barLabelX(b) {
+		const radius = (b.innerRadius + b.outerRadius) / 2 + 10;
+		return Math.sin(b.endAngle) * radius;
+	}
+	barLabelY(b) {
+		const radius = (b.innerRadius + b.outerRadius) / 2 + 10;
+		return -Math.cos(b.endAngle) * radius;
+	}
+	barLabelAnchor(b) {
+		return this.barLabelX(b) >= 0 ? "start" : "end";
+	}
+	emitClick(b) {
+		this.barClick.emit({
+			seriesKey: b.seriesKey,
+			datumIndex: b.datumIndex,
+			category: b.name,
+			name: b.name,
+			value: b.value,
+			datum: this.data()[b.datumIndex]
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: RadialChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: RadialChart,
+		isStandalone: true,
+		selector: "ChartRadial",
+		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
+			},
+			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
+			},
+			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: {
+			properties: { "attr.data-style": "chartStyle()" },
+			classAttribute: "relative block h-full w-full"
+		},
+		ngImport: i0,
+		template: `
     <svg:svg
       ChartRovingFocus
       class="block h-full w-full overflow-visible"
@@ -222,15 +306,52 @@ class RadialChart {
       [rowHeaderKey]="nameKey()"
       [label]="ariaSummary()"
     />
-  `, isInline: true, dependencies: [{ 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.6", ngImport: i0, type: RadialChart, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ChartRadial',
-                    imports: [ChartRovingFocus, ChartMarkFocus, ChartDataTable],
-                    host: { class: 'relative block h-full w-full', '[attr.data-style]': 'chartStyle()' },
-                    template: `
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				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: RadialChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ChartRadial",
+			imports: [
+				ChartRovingFocus,
+				ChartMarkFocus,
+				ChartDataTable
+			],
+			host: {
+				class: "relative block h-full w-full",
+				"[attr.data-style]": "chartStyle()"
+			},
+			template: `
     <svg:svg
       ChartRovingFocus
       class="block h-full w-full overflow-visible"
@@ -288,12 +409,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
       [rowHeaderKey]="nameKey()"
       [label]="ariaSummary()"
     />
-  `,
-                }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], nameKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "nameKey", required: true }] }], valueKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueKey", required: true }] }], seriesKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "seriesKeys", 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 }] }], trackPadding: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackPadding", required: false }] }], cornerRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "cornerRadius", required: false }] }], startAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAngle", required: false }] }], endAngle: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAngle", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxValue", required: false }] }], showTrack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrack", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], valueLabelFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabelFormat", required: false }] }], barClick: [{ type: i0.Output, args: ["barClick"] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { RadialChart, computeRadialLayout };
+  `
+		}]
+	}],
+	propDecorators: {
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: true
+			}]
+		}],
+		nameKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nameKey",
+				required: true
+			}]
+		}],
+		valueKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueKey",
+				required: true
+			}]
+		}],
+		seriesKeys: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "seriesKeys",
+				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
+			}]
+		}],
+		trackPadding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trackPadding",
+				required: false
+			}]
+		}],
+		cornerRadius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cornerRadius",
+				required: false
+			}]
+		}],
+		startAngle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "startAngle",
+				required: false
+			}]
+		}],
+		endAngle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "endAngle",
+				required: false
+			}]
+		}],
+		maxValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxValue",
+				required: false
+			}]
+		}],
+		showTrack: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTrack",
+				required: false
+			}]
+		}],
+		showValueLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValueLabels",
+				required: false
+			}]
+		}],
+		valueLabelFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueLabelFormat",
+				required: false
+			}]
+		}],
+		barClick: [{
+			type: i0.Output,
+			args: ["barClick"]
+		}]
+	}
+});
+export { RadialChart, computeRadialLayout };