@lieselthuriot/widget-renderer 0.0.0-stage → 0.2.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,299 @@
-# Temporary Holding Version
-
-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.
+# Widget Renderer
+
+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` and `@angular/core` are peer dependencies. The package supports Angular 21 and 22. Charts are drawn as SVG by the package itself, with [`d3-array`](https://www.npmjs.com/package/d3-array) and [`d3-shape`](https://www.npmjs.com/package/d3-shape) installed automatically as regular dependencies for the chart geometry.
+
+### Upgrading from 0.1
+
+Version 0.2 no longer uses ECharts. Remove `echarts` from your dependencies if nothing else in your application needs it. The widget contract is unchanged, but charts look slightly different:
+
+- Pie, donut, gauge, and funnel charts stack their title, chart, and legend, so the chart uses the available space and never overlaps the legend.
+- Bar and line axes, ticks, and labels are laid out by the renderer; crowded category labels are thinned out automatically.
+- Clicking a legend entry no longer hides the matching data point.
+- Every chart can be focused with the keyboard. Arrow keys, Home, and End move between data points, Escape hides the tooltip, and the selected point is announced to screen readers.
+- The keyboard focus ring can be themed with the `--widget-renderer-focus-ring` and `--widget-renderer-focus-ring-contrast` CSS custom properties.
+- Custom locales can set the new `dataPointLabel` and `gaugeValueLabel` chart entries; English values are used when they are omitted from overrides.
+
+## 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 as lightweight, keyboard-accessible SVG without a charting library
+- 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, chart data point announcements, 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.
+
+### External validation rules
+
+Add your own checks with `validationRules`. Rules run only after the built-in validation passes and receive the typed widget. Each rule returns `WidgetValidationIssue` entries; return an empty array when the widget is allowed.
+
+```ts
+import { WidgetValidationRuleInput } from '@lieselthuriot/widget-renderer';
+
+const allowedColors = new Set(['#ffffff', '#1f2937']);
+
+export const rules: WidgetValidationRuleInput[] = [
+  // A plain function is a blocking rule.
+  (widget) =>
+    widget.background.image
+      ? [{ path: 'background.image', message: 'Background images are not allowed' }]
+      : [],
+  // Report-only rules let the widget render and only expose their issues.
+  {
+    mode: 'report',
+    validate: (widget) =>
+      widget.background.color && !allowedColors.has(widget.background.color.toLowerCase())
+        ? [{ path: 'background.color', message: 'Color is not allowed' }]
+        : [],
+  },
+];
+```
+
+```html
+<widget-renderer [widget]="widget" [validationRules]="rules" />
+```
+
+- `mode: 'block'` (the default): the renderer shows the safe empty widget and the validation overlay.
+- `mode: 'report'`: the widget renders normally; the issue is only exposed through `validationIssues`.
+- Rule issues get a `severity` of `block` or `report`. A rule that throws produces one issue with its own mode.
+- The same rules work outside the component: `safeParseWidgetInput(payload, { rules })` fails only on blocking issues and returns report-only issues in `result.issues`. `parseWidgetInput(payload, { rules })` throws only on blocking issues.
+
+## Layout fingerprints
+
+`computeWidgetFingerprint(payload)` returns a stable ID of the widget's look, such as `wfp:1:3f9c…`, or `null` for invalid input. Use it to approve a layout once and then accept any widget with the same fingerprint.
+
+The fingerprint covers the size, grid tracks, background (including its image), element types, positions, order, styles, image sources, and button method and behavior. It ignores content that can differ per visitor: the widget `id`, text, button labels, image alt text, chart titles, chart and progress data, button URLs and bodies, and the refresh label. Only whether text, labels, alt text, and titles are empty is included. Hex colors are compared case-insensitively, and omitted defaults match their explicit values.
+
+`WidgetStudio.Contracts` computes the same value with `WidgetFingerprint.Compute`, so a .NET backend can verify fingerprints itself. The version number after `wfp:` (`WIDGET_FINGERPRINT_VERSION`) changes whenever the rules change.
+
+## 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
+- `computeWidgetFingerprint` and `WIDGET_FINGERPRINT_VERSION`
+- 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-BzH2alxy.mjs

@@ -0,0 +1,185 @@
+import * as i0 from "@angular/core";
+import { Injectable, signal, untracked } 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}`,
+	dataPointLabel: (label, value) => `${label}: ${value}`,
+	gaugeValueLabel: "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.`,
+	gaugeValueLabel: "Wert",
+	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}`,
+	dataPointLabel: (label, value) => `${label} : ${value}`,
+	gaugeValueLabel: "Valeur",
+	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.`,
+	gaugeValueLabel: "Waarde",
+	progressSegmentLabel: (label, value) => `${label}: ${value}`,
+	progressBreakdown: (label, start, end) => `${label}: ${start} tot ${end}`
+});
+var WidgetTooltip = class WidgetTooltip {
+	state = signal(null, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	overlay = signal(null, ...ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []);
+	currentOwner = signal(null, ...ngDevMode ? [{ debugName: "currentOwner" }] : /* istanbul ignore next */ []);
+	owner = this.currentOwner.asReadonly();
+	setOverlay(overlay) {
+		this.overlay.set(overlay);
+	}
+	overlayElement() {
+		return this.overlay();
+	}
+	show(owner, state) {
+		this.currentOwner.set(owner);
+		this.state.set(state);
+	}
+	hide(owner) {
+		if (untracked(this.currentOwner) !== owner) return;
+		this.currentOwner.set(null);
+		this.state.set(null);
+	}
+	clear() {
+		this.currentOwner.set(null);
+		this.state.set(null);
+		this.overlay.set(null);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WidgetTooltip,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: WidgetTooltip
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	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-BzH2alxy.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lieselthuriot-widget-renderer-chart-accessibility-BzH2alxy.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  dataPointLabel: (label: string, value: string) => string;\n  gaugeValueLabel: 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  dataPointLabel: (label: string, value: string) => `${label}: ${value}`,\n  gaugeValueLabel: '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    gaugeValueLabel: 'Wert',\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    dataPointLabel: (label, value) => `${label} : ${value}`,\n    gaugeValueLabel: 'Valeur',\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    gaugeValueLabel: 'Waarde',\n    progressSegmentLabel: (label, value) => `${label}: ${value}`,\n    progressBreakdown: (label, start, end) => `${label}: ${start} tot ${end}`,\n  },\n);\n","import { Injectable, signal, untracked } from '@angular/core';\n\nexport interface ChartTooltipState {\n  x: number;\n  y: number;\n  label: string;\n  value: number;\n  color?: string;\n}\n\n@Injectable()\nexport class WidgetTooltip {\n  readonly state = signal<ChartTooltipState | null>(null);\n  private readonly overlay = signal<HTMLElement | null>(null);\n  private readonly currentOwner = signal<object | null>(null);\n  readonly owner = this.currentOwner.asReadonly();\n\n  setOverlay(overlay: HTMLElement): void {\n    this.overlay.set(overlay);\n  }\n\n  overlayElement(): HTMLElement | null {\n    return this.overlay();\n  }\n\n  show(owner: object, state: ChartTooltipState): void {\n    this.currentOwner.set(owner);\n    this.state.set(state);\n  }\n\n  hide(owner: object): void {\n    if (untracked(this.currentOwner) !== owner) return;\n    this.currentOwner.set(null);\n    this.state.set(null);\n  }\n\n  clear(): void {\n    this.currentOwner.set(null);\n    this.state.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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"}