@bitforgehq/ui 0.3.0 → 0.3.1

package/fesm2022/bitforgehq-ui-charts.mjs

@@ -0,0 +1,3045 @@
+import * as i0 from "@angular/core";
+import { Component, DOCUMENT, DestroyRef, ElementRef, InjectionToken, afterNextRender, booleanAttribute, computed, inject, input, numberAttribute, output, signal, viewChild } from "@angular/core";
+import { BF_LABELS, BfSkeletonComponent, ɵuniqueId } from "@bitforgehq/ui";
+import { NgTemplateOutlet } from "@angular/common";
+const CHAR_PX = 7;
+function textWidth(text) {
+	return text.length * CHAR_PX;
+}
+function labelEvery(labels, room, slot) {
+	const widest = Math.max(0, ...labels.map(textWidth)) + 12;
+	if (labels.length === 0 || room <= 0 || slot <= 0) return 1;
+	return Math.max(1, Math.ceil(widest / slot));
+}
+function finiteValues(series, indexes) {
+	return indexes.flatMap((i) => (series[i]?.values ?? []).filter((v) => v !== null && Number.isFinite(v)));
+}
+function mirror(x, width, rtl) {
+	return rtl ? width - x : x;
+}
+function clamp(value, lo, hi) {
+	return Math.min(hi, Math.max(lo, value));
+}
+const BF_CHART_CARD = new InjectionToken("BF_CHART_CARD");
+function documentLocale(document) {
+	const lang = document.documentElement.lang;
+	if (!lang) return;
+	try {
+		return Intl.NumberFormat.supportedLocalesOf(lang).length > 0 ? lang : void 0;
+	} catch {
+		return;
+	}
+}
+function defaultValueFormat(document) {
+	const format = new Intl.NumberFormat(documentLocale(document));
+	return (value) => format.format(value);
+}
+function percentFormat(document) {
+	const format = new Intl.NumberFormat(documentLocale(document), {
+		style: "percent",
+		maximumFractionDigits: 0
+	});
+	return (share) => format.format(share);
+}
+function formatOrDash(value, format) {
+	return value === null || value === void 0 || !Number.isFinite(value) ? "–" : format(value);
+}
+const SWATCH_BASE = "size-2.5 shrink-0 rounded-full forced-colors:border forced-colors:border-[CanvasText]";
+const SWATCH_HIDDEN = `${SWATCH_BASE} border-[1.5px] border-text-subtle bg-transparent`;
+function chartSwatchClasses(swatch, hidden) {
+	return hidden ? SWATCH_HIDDEN : `${SWATCH_BASE} ${swatch}`;
+}
+const HOST$1 = "pointer-events-none absolute z-10 flex w-max min-w-32 max-w-60 flex-col gap-1 rounded-tile border border-border bg-surface px-3 py-2 text-caption text-text shadow-floating";
+var BfChartTooltipComponent = class BfChartTooltipComponent {
+	tip = input.required(...ngDevMode ? [{ debugName: "tip" }] : 	/* istanbul ignore next */ []);
+	plotWidth = input(0, ...ngDevMode ? [{ debugName: "plotWidth" }] : 	/* istanbul ignore next */ []);
+	hostClasses = HOST$1;
+	shift = computed(() => {
+		const width = this.plotWidth();
+		return `translate(${width > 0 && this.tip().x > width / 2 ? "calc(-100% - 12px)" : "12px"}, -50%)`;
+	}, ...ngDevMode ? [{ debugName: "shift" }] : 	/* istanbul ignore next */ []);
+	swatch(swatch) {
+		return chartSwatchClasses(swatch, false);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfChartTooltipComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfChartTooltipComponent,
+		isStandalone: true,
+		selector: "bf-chart-tooltip",
+		inputs: {
+			tip: {
+				classPropertyName: "tip",
+				publicName: "tip",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			plotWidth: {
+				classPropertyName: "plotWidth",
+				publicName: "plotWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "aria-hidden": "true" },
+			properties: {
+				"class": "hostClasses",
+				"style.left.px": "tip().x",
+				"style.top.px": "tip().y",
+				"style.transform": "shift()"
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (tip().title) {
+      <span class="font-bold">{{ tip().title }}</span>
+    }
+    @for (row of tip().rows; track $index) {
+      <span class="flex items-center gap-2">
+        <span [class]="swatch(row.swatch)"></span>
+        <span class="text-text-secondary min-w-0 flex-1 truncate">{{ row.name }}</span>
+        <span class="font-bold tabular-nums">{{ row.value }}</span>
+      </span>
+    }
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfChartTooltipComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-chart-tooltip",
+			host: {
+				"aria-hidden": "true",
+				"[class]": "hostClasses",
+				"[style.left.px]": "tip().x",
+				"[style.top.px]": "tip().y",
+				"[style.transform]": "shift()"
+			},
+			template: `
+    @if (tip().title) {
+      <span class="font-bold">{{ tip().title }}</span>
+    }
+    @for (row of tip().rows; track $index) {
+      <span class="flex items-center gap-2">
+        <span [class]="swatch(row.swatch)"></span>
+        <span class="text-text-secondary min-w-0 flex-1 truncate">{{ row.name }}</span>
+        <span class="font-bold tabular-nums">{{ row.value }}</span>
+      </span>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		tip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tip",
+				required: true
+			}]
+		}],
+		plotWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "plotWidth",
+				required: false
+			}]
+		}]
+	}
+});
+const LEGEND = "flex flex-wrap items-center gap-x-1 gap-y-1";
+const LEGEND_BUTTON = "inline-flex min-h-6 cursor-pointer items-center gap-2 rounded-control px-2 text-caption text-text-secondary transition-colors duration-150 select-none hover:bg-surface-muted active:bg-surface-pressed focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring aria-[pressed=false]:text-text-muted aria-[pressed=false]:line-through pointer-coarse:min-h-hit";
+const PLOT = "relative block h-(--bf-chart-height) rounded-tile touch-pan-y focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring";
+const DATA_BUTTON = "inline-flex min-h-6 cursor-pointer items-center rounded-control px-2 text-label-xs font-bold text-primary-text transition-colors duration-150 hover:bg-primary-soft hover:text-primary-strong active:bg-primary-soft-pressed focus-visible:outline-hidden focus-visible:ring-4 focus-visible:ring-ring pointer-coarse:min-h-hit";
+const TABLE = "w-full border-collapse text-start";
+const TH_HEAD = "h-8 border-b border-border px-3 text-start align-middle text-label-xs font-bold text-text-muted";
+const TH_ROW = "h-10 border-b border-divider px-3 text-start align-middle text-label-sm font-bold text-text";
+const TD = "h-10 border-b border-divider px-3 text-end align-middle text-label-sm font-medium text-text tabular-nums";
+const TH_VALUE = `${TH_HEAD} text-end`;
+var BfChartFrameComponent = class BfChartFrameComponent {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	height = input.required({
+		...ngDevMode ? { debugName: "height" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	legend = input([], ...ngDevMode ? [{ debugName: "legend" }] : 	/* istanbul ignore next */ []);
+	legendPosition = input("bottom", ...ngDevMode ? [{ debugName: "legendPosition" }] : 	/* istanbul ignore next */ []);
+	tooltip = input(null, ...ngDevMode ? [{ debugName: "tooltip" }] : 	/* istanbul ignore next */ []);
+	announcement = input("", ...ngDevMode ? [{ debugName: "announcement" }] : 	/* istanbul ignore next */ []);
+	table = input({
+		head: [],
+		rows: []
+	}, ...ngDevMode ? [{ debugName: "table" }] : 	/* istanbul ignore next */ []);
+	dataToggle = input(true, {
+		...ngDevMode ? { debugName: "dataToggle" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	vertical = input(false, {
+		...ngDevMode ? { debugName: "vertical" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	legendToggled = output();
+	pointed = output();
+	left = output();
+	stepped = output();
+	focusChanged = output();
+	labels = inject(BF_LABELS);
+	tableId = ɵuniqueId("bf-chart-data");
+	showData = signal(false, ...ngDevMode ? [{ debugName: "showData" }] : 	/* istanbul ignore next */ []);
+	plot = viewChild.required("plot", ...ngDevMode ? [{ debugName: "plot" }] : 	/* istanbul ignore next */ []);
+	plotElement = computed(() => this.plot().nativeElement, ...ngDevMode ? [{ debugName: "plotElement" }] : 	/* istanbul ignore next */ []);
+	plotWidth() {
+		return this.plot().nativeElement.clientWidth;
+	}
+	plotClasses = PLOT;
+	legendClasses = LEGEND;
+	legendButtonClasses = LEGEND_BUTTON;
+	dataButtonClasses = DATA_BUTTON;
+	tableClasses = TABLE;
+	thHeadClasses = TH_HEAD;
+	thValueClasses = TH_VALUE;
+	thRowClasses = TH_ROW;
+	tdClasses = TD;
+	swatchClasses(swatch, hidden) {
+		return chartSwatchClasses(swatch, hidden);
+	}
+	onKeydown(event) {
+		const rtl = this.plot().nativeElement.closest("[dir]")?.getAttribute("dir") === "rtl";
+		const forward = rtl ? "ArrowLeft" : "ArrowRight";
+		const back = rtl ? "ArrowRight" : "ArrowLeft";
+		let step = null;
+		if (event.key === forward || this.vertical() && event.key === "ArrowDown") step = "next";
+		else if (event.key === back || this.vertical() && event.key === "ArrowUp") step = "previous";
+		else if (event.key === "Home") step = "first";
+		else if (event.key === "End") step = "last";
+		else if (event.key === "Escape") step = "clear";
+		if (step) {
+			event.preventDefault();
+			this.stepped.emit(step);
+		}
+	}
+	onPointer(event) {
+		const box = this.plot().nativeElement.getBoundingClientRect();
+		this.pointed.emit({
+			x: event.clientX - box.left,
+			y: event.clientY - box.top
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfChartFrameComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfChartFrameComponent,
+		isStandalone: true,
+		selector: "bf-chart-frame",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			legend: {
+				classPropertyName: "legend",
+				publicName: "legend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			legendPosition: {
+				classPropertyName: "legendPosition",
+				publicName: "legendPosition",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			tooltip: {
+				classPropertyName: "tooltip",
+				publicName: "tooltip",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			announcement: {
+				classPropertyName: "announcement",
+				publicName: "announcement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			table: {
+				classPropertyName: "table",
+				publicName: "table",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataToggle: {
+				classPropertyName: "dataToggle",
+				publicName: "dataToggle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			vertical: {
+				classPropertyName: "vertical",
+				publicName: "vertical",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			legendToggled: "legendToggled",
+			pointed: "pointed",
+			left: "left",
+			stepped: "stepped",
+			focusChanged: "focusChanged"
+		},
+		host: {
+			properties: { "style.--bf-chart-height.px": "height()" },
+			classAttribute: "block"
+		},
+		viewQueries: [{
+			propertyName: "plot",
+			first: true,
+			predicate: ["plot"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <figure class="m-0 flex flex-col gap-2" [attr.aria-label]="label()">
+      @if (legendPosition() === 'top') {
+        <ng-container *ngTemplateOutlet="legendTpl" />
+      }
+      <div
+        #plot
+        data-bf-chart-plot
+        role="group"
+        tabindex="0"
+        [attr.aria-label]="labels.chartValues"
+        [class]="plotClasses"
+        (keydown)="onKeydown($event)"
+        (pointermove)="onPointer($event)"
+        (pointerdown)="onPointer($event)"
+        (pointerleave)="left.emit()"
+        (focus)="focusChanged.emit(true)"
+        (blur)="focusChanged.emit(false)"
+      >
+        <ng-content />
+        @if (tooltip(); as tip) {
+          <bf-chart-tooltip data-bf-chart-tooltip [tip]="tip" [plotWidth]="plotWidth()" />
+        }
+      </div>
+      @if (legendPosition() === 'bottom') {
+        <ng-container *ngTemplateOutlet="legendTpl" />
+      }
+      <div class="sr-only" aria-live="polite" data-bf-chart-live>{{ announcement() }}</div>
+      @if (dataToggle()) {
+        <div class="flex justify-end">
+          <button
+            type="button"
+            data-bf-chart-data-toggle
+            [class]="dataButtonClasses"
+            [attr.aria-expanded]="showData() ? 'true' : 'false'"
+            [attr.aria-controls]="tableId"
+            (click)="showData.set(!showData())"
+          >
+            {{ showData() ? labels.chartHideData : labels.chartShowData }}
+          </button>
+        </div>
+      }
+      <div [id]="tableId" [hidden]="!showData()" class="overflow-x-auto">
+        @if (showData()) {
+          <table data-bf-chart-table [class]="tableClasses">
+            <caption class="sr-only">
+              {{
+                label()
+              }}
+            </caption>
+            <thead>
+              <tr>
+                @for (cell of table().head; track $index; let first = $first) {
+                  <th scope="col" [class]="first ? thHeadClasses : thValueClasses">{{ cell }}</th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (row of table().rows; track $index) {
+                <tr>
+                  @for (cell of row; track $index; let first = $first) {
+                    @if (first) {
+                      <th scope="row" [class]="thRowClasses">{{ cell }}</th>
+                    } @else {
+                      <td [class]="tdClasses">{{ cell }}</td>
+                    }
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+      </div>
+    </figure>
+
+    <ng-template #legendTpl>
+      @if (legend().length > 0) {
+        <div
+          role="group"
+          data-bf-chart-legend
+          [attr.aria-label]="labels.chartLegend"
+          [class]="legendClasses"
+        >
+          @for (item of legend(); track $index; let i = $index) {
+            <button
+              type="button"
+              [class]="legendButtonClasses"
+              [attr.aria-pressed]="item.hidden ? 'false' : 'true'"
+              (click)="legendToggled.emit(i)"
+            >
+              <span [class]="swatchClasses(item.swatch, item.hidden)"></span>
+              {{ item.name }}
+            </button>
+          }
+        </div>
+      }
+    </ng-template>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			kind: "component",
+			type: BfChartTooltipComponent,
+			selector: "bf-chart-tooltip",
+			inputs: ["tip", "plotWidth"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfChartFrameComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-chart-frame",
+			imports: [NgTemplateOutlet, BfChartTooltipComponent],
+			host: {
+				class: "block",
+				"[style.--bf-chart-height.px]": "height()"
+			},
+			template: `
+    <figure class="m-0 flex flex-col gap-2" [attr.aria-label]="label()">
+      @if (legendPosition() === 'top') {
+        <ng-container *ngTemplateOutlet="legendTpl" />
+      }
+      <div
+        #plot
+        data-bf-chart-plot
+        role="group"
+        tabindex="0"
+        [attr.aria-label]="labels.chartValues"
+        [class]="plotClasses"
+        (keydown)="onKeydown($event)"
+        (pointermove)="onPointer($event)"
+        (pointerdown)="onPointer($event)"
+        (pointerleave)="left.emit()"
+        (focus)="focusChanged.emit(true)"
+        (blur)="focusChanged.emit(false)"
+      >
+        <ng-content />
+        @if (tooltip(); as tip) {
+          <bf-chart-tooltip data-bf-chart-tooltip [tip]="tip" [plotWidth]="plotWidth()" />
+        }
+      </div>
+      @if (legendPosition() === 'bottom') {
+        <ng-container *ngTemplateOutlet="legendTpl" />
+      }
+      <div class="sr-only" aria-live="polite" data-bf-chart-live>{{ announcement() }}</div>
+      @if (dataToggle()) {
+        <div class="flex justify-end">
+          <button
+            type="button"
+            data-bf-chart-data-toggle
+            [class]="dataButtonClasses"
+            [attr.aria-expanded]="showData() ? 'true' : 'false'"
+            [attr.aria-controls]="tableId"
+            (click)="showData.set(!showData())"
+          >
+            {{ showData() ? labels.chartHideData : labels.chartShowData }}
+          </button>
+        </div>
+      }
+      <div [id]="tableId" [hidden]="!showData()" class="overflow-x-auto">
+        @if (showData()) {
+          <table data-bf-chart-table [class]="tableClasses">
+            <caption class="sr-only">
+              {{
+                label()
+              }}
+            </caption>
+            <thead>
+              <tr>
+                @for (cell of table().head; track $index; let first = $first) {
+                  <th scope="col" [class]="first ? thHeadClasses : thValueClasses">{{ cell }}</th>
+                }
+              </tr>
+            </thead>
+            <tbody>
+              @for (row of table().rows; track $index) {
+                <tr>
+                  @for (cell of row; track $index; let first = $first) {
+                    @if (first) {
+                      <th scope="row" [class]="thRowClasses">{{ cell }}</th>
+                    } @else {
+                      <td [class]="tdClasses">{{ cell }}</td>
+                    }
+                  }
+                </tr>
+              }
+            </tbody>
+          </table>
+        }
+      </div>
+    </figure>
+
+    <ng-template #legendTpl>
+      @if (legend().length > 0) {
+        <div
+          role="group"
+          data-bf-chart-legend
+          [attr.aria-label]="labels.chartLegend"
+          [class]="legendClasses"
+        >
+          @for (item of legend(); track $index; let i = $index) {
+            <button
+              type="button"
+              [class]="legendButtonClasses"
+              [attr.aria-pressed]="item.hidden ? 'false' : 'true'"
+              (click)="legendToggled.emit(i)"
+            >
+              <span [class]="swatchClasses(item.swatch, item.hidden)"></span>
+              {{ item.name }}
+            </button>
+          }
+        </div>
+      }
+    </ng-template>
+  `
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: true
+			}]
+		}],
+		legend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legend",
+				required: false
+			}]
+		}],
+		legendPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legendPosition",
+				required: false
+			}]
+		}],
+		tooltip: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tooltip",
+				required: false
+			}]
+		}],
+		announcement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "announcement",
+				required: false
+			}]
+		}],
+		table: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "table",
+				required: false
+			}]
+		}],
+		dataToggle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dataToggle",
+				required: false
+			}]
+		}],
+		vertical: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "vertical",
+				required: false
+			}]
+		}],
+		legendToggled: [{
+			type: i0.Output,
+			args: ["legendToggled"]
+		}],
+		pointed: [{
+			type: i0.Output,
+			args: ["pointed"]
+		}],
+		left: [{
+			type: i0.Output,
+			args: ["left"]
+		}],
+		stepped: [{
+			type: i0.Output,
+			args: ["stepped"]
+		}],
+		focusChanged: [{
+			type: i0.Output,
+			args: ["focusChanged"]
+		}],
+		plot: [{
+			type: i0.ViewChild,
+			args: ["plot", { isSignal: true }]
+		}]
+	}
+});
+var ChartInteraction = class {
+	hiddenSet = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "hiddenSet" }] : 	/* istanbul ignore next */ []);
+	activeIndex = signal(null, ...ngDevMode ? [{ debugName: "activeIndex" }] : 	/* istanbul ignore next */ []);
+	spoken = signal("", ...ngDevMode ? [{ debugName: "spoken" }] : 	/* istanbul ignore next */ []);
+	hidden = this.hiddenSet.asReadonly();
+	active = this.activeIndex.asReadonly();
+	announcement = this.spoken.asReadonly();
+	hasActive = computed(() => this.activeIndex() !== null, ...ngDevMode ? [{ debugName: "hasActive" }] : 	/* istanbul ignore next */ []);
+	isHidden(index) {
+		return this.hiddenSet().has(index);
+	}
+	toggle(index) {
+		const next = new Set(this.hiddenSet());
+		if (!next.delete(index)) next.add(index);
+		this.hiddenSet.set(next);
+	}
+	point(index) {
+		this.activeIndex.set(index);
+	}
+	step(step, targets, describe) {
+		if (step === "clear" || targets.length === 0) {
+			this.activeIndex.set(null);
+			return;
+		}
+		const at = this.activeIndex();
+		const position = at === null ? -1 : targets.indexOf(at);
+		let next;
+		if (step === "first" || step === "next" && position === -1) next = 0;
+		else if (step === "last" || step === "previous" && position === -1) next = targets.length - 1;
+		else if (step === "next") next = Math.min(targets.length - 1, position + 1);
+		else next = Math.max(0, position - 1);
+		const index = targets[next] ?? null;
+		this.activeIndex.set(index);
+		if (index !== null) this.spoken.set(describe(index));
+	}
+};
+function px(value) {
+	return Math.round(value * 100) / 100 || 0;
+}
+function segments(points) {
+	const runs = [];
+	let run = [];
+	for (const point of points) if (point) run.push(point);
+	else if (run.length > 0) {
+		runs.push(run);
+		run = [];
+	}
+	if (run.length > 0) runs.push(run);
+	return runs;
+}
+const sign = (n) => n < 0 ? -1 : 1;
+function innerTangent(a, b, c) {
+	const h0 = b.x - a.x;
+	const h1 = c.x - b.x;
+	const s0 = h0 === 0 ? 0 : (b.y - a.y) / h0;
+	const s1 = h1 === 0 ? 0 : (c.y - b.y) / h1;
+	const p = h0 + h1 === 0 ? 0 : (s0 * h1 + s1 * h0) / (h0 + h1);
+	return (sign(s0) + sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), .5 * Math.abs(p)) || 0;
+}
+function endTangent(a, b, t) {
+	const h = b.x - a.x;
+	return h === 0 ? t : (3 * (b.y - a.y) / h - t) / 2;
+}
+function runCommands(run, curve) {
+	if (curve === "linear" || run.length < 3) return run.slice(1).map((p) => `L${px(p.x)},${px(p.y)}`);
+	const n = run.length;
+	const tangents = new Array(n).fill(0);
+	for (let i = 1; i < n - 1; i++) tangents[i] = innerTangent(run[i - 1], run[i], run[i + 1]);
+	tangents[0] = endTangent(run[0], run[1], tangents[1]);
+	tangents[n - 1] = endTangent(run[n - 2], run[n - 1], tangents[n - 2]);
+	const commands = [];
+	for (let i = 1; i < n; i++) {
+		const a = run[i - 1];
+		const b = run[i];
+		const dx = (b.x - a.x) / 3;
+		const ta = tangents[i - 1];
+		const tb = tangents[i];
+		commands.push(`C${px(a.x + dx)},${px(a.y + dx * ta)} ${px(b.x - dx)},${px(b.y - dx * tb)} ${px(b.x)},${px(b.y)}`);
+	}
+	return commands;
+}
+function linePath(points, curve) {
+	return segments(points).map((run) => {
+		const first = run[0];
+		return [`M${px(first.x)},${px(first.y)}`, ...runCommands(run, curve)].join("");
+	}).join("");
+}
+function areaPath(points, curve, baseline) {
+	return segments(points).map((run) => {
+		const first = run[0];
+		const last = run[run.length - 1];
+		return [
+			`M${px(first.x)},${px(baseline)}`,
+			`L${px(first.x)},${px(first.y)}`,
+			...runCommands(run, curve),
+			`L${px(last.x)},${px(baseline)}Z`
+		].join("");
+	}).join("");
+}
+function niceStep(span, count) {
+	const raw = span / Math.max(1, count);
+	if (!Number.isFinite(raw) || raw <= 0) return 1;
+	const magnitude = 10 ** Math.floor(Math.log10(raw));
+	const normalized = raw / magnitude;
+	return (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude;
+}
+function clean(value, step) {
+	const decimals = Math.max(0, -Math.floor(Math.log10(step)));
+	return Number(value.toFixed(Math.min(20, decimals))) || 0;
+}
+function niceTicks(min, max, count = 5) {
+	let lo = Math.min(min, max);
+	let hi = Math.max(min, max);
+	if (!Number.isFinite(lo) || !Number.isFinite(hi)) {
+		lo = 0;
+		hi = 1;
+	} else if (lo === hi) {
+		const pad = lo === 0 ? 1 : Math.abs(lo) * .1;
+		lo = lo === 0 ? 0 : lo - pad;
+		hi += pad;
+	}
+	const step = niceStep(hi - lo, count);
+	const start = Math.floor(lo / step + 1e-9);
+	const end = Math.ceil(hi / step - 1e-9);
+	const ticks = [];
+	for (let k = start; k <= end; k++) ticks.push(clean(k * step, step));
+	return {
+		min: clean(start * step, step),
+		max: clean(end * step, step),
+		step,
+		ticks
+	};
+}
+function observeWidth(target, fallback) {
+	const width = signal(fallback, ...ngDevMode ? [{ debugName: "width" }] : 	/* istanbul ignore next */ []);
+	const rtl = signal(false, ...ngDevMode ? [{ debugName: "rtl" }] : 	/* istanbul ignore next */ []);
+	const view = inject(DOCUMENT).defaultView;
+	let observer = null;
+	const measure = () => {
+		const element = target();
+		if (!element) return;
+		const measured = Math.round(element.clientWidth);
+		if (measured > 0) width.set(measured);
+		rtl.set(element.closest("[dir]")?.getAttribute("dir") === "rtl");
+	};
+	afterNextRender(() => {
+		measure();
+		const element = target();
+		if (element && view && typeof view.ResizeObserver === "function") {
+			observer = new view.ResizeObserver(measure);
+			observer.observe(element);
+		}
+	});
+	inject(DestroyRef).onDestroy(() => observer?.disconnect());
+	return {
+		width: width.asReadonly(),
+		rtl: rtl.asReadonly()
+	};
+}
+const STROKE = [
+	"stroke-chart-1",
+	"stroke-chart-2",
+	"stroke-chart-3",
+	"stroke-chart-4",
+	"stroke-chart-5",
+	"stroke-chart-6",
+	"stroke-chart-7",
+	"stroke-chart-8"
+];
+const FILL = [
+	"fill-chart-1",
+	"fill-chart-2",
+	"fill-chart-3",
+	"fill-chart-4",
+	"fill-chart-5",
+	"fill-chart-6",
+	"fill-chart-7",
+	"fill-chart-8"
+];
+const AREA$2 = [
+	"fill-chart-1/16",
+	"fill-chart-2/16",
+	"fill-chart-3/16",
+	"fill-chart-4/16",
+	"fill-chart-5/16",
+	"fill-chart-6/16",
+	"fill-chart-7/16",
+	"fill-chart-8/16"
+];
+const SWATCH = [
+	"bg-chart-1",
+	"bg-chart-2",
+	"bg-chart-3",
+	"bg-chart-4",
+	"bg-chart-5",
+	"bg-chart-6",
+	"bg-chart-7",
+	"bg-chart-8"
+];
+function slot(index) {
+	return (index % STROKE.length + STROKE.length) % STROKE.length;
+}
+function seriesStroke(index) {
+	return STROKE[slot(index)];
+}
+function seriesFill(index) {
+	return FILL[slot(index)];
+}
+function seriesArea(index) {
+	return AREA$2[slot(index)];
+}
+function seriesSwatch(index) {
+	return SWATCH[slot(index)];
+}
+function seriesLegend(series, interaction) {
+	return series.length < 2 ? [] : series.map((s, i) => ({
+		name: s.name,
+		swatch: seriesSwatch(i),
+		hidden: interaction.isHidden(i)
+	}));
+}
+function visibleSeries(series, interaction) {
+	return series.map((_, i) => i).filter((i) => !interaction.isHidden(i));
+}
+function seriesTable(series, categories, labels, format) {
+	return {
+		head: [labels.chartCategory, ...series.map((s) => s.name)],
+		rows: categories.map((category, j) => [category, ...series.map((s) => formatOrDash(s.values[j], format))])
+	};
+}
+function seriesTooltipRows(series, visible, at, format) {
+	return visible.map((index) => ({
+		name: series[index]?.name ?? "",
+		value: formatOrDash(series[index]?.values[at], format),
+		swatch: seriesSwatch(index)
+	}));
+}
+function describeCategory(series, categories, visible, at, format) {
+	const values = seriesTooltipRows(series, visible, at, format).map((row) => `${row.name} ${row.value}`).join(", ");
+	return `${categories[at] ?? ""}: ${values}`;
+}
+function valueAt(series, index, at) {
+	const v = series[index]?.values[at];
+	return v === null || v === void 0 || !Number.isFinite(v) ? null : v;
+}
+const FALLBACK_WIDTH$3 = 600;
+const TOP$1 = 8;
+const BOTTOM$1 = 24;
+const END$1 = 8;
+const LINE$1 = "fill-none [stroke-dasharray:1] animate-chart-draw motion-reduce:animate-none";
+const AREA$1 = "stroke-none animate-chart-fade motion-reduce:animate-none";
+const AXIS_TEXT$1 = "fill-text-muted text-micro";
+const MARKER = "fill-surface";
+var BfLineChartComponent = class BfLineChartComponent {
+	series = input.required(...ngDevMode ? [{ debugName: "series" }] : 	/* istanbul ignore next */ []);
+	categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : 	/* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	height = input(240, {
+		...ngDevMode ? { debugName: "height" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	area = input(false, {
+		...ngDevMode ? { debugName: "area" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	curve = input("linear", ...ngDevMode ? [{ debugName: "curve" }] : 	/* istanbul ignore next */ []);
+	valueFormat = input(void 0, ...ngDevMode ? [{ debugName: "valueFormat" }] : 	/* istanbul ignore next */ []);
+	legend = input(void 0, ...ngDevMode ? [{ debugName: "legend" }] : 	/* istanbul ignore next */ []);
+	interaction = new ChartInteraction();
+	labels = inject(BF_LABELS);
+	card = inject(BF_CHART_CARD, { optional: true });
+	document = inject(DOCUMENT);
+	frame = viewChild.required(BfChartFrameComponent, ...ngDevMode ? [{ debugName: "frame" }] : 	/* istanbul ignore next */ []);
+	box = observeWidth(() => this.frame().plotElement(), FALLBACK_WIDTH$3);
+	axisTextClasses = AXIS_TEXT$1;
+	name = computed(() => this.label() || (this.card?.title() ?? "") || this.labels.chart, ...ngDevMode ? [{ debugName: "name" }] : 	/* istanbul ignore next */ []);
+	legendPosition = computed(() => this.legend() ?? this.card?.legend() ?? "bottom", ...ngDevMode ? [{ debugName: "legendPosition" }] : 	/* istanbul ignore next */ []);
+	format = computed(() => this.valueFormat() ?? defaultValueFormat(this.document), ...ngDevMode ? [{ debugName: "format" }] : 	/* istanbul ignore next */ []);
+	generations = computed(() => [{
+		series: this.series(),
+		categories: this.categories()
+	}], ...ngDevMode ? [{ debugName: "generations" }] : 	/* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.box.width()} ${this.height()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : 	/* istanbul ignore next */ []);
+	visible = computed(() => visibleSeries(this.series(), this.interaction), ...ngDevMode ? [{ debugName: "visible" }] : 	/* istanbul ignore next */ []);
+	geometry = computed(() => {
+		const width = this.box.width();
+		const height = this.height();
+		const rtl = this.box.rtl();
+		const categories = this.categories();
+		const format = this.format();
+		const series = this.series();
+		const visible = this.visible();
+		const values = finiteValues(series, visible);
+		const lo = Math.min(...values, ...this.area() ? [0] : []);
+		const hi = Math.max(...values, ...this.area() ? [0] : []);
+		const plotHeight = Math.max(1, height - TOP$1 - BOTTOM$1);
+		const scale = niceTicks(lo, hi, Math.max(2, Math.floor(plotHeight / 48)));
+		const tickTexts = scale.ticks.map(format);
+		const start = Math.max(...tickTexts.map(textWidth)) + 12;
+		const plotWidth = Math.max(1, width - start - END$1);
+		const n = categories.length;
+		const xAt = (i) => mirror(n > 1 ? start + i * plotWidth / (n - 1) : start + plotWidth / 2, width, rtl);
+		const yAt = (v) => TOP$1 + (1 - (v - scale.min) / (scale.max - scale.min || 1)) * plotHeight;
+		const baseline = TOP$1 + plotHeight;
+		const valueBase = yAt(clamp(0, scale.min, scale.max));
+		const ticks = scale.ticks.map((value, i) => ({
+			key: value,
+			text: tickTexts[i] ?? "",
+			x: px(mirror(start - 8, width, rtl)),
+			y: px(yAt(value)),
+			anchor: rtl ? "start" : "end"
+		}));
+		const every = labelEvery(categories, plotWidth, n > 1 ? plotWidth / (n - 1) : plotWidth);
+		const categoryLabels = categories.flatMap((text, i) => {
+			if (i % every !== 0) return [];
+			const edge = n === 1 ? "middle" : i === 0 ? "first" : i === n - 1 ? "last" : "middle";
+			const anchor = edge === "middle" ? "middle" : edge === "first" !== rtl ? "start" : "end";
+			return [{
+				key: i,
+				text,
+				x: px(xAt(i)),
+				y: baseline + 18,
+				anchor
+			}];
+		});
+		const marks = visible.map((index) => {
+			const points = categories.map((_, j) => {
+				const v = valueAt(series, index, j);
+				return v === null ? null : {
+					x: xAt(j),
+					y: yAt(v)
+				};
+			});
+			return {
+				index,
+				line: linePath(points, this.curve()),
+				area: areaPath(points, this.curve(), valueBase),
+				dots: segments(points).filter((run) => run.length === 1).map(([p]) => ({
+					x: px(p.x),
+					y: px(p.y)
+				}))
+			};
+		});
+		const [left, right] = rtl ? [END$1, width - start] : [start, width - END$1];
+		return {
+			width,
+			top: TOP$1,
+			baseline,
+			left,
+			right,
+			ticks,
+			categoryLabels,
+			marks,
+			xAt,
+			yAt
+		};
+	}, ...ngDevMode ? [{ debugName: "geometry" }] : 	/* istanbul ignore next */ []);
+	legendItems = computed(() => seriesLegend(this.series(), this.interaction), ...ngDevMode ? [{ debugName: "legendItems" }] : 	/* istanbul ignore next */ []);
+	active = computed(() => {
+		const at = this.interaction.active();
+		return at !== null && at < this.categories().length ? at : null;
+	}, ...ngDevMode ? [{ debugName: "active" }] : 	/* istanbul ignore next */ []);
+	crosshairX = computed(() => {
+		const at = this.active();
+		return at === null ? null : px(this.geometry().xAt(at));
+	}, ...ngDevMode ? [{ debugName: "crosshairX" }] : 	/* istanbul ignore next */ []);
+	markers = computed(() => {
+		const at = this.active();
+		if (at === null) return [];
+		const { xAt, yAt } = this.geometry();
+		return this.visible().flatMap((index) => {
+			const v = valueAt(this.series(), index, at);
+			return v === null ? [] : [{
+				index,
+				x: px(xAt(at)),
+				y: px(yAt(v))
+			}];
+		});
+	}, ...ngDevMode ? [{ debugName: "markers" }] : 	/* istanbul ignore next */ []);
+	tooltip = computed(() => {
+		const at = this.active();
+		if (at === null) return null;
+		const { xAt, top, baseline } = this.geometry();
+		const ys = this.markers().map((m) => m.y);
+		const y = ys.length > 0 ? Math.min(...ys) : (top + baseline) / 2;
+		return {
+			title: this.categories()[at] ?? "",
+			rows: seriesTooltipRows(this.series(), this.visible(), at, this.format()),
+			x: px(xAt(at)),
+			y: px(clamp(y, top + 24, baseline - 24))
+		};
+	}, ...ngDevMode ? [{ debugName: "tooltip" }] : 	/* istanbul ignore next */ []);
+	table = computed(() => seriesTable(this.series(), this.categories(), this.labels, this.format()), ...ngDevMode ? [{ debugName: "table" }] : 	/* istanbul ignore next */ []);
+	lineClasses(index) {
+		return `${LINE$1} ${seriesStroke(index)}`;
+	}
+	areaClasses(index) {
+		return `${AREA$1} ${seriesArea(index)}`;
+	}
+	dotClasses(index) {
+		return `${seriesFill(index)} animate-chart-fade motion-reduce:animate-none`;
+	}
+	markerClasses(index) {
+		return `${MARKER} ${seriesStroke(index)}`;
+	}
+	onPointed(pointer) {
+		const n = this.categories().length;
+		if (n === 0) return;
+		const { xAt } = this.geometry();
+		let best = 0;
+		for (let i = 1; i < n; i++) if (Math.abs(xAt(i) - pointer.x) < Math.abs(xAt(best) - pointer.x)) best = i;
+		this.interaction.point(best);
+	}
+	onStep(step) {
+		const targets = this.categories().map((_, i) => i);
+		this.interaction.step(step, targets, (i) => describeCategory(this.series(), this.categories(), this.visible(), i, this.format()));
+	}
+	onFocus(focused) {
+		if (!focused) this.interaction.point(null);
+		else if (this.interaction.active() === null) this.onStep("first");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfLineChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfLineChartComponent,
+		isStandalone: true,
+		selector: "bf-line-chart",
+		inputs: {
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			categories: {
+				classPropertyName: "categories",
+				publicName: "categories",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			area: {
+				classPropertyName: "area",
+				publicName: "area",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			curve: {
+				classPropertyName: "curve",
+				publicName: "curve",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueFormat: {
+				classPropertyName: "valueFormat",
+				publicName: "valueFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			legend: {
+				classPropertyName: "legend",
+				publicName: "legend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block w-full min-w-0" },
+		viewQueries: [{
+			propertyName: "frame",
+			first: true,
+			predicate: BfChartFrameComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <bf-chart-frame
+      [label]="name()"
+      [height]="height()"
+      [legend]="legendItems()"
+      [legendPosition]="legendPosition()"
+      [tooltip]="tooltip()"
+      [announcement]="interaction.announcement()"
+      [table]="table()"
+      (legendToggled)="interaction.toggle($event)"
+      (pointed)="onPointed($event)"
+      (left)="interaction.point(null)"
+      (stepped)="onStep($event)"
+      (focusChanged)="onFocus($event)"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        direction="ltr"
+        class="block w-full overflow-visible"
+        [attr.height]="height()"
+        [attr.viewBox]="viewBox()"
+      >
+        @let g = geometry();
+        @for (tick of g.ticks; track tick.key) {
+          <line
+            data-bf-chart-grid
+            class="stroke-chart-grid"
+            stroke-width="1"
+            [attr.x1]="g.left"
+            [attr.x2]="g.right"
+            [attr.y1]="tick.y"
+            [attr.y2]="tick.y"
+          />
+          <text
+            dominant-baseline="middle"
+            [class]="axisTextClasses"
+            [attr.x]="tick.x"
+            [attr.y]="tick.y"
+            [attr.text-anchor]="tick.anchor"
+          >
+            {{ tick.text }}
+          </text>
+        }
+        <line
+          data-bf-chart-axis
+          class="stroke-chart-axis"
+          stroke-width="1"
+          [attr.x1]="g.left"
+          [attr.x2]="g.right"
+          [attr.y1]="g.baseline"
+          [attr.y2]="g.baseline"
+        />
+        @for (label of g.categoryLabels; track label.key) {
+          <text
+            data-bf-chart-category
+            [class]="axisTextClasses"
+            [attr.x]="label.x"
+            [attr.y]="label.y"
+            [attr.text-anchor]="label.anchor"
+          >
+            {{ label.text }}
+          </text>
+        }
+        @let x = crosshairX();
+        @if (x !== null) {
+          <line
+            data-bf-chart-crosshair
+            class="stroke-chart-axis"
+            stroke-width="1"
+            stroke-dasharray="3 3"
+            [attr.x1]="x"
+            [attr.x2]="x"
+            [attr.y1]="g.top"
+            [attr.y2]="g.baseline"
+          />
+        }
+        <!-- Re-created on every data change, so the enter motion replays. -->
+        @for (generation of generations(); track generation) {
+          <g>
+            @for (mark of g.marks; track mark.index) {
+              @if (area()) {
+                <path data-bf-chart-area [attr.d]="mark.area" [class]="areaClasses(mark.index)" />
+              }
+              <path
+                data-bf-chart-line
+                pathLength="1"
+                stroke-width="2"
+                stroke-linejoin="round"
+                stroke-linecap="round"
+                [attr.d]="mark.line"
+                [class]="lineClasses(mark.index)"
+              />
+              @for (dot of mark.dots; track $index) {
+                <circle
+                  r="2.5"
+                  [attr.cx]="dot.x"
+                  [attr.cy]="dot.y"
+                  [class]="dotClasses(mark.index)"
+                />
+              }
+            }
+          </g>
+        }
+        @for (marker of markers(); track marker.index) {
+          <circle
+            data-bf-chart-marker
+            r="4"
+            stroke-width="2"
+            [attr.cx]="marker.x"
+            [attr.cy]="marker.y"
+            [class]="markerClasses(marker.index)"
+          />
+        }
+      </svg>
+    </bf-chart-frame>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BfChartFrameComponent,
+			selector: "bf-chart-frame",
+			inputs: [
+				"label",
+				"height",
+				"legend",
+				"legendPosition",
+				"tooltip",
+				"announcement",
+				"table",
+				"dataToggle",
+				"vertical"
+			],
+			outputs: [
+				"legendToggled",
+				"pointed",
+				"left",
+				"stepped",
+				"focusChanged"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfLineChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-line-chart",
+			imports: [BfChartFrameComponent],
+			host: { class: "block w-full min-w-0" },
+			template: `
+    <bf-chart-frame
+      [label]="name()"
+      [height]="height()"
+      [legend]="legendItems()"
+      [legendPosition]="legendPosition()"
+      [tooltip]="tooltip()"
+      [announcement]="interaction.announcement()"
+      [table]="table()"
+      (legendToggled)="interaction.toggle($event)"
+      (pointed)="onPointed($event)"
+      (left)="interaction.point(null)"
+      (stepped)="onStep($event)"
+      (focusChanged)="onFocus($event)"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        direction="ltr"
+        class="block w-full overflow-visible"
+        [attr.height]="height()"
+        [attr.viewBox]="viewBox()"
+      >
+        @let g = geometry();
+        @for (tick of g.ticks; track tick.key) {
+          <line
+            data-bf-chart-grid
+            class="stroke-chart-grid"
+            stroke-width="1"
+            [attr.x1]="g.left"
+            [attr.x2]="g.right"
+            [attr.y1]="tick.y"
+            [attr.y2]="tick.y"
+          />
+          <text
+            dominant-baseline="middle"
+            [class]="axisTextClasses"
+            [attr.x]="tick.x"
+            [attr.y]="tick.y"
+            [attr.text-anchor]="tick.anchor"
+          >
+            {{ tick.text }}
+          </text>
+        }
+        <line
+          data-bf-chart-axis
+          class="stroke-chart-axis"
+          stroke-width="1"
+          [attr.x1]="g.left"
+          [attr.x2]="g.right"
+          [attr.y1]="g.baseline"
+          [attr.y2]="g.baseline"
+        />
+        @for (label of g.categoryLabels; track label.key) {
+          <text
+            data-bf-chart-category
+            [class]="axisTextClasses"
+            [attr.x]="label.x"
+            [attr.y]="label.y"
+            [attr.text-anchor]="label.anchor"
+          >
+            {{ label.text }}
+          </text>
+        }
+        @let x = crosshairX();
+        @if (x !== null) {
+          <line
+            data-bf-chart-crosshair
+            class="stroke-chart-axis"
+            stroke-width="1"
+            stroke-dasharray="3 3"
+            [attr.x1]="x"
+            [attr.x2]="x"
+            [attr.y1]="g.top"
+            [attr.y2]="g.baseline"
+          />
+        }
+        <!-- Re-created on every data change, so the enter motion replays. -->
+        @for (generation of generations(); track generation) {
+          <g>
+            @for (mark of g.marks; track mark.index) {
+              @if (area()) {
+                <path data-bf-chart-area [attr.d]="mark.area" [class]="areaClasses(mark.index)" />
+              }
+              <path
+                data-bf-chart-line
+                pathLength="1"
+                stroke-width="2"
+                stroke-linejoin="round"
+                stroke-linecap="round"
+                [attr.d]="mark.line"
+                [class]="lineClasses(mark.index)"
+              />
+              @for (dot of mark.dots; track $index) {
+                <circle
+                  r="2.5"
+                  [attr.cx]="dot.x"
+                  [attr.cy]="dot.y"
+                  [class]="dotClasses(mark.index)"
+                />
+              }
+            }
+          </g>
+        }
+        @for (marker of markers(); track marker.index) {
+          <circle
+            data-bf-chart-marker
+            r="4"
+            stroke-width="2"
+            [attr.cx]="marker.x"
+            [attr.cy]="marker.y"
+            [class]="markerClasses(marker.index)"
+          />
+        }
+      </svg>
+    </bf-chart-frame>
+  `
+		}]
+	}],
+	propDecorators: {
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: true
+			}]
+		}],
+		categories: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categories",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		area: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "area",
+				required: false
+			}]
+		}],
+		curve: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "curve",
+				required: false
+			}]
+		}],
+		valueFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueFormat",
+				required: false
+			}]
+		}],
+		legend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legend",
+				required: false
+			}]
+		}],
+		frame: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => BfChartFrameComponent), { isSignal: true }]
+		}]
+	}
+});
+const FALLBACK_WIDTH$2 = 600;
+const TOP = 8;
+const BOTTOM = 24;
+const END = 12;
+const BAND_FILL = .72;
+const BAR_MAX = 40;
+const GAP = 2;
+const SEGMENT_GAP = 2;
+const BAR = "transform-fill motion-reduce:animate-none";
+const GROW = {
+	up: "origin-bottom animate-chart-grow-y",
+	down: "origin-top animate-chart-grow-y",
+	left: "origin-[0%_50%] animate-chart-grow-x",
+	right: "origin-[100%_50%] animate-chart-grow-x"
+};
+const AXIS_TEXT = "fill-text-muted text-micro";
+var BfBarChartComponent = class BfBarChartComponent {
+	series = input.required(...ngDevMode ? [{ debugName: "series" }] : 	/* istanbul ignore next */ []);
+	categories = input.required(...ngDevMode ? [{ debugName: "categories" }] : 	/* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	height = input(240, {
+		...ngDevMode ? { debugName: "height" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : 	/* istanbul ignore next */ []);
+	stacked = input(false, {
+		...ngDevMode ? { debugName: "stacked" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	valueFormat = input(void 0, ...ngDevMode ? [{ debugName: "valueFormat" }] : 	/* istanbul ignore next */ []);
+	legend = input(void 0, ...ngDevMode ? [{ debugName: "legend" }] : 	/* istanbul ignore next */ []);
+	interaction = new ChartInteraction();
+	labels = inject(BF_LABELS);
+	card = inject(BF_CHART_CARD, { optional: true });
+	document = inject(DOCUMENT);
+	frame = viewChild.required(BfChartFrameComponent, ...ngDevMode ? [{ debugName: "frame" }] : 	/* istanbul ignore next */ []);
+	box = observeWidth(() => this.frame().plotElement(), FALLBACK_WIDTH$2);
+	axisTextClasses = AXIS_TEXT;
+	name = computed(() => this.label() || (this.card?.title() ?? "") || this.labels.chart, ...ngDevMode ? [{ debugName: "name" }] : 	/* istanbul ignore next */ []);
+	legendPosition = computed(() => this.legend() ?? this.card?.legend() ?? "bottom", ...ngDevMode ? [{ debugName: "legendPosition" }] : 	/* istanbul ignore next */ []);
+	format = computed(() => this.valueFormat() ?? defaultValueFormat(this.document), ...ngDevMode ? [{ debugName: "format" }] : 	/* istanbul ignore next */ []);
+	generations = computed(() => [{
+		series: this.series(),
+		categories: this.categories(),
+		stacked: this.stacked()
+	}], ...ngDevMode ? [{ debugName: "generations" }] : 	/* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.box.width()} ${this.height()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : 	/* istanbul ignore next */ []);
+	visible = computed(() => visibleSeries(this.series(), this.interaction), ...ngDevMode ? [{ debugName: "visible" }] : 	/* istanbul ignore next */ []);
+	extent = computed(() => {
+		const series = this.series();
+		const visible = this.visible();
+		if (!this.stacked()) {
+			const values = finiteValues(series, visible);
+			return {
+				lo: Math.min(0, ...values),
+				hi: Math.max(0, ...values)
+			};
+		}
+		let lo = 0;
+		let hi = 0;
+		this.categories().forEach((_, j) => {
+			let up = 0;
+			let down = 0;
+			for (const index of visible) {
+				const v = valueAt(series, index, j) ?? 0;
+				if (v >= 0) up += v;
+				else down += v;
+			}
+			hi = Math.max(hi, up);
+			lo = Math.min(lo, down);
+		});
+		return {
+			lo,
+			hi
+		};
+	}, ...ngDevMode ? [{ debugName: "extent" }] : 	/* istanbul ignore next */ []);
+	geometry = computed(() => {
+		const width = this.box.width();
+		const height = this.height();
+		const rtl = this.box.rtl();
+		const horizontal = this.orientation() === "horizontal";
+		const categories = this.categories();
+		const series = this.series();
+		const visible = this.visible();
+		const format = this.format();
+		const n = Math.max(1, categories.length);
+		const { lo, hi } = this.extent();
+		const valueRoom = horizontal ? width : height - TOP - BOTTOM;
+		const scale = niceTicks(lo, hi, Math.max(2, Math.floor(valueRoom / (horizontal ? 96 : 48))));
+		const tickTexts = scale.ticks.map(format);
+		const start = horizontal ? Math.min(Math.round(width * .4), Math.max(0, ...categories.map(textWidth)) + 12) : Math.max(...tickTexts.map(textWidth)) + 12;
+		const plotWidth = Math.max(1, width - start - END);
+		const plotHeight = Math.max(1, height - TOP - BOTTOM);
+		const span = scale.max - scale.min || 1;
+		const valuePos = (v) => horizontal ? start + (v - scale.min) / span * plotWidth : TOP + (1 - (v - scale.min) / span) * plotHeight;
+		const zero = valuePos(clamp(0, scale.min, scale.max));
+		const bandSize = (horizontal ? plotHeight : plotWidth) / n;
+		const bandStart = (j) => (horizontal ? TOP : start) + j * bandSize;
+		const bars = [];
+		const k = Math.max(1, visible.length);
+		const groupSize = this.stacked() ? Math.min(bandSize * BAND_FILL, BAR_MAX) : Math.min(bandSize * BAND_FILL, BAR_MAX * k + GAP * (k - 1));
+		const barSize = this.stacked() ? groupSize : Math.max(1, (groupSize - GAP * (k - 1)) / k);
+		categories.forEach((_, j) => {
+			const groupStart = bandStart(j) + (bandSize - groupSize) / 2;
+			let up = 0;
+			let down = 0;
+			visible.forEach((index, slot) => {
+				const v = valueAt(series, index, j);
+				if (v === null || v === 0) return;
+				let from;
+				let to;
+				if (this.stacked()) {
+					from = v > 0 ? up : down;
+					to = from + v;
+					if (v > 0) up = to;
+					else down = to;
+				} else {
+					from = 0;
+					to = v;
+				}
+				let a = valuePos(from);
+				let b = valuePos(to);
+				const inset = this.stacked() && Math.abs(b - a) > SEGMENT_GAP * 2 ? SEGMENT_GAP / 2 : 0;
+				const along = this.stacked() ? groupStart : groupStart + slot * (barSize + GAP);
+				[a, b] = [Math.min(a, b) + inset, Math.max(a, b) - inset];
+				const positive = v > 0;
+				if (horizontal) {
+					const x = rtl ? width - b : a;
+					bars.push({
+						key: `${index}:${j}`,
+						index,
+						x: px(x),
+						y: px(along),
+						width: px(b - a),
+						height: px(barSize),
+						grow: positive !== rtl ? "left" : "right"
+					});
+				} else {
+					const x = mirror(along, width, rtl) - (rtl ? barSize : 0);
+					bars.push({
+						key: `${index}:${j}`,
+						index,
+						x: px(x),
+						y: px(a),
+						width: px(barSize),
+						height: px(b - a),
+						grow: positive ? "up" : "down"
+					});
+				}
+			});
+		});
+		const grid = scale.ticks.map((value) => {
+			const p = valuePos(value);
+			return horizontal ? {
+				key: value,
+				x1: px(mirror(p, width, rtl)),
+				x2: px(mirror(p, width, rtl)),
+				y1: TOP,
+				y2: TOP + plotHeight
+			} : {
+				key: value,
+				x1: px(mirror(start, width, rtl)),
+				x2: px(mirror(start + plotWidth, width, rtl)),
+				y1: px(p),
+				y2: px(p)
+			};
+		});
+		const axis = horizontal ? {
+			x1: px(mirror(zero, width, rtl)),
+			x2: px(mirror(zero, width, rtl)),
+			y1: TOP,
+			y2: TOP + plotHeight
+		} : {
+			x1: px(mirror(start, width, rtl)),
+			x2: px(mirror(start + plotWidth, width, rtl)),
+			y1: px(zero),
+			y2: px(zero)
+		};
+		const tickLabels = scale.ticks.map((value, i) => {
+			const text = tickTexts[i] ?? "";
+			return horizontal ? {
+				key: -1,
+				text,
+				x: px(mirror(valuePos(value), width, rtl)),
+				y: height - 6,
+				anchor: "middle"
+			} : {
+				key: -1,
+				text,
+				x: px(mirror(start - 8, width, rtl)),
+				y: px(valuePos(value)),
+				anchor: rtl ? "start" : "end"
+			};
+		});
+		const every = horizontal ? Math.max(1, Math.ceil(16 / bandSize)) : labelEvery(categories, plotWidth, bandSize);
+		const categoryLabels = categories.flatMap((text, j) => j % every !== 0 ? [] : horizontal ? [{
+			key: j,
+			text,
+			x: px(mirror(start - 8, width, rtl)),
+			y: px(bandStart(j) + bandSize / 2),
+			anchor: rtl ? "start" : "end"
+		}] : [{
+			key: j,
+			text,
+			x: px(mirror(bandStart(j) + bandSize / 2, width, rtl)),
+			y: TOP + plotHeight + 18,
+			anchor: "middle"
+		}]);
+		return {
+			bars,
+			grid,
+			axis,
+			labels: [...tickLabels, ...categoryLabels],
+			horizontal,
+			rtl,
+			width,
+			start,
+			plotWidth,
+			plotHeight,
+			bandSize,
+			bandStart,
+			zero
+		};
+	}, ...ngDevMode ? [{ debugName: "geometry" }] : 	/* istanbul ignore next */ []);
+	legendItems = computed(() => seriesLegend(this.series(), this.interaction), ...ngDevMode ? [{ debugName: "legendItems" }] : 	/* istanbul ignore next */ []);
+	active = computed(() => {
+		const at = this.interaction.active();
+		return at !== null && at < this.categories().length ? at : null;
+	}, ...ngDevMode ? [{ debugName: "active" }] : 	/* istanbul ignore next */ []);
+	activeBand = computed(() => {
+		const at = this.active();
+		if (at === null) return null;
+		const g = this.geometry();
+		const along = g.bandStart(at);
+		return g.horizontal ? {
+			x: px(g.rtl ? END : g.start),
+			y: px(along),
+			width: px(g.plotWidth),
+			height: px(g.bandSize)
+		} : {
+			x: px(mirror(along, g.width, g.rtl) - (g.rtl ? g.bandSize : 0)),
+			y: TOP,
+			width: px(g.bandSize),
+			height: px(g.plotHeight)
+		};
+	}, ...ngDevMode ? [{ debugName: "activeBand" }] : 	/* istanbul ignore next */ []);
+	tooltip = computed(() => {
+		const at = this.active();
+		const band = this.activeBand();
+		if (at === null || !band) return null;
+		const g = this.geometry();
+		return {
+			title: this.categories()[at] ?? "",
+			rows: seriesTooltipRows(this.series(), this.visible(), at, this.format()),
+			x: g.horizontal ? px(g.width / 2) : px(band.x + band.width / 2),
+			y: g.horizontal ? px(band.y + band.height / 2) : px(TOP + g.plotHeight / 2)
+		};
+	}, ...ngDevMode ? [{ debugName: "tooltip" }] : 	/* istanbul ignore next */ []);
+	table = computed(() => seriesTable(this.series(), this.categories(), this.labels, this.format()), ...ngDevMode ? [{ debugName: "table" }] : 	/* istanbul ignore next */ []);
+	barClasses(bar) {
+		return `${BAR} ${GROW[bar.grow]} ${seriesFill(bar.index)}`;
+	}
+	onPointed(pointer) {
+		const n = this.categories().length;
+		if (n === 0) return;
+		const g = this.geometry();
+		const along = g.horizontal ? pointer.y - TOP : mirror(pointer.x, g.width, g.rtl) - g.start;
+		this.interaction.point(clamp(Math.floor(along / g.bandSize), 0, n - 1));
+	}
+	onStep(step) {
+		const targets = this.categories().map((_, i) => i);
+		this.interaction.step(step, targets, (i) => describeCategory(this.series(), this.categories(), this.visible(), i, this.format()));
+	}
+	onFocus(focused) {
+		if (!focused) this.interaction.point(null);
+		else if (this.interaction.active() === null) this.onStep("first");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfBarChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfBarChartComponent,
+		isStandalone: true,
+		selector: "bf-bar-chart",
+		inputs: {
+			series: {
+				classPropertyName: "series",
+				publicName: "series",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			categories: {
+				classPropertyName: "categories",
+				publicName: "categories",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stacked: {
+				classPropertyName: "stacked",
+				publicName: "stacked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueFormat: {
+				classPropertyName: "valueFormat",
+				publicName: "valueFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			legend: {
+				classPropertyName: "legend",
+				publicName: "legend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block w-full min-w-0" },
+		viewQueries: [{
+			propertyName: "frame",
+			first: true,
+			predicate: BfChartFrameComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <bf-chart-frame
+      [label]="name()"
+      [height]="height()"
+      [legend]="legendItems()"
+      [legendPosition]="legendPosition()"
+      [tooltip]="tooltip()"
+      [announcement]="interaction.announcement()"
+      [table]="table()"
+      [vertical]="orientation() === 'horizontal'"
+      (legendToggled)="interaction.toggle($event)"
+      (pointed)="onPointed($event)"
+      (left)="interaction.point(null)"
+      (stepped)="onStep($event)"
+      (focusChanged)="onFocus($event)"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        direction="ltr"
+        class="block w-full overflow-visible"
+        [attr.height]="height()"
+        [attr.viewBox]="viewBox()"
+      >
+        @let g = geometry();
+        @let band = activeBand();
+        @if (band) {
+          <rect
+            data-bf-chart-band
+            class="fill-surface-muted"
+            [attr.x]="band.x"
+            [attr.y]="band.y"
+            [attr.width]="band.width"
+            [attr.height]="band.height"
+          />
+        }
+        @for (line of g.grid; track line.key) {
+          <line
+            data-bf-chart-grid
+            class="stroke-chart-grid"
+            stroke-width="1"
+            [attr.x1]="line.x1"
+            [attr.x2]="line.x2"
+            [attr.y1]="line.y1"
+            [attr.y2]="line.y2"
+          />
+        }
+        @for (label of g.labels; track $index) {
+          <text
+            [class]="axisTextClasses"
+            [attr.data-bf-chart-category]="label.key >= 0 ? '' : null"
+            [attr.dominant-baseline]="label.anchor === 'middle' ? null : 'middle'"
+            [attr.x]="label.x"
+            [attr.y]="label.y"
+            [attr.text-anchor]="label.anchor"
+          >
+            {{ label.text }}
+          </text>
+        }
+        <!-- Re-created on every data change, so the enter motion replays. -->
+        @for (generation of generations(); track generation) {
+          <g>
+            @for (bar of g.bars; track bar.key) {
+              <rect
+                data-bf-chart-bar
+                rx="2"
+                [attr.x]="bar.x"
+                [attr.y]="bar.y"
+                [attr.width]="bar.width"
+                [attr.height]="bar.height"
+                [class]="barClasses(bar)"
+              />
+            }
+          </g>
+        }
+        <line
+          data-bf-chart-axis
+          class="stroke-chart-axis"
+          stroke-width="1"
+          [attr.x1]="g.axis.x1"
+          [attr.x2]="g.axis.x2"
+          [attr.y1]="g.axis.y1"
+          [attr.y2]="g.axis.y2"
+        />
+      </svg>
+    </bf-chart-frame>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BfChartFrameComponent,
+			selector: "bf-chart-frame",
+			inputs: [
+				"label",
+				"height",
+				"legend",
+				"legendPosition",
+				"tooltip",
+				"announcement",
+				"table",
+				"dataToggle",
+				"vertical"
+			],
+			outputs: [
+				"legendToggled",
+				"pointed",
+				"left",
+				"stepped",
+				"focusChanged"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfBarChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-bar-chart",
+			imports: [BfChartFrameComponent],
+			host: { class: "block w-full min-w-0" },
+			template: `
+    <bf-chart-frame
+      [label]="name()"
+      [height]="height()"
+      [legend]="legendItems()"
+      [legendPosition]="legendPosition()"
+      [tooltip]="tooltip()"
+      [announcement]="interaction.announcement()"
+      [table]="table()"
+      [vertical]="orientation() === 'horizontal'"
+      (legendToggled)="interaction.toggle($event)"
+      (pointed)="onPointed($event)"
+      (left)="interaction.point(null)"
+      (stepped)="onStep($event)"
+      (focusChanged)="onFocus($event)"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        direction="ltr"
+        class="block w-full overflow-visible"
+        [attr.height]="height()"
+        [attr.viewBox]="viewBox()"
+      >
+        @let g = geometry();
+        @let band = activeBand();
+        @if (band) {
+          <rect
+            data-bf-chart-band
+            class="fill-surface-muted"
+            [attr.x]="band.x"
+            [attr.y]="band.y"
+            [attr.width]="band.width"
+            [attr.height]="band.height"
+          />
+        }
+        @for (line of g.grid; track line.key) {
+          <line
+            data-bf-chart-grid
+            class="stroke-chart-grid"
+            stroke-width="1"
+            [attr.x1]="line.x1"
+            [attr.x2]="line.x2"
+            [attr.y1]="line.y1"
+            [attr.y2]="line.y2"
+          />
+        }
+        @for (label of g.labels; track $index) {
+          <text
+            [class]="axisTextClasses"
+            [attr.data-bf-chart-category]="label.key >= 0 ? '' : null"
+            [attr.dominant-baseline]="label.anchor === 'middle' ? null : 'middle'"
+            [attr.x]="label.x"
+            [attr.y]="label.y"
+            [attr.text-anchor]="label.anchor"
+          >
+            {{ label.text }}
+          </text>
+        }
+        <!-- Re-created on every data change, so the enter motion replays. -->
+        @for (generation of generations(); track generation) {
+          <g>
+            @for (bar of g.bars; track bar.key) {
+              <rect
+                data-bf-chart-bar
+                rx="2"
+                [attr.x]="bar.x"
+                [attr.y]="bar.y"
+                [attr.width]="bar.width"
+                [attr.height]="bar.height"
+                [class]="barClasses(bar)"
+              />
+            }
+          </g>
+        }
+        <line
+          data-bf-chart-axis
+          class="stroke-chart-axis"
+          stroke-width="1"
+          [attr.x1]="g.axis.x1"
+          [attr.x2]="g.axis.x2"
+          [attr.y1]="g.axis.y1"
+          [attr.y2]="g.axis.y2"
+        />
+      </svg>
+    </bf-chart-frame>
+  `
+		}]
+	}],
+	propDecorators: {
+		series: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "series",
+				required: true
+			}]
+		}],
+		categories: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "categories",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		stacked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stacked",
+				required: false
+			}]
+		}],
+		valueFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueFormat",
+				required: false
+			}]
+		}],
+		legend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legend",
+				required: false
+			}]
+		}],
+		frame: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => BfChartFrameComponent), { isSignal: true }]
+		}]
+	}
+});
+const FALLBACK_WIDTH$1 = 320;
+const MARGIN = 4;
+const ACTIVE_GROW = 6;
+const SLICE_GAP = 2;
+const TAU = Math.PI * 2;
+const SLICE = "fill-none [stroke-dasharray:1] animate-chart-draw transition-[stroke-width] duration-150 motion-reduce:animate-none motion-reduce:transition-none";
+var BfDonutChartComponent = class BfDonutChartComponent {
+	slices = input.required(...ngDevMode ? [{ debugName: "slices" }] : 	/* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	height = input(220, {
+		...ngDevMode ? { debugName: "height" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	thickness = input(28, {
+		...ngDevMode ? { debugName: "thickness" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	valueFormat = input(void 0, ...ngDevMode ? [{ debugName: "valueFormat" }] : 	/* istanbul ignore next */ []);
+	legend = input(void 0, ...ngDevMode ? [{ debugName: "legend" }] : 	/* istanbul ignore next */ []);
+	interaction = new ChartInteraction();
+	labels = inject(BF_LABELS);
+	card = inject(BF_CHART_CARD, { optional: true });
+	document = inject(DOCUMENT);
+	frame = viewChild.required(BfChartFrameComponent, ...ngDevMode ? [{ debugName: "frame" }] : 	/* istanbul ignore next */ []);
+	box = observeWidth(() => this.frame().plotElement(), FALLBACK_WIDTH$1);
+	percent = percentFormat(this.document);
+	growBy = ACTIVE_GROW;
+	name = computed(() => this.label() || (this.card?.title() ?? "") || this.labels.chart, ...ngDevMode ? [{ debugName: "name" }] : 	/* istanbul ignore next */ []);
+	legendPosition = computed(() => this.legend() ?? this.card?.legend() ?? "bottom", ...ngDevMode ? [{ debugName: "legendPosition" }] : 	/* istanbul ignore next */ []);
+	format = computed(() => this.valueFormat() ?? defaultValueFormat(this.document), ...ngDevMode ? [{ debugName: "format" }] : 	/* istanbul ignore next */ []);
+	generations = computed(() => [{ slices: this.slices() }], ...ngDevMode ? [{ debugName: "generations" }] : 	/* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.box.width()} ${this.height()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : 	/* istanbul ignore next */ []);
+	drawn = computed(() => this.slices().map((_, i) => i).filter((i) => !this.interaction.isHidden(i) && this.share(i) > 0), ...ngDevMode ? [{ debugName: "drawn" }] : 	/* istanbul ignore next */ []);
+	total = computed(() => this.drawn().reduce((sum, i) => sum + (this.slices()[i]?.value ?? 0), 0), ...ngDevMode ? [{ debugName: "total" }] : 	/* istanbul ignore next */ []);
+	share(index) {
+		const v = this.slices()[index]?.value ?? 0;
+		return Number.isFinite(v) && v > 0 ? v : 0;
+	}
+	geometry = computed(() => {
+		const width = this.box.width();
+		const height = this.height();
+		const rtl = this.box.rtl();
+		const outer = Math.max(1, Math.min(width, height) / 2 - MARGIN - ACTIVE_GROW / 2);
+		const thickness = clamp(this.thickness(), 1, outer);
+		const r = outer - thickness / 2;
+		const cx = width / 2;
+		const cy = height / 2;
+		const at = (angle, radius = r) => ({
+			x: px(mirror(cx + radius * Math.sin(angle), width, rtl)),
+			y: px(cy - radius * Math.cos(angle))
+		});
+		const sweep = rtl ? 0 : 1;
+		const arc = (a0, a1) => {
+			const p0 = at(a0);
+			const p1 = at(a1);
+			const large = a1 - a0 > Math.PI ? 1 : 0;
+			return `M${p0.x},${p0.y}A${px(r)},${px(r)} 0 ${large} ${sweep} ${p1.x},${p1.y}`;
+		};
+		const total = this.total();
+		const drawn = this.drawn();
+		const pad = drawn.length > 1 ? SLICE_GAP / Math.max(1, r) : 0;
+		let angle = 0;
+		const slices = drawn.map((index) => {
+			const sweepAngle = total > 0 ? this.share(index) / total * TAU : 0;
+			const start = angle;
+			const end = angle + sweepAngle;
+			angle = end;
+			const inset = sweepAngle > pad * 2 ? pad / 2 : 0;
+			const a0 = start + inset;
+			const a1 = end - inset;
+			return {
+				index,
+				d: a1 - a0 >= TAU - 1e-6 ? arc(0, Math.PI) + arc(Math.PI, TAU).replace(/^M[^A]+/, "") : arc(a0, a1),
+				start,
+				end
+			};
+		});
+		return {
+			width,
+			cx: px(cx),
+			cy: px(cy),
+			r: px(r),
+			thickness,
+			rtl,
+			slices,
+			at
+		};
+	}, ...ngDevMode ? [{ debugName: "geometry" }] : 	/* istanbul ignore next */ []);
+	legendItems = computed(() => {
+		const slices = this.slices();
+		return slices.length < 2 ? [] : slices.map((s, i) => ({
+			name: s.label,
+			swatch: seriesSwatch(i),
+			hidden: this.interaction.isHidden(i)
+		}));
+	}, ...ngDevMode ? [{ debugName: "legendItems" }] : 	/* istanbul ignore next */ []);
+	active = computed(() => {
+		const at = this.interaction.active();
+		return at !== null && this.drawn().includes(at) ? at : null;
+	}, ...ngDevMode ? [{ debugName: "active" }] : 	/* istanbul ignore next */ []);
+	valueText(index) {
+		const total = this.total();
+		const value = this.share(index);
+		return `${this.format()(value)} (${this.percent(total > 0 ? value / total : 0)})`;
+	}
+	tooltip = computed(() => {
+		const index = this.active();
+		const g = this.geometry();
+		const slice = g.slices.find((s) => s.index === index);
+		if (index === null || !slice) return null;
+		const point = g.at((slice.start + slice.end) / 2);
+		return {
+			title: "",
+			rows: [{
+				name: this.slices()[index]?.label ?? "",
+				value: this.valueText(index),
+				swatch: seriesSwatch(index)
+			}],
+			x: point.x,
+			y: point.y
+		};
+	}, ...ngDevMode ? [{ debugName: "tooltip" }] : 	/* istanbul ignore next */ []);
+	table = computed(() => ({
+		head: [this.labels.chartCategory, this.labels.chartValue],
+		rows: this.slices().map((s) => [s.label, this.format()(s.value)])
+	}), ...ngDevMode ? [{ debugName: "table" }] : 	/* istanbul ignore next */ []);
+	sliceClasses(index) {
+		return `${SLICE} ${seriesStroke(index)}`;
+	}
+	onPointed(pointer) {
+		const g = this.geometry();
+		const dx = mirror(pointer.x, g.width, g.rtl) - g.cx;
+		const dy = pointer.y - g.cy;
+		const distance = Math.hypot(dx, dy);
+		const reach = g.thickness / 2 + ACTIVE_GROW;
+		if (Math.abs(distance - g.r) > reach) {
+			this.interaction.point(null);
+			return;
+		}
+		const angle = (Math.atan2(dx, -dy) + TAU) % TAU;
+		const slice = g.slices.find((s) => angle >= s.start && angle < s.end);
+		this.interaction.point(slice?.index ?? null);
+	}
+	onStep(step) {
+		this.interaction.step(step, this.drawn(), (i) => `${this.slices()[i]?.label ?? ""}: ${this.valueText(i)}`);
+	}
+	onFocus(focused) {
+		if (!focused) this.interaction.point(null);
+		else if (this.interaction.active() === null) this.onStep("first");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfDonutChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfDonutChartComponent,
+		isStandalone: true,
+		selector: "bf-donut-chart",
+		inputs: {
+			slices: {
+				classPropertyName: "slices",
+				publicName: "slices",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			thickness: {
+				classPropertyName: "thickness",
+				publicName: "thickness",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			valueFormat: {
+				classPropertyName: "valueFormat",
+				publicName: "valueFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			legend: {
+				classPropertyName: "legend",
+				publicName: "legend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block w-full min-w-0" },
+		viewQueries: [{
+			propertyName: "frame",
+			first: true,
+			predicate: BfChartFrameComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <bf-chart-frame
+      [label]="name()"
+      [height]="height()"
+      [legend]="legendItems()"
+      [legendPosition]="legendPosition()"
+      [tooltip]="tooltip()"
+      [announcement]="interaction.announcement()"
+      [table]="table()"
+      (legendToggled)="interaction.toggle($event)"
+      (pointed)="onPointed($event)"
+      (left)="interaction.point(null)"
+      (stepped)="onStep($event)"
+      (focusChanged)="onFocus($event)"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        direction="ltr"
+        class="block w-full overflow-visible"
+        [attr.height]="height()"
+        [attr.viewBox]="viewBox()"
+      >
+        @let g = geometry();
+        <circle
+          data-bf-chart-track
+          class="stroke-chart-grid fill-none"
+          [attr.cx]="g.cx"
+          [attr.cy]="g.cy"
+          [attr.r]="g.r"
+          [attr.stroke-width]="g.thickness"
+        />
+        <!-- Re-created on every data change, so the enter motion replays. -->
+        @for (generation of generations(); track generation) {
+          <g>
+            @for (slice of g.slices; track slice.index) {
+              <path
+                data-bf-chart-slice
+                pathLength="1"
+                [attr.d]="slice.d"
+                [attr.stroke-width]="slice.index === active() ? g.thickness + growBy : g.thickness"
+                [class]="sliceClasses(slice.index)"
+              />
+            }
+          </g>
+        }
+      </svg>
+      <div
+        data-bf-chart-center
+        class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center empty:hidden"
+      >
+        <ng-content select="[bfSlot=center]" />
+      </div>
+    </bf-chart-frame>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BfChartFrameComponent,
+			selector: "bf-chart-frame",
+			inputs: [
+				"label",
+				"height",
+				"legend",
+				"legendPosition",
+				"tooltip",
+				"announcement",
+				"table",
+				"dataToggle",
+				"vertical"
+			],
+			outputs: [
+				"legendToggled",
+				"pointed",
+				"left",
+				"stepped",
+				"focusChanged"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfDonutChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-donut-chart",
+			imports: [BfChartFrameComponent],
+			host: { class: "block w-full min-w-0" },
+			template: `
+    <bf-chart-frame
+      [label]="name()"
+      [height]="height()"
+      [legend]="legendItems()"
+      [legendPosition]="legendPosition()"
+      [tooltip]="tooltip()"
+      [announcement]="interaction.announcement()"
+      [table]="table()"
+      (legendToggled)="interaction.toggle($event)"
+      (pointed)="onPointed($event)"
+      (left)="interaction.point(null)"
+      (stepped)="onStep($event)"
+      (focusChanged)="onFocus($event)"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        direction="ltr"
+        class="block w-full overflow-visible"
+        [attr.height]="height()"
+        [attr.viewBox]="viewBox()"
+      >
+        @let g = geometry();
+        <circle
+          data-bf-chart-track
+          class="stroke-chart-grid fill-none"
+          [attr.cx]="g.cx"
+          [attr.cy]="g.cy"
+          [attr.r]="g.r"
+          [attr.stroke-width]="g.thickness"
+        />
+        <!-- Re-created on every data change, so the enter motion replays. -->
+        @for (generation of generations(); track generation) {
+          <g>
+            @for (slice of g.slices; track slice.index) {
+              <path
+                data-bf-chart-slice
+                pathLength="1"
+                [attr.d]="slice.d"
+                [attr.stroke-width]="slice.index === active() ? g.thickness + growBy : g.thickness"
+                [class]="sliceClasses(slice.index)"
+              />
+            }
+          </g>
+        }
+      </svg>
+      <div
+        data-bf-chart-center
+        class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center empty:hidden"
+      >
+        <ng-content select="[bfSlot=center]" />
+      </div>
+    </bf-chart-frame>
+  `
+		}]
+	}],
+	propDecorators: {
+		slices: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "slices",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		thickness: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "thickness",
+				required: false
+			}]
+		}],
+		valueFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueFormat",
+				required: false
+			}]
+		}],
+		legend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legend",
+				required: false
+			}]
+		}],
+		frame: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => BfChartFrameComponent), { isSignal: true }]
+		}]
+	}
+});
+const FALLBACK_WIDTH = 120;
+const PAD = 3;
+const LINE = "fill-none stroke-chart-1 [stroke-dasharray:1] animate-chart-draw motion-reduce:animate-none";
+const AREA = "fill-chart-1/16 stroke-none animate-chart-fade motion-reduce:animate-none";
+const DOT = "fill-chart-1 animate-chart-fade motion-reduce:animate-none";
+var BfSparklineComponent = class BfSparklineComponent {
+	values = input.required(...ngDevMode ? [{ debugName: "values" }] : 	/* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : 	/* istanbul ignore next */ []);
+	height = input(32, {
+		...ngDevMode ? { debugName: "height" } : 		/* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	area = input(false, {
+		...ngDevMode ? { debugName: "area" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	curve = input("linear", ...ngDevMode ? [{ debugName: "curve" }] : 	/* istanbul ignore next */ []);
+	host = inject(ElementRef);
+	box = observeWidth(() => this.host.nativeElement, FALLBACK_WIDTH);
+	lineClasses = LINE;
+	areaClasses = AREA;
+	dotClasses = DOT;
+	generations = computed(() => [{ values: this.values() }], ...ngDevMode ? [{ debugName: "generations" }] : 	/* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.box.width()} ${this.height()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : 	/* istanbul ignore next */ []);
+	geometry = computed(() => {
+		const width = this.box.width();
+		const height = this.height();
+		const rtl = this.box.rtl();
+		const values = this.values();
+		const finite = values.filter((v) => v !== null && Number.isFinite(v));
+		const lo = Math.min(...finite);
+		const span = Math.max(...finite) - lo;
+		const n = values.length;
+		const xAt = (i) => mirror(n > 1 ? PAD + i * (width - PAD * 2) / (n - 1) : width / 2, width, rtl);
+		const yAt = (v) => span > 0 ? PAD + (1 - (v - lo) / span) * (height - PAD * 2) : height / 2;
+		const points = values.map((v, i) => v === null || !Number.isFinite(v) ? null : {
+			x: xAt(i),
+			y: yAt(v)
+		});
+		const runs = segments(points);
+		const lastRun = runs[runs.length - 1];
+		const lastPoint = lastRun?.[lastRun.length - 1];
+		return {
+			line: linePath(points, this.curve()),
+			area: areaPath(points, this.curve(), height),
+			last: lastPoint ? {
+				x: px(lastPoint.x),
+				y: px(lastPoint.y)
+			} : null
+		};
+	}, ...ngDevMode ? [{ debugName: "geometry" }] : 	/* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfSparklineComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfSparklineComponent,
+		isStandalone: true,
+		selector: "bf-sparkline",
+		inputs: {
+			values: {
+				classPropertyName: "values",
+				publicName: "values",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			area: {
+				classPropertyName: "area",
+				publicName: "area",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			curve: {
+				classPropertyName: "curve",
+				publicName: "curve",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "block min-w-0" },
+		ngImport: i0,
+		template: `
+    <svg
+      focusable="false"
+      direction="ltr"
+      class="block w-full overflow-visible"
+      [attr.role]="label() ? 'img' : null"
+      [attr.aria-label]="label() || null"
+      [attr.aria-hidden]="label() ? null : 'true'"
+      [attr.height]="height()"
+      [attr.viewBox]="viewBox()"
+    >
+      @let g = geometry();
+      @for (generation of generations(); track generation) {
+        <g>
+          @if (area()) {
+            <path data-bf-sparkline-area [attr.d]="g.area" [class]="areaClasses" />
+          }
+          <path
+            data-bf-sparkline-line
+            pathLength="1"
+            stroke-width="2"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            [attr.d]="g.line"
+            [class]="lineClasses"
+          />
+          @if (g.last; as last) {
+            <circle
+              data-bf-sparkline-dot
+              r="2.5"
+              [attr.cx]="last.x"
+              [attr.cy]="last.y"
+              [class]="dotClasses"
+            />
+          }
+        </g>
+      }
+    </svg>
+  `,
+		isInline: true
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfSparklineComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-sparkline",
+			host: { class: "block min-w-0" },
+			template: `
+    <svg
+      focusable="false"
+      direction="ltr"
+      class="block w-full overflow-visible"
+      [attr.role]="label() ? 'img' : null"
+      [attr.aria-label]="label() || null"
+      [attr.aria-hidden]="label() ? null : 'true'"
+      [attr.height]="height()"
+      [attr.viewBox]="viewBox()"
+    >
+      @let g = geometry();
+      @for (generation of generations(); track generation) {
+        <g>
+          @if (area()) {
+            <path data-bf-sparkline-area [attr.d]="g.area" [class]="areaClasses" />
+          }
+          <path
+            data-bf-sparkline-line
+            pathLength="1"
+            stroke-width="2"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            [attr.d]="g.line"
+            [class]="lineClasses"
+          />
+          @if (g.last; as last) {
+            <circle
+              data-bf-sparkline-dot
+              r="2.5"
+              [attr.cx]="last.x"
+              [attr.cy]="last.y"
+              [class]="dotClasses"
+            />
+          }
+        </g>
+      }
+    </svg>
+  `
+		}]
+	}],
+	propDecorators: {
+		values: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "values",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		area: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "area",
+				required: false
+			}]
+		}],
+		curve: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "curve",
+				required: false
+			}]
+		}]
+	}
+});
+const HOST = "flex h-full min-w-0 flex-col gap-4 rounded-card border-[1.5px] border-border-strong bg-surface p-card text-start text-text";
+const STATE = "flex min-h-60 flex-col items-center justify-center gap-2 rounded-tile text-center text-body text-text-muted";
+var BfChartCardComponent = class BfChartCardComponent {
+	title = input.required(...ngDevMode ? [{ debugName: "title" }] : 	/* istanbul ignore next */ []);
+	headingLevel = input(2, ...ngDevMode ? [{ debugName: "headingLevel" }] : 	/* istanbul ignore next */ []);
+	legend = input("bottom", ...ngDevMode ? [{ debugName: "legend" }] : 	/* istanbul ignore next */ []);
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	empty = input(false, {
+		...ngDevMode ? { debugName: "empty" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	error = input(false, {
+		...ngDevMode ? { debugName: "error" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	labels = inject(BF_LABELS);
+	hostClasses = HOST;
+	stateClasses = STATE;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.1.7",
+		ngImport: i0,
+		type: BfChartCardComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.1.7",
+		type: BfChartCardComponent,
+		isStandalone: true,
+		selector: "bf-chart-card",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			legend: {
+				classPropertyName: "legend",
+				publicName: "legend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			empty: {
+				classPropertyName: "empty",
+				publicName: "empty",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "hostClasses" } },
+		providers: [{
+			provide: BF_CHART_CARD,
+			useExisting: BfChartCardComponent
+		}],
+		ngImport: i0,
+		template: `
+    <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+      @if (headingLevel() === 3) {
+        <h3 class="text-heading text-text min-w-0">{{ title() }}</h3>
+      } @else {
+        <h2 class="text-heading text-text min-w-0">{{ title() }}</h2>
+      }
+      <div data-bf-chart-card-period class="shrink-0 empty:hidden">
+        <ng-content select="[bfSlot=period]" />
+      </div>
+    </div>
+    <div data-bf-chart-card-body class="min-w-0" [attr.aria-busy]="loading() ? 'true' : null">
+      @if (loading()) {
+        <bf-skeleton shape="rect" height="15rem" />
+      } @else if (error()) {
+        <div data-bf-chart-card-error role="status" [class]="stateClasses">
+          <ng-content select="[bfSlot=error]">{{ labels.chartError }}</ng-content>
+        </div>
+      } @else if (empty()) {
+        <div data-bf-chart-card-empty role="status" [class]="stateClasses">
+          <ng-content select="[bfSlot=empty]">{{ labels.chartEmpty }}</ng-content>
+        </div>
+      } @else {
+        <ng-content />
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BfSkeletonComponent,
+			selector: "bf-skeleton",
+			inputs: [
+				"shape",
+				"lines",
+				"width",
+				"height"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.1.7",
+	ngImport: i0,
+	type: BfChartCardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "bf-chart-card",
+			imports: [BfSkeletonComponent],
+			host: { "[class]": "hostClasses" },
+			providers: [{
+				provide: BF_CHART_CARD,
+				useExisting: BfChartCardComponent
+			}],
+			template: `
+    <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
+      @if (headingLevel() === 3) {
+        <h3 class="text-heading text-text min-w-0">{{ title() }}</h3>
+      } @else {
+        <h2 class="text-heading text-text min-w-0">{{ title() }}</h2>
+      }
+      <div data-bf-chart-card-period class="shrink-0 empty:hidden">
+        <ng-content select="[bfSlot=period]" />
+      </div>
+    </div>
+    <div data-bf-chart-card-body class="min-w-0" [attr.aria-busy]="loading() ? 'true' : null">
+      @if (loading()) {
+        <bf-skeleton shape="rect" height="15rem" />
+      } @else if (error()) {
+        <div data-bf-chart-card-error role="status" [class]="stateClasses">
+          <ng-content select="[bfSlot=error]">{{ labels.chartError }}</ng-content>
+        </div>
+      } @else if (empty()) {
+        <div data-bf-chart-card-empty role="status" [class]="stateClasses">
+          <ng-content select="[bfSlot=empty]">{{ labels.chartEmpty }}</ng-content>
+        </div>
+      } @else {
+        <ng-content />
+      }
+    </div>
+  `
+		}]
+	}],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: true
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
+		legend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legend",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		empty: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "empty",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}]
+	}
+});
+export { BfBarChartComponent, BfChartCardComponent, BfDonutChartComponent, BfLineChartComponent, BfSparklineComponent };
+
+//# sourceMappingURL=bitforgehq-ui-charts.mjs.map