@lieselthuriot/widget-renderer 0.0.0-stage → 0.2.0

package/fesm2022/lieselthuriot-widget-renderer-chart-element-renderer-wVHdIYuJ.mjs

@@ -0,0 +1,993 @@
+import { i as defaultWidgetRendererLocale, n as chartAriaLabel, r as WidgetTooltip, t as chartAccessibilitySummary } from "./lieselthuriot-widget-renderer-chart-accessibility-BzH2alxy.mjs";
+import * as i0 from "@angular/core";
+import { Component, Directive, afterNextRender, computed, effect, inject, input, signal, viewChild } from "@angular/core";
+import { arc, curveMonotoneX, line, pie } from "d3-shape";
+import { tickIncrement, ticks } from "d3-array";
+const START_ANGLE = -110 * Math.PI / 180;
+const END_ANGLE = 110 * Math.PI / 180;
+const MINOR_SPLITS = 5;
+const BELOW_CENTER = Math.sin(20 * Math.PI / 180);
+function gaugeRatio(element) {
+	const { value, min, max } = element.data;
+	return max === min ? 0 : Math.max(0, Math.min(1, (value - min) / (max - min)));
+}
+function polar(centerX, centerY, radius, angle) {
+	return [centerX + radius * Math.sin(angle), centerY - radius * Math.cos(angle)];
+}
+function gaugeChartLayout(element, width, height) {
+	const fontSize = element.style.font.size;
+	const outside = element.showLegend ? 16 + fontSize * 1.2 : 12;
+	const radius = Math.max(8, Math.min(width / 2 - outside, (height - outside - 4) / (1 + BELOW_CENTER)));
+	const centerX = width / 2;
+	const used = outside + radius * (1 + BELOW_CENTER);
+	const centerY = outside + radius + Math.max(0, (height - used) / 2);
+	const band = Math.min(16, radius * .25);
+	const ring = arc().innerRadius(radius - band).outerRadius(radius).cornerRadius(band / 2);
+	const valueAngle = START_ANGLE + (END_ANGLE - START_ANGLE) * gaugeRatio(element);
+	const ticks = [];
+	const labels = [];
+	const { min, max } = element.data;
+	for (let step = 0; step <= 30; step++) {
+		const major = step % MINOR_SPLITS === 0;
+		const angle = START_ANGLE + (END_ANGLE - START_ANGLE) * step / 30;
+		const [x1, y1] = polar(centerX, centerY, radius + 2, angle);
+		const [x2, y2] = polar(centerX, centerY, radius + (major ? 10 : 6), angle);
+		ticks.push({
+			x1,
+			y1,
+			x2,
+			y2,
+			major
+		});
+		if (major && element.showLegend) {
+			const [x, y] = polar(centerX, centerY, radius + 12 + fontSize * .8, angle);
+			const value = min + (max - min) * step / 30;
+			labels.push({
+				x,
+				y,
+				text: `${Math.round(value)}`
+			});
+		}
+	}
+	const [tipX, tipY] = polar(centerX, centerY, radius * .55, valueAngle);
+	const [leftX, leftY] = polar(centerX, centerY, 2.5, valueAngle - Math.PI / 2);
+	const [rightX, rightY] = polar(centerX, centerY, 2.5, valueAngle + Math.PI / 2);
+	return {
+		centerX,
+		centerY,
+		radius,
+		track: ring({
+			startAngle: START_ANGLE,
+			endAngle: END_ANGLE
+		}) ?? "",
+		fill: valueAngle > START_ANGLE ? ring({
+			startAngle: START_ANGLE,
+			endAngle: valueAngle
+		}) ?? "" : "",
+		ticks,
+		labels,
+		pointer: `${leftX},${leftY} ${tipX},${tipY} ${rightX},${rightY}`,
+		valueY: centerY + radius * .4
+	};
+}
+const DEFAULT_CHART_COLORS = [
+	"#5470c6",
+	"#91cc75",
+	"#fac858",
+	"#ee6666",
+	"#73c0de",
+	"#3ba272",
+	"#fc8452",
+	"#9a60b4",
+	"#ea7ccc"
+];
+function defaultChartColor(index) {
+	return DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
+}
+var InteractiveChart = class InteractiveChart {
+	element = input.required(...ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []);
+	sensitiveHidden = input(false, ...ngDevMode ? [{ debugName: "sensitiveHidden" }] : /* istanbul ignore next */ []);
+	locale = input(defaultWidgetRendererLocale, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	summaryId = `chart-summary-${crypto.randomUUID()}`;
+	activeIndex = signal(null, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	size = signal({
+		width: 0,
+		height: 0
+	}, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	announcement = computed(() => {
+		const point = this.activePoint();
+		return point ? this.locale().aria.chart.dataPointLabel(point.label, `${point.value}`) : "";
+	}, ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
+	activePoint = computed(() => {
+		const index = this.activeIndex();
+		return index === null ? void 0 : this.points()[index];
+	}, ...ngDevMode ? [{ debugName: "activePoint" }] : /* istanbul ignore next */ []);
+	host = viewChild.required("chartHost", ...ngDevMode ? [{ debugName: "host" }] : /* istanbul ignore next */ []);
+	widgetTooltip = inject(WidgetTooltip);
+	tooltipOwner = {};
+	resizeObserver = null;
+	constructor() {
+		afterNextRender(() => {
+			const host = this.host().nativeElement;
+			this.measure(host);
+			if (typeof ResizeObserver === "undefined") return;
+			this.resizeObserver = new ResizeObserver(() => this.measure(host));
+			this.resizeObserver.observe(host);
+		});
+		effect(() => {
+			this.element();
+			this.sensitiveHidden();
+			this.hideTooltip();
+		});
+		effect(() => {
+			const owner = this.widgetTooltip.owner();
+			if (owner && owner !== this.tooltipOwner) this.activeIndex.set(null);
+		});
+	}
+	ngOnDestroy() {
+		this.resizeObserver?.disconnect();
+		this.widgetTooltip.hide(this.tooltipOwner);
+	}
+	ariaLabel(element) {
+		return chartAriaLabel(element, this.locale().aria.chart);
+	}
+	accessibilitySummary(element) {
+		return chartAccessibilitySummary(element, this.locale().aria.chart);
+	}
+	pointerMove(index, event) {
+		if (this.sensitiveHidden()) return;
+		if (event.pointerType === "touch") event.stopPropagation();
+		const point = this.points()[index];
+		if (point) this.showTooltip(point, event.clientX, event.clientY);
+	}
+	pointerLeave() {
+		this.hideTooltip();
+	}
+	focus() {
+		if (this.sensitiveHidden()) return;
+		this.select(this.activeIndex() ?? 0);
+	}
+	keyDown(event) {
+		if (event.key === "Escape") {
+			if (this.activeIndex() === null) return;
+			event.preventDefault();
+			this.hideTooltip();
+			return;
+		}
+		const count = this.points().length;
+		if (!count || this.sensitiveHidden()) return;
+		const current = this.activeIndex();
+		const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? current === null ? 0 : Math.min(count - 1, current + 1) : event.key === "ArrowLeft" || event.key === "ArrowUp" ? current === null ? 0 : Math.max(0, current - 1) : event.key === "Home" ? 0 : event.key === "End" ? count - 1 : null;
+		if (next === null) return;
+		event.preventDefault();
+		this.select(next);
+	}
+	onDocumentPointerDown(event) {
+		if (!(event.target instanceof Element) || !this.host().nativeElement.contains(event.target)) this.hideTooltip();
+	}
+	select(index) {
+		const point = this.points()[index];
+		if (!point) return;
+		const bounds = this.host().nativeElement.getBoundingClientRect();
+		this.showTooltip(point, bounds.left + point.anchorX, bounds.top + point.anchorY);
+	}
+	showTooltip(point, clientX, clientY) {
+		const shell = this.widgetTooltip.overlayElement()?.parentElement;
+		this.activeIndex.set(point.index);
+		if (!shell) return;
+		const bounds = shell.getBoundingClientRect();
+		this.widgetTooltip.show(this.tooltipOwner, {
+			x: clientX - bounds.left,
+			y: clientY - bounds.top,
+			label: point.label,
+			value: point.value,
+			color: point.color
+		});
+	}
+	hideTooltip() {
+		this.activeIndex.set(null);
+		this.widgetTooltip.hide(this.tooltipOwner);
+	}
+	measure(host) {
+		const width = host.clientWidth;
+		const height = host.clientHeight;
+		const current = this.size();
+		if (current.width !== width || current.height !== height) this.size.set({
+			width,
+			height
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: InteractiveChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.4",
+		type: InteractiveChart,
+		isStandalone: true,
+		inputs: {
+			element: {
+				classPropertyName: "element",
+				publicName: "element",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			sensitiveHidden: {
+				classPropertyName: "sensitiveHidden",
+				publicName: "sensitiveHidden",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { listeners: { "document:pointerdown": "onDocumentPointerDown($event)" } },
+		viewQueries: [{
+			propertyName: "host",
+			first: true,
+			predicate: ["chartHost"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: InteractiveChart,
+	decorators: [{
+		type: Directive,
+		args: [{ host: { "(document:pointerdown)": "onDocumentPointerDown($event)" } }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		element: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "element",
+				required: true
+			}]
+		}],
+		sensitiveHidden: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sensitiveHidden",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		host: [{
+			type: i0.ViewChild,
+			args: ["chartHost", { isSignal: true }]
+		}]
+	}
+});
+var GaugeChartRenderer = class GaugeChartRenderer extends InteractiveChart {
+	layout = computed(() => {
+		const { width, height } = this.size();
+		return width > 0 && height > 0 ? gaugeChartLayout(this.element(), width, height) : null;
+	}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	points = computed(() => {
+		const layout = this.layout();
+		const element = this.element();
+		return layout ? [{
+			index: 0,
+			label: element.title || this.locale().aria.chart.gaugeValueLabel,
+			value: element.data.value,
+			color: element.style.color.fill,
+			anchorX: layout.centerX,
+			anchorY: layout.centerY - layout.radius
+		}] : [];
+	}, ...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	roundedValue(element) {
+		return Math.round(element.data.value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: GaugeChartRenderer,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: GaugeChartRenderer,
+		isStandalone: true,
+		selector: "widget-gauge-chart",
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<div\n  class=\"chart-chart chart-stack\"\n  [attr.aria-hidden]=\"sensitiveHidden() ? 'true' : null\"\n  [style.pointer-events]=\"sensitiveHidden() ? 'none' : null\"\n  [style.font-size.px]=\"element().style.font.size\"\n>\n  <div #chartHost class=\"chart-host\">\n    <svg\n      class=\"chart-svg gauge-chart\"\n      role=\"img\"\n      [attr.aria-label]=\"ariaLabel(element())\"\n      [attr.aria-describedby]=\"sensitiveHidden() ? null : summaryId\"\n      [attr.tabindex]=\"sensitiveHidden() ? -1 : 0\"\n      [attr.width]=\"size().width\"\n      [attr.height]=\"size().height\"\n      (focus)=\"focus()\"\n      (blur)=\"pointerLeave()\"\n      (keydown)=\"keyDown($event)\"\n    >\n      @if (layout(); as gauge) {\n        <g\n          class=\"chart-shape\"\n          (pointerenter)=\"pointerMove(0, $event)\"\n          (pointermove)=\"pointerMove(0, $event)\"\n          (pointerdown)=\"pointerMove(0, $event)\"\n          (pointerleave)=\"pointerLeave()\"\n        >\n          <g [attr.transform]=\"'translate(' + gauge.centerX + ',' + gauge.centerY + ')'\">\n            <path [attr.d]=\"gauge.track\" [attr.fill]=\"element().style.color.track\" />\n            @if (gauge.fill) {\n              <path [attr.d]=\"gauge.fill\" [attr.fill]=\"element().style.color.fill\" />\n            }\n          </g>\n          @for (tick of gauge.ticks; track $index) {\n            <line\n              [attr.x1]=\"tick.x1\"\n              [attr.y1]=\"tick.y1\"\n              [attr.x2]=\"tick.x2\"\n              [attr.y2]=\"tick.y2\"\n              [attr.stroke]=\"element().style.color.legend\"\n              [attr.stroke-width]=\"tick.major ? 2 : 1\"\n            />\n          }\n          @for (label of gauge.labels; track $index) {\n            <text\n              text-anchor=\"middle\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"label.x\"\n              [attr.y]=\"label.y\"\n              [attr.fill]=\"element().style.color.legend\"\n            >\n              {{ label.text }}\n            </text>\n          }\n          <polygon [attr.points]=\"gauge.pointer\" [attr.fill]=\"element().style.color.legend\" />\n          <circle\n            [attr.cx]=\"gauge.centerX\"\n            [attr.cy]=\"gauge.centerY\"\n            r=\"4\"\n            [attr.fill]=\"element().style.color.legend\"\n          />\n          @if (element().showLegend) {\n            <text\n              class=\"gauge-value\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"gauge.centerX\"\n              [attr.y]=\"gauge.valueY\"\n              [attr.fill]=\"element().style.color.legend\"\n            >\n              {{ roundedValue(element()) }}\n            </text>\n          }\n        </g>\n      }\n    </svg>\n  </div>\n  @if (element().title) {\n    <span class=\"chart-title\" [style.color]=\"element().style.color.title\">{{\n      element().title\n    }}</span>\n  }\n  @if (!sensitiveHidden()) {\n    <span class=\"visually-hidden\" [id]=\"summaryId\">{{ accessibilitySummary(element()) }}</span>\n    <span class=\"visually-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  }\n</div>\n",
+		styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;--widget-renderer-chart-min-height: 40px}.chart-chart{position:relative;width:100%;height:100%;min-height:var(--widget-renderer-chart-min-height)}.chart-host{position:absolute;inset:0;overflow:hidden}.chart-stack{display:flex;flex-direction:column}.chart-stack .chart-host{position:relative;flex:1 1 auto;min-height:0}.chart-svg{position:absolute;inset:0;display:block;font-family:inherit}.chart-svg:focus{outline:none}.chart-svg:focus-visible{outline:2px solid var(--widget-renderer-focus-ring-contrast, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--widget-renderer-focus-ring, #1d4ed8)}.chart-title{overflow:hidden;flex:0 0 auto;padding:5px 5px 0;font-weight:700;text-align:center;text-overflow:ellipsis;white-space:nowrap}.chart-legend{display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:center;gap:5px 10px;padding:4px 5px 10px}.chart-legend-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.chart-legend-marker{width:25px;height:14px;flex:0 0 auto;border-radius:4px}.chart-shape{cursor:pointer;transition:opacity .12s ease}.chart-shape.is-dimmed{opacity:.55}@media(prefers-reduced-motion:reduce){.chart-shape{transition:none}}.series-chart line{shape-rendering:crispEdges}.series-title{font-weight:700}.series-pointer{fill:#96969633}.series-pointer-line{stroke:#b6b9c0;stroke-dasharray:4 3}.series-line{fill:none;stroke-width:2}.series-point{stroke:none}.series-hit{fill:transparent;cursor:pointer}.gauge-value{font-weight:700}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: GaugeChartRenderer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "widget-gauge-chart",
+			template: "<div\n  class=\"chart-chart chart-stack\"\n  [attr.aria-hidden]=\"sensitiveHidden() ? 'true' : null\"\n  [style.pointer-events]=\"sensitiveHidden() ? 'none' : null\"\n  [style.font-size.px]=\"element().style.font.size\"\n>\n  <div #chartHost class=\"chart-host\">\n    <svg\n      class=\"chart-svg gauge-chart\"\n      role=\"img\"\n      [attr.aria-label]=\"ariaLabel(element())\"\n      [attr.aria-describedby]=\"sensitiveHidden() ? null : summaryId\"\n      [attr.tabindex]=\"sensitiveHidden() ? -1 : 0\"\n      [attr.width]=\"size().width\"\n      [attr.height]=\"size().height\"\n      (focus)=\"focus()\"\n      (blur)=\"pointerLeave()\"\n      (keydown)=\"keyDown($event)\"\n    >\n      @if (layout(); as gauge) {\n        <g\n          class=\"chart-shape\"\n          (pointerenter)=\"pointerMove(0, $event)\"\n          (pointermove)=\"pointerMove(0, $event)\"\n          (pointerdown)=\"pointerMove(0, $event)\"\n          (pointerleave)=\"pointerLeave()\"\n        >\n          <g [attr.transform]=\"'translate(' + gauge.centerX + ',' + gauge.centerY + ')'\">\n            <path [attr.d]=\"gauge.track\" [attr.fill]=\"element().style.color.track\" />\n            @if (gauge.fill) {\n              <path [attr.d]=\"gauge.fill\" [attr.fill]=\"element().style.color.fill\" />\n            }\n          </g>\n          @for (tick of gauge.ticks; track $index) {\n            <line\n              [attr.x1]=\"tick.x1\"\n              [attr.y1]=\"tick.y1\"\n              [attr.x2]=\"tick.x2\"\n              [attr.y2]=\"tick.y2\"\n              [attr.stroke]=\"element().style.color.legend\"\n              [attr.stroke-width]=\"tick.major ? 2 : 1\"\n            />\n          }\n          @for (label of gauge.labels; track $index) {\n            <text\n              text-anchor=\"middle\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"label.x\"\n              [attr.y]=\"label.y\"\n              [attr.fill]=\"element().style.color.legend\"\n            >\n              {{ label.text }}\n            </text>\n          }\n          <polygon [attr.points]=\"gauge.pointer\" [attr.fill]=\"element().style.color.legend\" />\n          <circle\n            [attr.cx]=\"gauge.centerX\"\n            [attr.cy]=\"gauge.centerY\"\n            r=\"4\"\n            [attr.fill]=\"element().style.color.legend\"\n          />\n          @if (element().showLegend) {\n            <text\n              class=\"gauge-value\"\n              text-anchor=\"middle\"\n              dominant-baseline=\"middle\"\n              [attr.x]=\"gauge.centerX\"\n              [attr.y]=\"gauge.valueY\"\n              [attr.fill]=\"element().style.color.legend\"\n            >\n              {{ roundedValue(element()) }}\n            </text>\n          }\n        </g>\n      }\n    </svg>\n  </div>\n  @if (element().title) {\n    <span class=\"chart-title\" [style.color]=\"element().style.color.title\">{{\n      element().title\n    }}</span>\n  }\n  @if (!sensitiveHidden()) {\n    <span class=\"visually-hidden\" [id]=\"summaryId\">{{ accessibilitySummary(element()) }}</span>\n    <span class=\"visually-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  }\n</div>\n",
+			styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;--widget-renderer-chart-min-height: 40px}.chart-chart{position:relative;width:100%;height:100%;min-height:var(--widget-renderer-chart-min-height)}.chart-host{position:absolute;inset:0;overflow:hidden}.chart-stack{display:flex;flex-direction:column}.chart-stack .chart-host{position:relative;flex:1 1 auto;min-height:0}.chart-svg{position:absolute;inset:0;display:block;font-family:inherit}.chart-svg:focus{outline:none}.chart-svg:focus-visible{outline:2px solid var(--widget-renderer-focus-ring-contrast, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--widget-renderer-focus-ring, #1d4ed8)}.chart-title{overflow:hidden;flex:0 0 auto;padding:5px 5px 0;font-weight:700;text-align:center;text-overflow:ellipsis;white-space:nowrap}.chart-legend{display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:center;gap:5px 10px;padding:4px 5px 10px}.chart-legend-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.chart-legend-marker{width:25px;height:14px;flex:0 0 auto;border-radius:4px}.chart-shape{cursor:pointer;transition:opacity .12s ease}.chart-shape.is-dimmed{opacity:.55}@media(prefers-reduced-motion:reduce){.chart-shape{transition:none}}.series-chart line{shape-rendering:crispEdges}.series-title{font-weight:700}.series-pointer{fill:#96969633}.series-pointer-line{stroke:#b6b9c0;stroke-dasharray:4 3}.series-line{fill:none;stroke-width:2}.series-point{stroke:none}.series-hit{fill:transparent;cursor:pointer}.gauge-value{font-weight:700}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+		}]
+	}]
+});
+const HOVER_GROWTH = 6;
+function chartColor(point, index) {
+	return point.color || defaultChartColor(index);
+}
+function pieChartLayout(element, width, height) {
+	const outerRadius = Math.max(0, Math.min(width, height) / 2 * .86 - HOVER_GROWTH);
+	const innerRadius = element.type === "donut" ? outerRadius * .62 : 0;
+	const shape = arc().innerRadius(innerRadius);
+	const arcs = pie().sort(null).value(({ value }) => Math.max(0, value))(element.data);
+	return {
+		centerX: width / 2,
+		centerY: height / 2,
+		innerRadius,
+		outerRadius,
+		slices: arcs.map((slice, index) => {
+			const point = element.data[index];
+			const angles = {
+				startAngle: slice.startAngle,
+				endAngle: slice.endAngle
+			};
+			const centroid = shape.outerRadius(outerRadius).centroid(angles);
+			return {
+				index,
+				label: point.label,
+				value: point.value,
+				color: chartColor(point, index),
+				path: shape.outerRadius(outerRadius)(angles) ?? "",
+				activePath: shape.outerRadius(outerRadius + HOVER_GROWTH)(angles) ?? "",
+				centroid: [centroid[0] + width / 2, centroid[1] + height / 2]
+			};
+		})
+	};
+}
+function funnelChartLayout(element, width, height) {
+	const gap = 3;
+	const count = element.data.length;
+	if (!count) return [];
+	const boxLeft = width * .08;
+	const boxWidth = width * .84;
+	const top = 4;
+	const itemHeight = Math.max(1, (height - 8 - gap * (count - 1)) / count);
+	const max = Math.max(1, ...element.data.map(({ value }) => value));
+	const size = (value) => boxWidth * (.1 + .78 * Math.min(1, Math.max(0, value / max)));
+	const order = element.data.map((point, index) => ({
+		point,
+		index
+	})).sort((a, b) => b.point.value - a.point.value);
+	const centerX = boxLeft + boxWidth / 2;
+	return order.map(({ point, index }, position) => {
+		const y = top + position * (itemHeight + gap);
+		const topWidth = size(point.value);
+		const bottomWidth = size(order[position + 1]?.point.value ?? 0);
+		return {
+			index,
+			label: point.label,
+			value: point.value,
+			color: chartColor(point, index),
+			points: [
+				[centerX - topWidth / 2, y],
+				[centerX + topWidth / 2, y],
+				[centerX + bottomWidth / 2, y + itemHeight],
+				[centerX - bottomWidth / 2, y + itemHeight]
+			].map(([x, pointY]) => `${x},${pointY}`).join(" "),
+			centerX,
+			centerY: y + itemHeight / 2
+		};
+	}).sort((a, b) => a.index - b.index);
+}
+var PartChartRenderer = class PartChartRenderer extends InteractiveChart {
+	pie = computed(() => {
+		const element = this.element();
+		const { width, height } = this.size();
+		return element.type !== "funnel" && width > 0 && height > 0 ? pieChartLayout(element, width, height) : null;
+	}, ...ngDevMode ? [{ debugName: "pie" }] : /* istanbul ignore next */ []);
+	funnel = computed(() => {
+		const element = this.element();
+		const { width, height } = this.size();
+		return element.type === "funnel" && width > 0 && height > 0 ? funnelChartLayout(element, width, height) : null;
+	}, ...ngDevMode ? [{ debugName: "funnel" }] : /* istanbul ignore next */ []);
+	legend = computed(() => this.element().data.map((point, index) => ({
+		index,
+		label: point.label,
+		color: chartColor(point, index)
+	})), ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
+	points = computed(() => {
+		const pie = this.pie();
+		if (pie) return pie.slices.map(({ index, label, value, color, centroid }) => ({
+			index,
+			label,
+			value,
+			color,
+			anchorX: centroid[0],
+			anchorY: centroid[1]
+		}));
+		return (this.funnel() ?? []).map(({ index, label, value, color, centerX, centerY }) => ({
+			index,
+			label,
+			value,
+			color,
+			anchorX: centerX,
+			anchorY: centerY
+		}));
+	}, ...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: PartChartRenderer,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: PartChartRenderer,
+		isStandalone: true,
+		selector: "widget-part-chart",
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<div\n  class=\"chart-chart chart-stack\"\n  [attr.aria-hidden]=\"sensitiveHidden() ? 'true' : null\"\n  [style.pointer-events]=\"sensitiveHidden() ? 'none' : null\"\n  [style.font-size.px]=\"element().style.font.size\"\n>\n  @if (element().title) {\n    <span class=\"chart-title\" [style.color]=\"element().style.color.title\">{{\n      element().title\n    }}</span>\n  }\n  <div #chartHost class=\"chart-host\">\n    <svg\n      class=\"chart-svg part-chart\"\n      role=\"img\"\n      [attr.aria-label]=\"ariaLabel(element())\"\n      [attr.aria-describedby]=\"sensitiveHidden() ? null : summaryId\"\n      [attr.tabindex]=\"sensitiveHidden() || !element().data.length ? -1 : 0\"\n      [attr.width]=\"size().width\"\n      [attr.height]=\"size().height\"\n      (focus)=\"focus()\"\n      (blur)=\"pointerLeave()\"\n      (keydown)=\"keyDown($event)\"\n    >\n      @if (pie(); as chart) {\n        <g [attr.transform]=\"'translate(' + chart.centerX + ',' + chart.centerY + ')'\">\n          @for (slice of chart.slices; track slice.index) {\n            <path\n              class=\"chart-shape\"\n              [class.is-dimmed]=\"activeIndex() !== null && activeIndex() !== slice.index\"\n              [attr.d]=\"activeIndex() === slice.index ? slice.activePath : slice.path\"\n              [attr.fill]=\"slice.color\"\n              (pointerenter)=\"pointerMove(slice.index, $event)\"\n              (pointermove)=\"pointerMove(slice.index, $event)\"\n              (pointerdown)=\"pointerMove(slice.index, $event)\"\n              (pointerleave)=\"pointerLeave()\"\n            />\n          }\n        </g>\n      }\n      @if (funnel(); as segments) {\n        @for (segment of segments; track segment.index) {\n          <polygon\n            class=\"chart-shape\"\n            [class.is-dimmed]=\"activeIndex() !== null && activeIndex() !== segment.index\"\n            [attr.points]=\"segment.points\"\n            [attr.fill]=\"segment.color\"\n            (pointerenter)=\"pointerMove(segment.index, $event)\"\n            (pointermove)=\"pointerMove(segment.index, $event)\"\n            (pointerdown)=\"pointerMove(segment.index, $event)\"\n            (pointerleave)=\"pointerLeave()\"\n          />\n        }\n      }\n    </svg>\n  </div>\n  @if (element().showLegend) {\n    <div class=\"chart-legend\" [style.color]=\"element().style.color.legend\" aria-hidden=\"true\">\n      @for (item of legend(); track item.index) {\n        <span class=\"chart-legend-item\"\n          ><span class=\"chart-legend-marker\" [style.background]=\"item.color\"></span\n          >{{ item.label }}</span\n        >\n      }\n    </div>\n  }\n  @if (!sensitiveHidden()) {\n    <span class=\"visually-hidden\" [id]=\"summaryId\">{{ accessibilitySummary(element()) }}</span>\n    <span class=\"visually-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  }\n</div>\n",
+		styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;--widget-renderer-chart-min-height: 40px}.chart-chart{position:relative;width:100%;height:100%;min-height:var(--widget-renderer-chart-min-height)}.chart-host{position:absolute;inset:0;overflow:hidden}.chart-stack{display:flex;flex-direction:column}.chart-stack .chart-host{position:relative;flex:1 1 auto;min-height:0}.chart-svg{position:absolute;inset:0;display:block;font-family:inherit}.chart-svg:focus{outline:none}.chart-svg:focus-visible{outline:2px solid var(--widget-renderer-focus-ring-contrast, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--widget-renderer-focus-ring, #1d4ed8)}.chart-title{overflow:hidden;flex:0 0 auto;padding:5px 5px 0;font-weight:700;text-align:center;text-overflow:ellipsis;white-space:nowrap}.chart-legend{display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:center;gap:5px 10px;padding:4px 5px 10px}.chart-legend-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.chart-legend-marker{width:25px;height:14px;flex:0 0 auto;border-radius:4px}.chart-shape{cursor:pointer;transition:opacity .12s ease}.chart-shape.is-dimmed{opacity:.55}@media(prefers-reduced-motion:reduce){.chart-shape{transition:none}}.series-chart line{shape-rendering:crispEdges}.series-title{font-weight:700}.series-pointer{fill:#96969633}.series-pointer-line{stroke:#b6b9c0;stroke-dasharray:4 3}.series-line{fill:none;stroke-width:2}.series-point{stroke:none}.series-hit{fill:transparent;cursor:pointer}.gauge-value{font-weight:700}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: PartChartRenderer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "widget-part-chart",
+			template: "<div\n  class=\"chart-chart chart-stack\"\n  [attr.aria-hidden]=\"sensitiveHidden() ? 'true' : null\"\n  [style.pointer-events]=\"sensitiveHidden() ? 'none' : null\"\n  [style.font-size.px]=\"element().style.font.size\"\n>\n  @if (element().title) {\n    <span class=\"chart-title\" [style.color]=\"element().style.color.title\">{{\n      element().title\n    }}</span>\n  }\n  <div #chartHost class=\"chart-host\">\n    <svg\n      class=\"chart-svg part-chart\"\n      role=\"img\"\n      [attr.aria-label]=\"ariaLabel(element())\"\n      [attr.aria-describedby]=\"sensitiveHidden() ? null : summaryId\"\n      [attr.tabindex]=\"sensitiveHidden() || !element().data.length ? -1 : 0\"\n      [attr.width]=\"size().width\"\n      [attr.height]=\"size().height\"\n      (focus)=\"focus()\"\n      (blur)=\"pointerLeave()\"\n      (keydown)=\"keyDown($event)\"\n    >\n      @if (pie(); as chart) {\n        <g [attr.transform]=\"'translate(' + chart.centerX + ',' + chart.centerY + ')'\">\n          @for (slice of chart.slices; track slice.index) {\n            <path\n              class=\"chart-shape\"\n              [class.is-dimmed]=\"activeIndex() !== null && activeIndex() !== slice.index\"\n              [attr.d]=\"activeIndex() === slice.index ? slice.activePath : slice.path\"\n              [attr.fill]=\"slice.color\"\n              (pointerenter)=\"pointerMove(slice.index, $event)\"\n              (pointermove)=\"pointerMove(slice.index, $event)\"\n              (pointerdown)=\"pointerMove(slice.index, $event)\"\n              (pointerleave)=\"pointerLeave()\"\n            />\n          }\n        </g>\n      }\n      @if (funnel(); as segments) {\n        @for (segment of segments; track segment.index) {\n          <polygon\n            class=\"chart-shape\"\n            [class.is-dimmed]=\"activeIndex() !== null && activeIndex() !== segment.index\"\n            [attr.points]=\"segment.points\"\n            [attr.fill]=\"segment.color\"\n            (pointerenter)=\"pointerMove(segment.index, $event)\"\n            (pointermove)=\"pointerMove(segment.index, $event)\"\n            (pointerdown)=\"pointerMove(segment.index, $event)\"\n            (pointerleave)=\"pointerLeave()\"\n          />\n        }\n      }\n    </svg>\n  </div>\n  @if (element().showLegend) {\n    <div class=\"chart-legend\" [style.color]=\"element().style.color.legend\" aria-hidden=\"true\">\n      @for (item of legend(); track item.index) {\n        <span class=\"chart-legend-item\"\n          ><span class=\"chart-legend-marker\" [style.background]=\"item.color\"></span\n          >{{ item.label }}</span\n        >\n      }\n    </div>\n  }\n  @if (!sensitiveHidden()) {\n    <span class=\"visually-hidden\" [id]=\"summaryId\">{{ accessibilitySummary(element()) }}</span>\n    <span class=\"visually-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  }\n</div>\n",
+			styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;--widget-renderer-chart-min-height: 40px}.chart-chart{position:relative;width:100%;height:100%;min-height:var(--widget-renderer-chart-min-height)}.chart-host{position:absolute;inset:0;overflow:hidden}.chart-stack{display:flex;flex-direction:column}.chart-stack .chart-host{position:relative;flex:1 1 auto;min-height:0}.chart-svg{position:absolute;inset:0;display:block;font-family:inherit}.chart-svg:focus{outline:none}.chart-svg:focus-visible{outline:2px solid var(--widget-renderer-focus-ring-contrast, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--widget-renderer-focus-ring, #1d4ed8)}.chart-title{overflow:hidden;flex:0 0 auto;padding:5px 5px 0;font-weight:700;text-align:center;text-overflow:ellipsis;white-space:nowrap}.chart-legend{display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:center;gap:5px 10px;padding:4px 5px 10px}.chart-legend-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.chart-legend-marker{width:25px;height:14px;flex:0 0 auto;border-radius:4px}.chart-shape{cursor:pointer;transition:opacity .12s ease}.chart-shape.is-dimmed{opacity:.55}@media(prefers-reduced-motion:reduce){.chart-shape{transition:none}}.series-chart line{shape-rendering:crispEdges}.series-title{font-weight:700}.series-pointer{fill:#96969633}.series-pointer-line{stroke:#b6b9c0;stroke-dasharray:4 3}.series-line{fill:none;stroke-width:2}.series-point{stroke:none}.series-hit{fill:transparent;cursor:pointer}.gauge-value{font-weight:700}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+		}]
+	}]
+});
+var ProgressElementRenderer = class ProgressElementRenderer {
+	element = input.required(...ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []);
+	sensitiveHidden = input(false, ...ngDevMode ? [{ debugName: "sensitiveHidden" }] : /* istanbul ignore next */ []);
+	locale = input(defaultWidgetRendererLocale, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	summaryId = `progress-summary-${crypto.randomUUID()}`;
+	tooltipIndex = signal(null, ...ngDevMode ? [{ debugName: "tooltipIndex" }] : /* istanbul ignore next */ []);
+	widgetTooltip = inject(WidgetTooltip);
+	tooltipOwner = {};
+	tooltipHideTimer = null;
+	constructor() {
+		effect(() => {
+			this.element();
+			this.sensitiveHidden();
+			this.clearTooltip();
+		});
+	}
+	ngOnDestroy() {
+		this.cancelTooltipHide();
+		this.widgetTooltip.hide(this.tooltipOwner);
+	}
+	progressStyle(element) {
+		const radius = element.style.radius ?? {
+			segment: 0,
+			track: 999
+		};
+		return {
+			"--progress-track": element.style.color.track,
+			"--progress-title-color": element.style.color.title,
+			"--progress-legend-color": element.style.color.legend,
+			"--progress-font-size": `${element.style?.font.size ?? 11}px`,
+			"--progress-segment-radius": `${radius.segment}px`,
+			"--progress-track-radius": `${radius.track}px`
+		};
+	}
+	progressItems(element) {
+		const range = element.data.max - element.data.min;
+		let position = element.data.min;
+		return element.data.items.map((item, index) => {
+			const start = position;
+			position += item.value;
+			return {
+				item,
+				index,
+				start,
+				end: position,
+				width: item.value / range * 100,
+				center: (start - element.data.min + item.value / 2) / range * 100
+			};
+		});
+	}
+	progressSegments(element) {
+		return this.progressItems(element).filter(({ item }) => item.kind === "segment");
+	}
+	segment(item) {
+		return item;
+	}
+	segmentStyle(width, color) {
+		return {
+			width: `${width}%`,
+			...color ? { background: color } : {}
+		};
+	}
+	progressValue(element) {
+		return element.data.items.reduce((total, item) => total + (item.kind === "segment" ? item.value : 0), 0);
+	}
+	showTooltip(index, event) {
+		if (this.sensitiveHidden()) return;
+		this.cancelTooltipHide();
+		this.showTooltipAt(index, event.currentTarget instanceof HTMLElement ? event.currentTarget : event.target instanceof HTMLElement ? event.target : null);
+	}
+	hideTooltip(index) {
+		this.cancelTooltipHide();
+		this.tooltipHideTimer = setTimeout(() => {
+			if (this.tooltipIndex() === index) {
+				this.tooltipIndex.set(null);
+				this.widgetTooltip.hide(this.tooltipOwner);
+			}
+			this.tooltipHideTimer = null;
+		}, 100);
+	}
+	moveTooltip(index, event) {
+		if (this.sensitiveHidden() || event.pointerType === "touch") return;
+		this.positionTooltip(index, event);
+	}
+	toggleTouchTooltip(index, event) {
+		if (this.sensitiveHidden() || event.pointerType === "mouse") return;
+		event.stopPropagation();
+		this.cancelTooltipHide();
+		if (this.tooltipIndex() === index) {
+			this.tooltipIndex.set(null);
+			this.widgetTooltip.hide(this.tooltipOwner);
+			return;
+		}
+		this.positionTooltip(index, event);
+	}
+	segmentKeyDown(index, event) {
+		if (event.key !== "Escape") return;
+		event.preventDefault();
+		this.hideTooltip(index);
+	}
+	onDocumentPointerDown(event) {
+		if (!(event.target instanceof Element) || !event.target.closest(".progress-segment")) {
+			this.tooltipIndex.set(null);
+			this.widgetTooltip.hide(this.tooltipOwner);
+		}
+	}
+	positionTooltip(index, event) {
+		const target = event.currentTarget;
+		if (!(target instanceof HTMLElement)) return;
+		this.showTooltipAt(index, target, event.clientX, event.clientY);
+	}
+	showTooltipAt(index, target, x, y) {
+		if (!target) return;
+		const shell = this.widgetTooltip.overlayElement()?.parentElement;
+		if (!shell) return;
+		const bounds = shell.getBoundingClientRect();
+		const targetBounds = target.getBoundingClientRect();
+		const entry = this.progressSegments(this.element()).find(({ index: entryIndex }) => entryIndex === index);
+		if (!entry) return;
+		const segment = this.segment(entry.item);
+		this.tooltipIndex.set(index);
+		this.widgetTooltip.show(this.tooltipOwner, {
+			x: (x ?? targetBounds.left + targetBounds.width / 2) - bounds.left,
+			y: (y ?? targetBounds.top) - bounds.top,
+			label: segment.label,
+			value: segment.value,
+			color: segment.color
+		});
+	}
+	cancelTooltipHide() {
+		if (this.tooltipHideTimer) clearTimeout(this.tooltipHideTimer);
+		this.tooltipHideTimer = null;
+	}
+	clearTooltip() {
+		this.cancelTooltipHide();
+		this.tooltipIndex.set(null);
+		this.widgetTooltip.hide(this.tooltipOwner);
+	}
+	progressTextAlign(element) {
+		return (element.grid.anchor ?? "center").endsWith("left") ? "left" : (element.grid.anchor ?? "center").endsWith("right") ? "right" : "center";
+	}
+	ariaLabel(element) {
+		return chartAriaLabel(element, this.locale().aria.chart);
+	}
+	accessibilitySummary(element) {
+		return chartAccessibilitySummary(element, this.locale().aria.chart);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ProgressElementRenderer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: ProgressElementRenderer,
+		isStandalone: true,
+		selector: "widget-progress-element",
+		inputs: {
+			element: {
+				classPropertyName: "element",
+				publicName: "element",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			sensitiveHidden: {
+				classPropertyName: "sensitiveHidden",
+				publicName: "sensitiveHidden",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: { "document:pointerdown": "onDocumentPointerDown($event)" },
+			classAttribute: "is-progress"
+		},
+		ngImport: i0,
+		template: "<div\n  class=\"progress-element\"\n  [style]=\"progressStyle(element())\"\n  [style.pointer-events]=\"sensitiveHidden() ? 'none' : null\"\n  [attr.aria-hidden]=\"sensitiveHidden() ? 'true' : null\"\n>\n  @if (!sensitiveHidden()) {\n    <span\n      class=\"visually-hidden\"\n      role=\"progressbar\"\n      [attr.aria-label]=\"ariaLabel(element())\"\n      [attr.aria-describedby]=\"summaryId\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"element().data.max - element().data.min\"\n      [attr.aria-valuenow]=\"progressValue(element())\"\n    ></span>\n  }\n  @if (element().title) {\n    <span class=\"progress-title\" [style.text-align]=\"progressTextAlign(element())\">{{\n      element().title\n    }}</span>\n  }\n  <span class=\"progress-track-wrap\"\n    ><span class=\"progress-track\">\n      @for (entry of progressItems(element()); track entry.index) {\n        @if (entry.item.kind === 'segment') {\n          <button\n            type=\"button\"\n            class=\"progress-item progress-segment\"\n            [class.is-active]=\"segment(entry.item).active\"\n            [style]=\"segmentStyle(entry.width, segment(entry.item).color)\"\n            [attr.tabindex]=\"sensitiveHidden() ? -1 : 0\"\n            [attr.aria-label]=\"\n              locale().aria.chart.progressSegmentLabel(\n                segment(entry.item).label,\n                segment(entry.item).value.toString()\n              )\n            \"\n            (pointerenter)=\"moveTooltip(entry.index, $event)\"\n            (pointermove)=\"moveTooltip(entry.index, $event)\"\n            (pointerleave)=\"hideTooltip(entry.index)\"\n            (pointerdown)=\"toggleTouchTooltip(entry.index, $event)\"\n            (focus)=\"showTooltip(entry.index, $event)\"\n            (blur)=\"hideTooltip(entry.index)\"\n            (keydown)=\"segmentKeyDown(entry.index, $event)\"\n          ></button>\n        } @else {\n          <span class=\"progress-item progress-gap\" [style]=\"segmentStyle(entry.width)\"></span>\n        }\n      }\n    </span>\n  </span>\n  @if (element().showLegend) {\n    <span class=\"progress-legend\" [style.justify-content]=\"progressTextAlign(element())\">\n      @for (entry of progressSegments(element()); track entry.index) {\n        <span class=\"progress-label\"\n          ><span class=\"legend-marker\" [style.background]=\"segment(entry.item).color\"></span\n          >{{ segment(entry.item).label }}: {{ entry.start }}–{{ entry.end }}</span\n        >\n      }\n    </span>\n  }\n  @if (!sensitiveHidden()) {\n    <span class=\"visually-hidden\" [id]=\"summaryId\">{{ accessibilitySummary(element()) }}</span>\n  }\n</div>\n",
+		styles: [":host{display:block;width:100%;height:auto;max-height:100%;--widget-renderer-progress-label-padding: 6px}.progress-element{display:flex;width:100%;flex-direction:column;justify-content:center;gap:7px;color:inherit;font-size:11px}.progress-track{display:flex;overflow:hidden;height:10px;border:1px solid transparent;border-radius:var(--progress-track-radius);background:var(--progress-track)}.progress-track-wrap{position:relative;display:block}.progress-title{padding-inline:var(--widget-renderer-progress-label-padding);overflow:hidden;color:var(--progress-title-color);font-size:var(--progress-font-size);text-overflow:ellipsis;white-space:nowrap}.progress-item{position:relative;display:block;flex:0 0 auto;height:100%;padding:0;border:0;border-radius:var(--progress-segment-radius)}.progress-segment{cursor:pointer}.progress-segment:focus-visible{z-index:1;outline:2px solid currentColor;outline-offset:-2px}.progress-segment.is-active{overflow:hidden}.progress-segment.is-active:after{position:absolute;inset:0;content:\"\";background:repeating-linear-gradient(135deg,transparent 0,transparent 18px,rgb(255 255 255 / .18) 18px,rgb(255 255 255 / .18) 36px);background-position:0 0;background-size:51px 51px;animation:progress-active .9s linear infinite}@keyframes progress-active{0%{background-position:0 0}to{background-position:51px 0}}@media(prefers-reduced-motion:reduce){.progress-segment.is-active:after,.progress-tooltip{animation:none;transition:none}}.progress-legend{display:flex;flex-wrap:wrap;gap:5px 12px;padding-inline:var(--widget-renderer-progress-label-padding)}.progress-label{display:inline-flex;align-items:center;gap:5px;color:var(--progress-legend-color);font-size:var(--progress-font-size)}.legend-marker,.tooltip-marker{width:9px;height:9px;flex:0 0 auto;border-radius:50%}.progress-tooltip{--tooltip-x: 50%;--tooltip-y: 0px;--tooltip-border: rgb(0 0 0 / .12);position:absolute;z-index:4;top:var(--tooltip-y);left:clamp(64px,var(--tooltip-x),calc(100% - 64px));display:flex;min-width:104px;align-items:center;gap:7px;padding:10px;transform:translate(-50%,calc(-100% - 10px));transition:left .4s cubic-bezier(.23,1,.32,1),top .4s cubic-bezier(.23,1,.32,1);border:1px solid var(--tooltip-border);border-radius:var(--widget-renderer-radius, 4px);background:var(--widget-renderer-control-hover-background, #fff);box-shadow:1px 2px 10px #0003;color:#6e7079;font-size:14px;font-weight:400;line-height:1;pointer-events:none;white-space:nowrap}.progress-tooltip strong{margin-inline-start:auto;color:#464646;font-size:14px;font-weight:900}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ProgressElementRenderer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "widget-progress-element",
+			host: {
+				class: "is-progress",
+				"(document:pointerdown)": "onDocumentPointerDown($event)"
+			},
+			template: "<div\n  class=\"progress-element\"\n  [style]=\"progressStyle(element())\"\n  [style.pointer-events]=\"sensitiveHidden() ? 'none' : null\"\n  [attr.aria-hidden]=\"sensitiveHidden() ? 'true' : null\"\n>\n  @if (!sensitiveHidden()) {\n    <span\n      class=\"visually-hidden\"\n      role=\"progressbar\"\n      [attr.aria-label]=\"ariaLabel(element())\"\n      [attr.aria-describedby]=\"summaryId\"\n      aria-valuemin=\"0\"\n      [attr.aria-valuemax]=\"element().data.max - element().data.min\"\n      [attr.aria-valuenow]=\"progressValue(element())\"\n    ></span>\n  }\n  @if (element().title) {\n    <span class=\"progress-title\" [style.text-align]=\"progressTextAlign(element())\">{{\n      element().title\n    }}</span>\n  }\n  <span class=\"progress-track-wrap\"\n    ><span class=\"progress-track\">\n      @for (entry of progressItems(element()); track entry.index) {\n        @if (entry.item.kind === 'segment') {\n          <button\n            type=\"button\"\n            class=\"progress-item progress-segment\"\n            [class.is-active]=\"segment(entry.item).active\"\n            [style]=\"segmentStyle(entry.width, segment(entry.item).color)\"\n            [attr.tabindex]=\"sensitiveHidden() ? -1 : 0\"\n            [attr.aria-label]=\"\n              locale().aria.chart.progressSegmentLabel(\n                segment(entry.item).label,\n                segment(entry.item).value.toString()\n              )\n            \"\n            (pointerenter)=\"moveTooltip(entry.index, $event)\"\n            (pointermove)=\"moveTooltip(entry.index, $event)\"\n            (pointerleave)=\"hideTooltip(entry.index)\"\n            (pointerdown)=\"toggleTouchTooltip(entry.index, $event)\"\n            (focus)=\"showTooltip(entry.index, $event)\"\n            (blur)=\"hideTooltip(entry.index)\"\n            (keydown)=\"segmentKeyDown(entry.index, $event)\"\n          ></button>\n        } @else {\n          <span class=\"progress-item progress-gap\" [style]=\"segmentStyle(entry.width)\"></span>\n        }\n      }\n    </span>\n  </span>\n  @if (element().showLegend) {\n    <span class=\"progress-legend\" [style.justify-content]=\"progressTextAlign(element())\">\n      @for (entry of progressSegments(element()); track entry.index) {\n        <span class=\"progress-label\"\n          ><span class=\"legend-marker\" [style.background]=\"segment(entry.item).color\"></span\n          >{{ segment(entry.item).label }}: {{ entry.start }}–{{ entry.end }}</span\n        >\n      }\n    </span>\n  }\n  @if (!sensitiveHidden()) {\n    <span class=\"visually-hidden\" [id]=\"summaryId\">{{ accessibilitySummary(element()) }}</span>\n  }\n</div>\n",
+			styles: [":host{display:block;width:100%;height:auto;max-height:100%;--widget-renderer-progress-label-padding: 6px}.progress-element{display:flex;width:100%;flex-direction:column;justify-content:center;gap:7px;color:inherit;font-size:11px}.progress-track{display:flex;overflow:hidden;height:10px;border:1px solid transparent;border-radius:var(--progress-track-radius);background:var(--progress-track)}.progress-track-wrap{position:relative;display:block}.progress-title{padding-inline:var(--widget-renderer-progress-label-padding);overflow:hidden;color:var(--progress-title-color);font-size:var(--progress-font-size);text-overflow:ellipsis;white-space:nowrap}.progress-item{position:relative;display:block;flex:0 0 auto;height:100%;padding:0;border:0;border-radius:var(--progress-segment-radius)}.progress-segment{cursor:pointer}.progress-segment:focus-visible{z-index:1;outline:2px solid currentColor;outline-offset:-2px}.progress-segment.is-active{overflow:hidden}.progress-segment.is-active:after{position:absolute;inset:0;content:\"\";background:repeating-linear-gradient(135deg,transparent 0,transparent 18px,rgb(255 255 255 / .18) 18px,rgb(255 255 255 / .18) 36px);background-position:0 0;background-size:51px 51px;animation:progress-active .9s linear infinite}@keyframes progress-active{0%{background-position:0 0}to{background-position:51px 0}}@media(prefers-reduced-motion:reduce){.progress-segment.is-active:after,.progress-tooltip{animation:none;transition:none}}.progress-legend{display:flex;flex-wrap:wrap;gap:5px 12px;padding-inline:var(--widget-renderer-progress-label-padding)}.progress-label{display:inline-flex;align-items:center;gap:5px;color:var(--progress-legend-color);font-size:var(--progress-font-size)}.legend-marker,.tooltip-marker{width:9px;height:9px;flex:0 0 auto;border-radius:50%}.progress-tooltip{--tooltip-x: 50%;--tooltip-y: 0px;--tooltip-border: rgb(0 0 0 / .12);position:absolute;z-index:4;top:var(--tooltip-y);left:clamp(64px,var(--tooltip-x),calc(100% - 64px));display:flex;min-width:104px;align-items:center;gap:7px;padding:10px;transform:translate(-50%,calc(-100% - 10px));transition:left .4s cubic-bezier(.23,1,.32,1),top .4s cubic-bezier(.23,1,.32,1);border:1px solid var(--tooltip-border);border-radius:var(--widget-renderer-radius, 4px);background:var(--widget-renderer-control-hover-background, #fff);box-shadow:1px 2px 10px #0003;color:#6e7079;font-size:14px;font-weight:400;line-height:1;pointer-events:none;white-space:nowrap}.progress-tooltip strong{margin-inline-start:auto;color:#464646;font-size:14px;font-weight:900}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		element: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "element",
+				required: true
+			}]
+		}],
+		sensitiveHidden: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sensitiveHidden",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}]
+	}
+});
+const CHAR_WIDTH = .6;
+const numberFormat = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+function niceDomain(start, stop, count) {
+	let previous;
+	for (let attempt = 0; attempt < 10; attempt++) {
+		const step = tickIncrement(start, stop, count);
+		if (step === previous || step === 0 || !Number.isFinite(step)) break;
+		if (step > 0) {
+			start = Math.floor(start / step) * step;
+			stop = Math.ceil(stop / step) * step;
+		} else {
+			start = Math.ceil(start * step) / step;
+			stop = Math.floor(stop * step) / step;
+		}
+		previous = step;
+	}
+	return [start, stop];
+}
+function estimateTextWidth(text, fontSize) {
+	return text.length * fontSize * CHAR_WIDTH;
+}
+function formatAxisValue(value) {
+	return numberFormat.format(value);
+}
+function seriesChartLayout(element, width, height) {
+	const fontSize = element.style.font.size;
+	const values = element.data.map(({ value }) => value);
+	const minValue = Math.min(0, ...values);
+	const maxValue = Math.max(0, ...values);
+	const top = element.title ? Math.max(30, fontSize + 18) : 12;
+	const bottom = Math.max(top + 1, height - fontSize - (element.showLegend ? 38 : 34));
+	const plotHeight = Math.max(1, bottom - top);
+	const tickCount = Math.min(5, Math.max(2, Math.round(plotHeight / 45)));
+	const [domainMin, domainMax] = niceDomain(minValue, minValue === maxValue ? 1 : maxValue, tickCount);
+	const y = (value) => bottom - (value - domainMin) / (domainMax - domainMin) * (bottom - top);
+	const ticks$1 = ticks(domainMin, domainMax, tickCount).map((value) => ({
+		value,
+		y: y(value),
+		label: formatAxisValue(value)
+	}));
+	const labelWidth = Math.max(0, ...ticks$1.map(({ label }) => estimateTextWidth(label, fontSize)));
+	const left = Math.min(width / 2, labelWidth + 34);
+	const right = Math.max(left + 1, width - 12);
+	const bandWidth = (right - left) / Math.max(1, element.data.length);
+	const barWidth = Math.max(1, Math.min(bandWidth * .6, 48));
+	const labelSlot = Math.max(1, ...element.data.map(({ label }) => estimateTextWidth(label, fontSize) + 8));
+	const labelInterval = Math.max(1, Math.ceil(labelSlot / Math.max(bandWidth, 1)));
+	const zeroY = y(0);
+	const lineColor = element.style.color.line ?? "#5470c6";
+	const categories = element.data.map(({ label, value, color }, index) => {
+		const bandX = left + index * bandWidth;
+		const valueY = y(value);
+		return {
+			index,
+			label,
+			value,
+			color: color ?? (element.type === "line" ? lineColor : "#5470c6"),
+			x: bandX,
+			center: bandX + bandWidth / 2,
+			width: bandWidth,
+			barY: Math.min(valueY, zeroY),
+			barHeight: Math.abs(zeroY - valueY),
+			pointY: valueY,
+			showLabel: index % labelInterval === 0
+		};
+	});
+	const linePath = element.type === "line" && categories.length ? line().x(({ center }) => center).y(({ pointY }) => pointY).curve(curveMonotoneX)(categories) : null;
+	return {
+		width,
+		height,
+		plot: {
+			left,
+			top,
+			right,
+			bottom
+		},
+		title: element.title ? {
+			x: width / 2,
+			y: 5 + fontSize
+		} : null,
+		ticks: ticks$1,
+		zeroY,
+		categories,
+		linePath,
+		bandWidth,
+		barWidth
+	};
+}
+var SeriesChartRenderer = class SeriesChartRenderer extends InteractiveChart {
+	lineColor = computed(() => this.element().style.color.line ?? "#5470c6", ...ngDevMode ? [{ debugName: "lineColor" }] : /* istanbul ignore next */ []);
+	layout = computed(() => {
+		const { width, height } = this.size();
+		return width > 0 && height > 0 ? seriesChartLayout(this.element(), width, height) : null;
+	}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	points = computed(() => this.layout()?.categories.map(({ index, label, value, color, center, pointY }) => ({
+		index,
+		label,
+		value,
+		color,
+		anchorX: center,
+		anchorY: pointY
+	})) ?? [], ...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: SeriesChartRenderer,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: SeriesChartRenderer,
+		isStandalone: true,
+		selector: "widget-series-chart",
+		usesInheritance: true,
+		ngImport: i0,
+		template: "<div\n  class=\"chart-chart\"\n  [attr.aria-hidden]=\"sensitiveHidden() ? 'true' : null\"\n  [style.pointer-events]=\"sensitiveHidden() ? 'none' : null\"\n>\n  <div #chartHost class=\"chart-host\">\n    <svg\n      class=\"chart-svg series-chart\"\n      role=\"img\"\n      [attr.aria-label]=\"ariaLabel(element())\"\n      [attr.aria-describedby]=\"sensitiveHidden() ? null : summaryId\"\n      [attr.tabindex]=\"sensitiveHidden() || !element().data.length ? -1 : 0\"\n      [attr.width]=\"layout()?.width ?? 0\"\n      [attr.height]=\"layout()?.height ?? 0\"\n      [attr.viewBox]=\"layout() ? '0 0 ' + layout()!.width + ' ' + layout()!.height : null\"\n      [style.font-size.px]=\"element().style.font.size\"\n      (focus)=\"focus()\"\n      (blur)=\"pointerLeave()\"\n      (keydown)=\"keyDown($event)\"\n    >\n      @if (layout(); as chart) {\n        @if (chart.title) {\n          <text\n            class=\"series-title\"\n            text-anchor=\"middle\"\n            [attr.x]=\"chart.title.x\"\n            [attr.y]=\"chart.title.y\"\n            [attr.fill]=\"element().style.color.title\"\n          >\n            {{ element().title }}\n          </text>\n        }\n        @for (tick of chart.ticks; track tick.value) {\n          <line\n            [attr.x1]=\"chart.plot.left\"\n            [attr.x2]=\"chart.plot.right\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            [attr.stroke]=\"element().style.axis.grid\"\n          />\n          <text\n            text-anchor=\"end\"\n            dominant-baseline=\"middle\"\n            [attr.x]=\"chart.plot.left - 8\"\n            [attr.y]=\"tick.y\"\n            [attr.fill]=\"element().style.axis.label\"\n          >\n            {{ tick.label }}\n          </text>\n        }\n        @if (activeIndex() !== null && chart.categories[activeIndex()!]; as active) {\n          @if (element().type === 'bar') {\n            <rect\n              class=\"series-pointer\"\n              [attr.x]=\"active.x\"\n              [attr.y]=\"chart.plot.top\"\n              [attr.width]=\"active.width\"\n              [attr.height]=\"chart.plot.bottom - chart.plot.top\"\n            />\n          } @else {\n            <line\n              class=\"series-pointer-line\"\n              [attr.x1]=\"active.center\"\n              [attr.x2]=\"active.center\"\n              [attr.y1]=\"chart.plot.top\"\n              [attr.y2]=\"chart.plot.bottom\"\n            />\n          }\n        }\n        @if (element().type === 'bar') {\n          @for (category of chart.categories; track category.index) {\n            <rect\n              [attr.x]=\"category.center - chart.barWidth / 2\"\n              [attr.y]=\"category.barY\"\n              [attr.width]=\"chart.barWidth\"\n              [attr.height]=\"category.barHeight\"\n              [attr.fill]=\"category.color\"\n            />\n          }\n        } @else {\n          @if (chart.linePath) {\n            <path class=\"series-line\" [attr.d]=\"chart.linePath\" [attr.stroke]=\"lineColor()\" />\n          }\n          @for (category of chart.categories; track category.index) {\n            <circle\n              class=\"series-point\"\n              [attr.cx]=\"category.center\"\n              [attr.cy]=\"category.pointY\"\n              [attr.r]=\"activeIndex() === category.index ? 5 : 3\"\n              [attr.fill]=\"category.color\"\n            />\n          }\n        }\n        <line\n          [attr.x1]=\"chart.plot.left\"\n          [attr.x2]=\"chart.plot.right\"\n          [attr.y1]=\"chart.zeroY\"\n          [attr.y2]=\"chart.zeroY\"\n          [attr.stroke]=\"element().style.axis.line\"\n        />\n        @for (category of chart.categories; track category.index) {\n          <line\n            [attr.x1]=\"category.x\"\n            [attr.x2]=\"category.x\"\n            [attr.y1]=\"chart.plot.bottom\"\n            [attr.y2]=\"chart.plot.bottom + 5\"\n            [attr.stroke]=\"element().style.axis.line\"\n          />\n          @if (category.showLabel) {\n            <text\n              text-anchor=\"middle\"\n              dominant-baseline=\"hanging\"\n              [attr.x]=\"category.center\"\n              [attr.y]=\"chart.plot.bottom + 8\"\n              [attr.fill]=\"element().style.axis.label\"\n            >\n              {{ category.label }}\n            </text>\n          }\n        }\n        @if (!sensitiveHidden()) {\n          @for (category of chart.categories; track category.index) {\n            <rect\n              class=\"series-hit\"\n              [attr.x]=\"category.x\"\n              [attr.y]=\"chart.plot.top\"\n              [attr.width]=\"category.width\"\n              [attr.height]=\"chart.plot.bottom - chart.plot.top\"\n              (pointerenter)=\"pointerMove(category.index, $event)\"\n              (pointermove)=\"pointerMove(category.index, $event)\"\n              (pointerdown)=\"pointerMove(category.index, $event)\"\n              (pointerleave)=\"pointerLeave()\"\n            />\n          }\n        }\n      }\n    </svg>\n  </div>\n  @if (!sensitiveHidden()) {\n    <span class=\"visually-hidden\" [id]=\"summaryId\">{{ accessibilitySummary(element()) }}</span>\n    <span class=\"visually-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  }\n</div>\n",
+		styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;--widget-renderer-chart-min-height: 40px}.chart-chart{position:relative;width:100%;height:100%;min-height:var(--widget-renderer-chart-min-height)}.chart-host{position:absolute;inset:0;overflow:hidden}.chart-stack{display:flex;flex-direction:column}.chart-stack .chart-host{position:relative;flex:1 1 auto;min-height:0}.chart-svg{position:absolute;inset:0;display:block;font-family:inherit}.chart-svg:focus{outline:none}.chart-svg:focus-visible{outline:2px solid var(--widget-renderer-focus-ring-contrast, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--widget-renderer-focus-ring, #1d4ed8)}.chart-title{overflow:hidden;flex:0 0 auto;padding:5px 5px 0;font-weight:700;text-align:center;text-overflow:ellipsis;white-space:nowrap}.chart-legend{display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:center;gap:5px 10px;padding:4px 5px 10px}.chart-legend-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.chart-legend-marker{width:25px;height:14px;flex:0 0 auto;border-radius:4px}.chart-shape{cursor:pointer;transition:opacity .12s ease}.chart-shape.is-dimmed{opacity:.55}@media(prefers-reduced-motion:reduce){.chart-shape{transition:none}}.series-chart line{shape-rendering:crispEdges}.series-title{font-weight:700}.series-pointer{fill:#96969633}.series-pointer-line{stroke:#b6b9c0;stroke-dasharray:4 3}.series-line{fill:none;stroke-width:2}.series-point{stroke:none}.series-hit{fill:transparent;cursor:pointer}.gauge-value{font-weight:700}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SeriesChartRenderer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "widget-series-chart",
+			template: "<div\n  class=\"chart-chart\"\n  [attr.aria-hidden]=\"sensitiveHidden() ? 'true' : null\"\n  [style.pointer-events]=\"sensitiveHidden() ? 'none' : null\"\n>\n  <div #chartHost class=\"chart-host\">\n    <svg\n      class=\"chart-svg series-chart\"\n      role=\"img\"\n      [attr.aria-label]=\"ariaLabel(element())\"\n      [attr.aria-describedby]=\"sensitiveHidden() ? null : summaryId\"\n      [attr.tabindex]=\"sensitiveHidden() || !element().data.length ? -1 : 0\"\n      [attr.width]=\"layout()?.width ?? 0\"\n      [attr.height]=\"layout()?.height ?? 0\"\n      [attr.viewBox]=\"layout() ? '0 0 ' + layout()!.width + ' ' + layout()!.height : null\"\n      [style.font-size.px]=\"element().style.font.size\"\n      (focus)=\"focus()\"\n      (blur)=\"pointerLeave()\"\n      (keydown)=\"keyDown($event)\"\n    >\n      @if (layout(); as chart) {\n        @if (chart.title) {\n          <text\n            class=\"series-title\"\n            text-anchor=\"middle\"\n            [attr.x]=\"chart.title.x\"\n            [attr.y]=\"chart.title.y\"\n            [attr.fill]=\"element().style.color.title\"\n          >\n            {{ element().title }}\n          </text>\n        }\n        @for (tick of chart.ticks; track tick.value) {\n          <line\n            [attr.x1]=\"chart.plot.left\"\n            [attr.x2]=\"chart.plot.right\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            [attr.stroke]=\"element().style.axis.grid\"\n          />\n          <text\n            text-anchor=\"end\"\n            dominant-baseline=\"middle\"\n            [attr.x]=\"chart.plot.left - 8\"\n            [attr.y]=\"tick.y\"\n            [attr.fill]=\"element().style.axis.label\"\n          >\n            {{ tick.label }}\n          </text>\n        }\n        @if (activeIndex() !== null && chart.categories[activeIndex()!]; as active) {\n          @if (element().type === 'bar') {\n            <rect\n              class=\"series-pointer\"\n              [attr.x]=\"active.x\"\n              [attr.y]=\"chart.plot.top\"\n              [attr.width]=\"active.width\"\n              [attr.height]=\"chart.plot.bottom - chart.plot.top\"\n            />\n          } @else {\n            <line\n              class=\"series-pointer-line\"\n              [attr.x1]=\"active.center\"\n              [attr.x2]=\"active.center\"\n              [attr.y1]=\"chart.plot.top\"\n              [attr.y2]=\"chart.plot.bottom\"\n            />\n          }\n        }\n        @if (element().type === 'bar') {\n          @for (category of chart.categories; track category.index) {\n            <rect\n              [attr.x]=\"category.center - chart.barWidth / 2\"\n              [attr.y]=\"category.barY\"\n              [attr.width]=\"chart.barWidth\"\n              [attr.height]=\"category.barHeight\"\n              [attr.fill]=\"category.color\"\n            />\n          }\n        } @else {\n          @if (chart.linePath) {\n            <path class=\"series-line\" [attr.d]=\"chart.linePath\" [attr.stroke]=\"lineColor()\" />\n          }\n          @for (category of chart.categories; track category.index) {\n            <circle\n              class=\"series-point\"\n              [attr.cx]=\"category.center\"\n              [attr.cy]=\"category.pointY\"\n              [attr.r]=\"activeIndex() === category.index ? 5 : 3\"\n              [attr.fill]=\"category.color\"\n            />\n          }\n        }\n        <line\n          [attr.x1]=\"chart.plot.left\"\n          [attr.x2]=\"chart.plot.right\"\n          [attr.y1]=\"chart.zeroY\"\n          [attr.y2]=\"chart.zeroY\"\n          [attr.stroke]=\"element().style.axis.line\"\n        />\n        @for (category of chart.categories; track category.index) {\n          <line\n            [attr.x1]=\"category.x\"\n            [attr.x2]=\"category.x\"\n            [attr.y1]=\"chart.plot.bottom\"\n            [attr.y2]=\"chart.plot.bottom + 5\"\n            [attr.stroke]=\"element().style.axis.line\"\n          />\n          @if (category.showLabel) {\n            <text\n              text-anchor=\"middle\"\n              dominant-baseline=\"hanging\"\n              [attr.x]=\"category.center\"\n              [attr.y]=\"chart.plot.bottom + 8\"\n              [attr.fill]=\"element().style.axis.label\"\n            >\n              {{ category.label }}\n            </text>\n          }\n        }\n        @if (!sensitiveHidden()) {\n          @for (category of chart.categories; track category.index) {\n            <rect\n              class=\"series-hit\"\n              [attr.x]=\"category.x\"\n              [attr.y]=\"chart.plot.top\"\n              [attr.width]=\"category.width\"\n              [attr.height]=\"chart.plot.bottom - chart.plot.top\"\n              (pointerenter)=\"pointerMove(category.index, $event)\"\n              (pointermove)=\"pointerMove(category.index, $event)\"\n              (pointerdown)=\"pointerMove(category.index, $event)\"\n              (pointerleave)=\"pointerLeave()\"\n            />\n          }\n        }\n      }\n    </svg>\n  </div>\n  @if (!sensitiveHidden()) {\n    <span class=\"visually-hidden\" [id]=\"summaryId\">{{ accessibilitySummary(element()) }}</span>\n    <span class=\"visually-hidden\" aria-live=\"polite\">{{ announcement() }}</span>\n  }\n</div>\n",
+			styles: [":host{display:block;width:100%;height:100%;min-width:0;min-height:0;--widget-renderer-chart-min-height: 40px}.chart-chart{position:relative;width:100%;height:100%;min-height:var(--widget-renderer-chart-min-height)}.chart-host{position:absolute;inset:0;overflow:hidden}.chart-stack{display:flex;flex-direction:column}.chart-stack .chart-host{position:relative;flex:1 1 auto;min-height:0}.chart-svg{position:absolute;inset:0;display:block;font-family:inherit}.chart-svg:focus{outline:none}.chart-svg:focus-visible{outline:2px solid var(--widget-renderer-focus-ring-contrast, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--widget-renderer-focus-ring, #1d4ed8)}.chart-title{overflow:hidden;flex:0 0 auto;padding:5px 5px 0;font-weight:700;text-align:center;text-overflow:ellipsis;white-space:nowrap}.chart-legend{display:flex;flex:0 0 auto;flex-wrap:wrap;justify-content:center;gap:5px 10px;padding:4px 5px 10px}.chart-legend-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.chart-legend-marker{width:25px;height:14px;flex:0 0 auto;border-radius:4px}.chart-shape{cursor:pointer;transition:opacity .12s ease}.chart-shape.is-dimmed{opacity:.55}@media(prefers-reduced-motion:reduce){.chart-shape{transition:none}}.series-chart line{shape-rendering:crispEdges}.series-title{font-weight:700}.series-pointer{fill:#96969633}.series-pointer-line{stroke:#b6b9c0;stroke-dasharray:4 3}.series-line{fill:none;stroke-width:2}.series-point{stroke:none}.series-hit{fill:transparent;cursor:pointer}.gauge-value{font-weight:700}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+		}]
+	}]
+});
+var ChartElementRenderer = class ChartElementRenderer {
+	element = input.required(...ngDevMode ? [{ debugName: "element" }] : /* istanbul ignore next */ []);
+	sensitiveHidden = input(false, ...ngDevMode ? [{ debugName: "sensitiveHidden" }] : /* istanbul ignore next */ []);
+	locale = input(defaultWidgetRendererLocale, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	isProgress(element) {
+		return element.type === "progress";
+	}
+	progress(element) {
+		return element;
+	}
+	gauge(element) {
+		return element;
+	}
+	isSeries(element) {
+		return element.type === "bar" || element.type === "line";
+	}
+	series(element) {
+		return element;
+	}
+	isPart(element) {
+		return element.type === "pie" || element.type === "donut" || element.type === "funnel";
+	}
+	part(element) {
+		return element;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: ChartElementRenderer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.4",
+		type: ChartElementRenderer,
+		isStandalone: true,
+		selector: "widget-chart-element",
+		inputs: {
+			element: {
+				classPropertyName: "element",
+				publicName: "element",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			sensitiveHidden: {
+				classPropertyName: "sensitiveHidden",
+				publicName: "sensitiveHidden",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "@if (isProgress(element())) {\n  <widget-progress-element\n    [element]=\"progress(element())\"\n    [sensitiveHidden]=\"sensitiveHidden()\"\n    [locale]=\"locale()\"\n  />\n} @else if (isSeries(element())) {\n  <widget-series-chart\n    [element]=\"series(element())\"\n    [sensitiveHidden]=\"sensitiveHidden()\"\n    [locale]=\"locale()\"\n  />\n} @else if (isPart(element())) {\n  <widget-part-chart\n    [element]=\"part(element())\"\n    [sensitiveHidden]=\"sensitiveHidden()\"\n    [locale]=\"locale()\"\n  />\n} @else {\n  <widget-gauge-chart\n    [element]=\"gauge(element())\"\n    [sensitiveHidden]=\"sensitiveHidden()\"\n    [locale]=\"locale()\"\n  />\n}\n",
+		dependencies: [
+			{
+				kind: "component",
+				type: GaugeChartRenderer,
+				selector: "widget-gauge-chart"
+			},
+			{
+				kind: "component",
+				type: PartChartRenderer,
+				selector: "widget-part-chart"
+			},
+			{
+				kind: "component",
+				type: ProgressElementRenderer,
+				selector: "widget-progress-element",
+				inputs: [
+					"element",
+					"sensitiveHidden",
+					"locale"
+				]
+			},
+			{
+				kind: "component",
+				type: SeriesChartRenderer,
+				selector: "widget-series-chart"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: ChartElementRenderer,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "widget-chart-element",
+			imports: [
+				GaugeChartRenderer,
+				PartChartRenderer,
+				ProgressElementRenderer,
+				SeriesChartRenderer
+			],
+			template: "@if (isProgress(element())) {\n  <widget-progress-element\n    [element]=\"progress(element())\"\n    [sensitiveHidden]=\"sensitiveHidden()\"\n    [locale]=\"locale()\"\n  />\n} @else if (isSeries(element())) {\n  <widget-series-chart\n    [element]=\"series(element())\"\n    [sensitiveHidden]=\"sensitiveHidden()\"\n    [locale]=\"locale()\"\n  />\n} @else if (isPart(element())) {\n  <widget-part-chart\n    [element]=\"part(element())\"\n    [sensitiveHidden]=\"sensitiveHidden()\"\n    [locale]=\"locale()\"\n  />\n} @else {\n  <widget-gauge-chart\n    [element]=\"gauge(element())\"\n    [sensitiveHidden]=\"sensitiveHidden()\"\n    [locale]=\"locale()\"\n  />\n}\n"
+		}]
+	}],
+	propDecorators: {
+		element: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "element",
+				required: true
+			}]
+		}],
+		sensitiveHidden: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sensitiveHidden",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}]
+	}
+});
+export { ChartElementRenderer };
+
+//# sourceMappingURL=lieselthuriot-widget-renderer-chart-element-renderer-wVHdIYuJ.mjs.map