@lieselthuriot/widget-renderer 0.1.0 → 0.2.0

package/fesm2022/lieselthuriot-widget-renderer-chart-element-renderer-BO3V-jYo.mjs

@@ -1,722 +0,0 @@
-import { i as defaultWidgetRendererLocale, n as chartAriaLabel, r as WidgetTooltip, t as chartAccessibilitySummary } from "./lieselthuriot-widget-renderer-chart-accessibility-CXEeXwdH.mjs";
-import * as i0 from "@angular/core";
-import { Component, effect, inject, input, signal, viewChild } from "@angular/core";
-import { init, use } from "echarts/core";
-import { BarChart, FunnelChart, GaugeChart, LineChart, PieChart } from "echarts/charts";
-import { GridComponent, LegendComponent, TitleComponent, TooltipComponent } from "echarts/components";
-import { SVGRenderer } from "echarts/renderers";
-function chartOptions(element, tooltipLayer, tooltipEnabled = true) {
-	const base = {
-		animation: false,
-		title: element.title ? {
-			text: element.title,
-			left: "center",
-			textStyle: {
-				fontSize: element.style.font.size,
-				color: element.style.color.title
-			}
-		} : void 0,
-		legend: (element.type === "pie" || element.type === "donut" || element.type === "funnel") && element.showLegend ? {
-			bottom: 10,
-			textStyle: {
-				fontSize: element.style.font.size,
-				color: element.style.color.legend
-			}
-		} : void 0,
-		tooltip: {
-			show: tooltipEnabled,
-			trigger: element.type === "pie" || element.type === "donut" || element.type === "funnel" ? "item" : "axis",
-			...tooltipLayer ? {
-				appendToBody: false,
-				appendTo: tooltipLayer
-			} : {}
-		}
-	};
-	if (element.type === "pie" || element.type === "donut") return {
-		...base,
-		series: [{
-			type: "pie",
-			center: ["50%", element.title ? "54%" : "50%"],
-			radius: element.type === "donut" ? [element.title ? "34%" : "45%", element.title ? "54%" : "72%"] : element.title ? "62%" : "68%",
-			label: { show: false },
-			labelLine: { show: false },
-			data: element.data.map(({ label, value, color }) => ({
-				name: label,
-				value,
-				...color ? { itemStyle: { color } } : {}
-			}))
-		}]
-	};
-	if (element.type === "funnel") return {
-		...base,
-		series: [{
-			type: "funnel",
-			left: "8%",
-			right: "8%",
-			top: element.title ? 38 : 12,
-			bottom: element.showLegend ? 38 : 12,
-			min: 0,
-			max: Math.max(...element.data.map(({ value }) => value), 1),
-			minSize: "10%",
-			maxSize: "88%",
-			sort: "descending",
-			gap: 3,
-			label: { show: false },
-			labelLine: { show: false },
-			emphasis: {
-				label: { show: false },
-				labelLine: { show: false }
-			},
-			data: element.data.map(({ label, value, color }) => ({
-				name: label,
-				value,
-				...color ? { itemStyle: { color } } : {}
-			}))
-		}]
-	};
-	if (element.type === "gauge") {
-		const percentage = Math.max(0, Math.min(1, (element.data.value - element.data.min) / (element.data.max - element.data.min)));
-		return {
-			...base,
-			title: element.title ? {
-				text: element.title,
-				left: "center",
-				bottom: 0,
-				textStyle: {
-					fontSize: element.style.font.size,
-					color: element.style.color.title
-				}
-			} : void 0,
-			series: [{
-				type: "gauge",
-				center: ["50%", "58%"],
-				radius: "78%",
-				startAngle: 200,
-				endAngle: -20,
-				min: element.data.min,
-				max: element.data.max,
-				splitNumber: 6,
-				axisLine: { lineStyle: {
-					width: 16,
-					cap: "round",
-					color: [[percentage, element.style.color.fill], [1, element.style.color.track]]
-				} },
-				axisTick: {
-					distance: -22,
-					splitNumber: 5,
-					length: 4,
-					lineStyle: {
-						color: element.style.color.legend,
-						width: 1
-					}
-				},
-				splitLine: {
-					distance: -24,
-					length: 8,
-					lineStyle: {
-						color: element.style.color.legend,
-						width: 2
-					}
-				},
-				axisLabel: {
-					show: element.showLegend,
-					distance: -2,
-					color: element.style.color.legend,
-					fontSize: element.style.font.size,
-					formatter: (value) => `${Math.round(value)}`
-				},
-				pointer: {
-					show: true,
-					length: "55%",
-					width: 5,
-					itemStyle: { color: element.style.color.legend }
-				},
-				progress: {
-					show: true,
-					itemStyle: { color: element.style.color.fill }
-				},
-				detail: {
-					show: element.showLegend,
-					valueAnimation: false,
-					formatter: (value) => `${Math.round(value)}`,
-					color: element.style.color.legend,
-					fontSize: element.style.font.size
-				},
-				data: [{ value: element.data.value }]
-			}]
-		};
-	}
-	const seriesElement = element;
-	return {
-		...base,
-		grid: {
-			left: 34,
-			right: 12,
-			top: element.title ? 30 : 12,
-			bottom: element.showLegend ? 28 : 24,
-			outerBoundsMode: "same",
-			outerBoundsContain: "axisLabel"
-		},
-		xAxis: {
-			type: "category",
-			data: element.data.map(({ label }) => label),
-			axisLabel: {
-				color: seriesElement.style.axis.label,
-				fontSize: seriesElement.style.font.size
-			},
-			axisLine: { lineStyle: { color: seriesElement.style.axis.line } }
-		},
-		yAxis: {
-			type: "value",
-			axisLabel: {
-				color: seriesElement.style.axis.label,
-				fontSize: seriesElement.style.font.size
-			},
-			axisLine: { lineStyle: { color: seriesElement.style.axis.line } },
-			splitLine: { lineStyle: { color: seriesElement.style.axis.grid } }
-		},
-		series: [{
-			type: seriesElement.type,
-			data: seriesElement.data.map(({ value, color }) => ({
-				value,
-				...seriesElement.type === "line" ? { itemStyle: { color: color ?? seriesElement.style.color.line } } : { itemStyle: { color } }
-			})),
-			itemStyle: seriesElement.type === "line" ? { color: seriesElement.style.color.line } : void 0,
-			lineStyle: seriesElement.type === "line" ? { color: seriesElement.style.color.line } : void 0,
-			symbol: seriesElement.type === "line" ? "circle" : void 0,
-			smooth: seriesElement.type === "line"
-		}]
-	};
-}
-use([
-	BarChart,
-	GaugeChart,
-	LineChart,
-	PieChart,
-	FunnelChart,
-	GridComponent,
-	LegendComponent,
-	TitleComponent,
-	TooltipComponent,
-	SVGRenderer
-]);
-var EchartsElementRenderer = class EchartsElementRenderer {
-	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()}`;
-	chartHost = viewChild("chartHost", ...ngDevMode ? [{ debugName: "chartHost" }] : /* istanbul ignore next */ []);
-	chartHostElement = null;
-	chartInstance = null;
-	resizeObserver = null;
-	tooltip = inject(WidgetTooltip);
-	constructor() {
-		effect(() => {
-			const host = this.chartHost()?.nativeElement ?? null;
-			if (!host) return;
-			if (host !== this.chartHostElement) {
-				this.destroyChart();
-				this.chartHostElement = host;
-				this.chartInstance = init(host, void 0, { renderer: "svg" });
-				if (typeof ResizeObserver !== "undefined") {
-					const chart = this.chartInstance;
-					this.resizeObserver = new ResizeObserver(() => {
-						if (this.chartInstance === chart) chart.resize();
-					});
-					this.resizeObserver.observe(host);
-				}
-			}
-			const tooltipEnabled = !this.sensitiveHidden();
-			if (!tooltipEnabled) this.chartInstance?.dispatchAction({ type: "hideTip" });
-			this.chartInstance?.setOption(chartOptions(this.element(), this.tooltip.overlayElement() ?? void 0, tooltipEnabled), true);
-		});
-	}
-	ngOnDestroy() {
-		this.destroyChart();
-	}
-	ariaLabel(element) {
-		return chartAriaLabel(element, this.locale().aria.chart);
-	}
-	accessibilitySummary(element) {
-		return chartAccessibilitySummary(element, this.locale().aria.chart);
-	}
-	destroyChart() {
-		this.resizeObserver?.disconnect();
-		this.chartInstance?.dispose();
-		this.resizeObserver = null;
-		this.chartInstance = null;
-		this.chartHostElement = null;
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.3",
-		ngImport: i0,
-		type: EchartsElementRenderer,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
-		version: "22.2.3",
-		type: EchartsElementRenderer,
-		isStandalone: true,
-		selector: "widget-echarts-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
-			}
-		},
-		viewQueries: [{
-			propertyName: "chartHost",
-			first: true,
-			predicate: ["chartHost"],
-			descendants: true,
-			isSignal: true
-		}],
-		ngImport: i0,
-		template: `<div
-    class="chart-chart"
-    [attr.aria-label]="ariaLabel(element())"
-    [attr.aria-describedby]="sensitiveHidden() ? null : summaryId"
-    [attr.aria-hidden]="sensitiveHidden() ? 'true' : null"
-    [style.pointer-events]="sensitiveHidden() ? 'none' : null"
-    role="img"
-  >
-    <div #chartHost class="chart-host"></div>
-    @if (!sensitiveHidden()) {
-      <span class="visually-hidden" [id]="summaryId">{{ accessibilitySummary(element()) }}</span>
-    }
-  </div>`,
-		isInline: true,
-		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{width:100%;height:100%;min-height:var(--widget-renderer-chart-min-height)}.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.3",
-	ngImport: i0,
-	type: EchartsElementRenderer,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "widget-echarts-element",
-			template: `<div
-    class="chart-chart"
-    [attr.aria-label]="ariaLabel(element())"
-    [attr.aria-describedby]="sensitiveHidden() ? null : summaryId"
-    [attr.aria-hidden]="sensitiveHidden() ? 'true' : null"
-    [style.pointer-events]="sensitiveHidden() ? 'none' : null"
-    role="img"
-  >
-    <div #chartHost class="chart-host"></div>
-    @if (!sensitiveHidden()) {
-      <span class="visually-hidden" [id]="summaryId">{{ accessibilitySummary(element()) }}</span>
-    }
-  </div>`,
-			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{width:100%;height:100%;min-height:var(--widget-renderer-chart-min-height)}.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
-			}]
-		}],
-		chartHost: [{
-			type: i0.ViewChild,
-			args: ["chartHost", { isSignal: true }]
-		}]
-	}
-});
-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.hideProgress(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.hideProgress(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.hideProgress(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.hideProgress(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.showProgress(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.hideProgress(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.3",
-		ngImport: i0,
-		type: ProgressElementRenderer,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
-		version: "22.2.3",
-		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.3",
-	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
-			}]
-		}]
-	}
-});
-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;
-	}
-	chart(element) {
-		return element;
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.3",
-		ngImport: i0,
-		type: ChartElementRenderer,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
-		version: "22.2.3",
-		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 {\n  <widget-echarts-element\n    [element]=\"chart(element())\"\n    [sensitiveHidden]=\"sensitiveHidden()\"\n    [locale]=\"locale()\"\n  />\n}\n",
-		dependencies: [{
-			kind: "component",
-			type: EchartsElementRenderer,
-			selector: "widget-echarts-element",
-			inputs: [
-				"element",
-				"sensitiveHidden",
-				"locale"
-			]
-		}, {
-			kind: "component",
-			type: ProgressElementRenderer,
-			selector: "widget-progress-element",
-			inputs: [
-				"element",
-				"sensitiveHidden",
-				"locale"
-			]
-		}]
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.3",
-	ngImport: i0,
-	type: ChartElementRenderer,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "widget-chart-element",
-			imports: [EchartsElementRenderer, ProgressElementRenderer],
-			template: "@if (isProgress(element())) {\n  <widget-progress-element\n    [element]=\"progress(element())\"\n    [sensitiveHidden]=\"sensitiveHidden()\"\n    [locale]=\"locale()\"\n  />\n} @else {\n  <widget-echarts-element\n    [element]=\"chart(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-BO3V-jYo.mjs.map