@lieselthuriot/widget-renderer 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Liesel Thuriot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,244 @@
-# Temporary Holding Version
+# Widget Renderer
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Reusable Angular components for rendering compact, grid-based widgets with text, imagery, actions, charts, progress indicators, loading states, and sensitive-content controls.
+
+The package is designed to receive a plain `WidgetContract` from an API or application. Consumers do not need to add editor-only element IDs or hydrate the data before rendering.
+
+- **Live editor:** [widget-studio.liesel.dev](https://widget-studio.liesel.dev). Design a widget and copy its JSON.
+- **Dashboard grid:** [`@lieselthuriot/widget-landscape`](https://www.npmjs.com/package/@lieselthuriot/widget-landscape)
+- **C# contracts:** [`WidgetStudio.Contracts`](https://www.nuget.org/packages/WidgetStudio.Contracts) produces JSON in the same format from .NET.
+
+## Installation
+
+```bash
+npm install @lieselthuriot/widget-renderer
+```
+
+`@angular/common`, `@angular/core`, and `echarts` are peer dependencies. The package supports Angular 21 and 22 and ECharts 6.x. npm, pnpm, and Bun install missing peer dependencies automatically; with Yarn, also add `echarts`.
+
+## Features
+
+- Render `mini`, `compact`, `tall`, `square`, `wide`, `mega`, `banner`, and `hero` widgets from a version 2 contract
+- Place elements with configurable rows, columns, spans, and anchors
+- Support text, images, buttons, dividers, pie, donut, funnel, gauge, bar, line, and progress elements
+- Render charts with ECharts using SVG output
+- Validate incoming data with structured paths and messages
+- Normalize optional contract fields such as button defaults and text padding
+- Blur sensitive backgrounds and elements until explicitly revealed
+- Emit refresh and button-action events without making network requests
+- Provide accessible names and text summaries for charts and progress bars
+- Respect reduced-motion preferences for loading and active progress animations
+- Localize renderer-owned accessible labels, with built-in German, French, and Dutch locales
+
+## Usage
+
+Import the standalone `WidgetRenderer` component into an Angular component and bind a `WidgetContract`:
+
+```ts
+import { Component } from '@angular/core';
+import { ButtonElement, WidgetContract, WidgetRenderer } from '@lieselthuriot/widget-renderer';
+
+@Component({
+  selector: 'app-dashboard-card',
+  imports: [WidgetRenderer],
+  template: `
+    <widget-renderer
+      [widget]="widget"
+      [darkMode]="darkMode"
+      [loading]="loading"
+      (refreshRequested)="refreshWidget()"
+      (actionRequested)="handleAction($event)"
+    />
+  `,
+})
+export class DashboardCard {
+  readonly darkMode = false;
+  readonly loading = false;
+
+  readonly widget: WidgetContract = {
+    version: 2,
+    id: 'hello-widget',
+    size: 'square',
+    rows: [{ unit: 'auto' }],
+    columns: [{ size: 1, unit: 'star' }],
+    background: {
+      color: '#172033',
+      sensitive: false,
+      repeat: false,
+      size: 'cover',
+      anchor: 'center',
+    },
+    refresh: { enabled: true, label: 'Refresh widget' },
+    elements: [
+      {
+        type: 'text',
+        grid: { row: 0, column: 0, rowSpan: 1, columnSpan: 1, anchor: 'center' },
+        sensitive: false,
+        text: 'Hello from Widget Renderer',
+        style: {
+          color: '#ffffff',
+          font: { size: 16, bold: true },
+          align: 'center',
+          wrap: true,
+        },
+      },
+    ],
+  };
+
+  refreshWidget(): void {
+    // Fetch updated data in the consuming application.
+  }
+
+  handleAction(event: { element: ButtonElement; event: Event }): void {
+    // Handle the configured button request in the consuming application.
+    console.log(event);
+  }
+}
+```
+
+> **Important:** `WidgetRenderer` emits `refreshRequested` and `actionRequested`. It does not call the configured button URL or perform refresh requests itself.
+
+### Loading state
+
+Set `loading` to `true` for the default square skeleton, or to a widget size such as `'wide'` for a matching skeleton:
+
+```html
+<widget-renderer [loading]="'wide'" [darkMode]="true" />
+```
+
+### Dark mode
+
+Pass `darkMode` to style the loading state for a dark surface. The rendered widget itself uses the colors provided by its contract, so applications can control the surrounding theme and widget palette independently.
+
+### Outputs
+
+`refreshRequested` is emitted when the refresh control is clicked. `actionRequested` is emitted with the clicked `ButtonElement` and DOM event:
+
+```ts
+import { ButtonElement } from '@lieselthuriot/widget-renderer';
+
+handleAction(event: { element: ButtonElement; event: Event }): void {
+  event.event.preventDefault();
+  const { method, url, body, requestRefresh } = event.element;
+  // Perform the application-specific request here.
+  console.log(method, url, body, requestRefresh);
+}
+```
+
+### Localization
+
+Renderer-owned accessible labels use English defaults and can be localized with the optional `locale` input. The input accepts partial nested overrides, so you can provide a complete locale or change only the values you need. Widget content, labels, image alternative text, refresh labels, and validation diagnostics remain consumer-provided.
+
+```ts
+import {
+  germanWidgetRendererLocale,
+  WidgetRendererLocaleOverrides,
+} from '@lieselthuriot/widget-renderer';
+
+readonly rendererLocale: WidgetRendererLocaleOverrides = {
+  ...germanWidgetRendererLocale,
+};
+```
+
+Built-in `germanWidgetRendererLocale`, `frenchWidgetRendererLocale`, and `dutchWidgetRendererLocale` values are available. For a small customization, override only the required values:
+
+```ts
+import { WidgetRendererLocaleOverrides } from '@lieselthuriot/widget-renderer';
+
+readonly rendererLocale: WidgetRendererLocaleOverrides = {
+  aria: {
+    showSensitiveData: 'Afficher les données privées',
+    chart: {
+      noDataSummary: (title) => `${title ? `${title} : ` : ''}aucune donnée.`,
+    },
+  },
+};
+```
+
+```html
+<widget-renderer [widget]="widget" [locale]="rendererLocale" />
+```
+
+The `aria` locale covers the loading status, toolbar, sensitive-content controls, image failure fallback, chart and progress accessible names, generated chart summaries, and progress segment labels. Locale changes update the rendered labels without changing widget-provided content.
+
+## Widget contract
+
+Every input must use `version: 2` and include:
+
+| Field        | Description                                                                                                                                          |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`         | A stable identifier for the widget                                                                                                                   |
+| `size`       | `mini`, `compact`, `square`, `wide`, `mega`, `banner`, `hero`, or `tall`; dimensions include the 8px layout gap                                      |
+| `rows`       | Non-empty grid tracks using `pixel`, `auto`, or `star` units; `size` is required for `pixel` and `star` tracks and must be omitted for `auto` tracks |
+| `columns`    | Non-empty grid tracks using `pixel`, `auto`, or `star` units; `size` is required for `pixel` and `star` tracks and must be omitted for `auto` tracks |
+| `background` | Color, optional image, sizing, position, repeat, overlay, and sensitivity settings                                                                   |
+| `refresh`    | Whether to show a refresh action and its accessible label                                                                                            |
+| `elements`   | An array of supported widget elements                                                                                                                |
+
+Element positions are zero-based. For example, `row: 0` and `column: 0` place an element in the first grid cell.
+
+### Supported elements
+
+- `text`: formatted text with alignment, wrapping, font styling, color, background, radius, and padding
+- `image`: remote or local image with alternative text, fit mode, radius, and overlay color
+- `button`: `get` or `post` action metadata, optional body, solid or outline styling, and hover behavior
+- `divider`: horizontal or vertical separator
+- `pie`, `donut`, and `funnel`: labeled data points with optional legends and per-point colors
+- `gauge`: a value within a minimum and maximum range
+- `bar` and `line`: labeled series data with axis and line styling
+- `progress`: a range-based progress bar with label, suffix, legend, and active animation options
+
+Editor-only `id` fields are not required. The renderer accepts `WidgetContract` data and normalizes optional button fields and text padding before rendering.
+
+### Sensitive content
+
+Set `sensitive: true` on the background or an element to blur it and remove hidden content from the accessible tree. The renderer provides a local show/hide control when sensitive content is present.
+
+> **Warning:** Sensitive-content handling is a display and privacy feature, not encryption. Sensitive values remain in the JavaScript object supplied by the consuming application.
+
+## Validation and normalization
+
+Use the exported helpers when data enters your application:
+
+```ts
+import {
+  normalizeWidgetInput,
+  parseWidgetInput,
+  safeParseWidgetInput,
+} from '@lieselthuriot/widget-renderer';
+
+const result = safeParseWidgetInput(payload);
+
+if (!result.success) {
+  console.error(result.issues);
+} else {
+  const widget = normalizeWidgetInput(result.data);
+}
+
+// Throws WidgetValidationError when the payload is invalid.
+const parsed = parseWidgetInput(payload);
+```
+
+`WidgetValidationIssue` entries contain a `path` such as `elements[0].style.font.size` and a human-readable `message`. Invalid input supplied to `WidgetRenderer` produces a safe empty widget and exposes issues through `validationIssues`. `isWidgetContract` and `isWidget` are also available as type guards.
+
+## Public API
+
+Import everything from `@lieselthuriot/widget-renderer`; internal file paths are not part of the public API. The entry point exports:
+
+- `WidgetRenderer`, the standalone rendering component, and its `WidgetLoading` input type. Element and chart implementation components are internal.
+- Widget model types, including `WidgetContract`, `WidgetInput`, `Widget`, and the element types
+- `normalizeWidgetInput`
+- `safeParseWidgetInput`, `parseWidgetInput`, `isWidgetContract`, `isWidget`, `WidgetValidationError`, and the validation result types
+- Grid layout helpers and widget dimensions, such as `widgetWidth`, `widgetHeight`, `gridTemplate`, and `elementGridStyle`
+- Locales: `defaultWidgetRendererLocale`, `germanWidgetRendererLocale`, `frenchWidgetRendererLocale`, `dutchWidgetRendererLocale`, `WidgetRendererLocale`, and `WidgetRendererLocaleOverrides`
+- `chartAriaLabel` and `chartAccessibilitySummary`
+
+The complete export list is maintained in [`src/public-api.ts`](https://github.com/LieselThuriot/widget-studio/blob/main/projects/widget-renderer/src/public-api.ts).
+
+## Contributing
+
+The package is developed in the [widget-studio repository](https://github.com/LieselThuriot/widget-studio), together with the editor, the landscape package, and the C# contracts. See the repository README for build, test, and release instructions. Report problems in the [issue tracker](https://github.com/LieselThuriot/widget-studio/issues).
+
+## License
+
+[MIT](https://github.com/LieselThuriot/widget-studio/blob/main/LICENSE)

package/fesm2022/lieselthuriot-widget-renderer-chart-accessibility-CXEeXwdH.mjs

@@ -0,0 +1,178 @@
+import * as i0 from "@angular/core";
+import { Injectable, signal } from "@angular/core";
+const chart = {
+	progressAriaLabel: (title, value, range) => `${title || "Progress"}, ${value} of ${range}.`,
+	gaugeAriaLabel: (title, value, max) => `${title || "Gauge"}, ${value} of ${max}.`,
+	chartAriaLabel: (title, chartType, pointCount) => `${title || chartType} chart, ${pointCount} data points.`,
+	progressSummary: (title, value, min, max, breakdown) => `${title || "Progress"}: ${value} of ${max}; range ${min} to ${max}.${breakdown}`,
+	gaugeSummary: (title, value, max, percentage) => `${title || "Gauge"}: value ${value} of ${max}, ${percentage} percent.`,
+	dataSummary: (title, points) => `${title ? `${title}: ` : ""}${points}.`,
+	noDataSummary: (title) => `${title ? `${title}: ` : ""}no data.`,
+	noSegmentsSummary: " No segments.",
+	morePoints: (count) => `${count} more points.`,
+	progressSegmentLabel: (label, value) => `${label}: ${value}`,
+	progressBreakdown: (label, start, end) => `${label}: ${start} to ${end}`
+};
+const defaultWidgetRendererLocale = { aria: {
+	toolbarActions: "Widget actions",
+	loading: "Widget loading",
+	showSensitiveData: "Show sensitive data",
+	hideSensitiveData: "Hide sensitive data",
+	imageUnavailable: "Image unavailable",
+	chart
+} };
+function locale(aria, chartLocale) {
+	return { aria: {
+		...aria,
+		chart: chartLocale
+	} };
+}
+const germanWidgetRendererLocale = locale({
+	toolbarActions: "Widget-Aktionen",
+	loading: "Widget wird geladen",
+	showSensitiveData: "Sensible Daten anzeigen",
+	hideSensitiveData: "Sensible Daten ausblenden",
+	imageUnavailable: "Bild nicht verfügbar"
+}, {
+	...chart,
+	progressAriaLabel: (title, value, range) => `${title || "Fortschritt"}, ${value} von ${range}.`,
+	gaugeAriaLabel: (title, value, max) => `${title || "Messwert"}, ${value} von ${max}.`,
+	chartAriaLabel: (title, type, count) => `${title || `${type}-Diagramm`}, ${count} Datenpunkte.`,
+	progressSummary: (title, value, min, max, breakdown) => `${title || "Fortschritt"}: ${value} von ${max}; Bereich ${min} bis ${max}.${breakdown}`,
+	gaugeSummary: (title, value, max, percentage) => `${title || "Messwert"}: Wert ${value} von ${max}, ${percentage} Prozent.`,
+	noDataSummary: (title) => `${title ? `${title}: ` : ""}keine Daten.`,
+	noSegmentsSummary: " Keine Segmente.",
+	morePoints: (count) => `${count} weitere Datenpunkte.`,
+	progressSegmentLabel: (label, value) => `${label}: ${value}`,
+	progressBreakdown: (label, start, end) => `${label}: ${start} bis ${end}`
+});
+const frenchWidgetRendererLocale = locale({
+	toolbarActions: "Actions du widget",
+	loading: "Chargement du widget",
+	showSensitiveData: "Afficher les données sensibles",
+	hideSensitiveData: "Masquer les données sensibles",
+	imageUnavailable: "Image indisponible"
+}, {
+	...chart,
+	progressAriaLabel: (title, value, range) => `${title || "Progression"}, ${value} sur ${range}.`,
+	gaugeAriaLabel: (title, value, max) => `${title || "Jauge"}, ${value} sur ${max}.`,
+	chartAriaLabel: (title, type, count) => `${title || `Graphique ${type}`}, ${count} points de données.`,
+	progressSummary: (title, value, min, max, breakdown) => `${title || "Progression"} : ${value} sur ${max} ; plage de ${min} à ${max}.${breakdown}`,
+	gaugeSummary: (title, value, max, percentage) => `${title || "Jauge"} : valeur ${value} sur ${max}, ${percentage} pour cent.`,
+	noDataSummary: (title) => `${title ? `${title} : ` : ""}aucune donnée.`,
+	noSegmentsSummary: " Aucun segment.",
+	morePoints: (count) => `${count} points de données supplémentaires.`,
+	progressSegmentLabel: (label, value) => `${label} : ${value}`,
+	progressBreakdown: (label, start, end) => `${label} : de ${start} à ${end}`
+});
+const dutchWidgetRendererLocale = locale({
+	toolbarActions: "Widgetacties",
+	loading: "Widget wordt geladen",
+	showSensitiveData: "Gevoelige gegevens tonen",
+	hideSensitiveData: "Gevoelige gegevens verbergen",
+	imageUnavailable: "Afbeelding niet beschikbaar"
+}, {
+	...chart,
+	progressAriaLabel: (title, value, range) => `${title || "Voortgang"}, ${value} van ${range}.`,
+	gaugeAriaLabel: (title, value, max) => `${title || "Meter"}, ${value} van ${max}.`,
+	chartAriaLabel: (title, type, count) => `${title || `${type}-grafiek`}, ${count} gegevenspunten.`,
+	progressSummary: (title, value, min, max, breakdown) => `${title || "Voortgang"}: ${value} van ${max}; bereik ${min} tot ${max}.${breakdown}`,
+	gaugeSummary: (title, value, max, percentage) => `${title || "Meter"}: waarde ${value} van ${max}, ${percentage} procent.`,
+	noDataSummary: (title) => `${title ? `${title}: ` : ""}geen gegevens.`,
+	noSegmentsSummary: " Geen segmenten.",
+	morePoints: (count) => `${count} extra gegevenspunten.`,
+	progressSegmentLabel: (label, value) => `${label}: ${value}`,
+	progressBreakdown: (label, start, end) => `${label}: ${start} tot ${end}`
+});
+var WidgetTooltip = class WidgetTooltip {
+	progress = signal(null, ...ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []);
+	overlay = signal(null, ...ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []);
+	progressOwner = null;
+	setOverlay(overlay) {
+		this.overlay.set(overlay);
+	}
+	overlayElement() {
+		return this.overlay();
+	}
+	showProgress(owner, state) {
+		this.progressOwner = owner;
+		this.progress.set(state);
+	}
+	hideProgress(owner) {
+		if (this.progressOwner !== owner) return;
+		this.progressOwner = null;
+		this.progress.set(null);
+	}
+	clear() {
+		this.progressOwner = null;
+		this.progress.set(null);
+		this.overlay.set(null);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: WidgetTooltip,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: WidgetTooltip
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: WidgetTooltip,
+	decorators: [{ type: Injectable }]
+});
+const MAX_POINTS = 20;
+function number(value) {
+	return Number.isInteger(value) ? `${value}` : value.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
+}
+function points(data, locale) {
+	const visible = data.slice(0, MAX_POINTS).map((point) => `${point.label}: ${number(point.value)}`);
+	const remaining = data.length - visible.length;
+	return remaining > 0 ? `${visible.join("; ")}; ${locale.morePoints(remaining)}` : visible.join("; ");
+}
+function progressSegments(element) {
+	let position = element.data.min;
+	return element.data.items.flatMap((item) => {
+		const start = position;
+		position += item.value;
+		return item.kind === "segment" ? [{
+			segment: item,
+			start,
+			end: position
+		}] : [];
+	});
+}
+function progressValue(element) {
+	return element.data.items.reduce((total, item) => total + (item.kind === "segment" ? item.value : 0), 0);
+}
+function chartAriaLabel(element, locale = defaultWidgetRendererLocale.aria.chart) {
+	if (element.type === "progress") return locale.progressAriaLabel(element.title, number(progressValue(element)), number(element.data.max - element.data.min));
+	if (element.type === "gauge") return locale.gaugeAriaLabel(element.title, number(element.data.value), number(element.data.max));
+	return locale.chartAriaLabel(element.title, element.type, element.data.length);
+}
+function chartAccessibilitySummary(element, locale = defaultWidgetRendererLocale.aria.chart) {
+	if (element.type === "progress") {
+		const segments = progressSegments(element);
+		const breakdown = segments.length ? ` ${segments.map(({ segment, start, end }) => locale.progressBreakdown(segment.label, number(start), number(end))).join("; ")}.` : locale.noSegmentsSummary;
+		return locale.progressSummary(element.title, number(progressValue(element)), number(element.data.min), number(element.data.max), breakdown);
+	}
+	if (element.type === "gauge") {
+		const range = element.data.max - element.data.min;
+		const percentage = Math.max(0, Math.min(100, (element.data.value - element.data.min) / range * 100));
+		return locale.gaugeSummary(element.title, number(element.data.value), number(element.data.max), number(percentage));
+	}
+	if (!element.data.length) return locale.noDataSummary(element.title);
+	return locale.dataSummary(element.title, points(element.data, locale));
+}
+export { dutchWidgetRendererLocale as a, defaultWidgetRendererLocale as i, chartAriaLabel as n, frenchWidgetRendererLocale as o, WidgetTooltip as r, germanWidgetRendererLocale as s, chartAccessibilitySummary as t };
+
+//# sourceMappingURL=lieselthuriot-widget-renderer-chart-accessibility-CXEeXwdH.mjs.map

package/fesm2022/lieselthuriot-widget-renderer-chart-accessibility-CXEeXwdH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lieselthuriot-widget-renderer-chart-accessibility-CXEeXwdH.mjs","names":[],"sources":["../../../projects/widget-renderer/src/lib/widget-locale.ts","../../../projects/widget-renderer/src/lib/widget-tooltip.ts","../../../projects/widget-renderer/src/lib/chart-accessibility.ts"],"sourcesContent":["export interface WidgetRendererChartLocale {\n  progressAriaLabel: (title: string | undefined, value: string, range: string) => string;\n  gaugeAriaLabel: (title: string | undefined, value: string, max: string) => string;\n  chartAriaLabel: (title: string | undefined, chartType: string, pointCount: number) => string;\n  progressSummary: (\n    title: string | undefined,\n    value: string,\n    min: string,\n    max: string,\n    breakdown: string,\n  ) => string;\n  gaugeSummary: (\n    title: string | undefined,\n    value: string,\n    max: string,\n    percentage: string,\n  ) => string;\n  dataSummary: (title: string | undefined, points: string) => string;\n  noDataSummary: (title: string | undefined) => string;\n  noSegmentsSummary: string;\n  morePoints: (count: number) => string;\n  progressSegmentLabel: (label: string, value: string) => string;\n  progressBreakdown: (label: string, start: string, end: string) => string;\n}\n\nexport interface WidgetRendererAriaLocale {\n  toolbarActions: string;\n  loading: string;\n  showSensitiveData: string;\n  hideSensitiveData: string;\n  imageUnavailable: string;\n  chart: WidgetRendererChartLocale;\n}\n\nexport interface WidgetRendererLocale {\n  aria: WidgetRendererAriaLocale;\n}\n\nexport interface WidgetRendererLocaleOverrides {\n  aria?: Partial<Omit<WidgetRendererAriaLocale, 'chart'>> & {\n    chart?: Partial<WidgetRendererChartLocale>;\n  };\n}\n\nconst chart = {\n  progressAriaLabel: (title: string | undefined, value: string, range: string) =>\n    `${title || 'Progress'}, ${value} of ${range}.`,\n  gaugeAriaLabel: (title: string | undefined, value: string, max: string) =>\n    `${title || 'Gauge'}, ${value} of ${max}.`,\n  chartAriaLabel: (title: string | undefined, chartType: string, pointCount: number) =>\n    `${title || chartType} chart, ${pointCount} data points.`,\n  progressSummary: (\n    title: string | undefined,\n    value: string,\n    min: string,\n    max: string,\n    breakdown: string,\n  ) => `${title || 'Progress'}: ${value} of ${max}; range ${min} to ${max}.${breakdown}`,\n  gaugeSummary: (title: string | undefined, value: string, max: string, percentage: string) =>\n    `${title || 'Gauge'}: value ${value} of ${max}, ${percentage} percent.`,\n  dataSummary: (title: string | undefined, points: string) =>\n    `${title ? `${title}: ` : ''}${points}.`,\n  noDataSummary: (title: string | undefined) => `${title ? `${title}: ` : ''}no data.`,\n  noSegmentsSummary: ' No segments.',\n  morePoints: (count: number) => `${count} more points.`,\n  progressSegmentLabel: (label: string, value: string) => `${label}: ${value}`,\n  progressBreakdown: (label: string, start: string, end: string) => `${label}: ${start} to ${end}`,\n} satisfies WidgetRendererChartLocale;\n\nexport const defaultWidgetRendererLocale: WidgetRendererLocale = {\n  aria: {\n    toolbarActions: 'Widget actions',\n    loading: 'Widget loading',\n    showSensitiveData: 'Show sensitive data',\n    hideSensitiveData: 'Hide sensitive data',\n    imageUnavailable: 'Image unavailable',\n    chart,\n  },\n};\n\nfunction locale(\n  aria: Omit<WidgetRendererAriaLocale, 'chart'>,\n  chartLocale: WidgetRendererChartLocale,\n): WidgetRendererLocale {\n  return { aria: { ...aria, chart: chartLocale } };\n}\n\nexport const germanWidgetRendererLocale = locale(\n  {\n    toolbarActions: 'Widget-Aktionen',\n    loading: 'Widget wird geladen',\n    showSensitiveData: 'Sensible Daten anzeigen',\n    hideSensitiveData: 'Sensible Daten ausblenden',\n    imageUnavailable: 'Bild nicht verfügbar',\n  },\n  {\n    ...chart,\n    progressAriaLabel: (title, value, range) => `${title || 'Fortschritt'}, ${value} von ${range}.`,\n    gaugeAriaLabel: (title, value, max) => `${title || 'Messwert'}, ${value} von ${max}.`,\n    chartAriaLabel: (title, type, count) => `${title || `${type}-Diagramm`}, ${count} Datenpunkte.`,\n    progressSummary: (title, value, min, max, breakdown) =>\n      `${title || 'Fortschritt'}: ${value} von ${max}; Bereich ${min} bis ${max}.${breakdown}`,\n    gaugeSummary: (title, value, max, percentage) =>\n      `${title || 'Messwert'}: Wert ${value} von ${max}, ${percentage} Prozent.`,\n    noDataSummary: (title) => `${title ? `${title}: ` : ''}keine Daten.`,\n    noSegmentsSummary: ' Keine Segmente.',\n    morePoints: (count) => `${count} weitere Datenpunkte.`,\n    progressSegmentLabel: (label, value) => `${label}: ${value}`,\n    progressBreakdown: (label, start, end) => `${label}: ${start} bis ${end}`,\n  },\n);\n\nexport const frenchWidgetRendererLocale = locale(\n  {\n    toolbarActions: 'Actions du widget',\n    loading: 'Chargement du widget',\n    showSensitiveData: 'Afficher les données sensibles',\n    hideSensitiveData: 'Masquer les données sensibles',\n    imageUnavailable: 'Image indisponible',\n  },\n  {\n    ...chart,\n    progressAriaLabel: (title, value, range) => `${title || 'Progression'}, ${value} sur ${range}.`,\n    gaugeAriaLabel: (title, value, max) => `${title || 'Jauge'}, ${value} sur ${max}.`,\n    chartAriaLabel: (title, type, count) =>\n      `${title || `Graphique ${type}`}, ${count} points de données.`,\n    progressSummary: (title, value, min, max, breakdown) =>\n      `${title || 'Progression'} : ${value} sur ${max} ; plage de ${min} à ${max}.${breakdown}`,\n    gaugeSummary: (title, value, max, percentage) =>\n      `${title || 'Jauge'} : valeur ${value} sur ${max}, ${percentage} pour cent.`,\n    noDataSummary: (title) => `${title ? `${title} : ` : ''}aucune donnée.`,\n    noSegmentsSummary: ' Aucun segment.',\n    morePoints: (count) => `${count} points de données supplémentaires.`,\n    progressSegmentLabel: (label, value) => `${label} : ${value}`,\n    progressBreakdown: (label, start, end) => `${label} : de ${start} à ${end}`,\n  },\n);\n\nexport const dutchWidgetRendererLocale = locale(\n  {\n    toolbarActions: 'Widgetacties',\n    loading: 'Widget wordt geladen',\n    showSensitiveData: 'Gevoelige gegevens tonen',\n    hideSensitiveData: 'Gevoelige gegevens verbergen',\n    imageUnavailable: 'Afbeelding niet beschikbaar',\n  },\n  {\n    ...chart,\n    progressAriaLabel: (title, value, range) => `${title || 'Voortgang'}, ${value} van ${range}.`,\n    gaugeAriaLabel: (title, value, max) => `${title || 'Meter'}, ${value} van ${max}.`,\n    chartAriaLabel: (title, type, count) =>\n      `${title || `${type}-grafiek`}, ${count} gegevenspunten.`,\n    progressSummary: (title, value, min, max, breakdown) =>\n      `${title || 'Voortgang'}: ${value} van ${max}; bereik ${min} tot ${max}.${breakdown}`,\n    gaugeSummary: (title, value, max, percentage) =>\n      `${title || 'Meter'}: waarde ${value} van ${max}, ${percentage} procent.`,\n    noDataSummary: (title) => `${title ? `${title}: ` : ''}geen gegevens.`,\n    noSegmentsSummary: ' Geen segmenten.',\n    morePoints: (count) => `${count} extra gegevenspunten.`,\n    progressSegmentLabel: (label, value) => `${label}: ${value}`,\n    progressBreakdown: (label, start, end) => `${label}: ${start} tot ${end}`,\n  },\n);\n","import { Injectable, signal } from '@angular/core';\n\nexport interface ProgressTooltipState {\n  x: number;\n  y: number;\n  label: string;\n  value: number;\n  color?: string;\n}\n\n@Injectable()\nexport class WidgetTooltip {\n  readonly progress = signal<ProgressTooltipState | null>(null);\n  private readonly overlay = signal<HTMLElement | null>(null);\n  private progressOwner: object | null = null;\n\n  setOverlay(overlay: HTMLElement): void {\n    this.overlay.set(overlay);\n  }\n\n  overlayElement(): HTMLElement | null {\n    return this.overlay();\n  }\n\n  showProgress(owner: object, state: ProgressTooltipState): void {\n    this.progressOwner = owner;\n    this.progress.set(state);\n  }\n\n  hideProgress(owner: object): void {\n    if (this.progressOwner !== owner) return;\n    this.progressOwner = null;\n    this.progress.set(null);\n  }\n\n  clear(): void {\n    this.progressOwner = null;\n    this.progress.set(null);\n    this.overlay.set(null);\n  }\n}\n","import { ChartElement, ProgressElement, ProgressSegment } from './widget.model';\nimport { defaultWidgetRendererLocale, WidgetRendererChartLocale } from './widget-locale';\n\nconst MAX_POINTS = 20;\n\nfunction number(value: number): string {\n  return Number.isInteger(value)\n    ? `${value}`\n    : value.toFixed(2).replace(/0+$/, '').replace(/\\.$/, '');\n}\n\nfunction points(\n  data: { label: string; value: number }[],\n  locale: WidgetRendererChartLocale,\n): string {\n  const visible = data\n    .slice(0, MAX_POINTS)\n    .map((point) => `${point.label}: ${number(point.value)}`);\n  const remaining = data.length - visible.length;\n  return remaining > 0\n    ? `${visible.join('; ')}; ${locale.morePoints(remaining)}`\n    : visible.join('; ');\n}\n\nfunction progressSegments(\n  element: ProgressElement,\n): { segment: ProgressSegment; start: number; end: number }[] {\n  let position = element.data.min;\n  return element.data.items.flatMap((item) => {\n    const start = position;\n    position += item.value;\n    return item.kind === 'segment' ? [{ segment: item, start, end: position }] : [];\n  });\n}\n\nfunction progressValue(element: ProgressElement): number {\n  return element.data.items.reduce(\n    (total, item) => total + (item.kind === 'segment' ? item.value : 0),\n    0,\n  );\n}\n\nexport function chartAriaLabel(\n  element: ChartElement | ProgressElement,\n  locale = defaultWidgetRendererLocale.aria.chart,\n): string {\n  if (element.type === 'progress') {\n    return locale.progressAriaLabel(\n      element.title,\n      number(progressValue(element)),\n      number(element.data.max - element.data.min),\n    );\n  }\n  if (element.type === 'gauge') {\n    return locale.gaugeAriaLabel(\n      element.title,\n      number(element.data.value),\n      number(element.data.max),\n    );\n  }\n  return locale.chartAriaLabel(element.title, element.type, element.data.length);\n}\n\nexport function chartAccessibilitySummary(\n  element: ChartElement | ProgressElement,\n  locale = defaultWidgetRendererLocale.aria.chart,\n): string {\n  if (element.type === 'progress') {\n    const segments = progressSegments(element);\n    const breakdown = segments.length\n      ? ` ${segments.map(({ segment, start, end }) => locale.progressBreakdown(segment.label, number(start), number(end))).join('; ')}.`\n      : locale.noSegmentsSummary;\n    return locale.progressSummary(\n      element.title,\n      number(progressValue(element)),\n      number(element.data.min),\n      number(element.data.max),\n      breakdown,\n    );\n  }\n  if (element.type === 'gauge') {\n    const range = element.data.max - element.data.min;\n    const percentage = Math.max(\n      0,\n      Math.min(100, ((element.data.value - element.data.min) / range) * 100),\n    );\n    return locale.gaugeSummary(\n      element.title,\n      number(element.data.value),\n      number(element.data.max),\n      number(percentage),\n    );\n  }\n  if (!element.data.length) return locale.noDataSummary(element.title);\n  return locale.dataSummary(element.title, points(element.data, locale));\n}\n"],"mappings":"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"}