@lieselthuriot/widget-renderer 0.1.0 → 0.2.0

package/fesm2022/lieselthuriot-widget-renderer.mjs

@@ -1,4 +1,4 @@
-import { a as dutchWidgetRendererLocale, i as defaultWidgetRendererLocale, n as chartAriaLabel, o as frenchWidgetRendererLocale, r as WidgetTooltip, s as germanWidgetRendererLocale, t as chartAccessibilitySummary } from "./lieselthuriot-widget-renderer-chart-accessibility-CXEeXwdH.mjs";
+import { a as dutchWidgetRendererLocale, i as defaultWidgetRendererLocale, n as chartAriaLabel, o as frenchWidgetRendererLocale, r as WidgetTooltip, s as germanWidgetRendererLocale, t as chartAccessibilitySummary } from "./lieselthuriot-widget-renderer-chart-accessibility-BzH2alxy.mjs";
 import * as i0 from "@angular/core";
 import { Component, computed, effect, inject, input, output, signal, viewChild } from "@angular/core";
 function normalizeElement(element) {
@@ -400,18 +400,40 @@ function validateWidget(value) {
 	else value["elements"].forEach((element, index) => validateElement(element, `elements[${index}]`, issues));
 	return issues;
 }
-function safeParseWidgetInput(value) {
-	const issues = validateWidget(value);
-	return issues.length ? {
+function runRule(rule, widget) {
+	const mode = typeof rule === "function" ? "block" : rule.mode ?? "block";
+	try {
+		return (typeof rule === "function" ? rule(widget) : rule.validate(widget)).map((issue) => ({
+			...issue,
+			severity: mode
+		}));
+	} catch (error) {
+		return [{
+			path: "",
+			message: `Validation rule failed: ${error instanceof Error ? error.message : String(error)}`,
+			severity: mode
+		}];
+	}
+}
+function safeParseWidgetInput(value, options = {}) {
+	const builtInIssues = validateWidget(value);
+	if (builtInIssues.length) return {
+		success: false,
+		issues: builtInIssues
+	};
+	const data = value;
+	const issues = (options.rules ?? []).flatMap((rule) => runRule(rule, data));
+	return issues.some((issue) => issue.severity === "block") ? {
 		success: false,
 		issues
 	} : {
 		success: true,
-		data: value
+		data,
+		issues
 	};
 }
-function parseWidgetInput(value) {
-	const result = safeParseWidgetInput(value);
+function parseWidgetInput(value, options = {}) {
+	const result = safeParseWidgetInput(value, options);
 	if (!result.success) throw new WidgetValidationError(result.issues);
 	return result.data;
 }
@@ -421,6 +443,232 @@ function isWidgetContract(value) {
 function isWidget(value) {
 	return safeParseWidgetInput(value).success;
 }
+const WIDGET_FINGERPRINT_VERSION = 1;
+function computeWidgetFingerprint(input) {
+	const result = safeParseWidgetInput(input);
+	if (!result.success) return null;
+	const canonical = canonicalJson(widgetShape(result.data));
+	return `wfp:1:${sha256Hex(new TextEncoder().encode(canonical))}`;
+}
+function widgetShape(widget) {
+	return {
+		version: widget.version,
+		size: widget.size,
+		rows: widget.rows,
+		columns: widget.columns,
+		background: widget.background,
+		refresh: { enabled: widget.refresh?.enabled ?? false },
+		elements: widget.elements.map(elementShape)
+	};
+}
+function hasContent(value) {
+	return (value ?? "").trim().length > 0;
+}
+function elementShape(element) {
+	const base = {
+		type: element.type,
+		grid: element.grid
+	};
+	switch (element.type) {
+		case "text": return {
+			...base,
+			sensitive: element.sensitive,
+			hasText: hasContent(element.text),
+			style: {
+				...element.style,
+				font: {
+					size: element.style.font.size,
+					bold: element.style.font.bold ?? false,
+					italic: element.style.font.italic ?? false,
+					underline: element.style.font.underline ?? false,
+					strikethrough: element.style.font.strikethrough ?? false
+				},
+				padding: element.style.padding ?? {
+					vertical: 0,
+					horizontal: 0
+				}
+			}
+		};
+		case "image": return {
+			...base,
+			sensitive: element.sensitive,
+			source: element.source,
+			hasAlt: hasContent(element.alt),
+			fit: element.fit,
+			overlayColor: element.overlayColor,
+			radius: element.radius
+		};
+		case "button": return {
+			...base,
+			sensitive: element.sensitive,
+			hasLabel: hasContent(element.label),
+			method: element.method,
+			requestRefresh: element.requestRefresh ?? false,
+			showOnlyOnHover: element.showOnlyOnHover ?? false,
+			style: element.style
+		};
+		case "divider": return {
+			...base,
+			orientation: element.orientation,
+			style: element.style
+		};
+		default: return {
+			...base,
+			sensitive: element.sensitive,
+			hasTitle: hasContent(element.title),
+			showLegend: element.showLegend,
+			style: element.style
+		};
+	}
+}
+function canonicalJson(value) {
+	if (value === null || value === void 0) return "null";
+	if (typeof value === "boolean") return value ? "true" : "false";
+	if (typeof value === "number") return canonicalNumber(value);
+	if (typeof value === "string") return canonicalString(value);
+	if (Array.isArray(value)) return `[${value.map(canonicalJson).join(",")}]`;
+	return `{${Object.keys(value).filter((key) => value[key] !== void 0 && value[key] !== null).sort(compareOrdinal).map((key) => `${canonicalString(key)}:${canonicalJson(value[key])}`).join(",")}}`;
+}
+function compareOrdinal(left, right) {
+	return left < right ? -1 : left > right ? 1 : 0;
+}
+function canonicalNumber(value) {
+	const fixed = value.toFixed(6).replace(/\.?0+$/, "");
+	return fixed === "-0" ? "0" : fixed;
+}
+function canonicalString(value) {
+	const normalized = value.startsWith("#") ? value.toLowerCase() : value;
+	let output = "\"";
+	for (const character of normalized) {
+		const code = character.charCodeAt(0);
+		if (character === "\"" || character === "\\") output += `\\${character}`;
+		else if (code < 32) output += `\\u${code.toString(16).padStart(4, "0")}`;
+		else output += character;
+	}
+	return `${output}"`;
+}
+const roundConstants = new Uint32Array([
+	1116352408,
+	1899447441,
+	3049323471,
+	3921009573,
+	961987163,
+	1508970993,
+	2453635748,
+	2870763221,
+	3624381080,
+	310598401,
+	607225278,
+	1426881987,
+	1925078388,
+	2162078206,
+	2614888103,
+	3248222580,
+	3835390401,
+	4022224774,
+	264347078,
+	604807628,
+	770255983,
+	1249150122,
+	1555081692,
+	1996064986,
+	2554220882,
+	2821834349,
+	2952996808,
+	3210313671,
+	3336571891,
+	3584528711,
+	113926993,
+	338241895,
+	666307205,
+	773529912,
+	1294757372,
+	1396182291,
+	1695183700,
+	1986661051,
+	2177026350,
+	2456956037,
+	2730485921,
+	2820302411,
+	3259730800,
+	3345764771,
+	3516065817,
+	3600352804,
+	4094571909,
+	275423344,
+	430227734,
+	506948616,
+	659060556,
+	883997877,
+	958139571,
+	1322822218,
+	1537002063,
+	1747873779,
+	1955562222,
+	2024104815,
+	2227730452,
+	2361852424,
+	2428436474,
+	2756734187,
+	3204031479,
+	3329325298
+]);
+function sha256Hex(message) {
+	const bitLength = message.length * 8;
+	const paddedLength = Math.ceil((message.length + 9) / 64) * 64;
+	const bytes = new Uint8Array(paddedLength);
+	bytes.set(message);
+	bytes[message.length] = 128;
+	const view = new DataView(bytes.buffer);
+	view.setUint32(paddedLength - 8, Math.floor(bitLength / 4294967296));
+	view.setUint32(paddedLength - 4, bitLength >>> 0);
+	const hash = new Uint32Array([
+		1779033703,
+		3144134277,
+		1013904242,
+		2773480762,
+		1359893119,
+		2600822924,
+		528734635,
+		1541459225
+	]);
+	const words = /* @__PURE__ */ new Uint32Array(64);
+	const rotate = (value, bits) => value >>> bits | value << 32 - bits;
+	for (let offset = 0; offset < paddedLength; offset += 64) {
+		for (let index = 0; index < 16; index++) words[index] = view.getUint32(offset + index * 4);
+		for (let index = 16; index < 64; index++) {
+			const w15 = words[index - 15];
+			const w2 = words[index - 2];
+			const s0 = rotate(w15, 7) ^ rotate(w15, 18) ^ w15 >>> 3;
+			const s1 = rotate(w2, 17) ^ rotate(w2, 19) ^ w2 >>> 10;
+			words[index] = words[index - 16] + s0 + words[index - 7] + s1;
+		}
+		let [a, b, c, d, e, f, g, h] = hash;
+		for (let index = 0; index < 64; index++) {
+			const s1 = rotate(e, 6) ^ rotate(e, 11) ^ rotate(e, 25);
+			const choice = e & f ^ ~e & g;
+			const temp1 = h + s1 + choice + roundConstants[index] + words[index] >>> 0;
+			const temp2 = (rotate(a, 2) ^ rotate(a, 13) ^ rotate(a, 22)) + (a & b ^ a & c ^ b & c) >>> 0;
+			h = g;
+			g = f;
+			f = e;
+			e = d + temp1 >>> 0;
+			d = c;
+			c = b;
+			b = a;
+			a = temp1 + temp2 >>> 0;
+		}
+		hash[0] += a;
+		hash[1] += b;
+		hash[2] += c;
+		hash[3] += d;
+		hash[4] += e;
+		hash[5] += f;
+		hash[6] += g;
+		hash[7] += h;
+	}
+	return Array.from(hash, (word) => word.toString(16).padStart(8, "0")).join("");
+}
 const WIDGET_HEIGHT = 245;
 const WIDGET_PADDING = 18;
 const WIDGET_GAP = 8;
@@ -561,7 +809,7 @@ var WidgetElementRenderer = class WidgetElementRenderer {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WidgetElementRenderer,
 		deps: [],
@@ -569,7 +817,7 @@ var WidgetElementRenderer = class WidgetElementRenderer {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WidgetElementRenderer,
 		isStandalone: true,
 		selector: "widget-element-renderer",
@@ -604,15 +852,15 @@ var WidgetElementRenderer = class WidgetElementRenderer {
 		ngImport: i0,
 		template: "@let item = element();\n<div\n  class=\"widget-element\"\n  [attr.data-widget-element-id]=\"elementId(item)\"\n  [attr.aria-hidden]=\"isSensitive(item) ? 'true' : null\"\n  [class.is-sensitive]=\"isSensitive(item)\"\n>\n  <div\n    class=\"element-content\"\n    [class.is-sensitive]=\"isSensitive(item)\"\n    [style.--sensitive-blur]=\"sensitiveBlur(item)\"\n    [style.justify-content]=\"\n      isChart(item) && item.type !== 'progress'\n        ? 'stretch'\n        : horizontalAnchor(item.grid.anchor ?? 'center')\n    \"\n    [style.align-items]=\"\n      isChart(item) && item.type !== 'progress'\n        ? 'stretch'\n        : verticalAnchor(item.grid.anchor ?? 'center')\n    \"\n  >\n    @if (isText(item)) {\n      @let text = item;\n      <span\n        class=\"text-element\"\n        [style.color]=\"text.style.color\"\n        [style.font-size.px]=\"text.style.font.size\"\n        [style.font-weight]=\"textFontWeight(text)\"\n        [style.font-style]=\"textFontStyle(text)\"\n        [style.text-decoration]=\"textFontDecoration(text)\"\n        [style.text-align]=\"text.style.align\"\n        [style.white-space]=\"text.style.wrap ? 'pre-wrap' : 'pre'\"\n        [style.background-color]=\"text.style.background || null\"\n        [style.border-radius.px]=\"text.style.radius\"\n        [style.padding]=\"\n          text.style.padding\n            ? text.style.padding.vertical + 'px ' + text.style.padding.horizontal + 'px'\n            : null\n        \"\n        >{{ text.text }}</span\n      >\n    } @else if (isImage(item)) {\n      @let image = item;\n      @if (imageFailed(image)) {\n        <div\n          class=\"image-placeholder\"\n          role=\"img\"\n          [attr.aria-label]=\"elementAlt(image) || locale().aria.imageUnavailable\"\n          [style.border-radius.px]=\"image.radius\"\n        >\n          <svg aria-hidden=\"true\" viewBox=\"0 0 64 48\" focusable=\"false\">\n            <rect x=\"2\" y=\"2\" width=\"60\" height=\"44\" rx=\"5\" />\n            <circle cx=\"20\" cy=\"17\" r=\"5\" />\n            <path d=\"m8 39 15-14 9 8 7-6 17 12\" />\n          </svg>\n        </div>\n      } @else {\n        <img\n          [src]=\"image.source\"\n          [alt]=\"elementAlt(image)\"\n          [style.object-fit]=\"image.fit\"\n          [style.object-position]=\"image.grid.anchor ?? 'center'\"\n          [style.border-radius.px]=\"image.radius\"\n          (error)=\"imageLoadFailed(image)\"\n        />\n      }\n      <span\n        class=\"image-overlay\"\n        [style.background-color]=\"image.overlayColor || 'transparent'\"\n        [style.border-radius.px]=\"image.radius\"\n      ></span>\n    } @else if (isButton(item)) {\n      @let button = item;\n      <button\n        type=\"button\"\n        class=\"action-button\"\n        [class.solid]=\"button.style === 'solid'\"\n        [class.outline]=\"button.style === 'outline'\"\n        [class.show-only-on-hover]=\"button.showOnlyOnHover\"\n        [disabled]=\"isSensitive(button)\"\n        (click)=\"requestAction(button, $event)\"\n        [tabindex]=\"isSensitive(button) ? -1 : 0\"\n      >\n        {{ button.label }}\n      </button>\n    } @else if (item.type === 'divider') {\n      @let divider = item;\n      <div\n        class=\"divider-element\"\n        [class.is-vertical]=\"divider.orientation === 'vertical'\"\n        role=\"separator\"\n        [attr.aria-orientation]=\"divider.orientation\"\n        [style.background-color]=\"divider.style.color\"\n      ></div>\n    } @else if (isChart(item)) {\n      @let chart = item;\n      @defer (on immediate) {\n        <widget-chart-element\n          [class.is-progress]=\"chart.type === 'progress'\"\n          [element]=\"chart\"\n          [sensitiveHidden]=\"isSensitive(chart)\"\n          [locale]=\"locale()\"\n        />\n      } @placeholder {\n        <div class=\"chart-placeholder\" aria-hidden=\"true\"></div>\n      }\n    }\n  </div>\n</div>\n",
 		styles: [":host{position:relative;min-width:0;min-height:0;display:flex;z-index:1}.widget-element{position:relative;min-width:0;min-height:0;display:flex;z-index:1;width:100%;height:100%}.element-content{display:flex;width:100%;height:100%;min-width:0;min-height:0}.element-content:has(widget-chart-element){align-items:stretch}.element-content>widget-chart-element{flex:0 1 auto;width:100%;height:100%;max-width:100%;max-height:100%}.element-content>widget-chart-element.is-progress{height:auto}.chart-placeholder{width:100%;height:100%}.text-element{display:inline-block;overflow:visible;line-height:1.2}img{width:100%;height:100%;display:block}.image-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}.image-placeholder{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden;background:#dfe5ee}.image-placeholder svg{width:min(56px,45%);height:auto;fill:none;stroke:#8c9ab0;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.divider-element{width:100%;height:2px;flex:0 0 auto;border-radius:var(--widget-renderer-pill-radius, 999px)}.divider-element.is-vertical{width:2px;height:100%}.element-content.is-sensitive{filter:blur(var(--sensitive-blur, 2px));-webkit-user-select:none;user-select:none}.action-button{pointer-events:var(--widget-renderer-actions-pointer-events, auto);min-height:30px;border-radius:var(--widget-renderer-radius, 8px);padding:6px 10px;font:600 12px/1.1 inherit;cursor:var(--widget-renderer-action-cursor, pointer)}.action-button.show-only-on-hover{opacity:0;pointer-events:none;transform:translateY(2px);transition:opacity var(--widget-renderer-transition-duration, .16s) var(--widget-renderer-transition-easing, ease),transform var(--widget-renderer-transition-duration, .16s) var(--widget-renderer-transition-easing, ease)}:host-context(.widget-shell:hover) .action-button.show-only-on-hover,:host-context(.widget-shell:focus-within) .action-button.show-only-on-hover{opacity:1;pointer-events:auto;transform:translateY(0)}@media(prefers-reduced-motion:reduce){.action-button.show-only-on-hover{transition:none}}.action-button.solid{border:1px solid var(--widget-renderer-action-background, #151515);background:var(--widget-renderer-action-background, #151515);color:var(--widget-renderer-action-color, #fff)}.action-button.outline{border:1px solid var(--widget-renderer-action-outline-border, #737373);background:var(--widget-renderer-action-outline-background, #fff);color:var(--widget-renderer-action-outline-color, #151515)}\n"],
-		deferBlockDependencies: [() => [import("./lieselthuriot-widget-renderer-chart-element-renderer-BO3V-jYo.mjs").then((m) => m.ChartElementRenderer)]]
+		deferBlockDependencies: [() => [import("./lieselthuriot-widget-renderer-chart-element-renderer-wVHdIYuJ.mjs").then((m) => m.ChartElementRenderer)]]
 	});
 };
 i0.ɵɵngDeclareClassMetadataAsync({
 	minVersion: "18.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WidgetElementRenderer,
-	resolveDeferredDeps: () => [import("./lieselthuriot-widget-renderer-chart-element-renderer-BO3V-jYo.mjs").then((m) => m.ChartElementRenderer)],
+	resolveDeferredDeps: () => [import("./lieselthuriot-widget-renderer-chart-element-renderer-wVHdIYuJ.mjs").then((m) => m.ChartElementRenderer)],
 	resolveMetadata: (ChartElementRenderer) => ({
 		decorators: [{
 			type: Component,
@@ -666,7 +914,7 @@ var WidgetSkeleton = class WidgetSkeleton {
 	locale = input(defaultWidgetRendererLocale, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WidgetSkeleton,
 		deps: [],
@@ -674,7 +922,7 @@ var WidgetSkeleton = class WidgetSkeleton {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WidgetSkeleton,
 		isStandalone: true,
 		selector: "widget-skeleton",
@@ -708,7 +956,7 @@ var WidgetSkeleton = class WidgetSkeleton {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WidgetSkeleton,
 	decorators: [{
@@ -752,7 +1000,7 @@ var WidgetBackground = class WidgetBackground {
 	image = input("none", ...ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WidgetBackground,
 		deps: [],
@@ -760,7 +1008,7 @@ var WidgetBackground = class WidgetBackground {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.1.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WidgetBackground,
 		isStandalone: true,
 		selector: "widget-background",
@@ -812,7 +1060,7 @@ var WidgetBackground = class WidgetBackground {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WidgetBackground,
 	decorators: [{
@@ -876,7 +1124,7 @@ var WidgetToolbar = class WidgetToolbar {
 	sensitiveToggled = output();
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WidgetToolbar,
 		deps: [],
@@ -884,7 +1132,7 @@ var WidgetToolbar = class WidgetToolbar {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WidgetToolbar,
 		isStandalone: true,
 		selector: "widget-toolbar",
@@ -968,7 +1216,7 @@ var WidgetToolbar = class WidgetToolbar {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WidgetToolbar,
 	decorators: [{
@@ -1064,7 +1312,7 @@ var WidgetValidationOverlay = class WidgetValidationOverlay {
 	issues = input.required(...ngDevMode ? [{ debugName: "issues" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WidgetValidationOverlay,
 		deps: [],
@@ -1072,7 +1320,7 @@ var WidgetValidationOverlay = class WidgetValidationOverlay {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WidgetValidationOverlay,
 		isStandalone: true,
 		selector: "widget-validation-overlay",
@@ -1101,7 +1349,7 @@ var WidgetValidationOverlay = class WidgetValidationOverlay {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WidgetValidationOverlay,
 	decorators: [{
@@ -1136,6 +1384,7 @@ var WidgetRenderer = class WidgetRenderer {
 	loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
 	darkMode = input(false, ...ngDevMode ? [{ debugName: "darkMode" }] : /* istanbul ignore next */ []);
 	locale = input({}, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	validationRules = input([], ...ngDevMode ? [{ debugName: "validationRules" }] : /* istanbul ignore next */ []);
 	refreshRequested = output();
 	actionRequested = output();
 	sensitiveVisible = signal(false, ...ngDevMode ? [{ debugName: "sensitiveVisible" }] : /* istanbul ignore next */ []);
@@ -1146,7 +1395,7 @@ var WidgetRenderer = class WidgetRenderer {
 		return widget === null ? {
 			success: false,
 			issues: []
-		} : safeParseWidgetInput(widget);
+		} : safeParseWidgetInput(widget, { rules: this.validationRules() });
 	}, ...ngDevMode ? [{ debugName: "parsedWidget" }] : /* istanbul ignore next */ []);
 	isLoading = computed(() => this.loading() !== false, ...ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []);
 	resolvedLocale = computed(() => ({
@@ -1164,10 +1413,8 @@ var WidgetRenderer = class WidgetRenderer {
 		const loading = this.loading();
 		return typeof loading === "string" ? loading : "square";
 	}, ...ngDevMode ? [{ debugName: "loadingSize" }] : /* istanbul ignore next */ []);
-	validationIssues = computed(() => {
-		const result = this.parsedWidget();
-		return result.success ? [] : result.issues;
-	}, ...ngDevMode ? [{ debugName: "validationIssues" }] : /* istanbul ignore next */ []);
+	validationIssues = computed(() => this.parsedWidget().issues, ...ngDevMode ? [{ debugName: "validationIssues" }] : /* istanbul ignore next */ []);
+	blockingIssues = computed(() => this.validationIssues().filter((issue) => issue.severity !== "report"), ...ngDevMode ? [{ debugName: "blockingIssues" }] : /* istanbul ignore next */ []);
 	renderWidget = computed(() => {
 		const result = this.parsedWidget();
 		if (!result.success) return {
@@ -1215,7 +1462,7 @@ var WidgetRenderer = class WidgetRenderer {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WidgetRenderer,
 		deps: [],
@@ -1223,7 +1470,7 @@ var WidgetRenderer = class WidgetRenderer {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WidgetRenderer,
 		isStandalone: true,
 		selector: "widget-renderer",
@@ -1255,6 +1502,13 @@ var WidgetRenderer = class WidgetRenderer {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			validationRules: {
+				classPropertyName: "validationRules",
+				publicName: "validationRules",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -1270,8 +1524,8 @@ var WidgetRenderer = class WidgetRenderer {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "@if (isLoading()) {\n  <widget-skeleton [size]=\"loadingSize()\" [darkMode]=\"darkMode()\" [locale]=\"resolvedLocale()\" />\n} @else {\n  @let widget = renderWidget();\n  <section class=\"widget-shell\" [style.width.px]=\"widgetWidth()\" [style.height.px]=\"widgetHeight()\">\n    <div\n      class=\"widget-viewport\"\n      [style.background-color]=\"widget.background.color || 'transparent'\"\n    >\n      <widget-background\n        [background]=\"widget.background\"\n        [sensitive]=\"backgroundSensitive()\"\n        [image]=\"backgroundImage()\"\n      />\n      @if (validationIssues().length > 0) {\n        <widget-validation-overlay [issues]=\"validationIssues()\" />\n      }\n      <widget-toolbar\n        [refresh]=\"widget.refresh\"\n        [hasSensitiveElements]=\"hasSensitiveElements()\"\n        [sensitiveVisible]=\"sensitiveVisible()\"\n        [locale]=\"resolvedLocale()\"\n        (refreshRequested)=\"refreshRequested.emit()\"\n        (sensitiveToggled)=\"toggleSensitive()\"\n      />\n      <div\n        class=\"widget-grid\"\n        [style.grid-template-rows]=\"gridRows()\"\n        [style.grid-template-columns]=\"gridColumns()\"\n      >\n        @for (element of widget.elements; track $index) {\n          <widget-element-renderer\n            [element]=\"element\"\n            [sensitiveVisible]=\"sensitiveVisible()\"\n            [locale]=\"resolvedLocale()\"\n            (actionRequested)=\"actionRequested.emit($event)\"\n          />\n        }\n      </div>\n    </div>\n    <div #tooltipLayer class=\"widget-tooltip-layer\">\n      @if (tooltip.progress(); as progress) {\n        <span\n          class=\"progress-tooltip\"\n          role=\"tooltip\"\n          [style.--tooltip-x.px]=\"progress.x\"\n          [style.--tooltip-y.px]=\"progress.y\"\n          [style.--tooltip-border]=\"progress.color || 'rgb(0 0 0 / 0.12)'\"\n          ><span class=\"tooltip-marker\" [style.background]=\"progress.color\"></span\n          ><span>{{ progress.label }}</span\n          ><strong>{{ progress.value }}</strong></span\n        >\n      }\n    </div>\n  </section>\n}\n",
-		styles: [":host{display:block;--widget-renderer-radius: 8px;--widget-renderer-pill-radius: 999px;--widget-renderer-control-size: 28px;--widget-renderer-content-padding: 18px;--widget-renderer-shadow: 0 18px 40px #10182c38;--widget-renderer-transition-duration: .16s;--widget-renderer-transition-easing: ease;--widget-renderer-control-background: #10182ccc;--widget-renderer-control-border: #ffffff38;--widget-renderer-control-hover-border: #17233c;--widget-renderer-control-hover-background: #fff;--widget-renderer-control-hover-color: #17233c;--widget-renderer-action-background: #151515;--widget-renderer-action-color: #fff;--widget-renderer-action-outline-border: #737373;--widget-renderer-action-outline-background: #fff;--widget-renderer-action-outline-color: #151515}.widget-skeleton{position:relative;width:274px;max-width:100%;height:254px;box-sizing:border-box;overflow:hidden;border-radius:var(--widget-renderer-radius);background:#dfe5ee;box-shadow:var(--widget-renderer-shadow)}.widget-skeleton.is-wide{width:556px}.widget-skeleton.is-mini{width:133px;height:123px}.widget-skeleton.is-compact{width:274px;height:123px}.widget-skeleton.is-tall{width:133px;height:254px}.widget-skeleton.is-mega{width:556px;height:516px}.widget-skeleton.is-banner{width:274px;height:516px}.widget-skeleton.is-hero{width:1120px;height:516px}.widget-skeleton.is-mini .skeleton-toolbar{top:8px;right:8px;width:22px;height:22px}.widget-skeleton.is-mini .skeleton-content{box-sizing:border-box;height:100%;gap:3px;padding:24px 12px 8px}.widget-skeleton.is-mini .skeleton-line{height:6px}.widget-skeleton.is-mini .skeleton-line-title{height:10px}.widget-skeleton.is-mini .skeleton-chart{flex:1 1 auto;min-height:20px;margin-top:0}.widget-skeleton.is-mini .skeleton-button{width:42px;height:18px}.widget-skeleton:is(.is-compact,.is-tall) .skeleton-content{box-sizing:border-box;height:100%;gap:5px;padding:30px 12px 10px}.widget-skeleton.is-compact .skeleton-chart{min-height:28px;margin-top:0}.widget-skeleton.is-tall .skeleton-chart{flex:1 1 auto;min-height:45px;margin-top:0}.widget-skeleton:is(.is-mega,.is-banner,.is-hero) .skeleton-content{box-sizing:border-box;height:100%}.widget-skeleton:is(.is-mega,.is-banner,.is-hero) .skeleton-chart{flex:1 1 auto;min-height:180px}.widget-skeleton.is-dark{background:#182236}.skeleton-line,.skeleton-chart,.skeleton-button{background:linear-gradient(100deg,#dfe5ee 20%,#f2f5f9,#dfe5ee 70%);background-size:200% 100%;animation:skeleton-shimmer 1.8s linear infinite}.widget-skeleton.is-dark .skeleton-line,.widget-skeleton.is-dark .skeleton-chart,.widget-skeleton.is-dark .skeleton-button{background:linear-gradient(100deg,#182236 20%,#2b3b59,#182236 70%);background-size:200% 100%}.skeleton-toolbar{position:absolute;top:12px;right:12px;width:var(--widget-renderer-control-size);height:var(--widget-renderer-control-size);border-radius:var(--widget-renderer-radius);background:#c4cedd}.widget-skeleton.is-dark .skeleton-toolbar{background:#2b3b59}.skeleton-content{display:flex;flex-direction:column;gap:10px;padding:44px var(--widget-renderer-content-padding) 16px}.skeleton-line{display:block;height:10px;border-radius:var(--widget-renderer-pill-radius)}.skeleton-line-small{width:28%}.skeleton-line-title{width:72%;height:20px}.skeleton-line-copy{width:58%}.skeleton-chart{width:100%;height:64px;margin-top:2px;border-radius:var(--widget-renderer-radius)}.skeleton-button{align-self:flex-end;width:58px;height:30px;border-radius:var(--widget-renderer-radius)}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.skeleton-line,.skeleton-chart,.skeleton-button{animation:none}}.widget-shell{position:relative;overflow:visible;box-sizing:border-box;color:#f6f7fb}.widget-viewport{position:absolute;inset:0;overflow:hidden;border-radius:var(--widget-renderer-radius);box-shadow:var(--widget-renderer-shadow)}.widget-viewport:after{position:absolute;inset:0;z-index:5;box-sizing:border-box;border:1px solid #10182c26;border-radius:inherit;content:\"\";pointer-events:none}.widget-tooltip-layer{position:absolute;inset:0;z-index:6;overflow:visible;pointer-events:none}.progress-tooltip{--tooltip-border: rgb(0 0 0 / .12);position:absolute;z-index:4;top:var(--tooltip-y);left:var(--tooltip-x);display:flex;min-width:104px;align-items:center;gap:7px;padding:10px;transform:translate(-50%,calc(-100% - 10px));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;white-space:nowrap}.progress-tooltip strong{margin-inline-start:auto;color:#464646;font-size:14px;font-weight:900}.tooltip-marker{width:9px;height:9px;flex:0 0 auto;border-radius:50%}.widget-grid{position:absolute;inset:0;display:grid;gap:8px;padding:18px}.chart-placeholder{width:100%;height:100%}.element-content{display:flex;width:100%;height:100%;min-width:0;min-height:0}.element-content:has(widget-chart-element){align-items:stretch}.element-content>widget-chart-element{flex:0 1 auto;width:100%;height:100%;max-width:100%;max-height:100%}.element-content>widget-chart-element.is-progress{height:auto}.divider-element{width:100%;height:2px;flex:0 0 auto;border-radius:var(--widget-renderer-pill-radius)}.divider-element.is-vertical{width:2px;height:100%}.element-content.is-sensitive{filter:blur(var(--sensitive-blur, 2px));-webkit-user-select:none;user-select:none}.text-element{display:inline-block;overflow:visible;line-height:1.2}img{width:100%;height:100%;display:block}.image-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}.image-placeholder{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden;background:#dfe5ee}.image-placeholder svg{width:min(56px,45%);height:auto;fill:none;stroke:#8c9ab0;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.action-button{min-height:30px;border-radius:var(--widget-renderer-radius);padding:6px 10px;font:600 12px/1.1 inherit;cursor:var(--widget-renderer-action-cursor, pointer)}.action-button.show-only-on-hover{opacity:0;pointer-events:none;transform:translateY(2px);transition:opacity var(--widget-renderer-transition-duration) var(--widget-renderer-transition-easing),transform var(--widget-renderer-transition-duration) var(--widget-renderer-transition-easing)}.widget-shell:hover .action-button.show-only-on-hover,.widget-shell:focus-within .action-button.show-only-on-hover{opacity:1;pointer-events:auto;transform:translateY(0)}.action-button.solid{border:1px solid #151515;background:#151515;color:#fff}.action-button.outline{border:1px solid #737373;background:#fff;color:#151515}\n"],
+		template: "@if (isLoading()) {\n  <widget-skeleton [size]=\"loadingSize()\" [darkMode]=\"darkMode()\" [locale]=\"resolvedLocale()\" />\n} @else {\n  @let widget = renderWidget();\n  <section class=\"widget-shell\" [style.width.px]=\"widgetWidth()\" [style.height.px]=\"widgetHeight()\">\n    <div\n      class=\"widget-viewport\"\n      [style.background-color]=\"widget.background.color || 'transparent'\"\n    >\n      <widget-background\n        [background]=\"widget.background\"\n        [sensitive]=\"backgroundSensitive()\"\n        [image]=\"backgroundImage()\"\n      />\n      @if (blockingIssues().length > 0) {\n        <widget-validation-overlay [issues]=\"blockingIssues()\" />\n      }\n      <widget-toolbar\n        [refresh]=\"widget.refresh\"\n        [hasSensitiveElements]=\"hasSensitiveElements()\"\n        [sensitiveVisible]=\"sensitiveVisible()\"\n        [locale]=\"resolvedLocale()\"\n        (refreshRequested)=\"refreshRequested.emit()\"\n        (sensitiveToggled)=\"toggleSensitive()\"\n      />\n      <div\n        class=\"widget-grid\"\n        [style.grid-template-rows]=\"gridRows()\"\n        [style.grid-template-columns]=\"gridColumns()\"\n      >\n        @for (element of widget.elements; track $index) {\n          <widget-element-renderer\n            [element]=\"element\"\n            [sensitiveVisible]=\"sensitiveVisible()\"\n            [locale]=\"resolvedLocale()\"\n            (actionRequested)=\"actionRequested.emit($event)\"\n          />\n        }\n      </div>\n    </div>\n    <div #tooltipLayer class=\"widget-tooltip-layer\">\n      @if (tooltip.state(); as tip) {\n        <span\n          class=\"chart-tooltip\"\n          role=\"tooltip\"\n          [style.--tooltip-x.px]=\"tip.x\"\n          [style.--tooltip-y.px]=\"tip.y\"\n          [style.--tooltip-border]=\"tip.color || 'rgb(0 0 0 / 0.12)'\"\n          ><span class=\"tooltip-marker\" [style.background]=\"tip.color\"></span\n          ><span>{{ tip.label }}</span\n          ><strong>{{ tip.value }}</strong></span\n        >\n      }\n    </div>\n  </section>\n}\n",
+		styles: [":host{display:block;--widget-renderer-radius: 8px;--widget-renderer-pill-radius: 999px;--widget-renderer-control-size: 28px;--widget-renderer-content-padding: 18px;--widget-renderer-shadow: 0 18px 40px #10182c38;--widget-renderer-transition-duration: .16s;--widget-renderer-transition-easing: ease;--widget-renderer-control-background: #10182ccc;--widget-renderer-control-border: #ffffff38;--widget-renderer-control-hover-border: #17233c;--widget-renderer-control-hover-background: #fff;--widget-renderer-control-hover-color: #17233c;--widget-renderer-action-background: #151515;--widget-renderer-action-color: #fff;--widget-renderer-action-outline-border: #737373;--widget-renderer-action-outline-background: #fff;--widget-renderer-action-outline-color: #151515}.widget-skeleton{position:relative;width:274px;max-width:100%;height:254px;box-sizing:border-box;overflow:hidden;border-radius:var(--widget-renderer-radius);background:#dfe5ee;box-shadow:var(--widget-renderer-shadow)}.widget-skeleton.is-wide{width:556px}.widget-skeleton.is-mini{width:133px;height:123px}.widget-skeleton.is-compact{width:274px;height:123px}.widget-skeleton.is-tall{width:133px;height:254px}.widget-skeleton.is-mega{width:556px;height:516px}.widget-skeleton.is-banner{width:274px;height:516px}.widget-skeleton.is-hero{width:1120px;height:516px}.widget-skeleton.is-mini .skeleton-toolbar{top:8px;right:8px;width:22px;height:22px}.widget-skeleton.is-mini .skeleton-content{box-sizing:border-box;height:100%;gap:3px;padding:24px 12px 8px}.widget-skeleton.is-mini .skeleton-line{height:6px}.widget-skeleton.is-mini .skeleton-line-title{height:10px}.widget-skeleton.is-mini .skeleton-chart{flex:1 1 auto;min-height:20px;margin-top:0}.widget-skeleton.is-mini .skeleton-button{width:42px;height:18px}.widget-skeleton:is(.is-compact,.is-tall) .skeleton-content{box-sizing:border-box;height:100%;gap:5px;padding:30px 12px 10px}.widget-skeleton.is-compact .skeleton-chart{min-height:28px;margin-top:0}.widget-skeleton.is-tall .skeleton-chart{flex:1 1 auto;min-height:45px;margin-top:0}.widget-skeleton:is(.is-mega,.is-banner,.is-hero) .skeleton-content{box-sizing:border-box;height:100%}.widget-skeleton:is(.is-mega,.is-banner,.is-hero) .skeleton-chart{flex:1 1 auto;min-height:180px}.widget-skeleton.is-dark{background:#182236}.skeleton-line,.skeleton-chart,.skeleton-button{background:linear-gradient(100deg,#dfe5ee 20%,#f2f5f9,#dfe5ee 70%);background-size:200% 100%;animation:skeleton-shimmer 1.8s linear infinite}.widget-skeleton.is-dark .skeleton-line,.widget-skeleton.is-dark .skeleton-chart,.widget-skeleton.is-dark .skeleton-button{background:linear-gradient(100deg,#182236 20%,#2b3b59,#182236 70%);background-size:200% 100%}.skeleton-toolbar{position:absolute;top:12px;right:12px;width:var(--widget-renderer-control-size);height:var(--widget-renderer-control-size);border-radius:var(--widget-renderer-radius);background:#c4cedd}.widget-skeleton.is-dark .skeleton-toolbar{background:#2b3b59}.skeleton-content{display:flex;flex-direction:column;gap:10px;padding:44px var(--widget-renderer-content-padding) 16px}.skeleton-line{display:block;height:10px;border-radius:var(--widget-renderer-pill-radius)}.skeleton-line-small{width:28%}.skeleton-line-title{width:72%;height:20px}.skeleton-line-copy{width:58%}.skeleton-chart{width:100%;height:64px;margin-top:2px;border-radius:var(--widget-renderer-radius)}.skeleton-button{align-self:flex-end;width:58px;height:30px;border-radius:var(--widget-renderer-radius)}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.skeleton-line,.skeleton-chart,.skeleton-button{animation:none}}.widget-shell{position:relative;overflow:visible;box-sizing:border-box;color:#f6f7fb}.widget-viewport{position:absolute;inset:0;overflow:hidden;border-radius:var(--widget-renderer-radius);box-shadow:var(--widget-renderer-shadow)}.widget-viewport:after{position:absolute;inset:0;z-index:5;box-sizing:border-box;border:1px solid #10182c26;border-radius:inherit;content:\"\";pointer-events:none}.widget-tooltip-layer{position:absolute;inset:0;z-index:6;overflow:visible;pointer-events:none}.chart-tooltip{--tooltip-border: rgb(0 0 0 / .12);position:absolute;z-index:4;top:var(--tooltip-y);left:var(--tooltip-x);display:flex;min-width:104px;align-items:center;gap:7px;padding:10px;transform:translate(-50%,calc(-100% - 10px));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;white-space:nowrap}.chart-tooltip strong{margin-inline-start:auto;color:#464646;font-size:14px;font-weight:900}.tooltip-marker{width:9px;height:9px;flex:0 0 auto;border-radius:50%}.widget-grid{position:absolute;inset:0;display:grid;gap:8px;padding:18px}.chart-placeholder{width:100%;height:100%}.element-content{display:flex;width:100%;height:100%;min-width:0;min-height:0}.element-content:has(widget-chart-element){align-items:stretch}.element-content>widget-chart-element{flex:0 1 auto;width:100%;height:100%;max-width:100%;max-height:100%}.element-content>widget-chart-element.is-progress{height:auto}.divider-element{width:100%;height:2px;flex:0 0 auto;border-radius:var(--widget-renderer-pill-radius)}.divider-element.is-vertical{width:2px;height:100%}.element-content.is-sensitive{filter:blur(var(--sensitive-blur, 2px));-webkit-user-select:none;user-select:none}.text-element{display:inline-block;overflow:visible;line-height:1.2}img{width:100%;height:100%;display:block}.image-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}.image-placeholder{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden;background:#dfe5ee}.image-placeholder svg{width:min(56px,45%);height:auto;fill:none;stroke:#8c9ab0;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.action-button{min-height:30px;border-radius:var(--widget-renderer-radius);padding:6px 10px;font:600 12px/1.1 inherit;cursor:var(--widget-renderer-action-cursor, pointer)}.action-button.show-only-on-hover{opacity:0;pointer-events:none;transform:translateY(2px);transition:opacity var(--widget-renderer-transition-duration) var(--widget-renderer-transition-easing),transform var(--widget-renderer-transition-duration) var(--widget-renderer-transition-easing)}.widget-shell:hover .action-button.show-only-on-hover,.widget-shell:focus-within .action-button.show-only-on-hover{opacity:1;pointer-events:auto;transform:translateY(0)}.action-button.solid{border:1px solid #151515;background:#151515;color:#fff}.action-button.outline{border:1px solid #737373;background:#fff;color:#151515}\n"],
 		dependencies: [
 			{
 				kind: "component",
@@ -1327,7 +1581,7 @@ var WidgetRenderer = class WidgetRenderer {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WidgetRenderer,
 	decorators: [{
@@ -1342,8 +1596,8 @@ i0.ɵɵngDeclareClassMetadata({
 				WidgetToolbar,
 				WidgetValidationOverlay
 			],
-			template: "@if (isLoading()) {\n  <widget-skeleton [size]=\"loadingSize()\" [darkMode]=\"darkMode()\" [locale]=\"resolvedLocale()\" />\n} @else {\n  @let widget = renderWidget();\n  <section class=\"widget-shell\" [style.width.px]=\"widgetWidth()\" [style.height.px]=\"widgetHeight()\">\n    <div\n      class=\"widget-viewport\"\n      [style.background-color]=\"widget.background.color || 'transparent'\"\n    >\n      <widget-background\n        [background]=\"widget.background\"\n        [sensitive]=\"backgroundSensitive()\"\n        [image]=\"backgroundImage()\"\n      />\n      @if (validationIssues().length > 0) {\n        <widget-validation-overlay [issues]=\"validationIssues()\" />\n      }\n      <widget-toolbar\n        [refresh]=\"widget.refresh\"\n        [hasSensitiveElements]=\"hasSensitiveElements()\"\n        [sensitiveVisible]=\"sensitiveVisible()\"\n        [locale]=\"resolvedLocale()\"\n        (refreshRequested)=\"refreshRequested.emit()\"\n        (sensitiveToggled)=\"toggleSensitive()\"\n      />\n      <div\n        class=\"widget-grid\"\n        [style.grid-template-rows]=\"gridRows()\"\n        [style.grid-template-columns]=\"gridColumns()\"\n      >\n        @for (element of widget.elements; track $index) {\n          <widget-element-renderer\n            [element]=\"element\"\n            [sensitiveVisible]=\"sensitiveVisible()\"\n            [locale]=\"resolvedLocale()\"\n            (actionRequested)=\"actionRequested.emit($event)\"\n          />\n        }\n      </div>\n    </div>\n    <div #tooltipLayer class=\"widget-tooltip-layer\">\n      @if (tooltip.progress(); as progress) {\n        <span\n          class=\"progress-tooltip\"\n          role=\"tooltip\"\n          [style.--tooltip-x.px]=\"progress.x\"\n          [style.--tooltip-y.px]=\"progress.y\"\n          [style.--tooltip-border]=\"progress.color || 'rgb(0 0 0 / 0.12)'\"\n          ><span class=\"tooltip-marker\" [style.background]=\"progress.color\"></span\n          ><span>{{ progress.label }}</span\n          ><strong>{{ progress.value }}</strong></span\n        >\n      }\n    </div>\n  </section>\n}\n",
-			styles: [":host{display:block;--widget-renderer-radius: 8px;--widget-renderer-pill-radius: 999px;--widget-renderer-control-size: 28px;--widget-renderer-content-padding: 18px;--widget-renderer-shadow: 0 18px 40px #10182c38;--widget-renderer-transition-duration: .16s;--widget-renderer-transition-easing: ease;--widget-renderer-control-background: #10182ccc;--widget-renderer-control-border: #ffffff38;--widget-renderer-control-hover-border: #17233c;--widget-renderer-control-hover-background: #fff;--widget-renderer-control-hover-color: #17233c;--widget-renderer-action-background: #151515;--widget-renderer-action-color: #fff;--widget-renderer-action-outline-border: #737373;--widget-renderer-action-outline-background: #fff;--widget-renderer-action-outline-color: #151515}.widget-skeleton{position:relative;width:274px;max-width:100%;height:254px;box-sizing:border-box;overflow:hidden;border-radius:var(--widget-renderer-radius);background:#dfe5ee;box-shadow:var(--widget-renderer-shadow)}.widget-skeleton.is-wide{width:556px}.widget-skeleton.is-mini{width:133px;height:123px}.widget-skeleton.is-compact{width:274px;height:123px}.widget-skeleton.is-tall{width:133px;height:254px}.widget-skeleton.is-mega{width:556px;height:516px}.widget-skeleton.is-banner{width:274px;height:516px}.widget-skeleton.is-hero{width:1120px;height:516px}.widget-skeleton.is-mini .skeleton-toolbar{top:8px;right:8px;width:22px;height:22px}.widget-skeleton.is-mini .skeleton-content{box-sizing:border-box;height:100%;gap:3px;padding:24px 12px 8px}.widget-skeleton.is-mini .skeleton-line{height:6px}.widget-skeleton.is-mini .skeleton-line-title{height:10px}.widget-skeleton.is-mini .skeleton-chart{flex:1 1 auto;min-height:20px;margin-top:0}.widget-skeleton.is-mini .skeleton-button{width:42px;height:18px}.widget-skeleton:is(.is-compact,.is-tall) .skeleton-content{box-sizing:border-box;height:100%;gap:5px;padding:30px 12px 10px}.widget-skeleton.is-compact .skeleton-chart{min-height:28px;margin-top:0}.widget-skeleton.is-tall .skeleton-chart{flex:1 1 auto;min-height:45px;margin-top:0}.widget-skeleton:is(.is-mega,.is-banner,.is-hero) .skeleton-content{box-sizing:border-box;height:100%}.widget-skeleton:is(.is-mega,.is-banner,.is-hero) .skeleton-chart{flex:1 1 auto;min-height:180px}.widget-skeleton.is-dark{background:#182236}.skeleton-line,.skeleton-chart,.skeleton-button{background:linear-gradient(100deg,#dfe5ee 20%,#f2f5f9,#dfe5ee 70%);background-size:200% 100%;animation:skeleton-shimmer 1.8s linear infinite}.widget-skeleton.is-dark .skeleton-line,.widget-skeleton.is-dark .skeleton-chart,.widget-skeleton.is-dark .skeleton-button{background:linear-gradient(100deg,#182236 20%,#2b3b59,#182236 70%);background-size:200% 100%}.skeleton-toolbar{position:absolute;top:12px;right:12px;width:var(--widget-renderer-control-size);height:var(--widget-renderer-control-size);border-radius:var(--widget-renderer-radius);background:#c4cedd}.widget-skeleton.is-dark .skeleton-toolbar{background:#2b3b59}.skeleton-content{display:flex;flex-direction:column;gap:10px;padding:44px var(--widget-renderer-content-padding) 16px}.skeleton-line{display:block;height:10px;border-radius:var(--widget-renderer-pill-radius)}.skeleton-line-small{width:28%}.skeleton-line-title{width:72%;height:20px}.skeleton-line-copy{width:58%}.skeleton-chart{width:100%;height:64px;margin-top:2px;border-radius:var(--widget-renderer-radius)}.skeleton-button{align-self:flex-end;width:58px;height:30px;border-radius:var(--widget-renderer-radius)}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.skeleton-line,.skeleton-chart,.skeleton-button{animation:none}}.widget-shell{position:relative;overflow:visible;box-sizing:border-box;color:#f6f7fb}.widget-viewport{position:absolute;inset:0;overflow:hidden;border-radius:var(--widget-renderer-radius);box-shadow:var(--widget-renderer-shadow)}.widget-viewport:after{position:absolute;inset:0;z-index:5;box-sizing:border-box;border:1px solid #10182c26;border-radius:inherit;content:\"\";pointer-events:none}.widget-tooltip-layer{position:absolute;inset:0;z-index:6;overflow:visible;pointer-events:none}.progress-tooltip{--tooltip-border: rgb(0 0 0 / .12);position:absolute;z-index:4;top:var(--tooltip-y);left:var(--tooltip-x);display:flex;min-width:104px;align-items:center;gap:7px;padding:10px;transform:translate(-50%,calc(-100% - 10px));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;white-space:nowrap}.progress-tooltip strong{margin-inline-start:auto;color:#464646;font-size:14px;font-weight:900}.tooltip-marker{width:9px;height:9px;flex:0 0 auto;border-radius:50%}.widget-grid{position:absolute;inset:0;display:grid;gap:8px;padding:18px}.chart-placeholder{width:100%;height:100%}.element-content{display:flex;width:100%;height:100%;min-width:0;min-height:0}.element-content:has(widget-chart-element){align-items:stretch}.element-content>widget-chart-element{flex:0 1 auto;width:100%;height:100%;max-width:100%;max-height:100%}.element-content>widget-chart-element.is-progress{height:auto}.divider-element{width:100%;height:2px;flex:0 0 auto;border-radius:var(--widget-renderer-pill-radius)}.divider-element.is-vertical{width:2px;height:100%}.element-content.is-sensitive{filter:blur(var(--sensitive-blur, 2px));-webkit-user-select:none;user-select:none}.text-element{display:inline-block;overflow:visible;line-height:1.2}img{width:100%;height:100%;display:block}.image-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}.image-placeholder{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden;background:#dfe5ee}.image-placeholder svg{width:min(56px,45%);height:auto;fill:none;stroke:#8c9ab0;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.action-button{min-height:30px;border-radius:var(--widget-renderer-radius);padding:6px 10px;font:600 12px/1.1 inherit;cursor:var(--widget-renderer-action-cursor, pointer)}.action-button.show-only-on-hover{opacity:0;pointer-events:none;transform:translateY(2px);transition:opacity var(--widget-renderer-transition-duration) var(--widget-renderer-transition-easing),transform var(--widget-renderer-transition-duration) var(--widget-renderer-transition-easing)}.widget-shell:hover .action-button.show-only-on-hover,.widget-shell:focus-within .action-button.show-only-on-hover{opacity:1;pointer-events:auto;transform:translateY(0)}.action-button.solid{border:1px solid #151515;background:#151515;color:#fff}.action-button.outline{border:1px solid #737373;background:#fff;color:#151515}\n"]
+			template: "@if (isLoading()) {\n  <widget-skeleton [size]=\"loadingSize()\" [darkMode]=\"darkMode()\" [locale]=\"resolvedLocale()\" />\n} @else {\n  @let widget = renderWidget();\n  <section class=\"widget-shell\" [style.width.px]=\"widgetWidth()\" [style.height.px]=\"widgetHeight()\">\n    <div\n      class=\"widget-viewport\"\n      [style.background-color]=\"widget.background.color || 'transparent'\"\n    >\n      <widget-background\n        [background]=\"widget.background\"\n        [sensitive]=\"backgroundSensitive()\"\n        [image]=\"backgroundImage()\"\n      />\n      @if (blockingIssues().length > 0) {\n        <widget-validation-overlay [issues]=\"blockingIssues()\" />\n      }\n      <widget-toolbar\n        [refresh]=\"widget.refresh\"\n        [hasSensitiveElements]=\"hasSensitiveElements()\"\n        [sensitiveVisible]=\"sensitiveVisible()\"\n        [locale]=\"resolvedLocale()\"\n        (refreshRequested)=\"refreshRequested.emit()\"\n        (sensitiveToggled)=\"toggleSensitive()\"\n      />\n      <div\n        class=\"widget-grid\"\n        [style.grid-template-rows]=\"gridRows()\"\n        [style.grid-template-columns]=\"gridColumns()\"\n      >\n        @for (element of widget.elements; track $index) {\n          <widget-element-renderer\n            [element]=\"element\"\n            [sensitiveVisible]=\"sensitiveVisible()\"\n            [locale]=\"resolvedLocale()\"\n            (actionRequested)=\"actionRequested.emit($event)\"\n          />\n        }\n      </div>\n    </div>\n    <div #tooltipLayer class=\"widget-tooltip-layer\">\n      @if (tooltip.state(); as tip) {\n        <span\n          class=\"chart-tooltip\"\n          role=\"tooltip\"\n          [style.--tooltip-x.px]=\"tip.x\"\n          [style.--tooltip-y.px]=\"tip.y\"\n          [style.--tooltip-border]=\"tip.color || 'rgb(0 0 0 / 0.12)'\"\n          ><span class=\"tooltip-marker\" [style.background]=\"tip.color\"></span\n          ><span>{{ tip.label }}</span\n          ><strong>{{ tip.value }}</strong></span\n        >\n      }\n    </div>\n  </section>\n}\n",
+			styles: [":host{display:block;--widget-renderer-radius: 8px;--widget-renderer-pill-radius: 999px;--widget-renderer-control-size: 28px;--widget-renderer-content-padding: 18px;--widget-renderer-shadow: 0 18px 40px #10182c38;--widget-renderer-transition-duration: .16s;--widget-renderer-transition-easing: ease;--widget-renderer-control-background: #10182ccc;--widget-renderer-control-border: #ffffff38;--widget-renderer-control-hover-border: #17233c;--widget-renderer-control-hover-background: #fff;--widget-renderer-control-hover-color: #17233c;--widget-renderer-action-background: #151515;--widget-renderer-action-color: #fff;--widget-renderer-action-outline-border: #737373;--widget-renderer-action-outline-background: #fff;--widget-renderer-action-outline-color: #151515}.widget-skeleton{position:relative;width:274px;max-width:100%;height:254px;box-sizing:border-box;overflow:hidden;border-radius:var(--widget-renderer-radius);background:#dfe5ee;box-shadow:var(--widget-renderer-shadow)}.widget-skeleton.is-wide{width:556px}.widget-skeleton.is-mini{width:133px;height:123px}.widget-skeleton.is-compact{width:274px;height:123px}.widget-skeleton.is-tall{width:133px;height:254px}.widget-skeleton.is-mega{width:556px;height:516px}.widget-skeleton.is-banner{width:274px;height:516px}.widget-skeleton.is-hero{width:1120px;height:516px}.widget-skeleton.is-mini .skeleton-toolbar{top:8px;right:8px;width:22px;height:22px}.widget-skeleton.is-mini .skeleton-content{box-sizing:border-box;height:100%;gap:3px;padding:24px 12px 8px}.widget-skeleton.is-mini .skeleton-line{height:6px}.widget-skeleton.is-mini .skeleton-line-title{height:10px}.widget-skeleton.is-mini .skeleton-chart{flex:1 1 auto;min-height:20px;margin-top:0}.widget-skeleton.is-mini .skeleton-button{width:42px;height:18px}.widget-skeleton:is(.is-compact,.is-tall) .skeleton-content{box-sizing:border-box;height:100%;gap:5px;padding:30px 12px 10px}.widget-skeleton.is-compact .skeleton-chart{min-height:28px;margin-top:0}.widget-skeleton.is-tall .skeleton-chart{flex:1 1 auto;min-height:45px;margin-top:0}.widget-skeleton:is(.is-mega,.is-banner,.is-hero) .skeleton-content{box-sizing:border-box;height:100%}.widget-skeleton:is(.is-mega,.is-banner,.is-hero) .skeleton-chart{flex:1 1 auto;min-height:180px}.widget-skeleton.is-dark{background:#182236}.skeleton-line,.skeleton-chart,.skeleton-button{background:linear-gradient(100deg,#dfe5ee 20%,#f2f5f9,#dfe5ee 70%);background-size:200% 100%;animation:skeleton-shimmer 1.8s linear infinite}.widget-skeleton.is-dark .skeleton-line,.widget-skeleton.is-dark .skeleton-chart,.widget-skeleton.is-dark .skeleton-button{background:linear-gradient(100deg,#182236 20%,#2b3b59,#182236 70%);background-size:200% 100%}.skeleton-toolbar{position:absolute;top:12px;right:12px;width:var(--widget-renderer-control-size);height:var(--widget-renderer-control-size);border-radius:var(--widget-renderer-radius);background:#c4cedd}.widget-skeleton.is-dark .skeleton-toolbar{background:#2b3b59}.skeleton-content{display:flex;flex-direction:column;gap:10px;padding:44px var(--widget-renderer-content-padding) 16px}.skeleton-line{display:block;height:10px;border-radius:var(--widget-renderer-pill-radius)}.skeleton-line-small{width:28%}.skeleton-line-title{width:72%;height:20px}.skeleton-line-copy{width:58%}.skeleton-chart{width:100%;height:64px;margin-top:2px;border-radius:var(--widget-renderer-radius)}.skeleton-button{align-self:flex-end;width:58px;height:30px;border-radius:var(--widget-renderer-radius)}@keyframes skeleton-shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.skeleton-line,.skeleton-chart,.skeleton-button{animation:none}}.widget-shell{position:relative;overflow:visible;box-sizing:border-box;color:#f6f7fb}.widget-viewport{position:absolute;inset:0;overflow:hidden;border-radius:var(--widget-renderer-radius);box-shadow:var(--widget-renderer-shadow)}.widget-viewport:after{position:absolute;inset:0;z-index:5;box-sizing:border-box;border:1px solid #10182c26;border-radius:inherit;content:\"\";pointer-events:none}.widget-tooltip-layer{position:absolute;inset:0;z-index:6;overflow:visible;pointer-events:none}.chart-tooltip{--tooltip-border: rgb(0 0 0 / .12);position:absolute;z-index:4;top:var(--tooltip-y);left:var(--tooltip-x);display:flex;min-width:104px;align-items:center;gap:7px;padding:10px;transform:translate(-50%,calc(-100% - 10px));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;white-space:nowrap}.chart-tooltip strong{margin-inline-start:auto;color:#464646;font-size:14px;font-weight:900}.tooltip-marker{width:9px;height:9px;flex:0 0 auto;border-radius:50%}.widget-grid{position:absolute;inset:0;display:grid;gap:8px;padding:18px}.chart-placeholder{width:100%;height:100%}.element-content{display:flex;width:100%;height:100%;min-width:0;min-height:0}.element-content:has(widget-chart-element){align-items:stretch}.element-content>widget-chart-element{flex:0 1 auto;width:100%;height:100%;max-width:100%;max-height:100%}.element-content>widget-chart-element.is-progress{height:auto}.divider-element{width:100%;height:2px;flex:0 0 auto;border-radius:var(--widget-renderer-pill-radius)}.divider-element.is-vertical{width:2px;height:100%}.element-content.is-sensitive{filter:blur(var(--sensitive-blur, 2px));-webkit-user-select:none;user-select:none}.text-element{display:inline-block;overflow:visible;line-height:1.2}img{width:100%;height:100%;display:block}.image-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit}.image-placeholder{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden;background:#dfe5ee}.image-placeholder svg{width:min(56px,45%);height:auto;fill:none;stroke:#8c9ab0;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.action-button{min-height:30px;border-radius:var(--widget-renderer-radius);padding:6px 10px;font:600 12px/1.1 inherit;cursor:var(--widget-renderer-action-cursor, pointer)}.action-button.show-only-on-hover{opacity:0;pointer-events:none;transform:translateY(2px);transition:opacity var(--widget-renderer-transition-duration) var(--widget-renderer-transition-easing),transform var(--widget-renderer-transition-duration) var(--widget-renderer-transition-easing)}.widget-shell:hover .action-button.show-only-on-hover,.widget-shell:focus-within .action-button.show-only-on-hover{opacity:1;pointer-events:auto;transform:translateY(0)}.action-button.solid{border:1px solid #151515;background:#151515;color:#fff}.action-button.outline{border:1px solid #737373;background:#fff;color:#151515}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -1380,6 +1634,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		validationRules: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validationRules",
+				required: false
+			}]
+		}],
 		refreshRequested: [{
 			type: i0.Output,
 			args: ["refreshRequested"]
@@ -1430,6 +1692,6 @@ function widgetSizeOrSquare(value) {
 		"hero"
 	].includes(value) ? value : "square";
 }
-export { WIDGET_CELL_HEIGHT, WIDGET_CELL_WIDTH, WIDGET_GAP, WIDGET_HEIGHT, WIDGET_PADDING, WidgetRenderer, WidgetValidationError, chartAccessibilitySummary, chartAriaLabel, defaultWidgetRendererLocale, dutchWidgetRendererLocale, elementGridStyle, frenchWidgetRendererLocale, germanWidgetRendererLocale, gridSpanSize, gridTemplate, isWidget, isWidgetContract, normalizeWidgetInput, parseWidgetInput, safeParseWidgetInput, widgetFootprint, widgetHeight, widgetWidth };
+export { WIDGET_CELL_HEIGHT, WIDGET_CELL_WIDTH, WIDGET_FINGERPRINT_VERSION, WIDGET_GAP, WIDGET_HEIGHT, WIDGET_PADDING, WidgetRenderer, WidgetValidationError, chartAccessibilitySummary, chartAriaLabel, computeWidgetFingerprint, defaultWidgetRendererLocale, dutchWidgetRendererLocale, elementGridStyle, frenchWidgetRendererLocale, germanWidgetRendererLocale, gridSpanSize, gridTemplate, isWidget, isWidgetContract, normalizeWidgetInput, parseWidgetInput, safeParseWidgetInput, widgetFootprint, widgetHeight, widgetWidth };
 
 //# sourceMappingURL=lieselthuriot-widget-renderer.mjs.map