@mintplayer/ng-spark 22.31.0 → 22.33.0

package/fesm2022/mintplayer-ng-spark-score-renderers.mjs

@@ -0,0 +1,801 @@
+import { Color } from "@mintplayer/ng-bootstrap";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, LOCALE_ID, computed, inject, input } from "@angular/core";
+import { formatNumber } from "@angular/common";
+import { BsProgressBarComponent, BsProgressComponent } from "@mintplayer/ng-bootstrap/progress-bar";
+import { BsSparklineComponent } from "@mintplayer/ng-bootstrap/charts/sparkline";
+import { BsTrendChartComponent } from "@mintplayer/ng-bootstrap/charts/trend";
+import { BsBadgeComponent } from "@mintplayer/ng-bootstrap/badge";
+import { provideSparkAttributeRenderers } from "@mintplayer/ng-spark/renderers";
+const sparkTrafficLightBands = [
+	{
+		min: 80,
+		color: "success"
+	},
+	{
+		min: 60,
+		color: "warning"
+	},
+	{ color: "danger" }
+];
+const sparkLetterGrades = [
+	{
+		min: 90,
+		color: "success",
+		label: "A"
+	},
+	{
+		min: 80,
+		color: "success",
+		label: "B"
+	},
+	{
+		min: 70,
+		color: "warning",
+		label: "C"
+	},
+	{
+		min: 50,
+		color: "warning",
+		label: "D"
+	},
+	{
+		color: "danger",
+		label: "F"
+	}
+];
+function resolveSparkScoreBands(option, fallback = sparkTrafficLightBands) {
+	if (option === "traffic-light") return sparkTrafficLightBands;
+	if (option === "letter-grades") return sparkLetterGrades;
+	if (Array.isArray(option) && option.length > 0) return option;
+	return fallback;
+}
+function sparkScoreBand(value, bands) {
+	if (value === null || value === void 0 || Number.isNaN(value)) return null;
+	let best = null;
+	for (const band of bands) {
+		const min = band.min ?? -Infinity;
+		if (value >= min && (best === null || min > (best.min ?? -Infinity))) best = band;
+	}
+	return best;
+}
+function sparkScoreColor(value, bands = sparkTrafficLightBands) {
+	const band = sparkScoreBand(value, bands);
+	return band ? Color[band.color] : Color.secondary;
+}
+function toSparkScoreNumber(raw) {
+	const value = typeof raw === "number" ? raw : raw === null || raw === void 0 || raw === "" ? NaN : Number(raw);
+	return Number.isNaN(value) ? null : value;
+}
+function numberOption(value, fallback) {
+	return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+function stringOption(value, fallback) {
+	return typeof value === "string" ? value : fallback;
+}
+var SparkThresholdBarComponent = class SparkThresholdBarComponent {
+	locale = inject(LOCALE_ID);
+	value = input(...ngDevMode ? [void 0, { debugName: "value" }] : /* istanbul ignore next */ []);
+	options = input(...ngDevMode ? [void 0, { debugName: "options" }] : /* istanbul ignore next */ []);
+	settings = computed(() => {
+		const o = this.options() ?? {};
+		const decimals = Math.max(0, Math.trunc(numberOption(o.decimals, 1)));
+		return {
+			min: numberOption(o.min, 0),
+			max: numberOption(o.max, 100),
+			bands: resolveSparkScoreBands(o.bands),
+			decimals,
+			suffix: stringOption(o.suffix, "%"),
+			label: stringOption(o.label, "Value"),
+			width: stringOption(o.width, "80px"),
+			height: stringOption(o.height, "8px"),
+			showValue: o.showValue !== false
+		};
+	}, ...ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []);
+	view = computed(() => {
+		const value = toSparkScoreNumber(this.value());
+		if (value === null) return null;
+		const s = this.settings();
+		return {
+			value,
+			text: formatNumber(value, this.locale, `1.${s.decimals}-${s.decimals}`) + s.suffix,
+			color: sparkScoreColor(value, s.bands)
+		};
+	}, ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkThresholdBarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkThresholdBarComponent,
+		isStandalone: true,
+		selector: "spark-threshold-bar",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (view(); as v) {
+      <div class="d-flex align-items-center gap-2">
+        <bs-progress [style.width]="settings().width" [style.height]="settings().height">
+          <bs-progress-bar [value]="v.value" [minimum]="settings().min" [maximum]="settings().max" [color]="v.color"
+                           [ariaLabel]="settings().label" [valueText]="v.text" />
+        </bs-progress>
+        @if (settings().showValue) {
+          <span class="small text-nowrap">{{ v.text }}</span>
+        }
+      </div>
+    } @else {
+      <span class="text-muted small">—</span>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BsProgressComponent,
+			selector: "bs-progress",
+			inputs: [
+				"height",
+				"isIndeterminate",
+				"ariaLabel"
+			]
+		}, {
+			kind: "component",
+			type: BsProgressBarComponent,
+			selector: "bs-progress-bar",
+			inputs: [
+				"minimum",
+				"maximum",
+				"value",
+				"color",
+				"striped",
+				"animated",
+				"ariaLabel",
+				"valueText"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkThresholdBarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-threshold-bar",
+			imports: [BsProgressComponent, BsProgressBarComponent],
+			template: `
+    @if (view(); as v) {
+      <div class="d-flex align-items-center gap-2">
+        <bs-progress [style.width]="settings().width" [style.height]="settings().height">
+          <bs-progress-bar [value]="v.value" [minimum]="settings().min" [maximum]="settings().max" [color]="v.color"
+                           [ariaLabel]="settings().label" [valueText]="v.text" />
+        </bs-progress>
+        @if (settings().showValue) {
+          <span class="small text-nowrap">{{ v.text }}</span>
+        }
+      </div>
+    } @else {
+      <span class="text-muted small">—</span>
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}]
+	}
+});
+function formatSparkDelta(raw, options) {
+	const o = options ?? {};
+	const value = toSparkScoreNumber(raw);
+	if (value === null) return {
+		up: false,
+		down: false,
+		text: stringOption(o.empty, "—"),
+		tone: "text-muted"
+	};
+	const decimals = Math.min(100, Math.max(0, Math.trunc(numberOption(o.decimals, 1))));
+	const up = value > 0;
+	const down = value < 0;
+	const good = o.higherIsBetter === false ? down : up;
+	const bad = o.higherIsBetter === false ? up : down;
+	return {
+		up,
+		down,
+		text: `${up ? "+" : ""}${value.toFixed(decimals)}${stringOption(o.suffix, "")}`,
+		tone: good ? "text-success" : bad ? "text-danger" : "text-muted"
+	};
+}
+var SparkDeltaComponent = class SparkDeltaComponent {
+	value = input(...ngDevMode ? [void 0, { debugName: "value" }] : /* istanbul ignore next */ []);
+	options = input(...ngDevMode ? [void 0, { debugName: "options" }] : /* istanbul ignore next */ []);
+	view = computed(() => formatSparkDelta(this.value(), this.options()), ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkDeltaComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: SparkDeltaComponent,
+		isStandalone: true,
+		selector: "spark-delta",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `<span class="small" [class]="view().tone">{{ view().text }}</span>`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkDeltaComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-delta",
+			template: `<span class="small" [class]="view().tone">{{ view().text }}</span>`,
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}]
+	}
+});
+function toSparkTrendPoints(value, minPoints = 2) {
+	if (!Array.isArray(value)) return null;
+	const points = [];
+	for (let i = 0; i < value.length; i++) {
+		const point = value[i];
+		if (point === null || typeof point === "number") points.push({
+			x: i,
+			y: point
+		});
+		else if (typeof point === "object" && "y" in point) points.push({
+			x: point.x,
+			y: point.y
+		});
+		else return null;
+	}
+	return points.length >= minPoints ? points : null;
+}
+var SparkTrendBase = class SparkTrendBase {
+	value = input(...ngDevMode ? [void 0, { debugName: "value" }] : /* istanbul ignore next */ []);
+	options = input(...ngDevMode ? [void 0, { debugName: "options" }] : /* istanbul ignore next */ []);
+	settings = computed(() => {
+		const o = this.options() ?? {};
+		const label = typeof o.label === "string" ? o.label : void 0;
+		return {
+			display: o.display === "chart" ? "chart" : "sparkline",
+			yMin: typeof o.yMin === "number" ? o.yMin : void 0,
+			yMax: typeof o.yMax === "number" ? o.yMax : void 0,
+			label,
+			minPoints: Math.max(1, Math.trunc(numberOption(o.minPoints, 2))),
+			width: stringOption(o.width, "90px"),
+			height: stringOption(o.height, "24px"),
+			goal: typeof o.goal === "number" ? o.goal : void 0,
+			goalLabel: typeof o.goalLabel === "string" ? o.goalLabel : void 0,
+			seriesId: stringOption(o.seriesId, "value"),
+			seriesLabel: stringOption(o.seriesLabel, label ?? "")
+		};
+	}, ...ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []);
+	points = computed(() => toSparkTrendPoints(this.value(), this.settings().minPoints), ...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkTrendBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: SparkTrendBase,
+		isStandalone: true,
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkTrendBase,
+	decorators: [{ type: Directive }],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}]
+	}
+});
+var SparkTrendSparklineComponent = class SparkTrendSparklineComponent extends SparkTrendBase {
+	ys(points) {
+		return points.map((p) => p.y);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkTrendSparklineComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkTrendSparklineComponent,
+		isStandalone: true,
+		selector: "spark-trend-sparkline",
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    @if (points(); as p) {
+      <bs-sparkline class="d-inline-block" [style.width]="settings().width" [style.height]="settings().height"
+                    [points]="ys(p)" [yMin]="settings().yMin" [yMax]="settings().yMax"
+                    [inputLabel]="settings().label" />
+    } @else {
+      <span class="text-muted small">—</span>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BsSparklineComponent,
+			selector: "bs-sparkline",
+			inputs: [
+				"points",
+				"area",
+				"showLastDot",
+				"yMin",
+				"yMax",
+				"locale",
+				"inputLabel",
+				"summaryFormatter"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkTrendSparklineComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-trend-sparkline",
+			imports: [BsSparklineComponent],
+			template: `
+    @if (points(); as p) {
+      <bs-sparkline class="d-inline-block" [style.width]="settings().width" [style.height]="settings().height"
+                    [points]="ys(p)" [yMin]="settings().yMin" [yMax]="settings().yMax"
+                    [inputLabel]="settings().label" />
+    } @else {
+      <span class="text-muted small">—</span>
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}]
+});
+var SparkTrendChartComponent = class SparkTrendChartComponent extends SparkTrendBase {
+	series = computed(() => {
+		const s = this.settings();
+		return [{
+			id: s.seriesId,
+			label: s.seriesLabel,
+			points: this.points() ?? []
+		}];
+	}, ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkTrendChartComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkTrendChartComponent,
+		isStandalone: true,
+		selector: "spark-trend-chart",
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    @if (points()) {
+      <bs-trend-chart [series]="series()" [yMin]="settings().yMin" [yMax]="settings().yMax"
+                      [goal]="settings().goal" [goalLabel]="settings().goalLabel" [inputLabel]="settings().label" />
+    } @else {
+      <span class="text-muted small">—</span>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BsTrendChartComponent,
+			selector: "bs-trend-chart",
+			inputs: [
+				"series",
+				"area",
+				"stacked",
+				"yMin",
+				"yMax",
+				"goal",
+				"goalLabel",
+				"locale",
+				"summary",
+				"inputLabel",
+				"summaryFormatter"
+			],
+			outputs: ["pointHover", "pointSelect"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkTrendChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-trend-chart",
+			imports: [BsTrendChartComponent],
+			template: `
+    @if (points()) {
+      <bs-trend-chart [series]="series()" [yMin]="settings().yMin" [yMax]="settings().yMax"
+                      [goal]="settings().goal" [goalLabel]="settings().goalLabel" [inputLabel]="settings().label" />
+    } @else {
+      <span class="text-muted small">—</span>
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}]
+});
+var SparkTrendComponent = class SparkTrendComponent extends SparkTrendBase {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkTrendComponent,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkTrendComponent,
+		isStandalone: true,
+		selector: "spark-trend",
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    @if (settings().display === 'chart') {
+      <spark-trend-chart [value]="value()" [options]="options()" />
+    } @else {
+      <spark-trend-sparkline [value]="value()" [options]="options()" />
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: SparkTrendSparklineComponent,
+			selector: "spark-trend-sparkline"
+		}, {
+			kind: "component",
+			type: SparkTrendChartComponent,
+			selector: "spark-trend-chart"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkTrendComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-trend",
+			imports: [SparkTrendSparklineComponent, SparkTrendChartComponent],
+			template: `
+    @if (settings().display === 'chart') {
+      <spark-trend-chart [value]="value()" [options]="options()" />
+    } @else {
+      <spark-trend-sparkline [value]="value()" [options]="options()" />
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush
+		}]
+	}]
+});
+var SparkGaugeComponent = class SparkGaugeComponent {
+	locale = inject(LOCALE_ID);
+	value = input(...ngDevMode ? [void 0, { debugName: "value" }] : /* istanbul ignore next */ []);
+	options = input(...ngDevMode ? [void 0, { debugName: "options" }] : /* istanbul ignore next */ []);
+	settings = computed(() => {
+		const o = this.options() ?? {};
+		return {
+			min: numberOption(o.min, 0),
+			max: numberOption(o.max, 100),
+			bands: resolveSparkScoreBands(o.bands),
+			decimals: Math.max(0, Math.trunc(numberOption(o.decimals, 0))),
+			suffix: stringOption(o.suffix, ""),
+			label: stringOption(o.label, "Score"),
+			size: Math.max(1, numberOption(o.size, 48))
+		};
+	}, ...ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []);
+	view = computed(() => {
+		const value = toSparkScoreNumber(this.value());
+		if (value === null) return null;
+		const s = this.settings();
+		const band = sparkScoreBand(value, s.bands);
+		const span = s.max - s.min;
+		const share = span > 0 ? (value - s.min) / span : 0;
+		return {
+			value,
+			text: formatNumber(value, this.locale, `1.${s.decimals}-${s.decimals}`) + s.suffix,
+			color: band?.color ?? "secondary",
+			grade: band?.label ?? null,
+			badge: Color[band?.color ?? "secondary"],
+			arc: Math.round(Math.min(1, Math.max(0, share)) * 1e3) / 10
+		};
+	}, ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkGaugeComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkGaugeComponent,
+		isStandalone: true,
+		selector: "spark-gauge",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `
+    @if (view(); as v) {
+      <span class="d-inline-flex align-items-center gap-2" role="meter"
+            [attr.aria-label]="settings().label" [attr.aria-valuenow]="v.value"
+            [attr.aria-valuemin]="settings().min" [attr.aria-valuemax]="settings().max"
+            [attr.aria-valuetext]="v.grade ? v.text + ' (' + v.grade + ')' : v.text">
+        <svg viewBox="0 0 36 36" [attr.width]="settings().size" [attr.height]="settings().size" aria-hidden="true">
+          <circle class="spark-gauge-track" cx="18" cy="18" r="15.9155" fill="none" stroke-width="3.5" />
+          <circle class="spark-gauge-arc" cx="18" cy="18" r="15.9155" fill="none" stroke-width="3.5"
+                  stroke-linecap="round" transform="rotate(-90 18 18)"
+                  [attr.stroke]="'var(--bs-' + v.color + ')'" [attr.stroke-dasharray]="v.arc + ' 100'" />
+          <text x="18" y="18" text-anchor="middle" dominant-baseline="central" class="spark-gauge-text">{{ v.text }}</text>
+        </svg>
+        @if (v.grade) {
+          <bs-badge [type]="v.badge">{{ v.grade }}</bs-badge>
+        }
+      </span>
+    } @else {
+      <span class="text-muted small">—</span>
+    }
+  `,
+		isInline: true,
+		styles: [".spark-gauge-track{stroke:var(--bs-secondary-bg)}.spark-gauge-text{fill:var(--bs-body-color);font-size:10px;font-weight:600}\n"],
+		dependencies: [{
+			kind: "component",
+			type: BsBadgeComponent,
+			selector: "bs-badge",
+			inputs: [
+				"type",
+				"unit",
+				"decorative"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkGaugeComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-gauge",
+			imports: [BsBadgeComponent],
+			template: `
+    @if (view(); as v) {
+      <span class="d-inline-flex align-items-center gap-2" role="meter"
+            [attr.aria-label]="settings().label" [attr.aria-valuenow]="v.value"
+            [attr.aria-valuemin]="settings().min" [attr.aria-valuemax]="settings().max"
+            [attr.aria-valuetext]="v.grade ? v.text + ' (' + v.grade + ')' : v.text">
+        <svg viewBox="0 0 36 36" [attr.width]="settings().size" [attr.height]="settings().size" aria-hidden="true">
+          <circle class="spark-gauge-track" cx="18" cy="18" r="15.9155" fill="none" stroke-width="3.5" />
+          <circle class="spark-gauge-arc" cx="18" cy="18" r="15.9155" fill="none" stroke-width="3.5"
+                  stroke-linecap="round" transform="rotate(-90 18 18)"
+                  [attr.stroke]="'var(--bs-' + v.color + ')'" [attr.stroke-dasharray]="v.arc + ' 100'" />
+          <text x="18" y="18" text-anchor="middle" dominant-baseline="central" class="spark-gauge-text">{{ v.text }}</text>
+        </svg>
+        @if (v.grade) {
+          <bs-badge [type]="v.badge">{{ v.grade }}</bs-badge>
+        }
+      </span>
+    } @else {
+      <span class="text-muted small">—</span>
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [".spark-gauge-track{stroke:var(--bs-secondary-bg)}.spark-gauge-text{fill:var(--bs-body-color);font-size:10px;font-weight:600}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}]
+	}
+});
+const sparkScoreRenderers = [
+	{
+		name: "spark-gauge",
+		columnComponent: SparkGaugeComponent,
+		detailComponent: SparkGaugeComponent
+	},
+	{
+		name: "spark-threshold-bar",
+		columnComponent: SparkThresholdBarComponent,
+		detailComponent: SparkThresholdBarComponent
+	},
+	{
+		name: "spark-trend",
+		columnComponent: SparkTrendComponent,
+		detailComponent: SparkTrendComponent
+	},
+	{
+		name: "spark-delta",
+		columnComponent: SparkDeltaComponent,
+		detailComponent: SparkDeltaComponent
+	}
+];
+function provideSparkScoreRenderers(renderers = []) {
+	return provideSparkAttributeRenderers([...renderers, ...sparkScoreRenderers]);
+}
+export { SparkDeltaComponent, SparkGaugeComponent, SparkThresholdBarComponent, SparkTrendChartComponent, SparkTrendComponent, SparkTrendSparklineComponent, formatSparkDelta, provideSparkScoreRenderers, resolveSparkScoreBands, sparkLetterGrades, sparkScoreBand, sparkScoreColor, sparkScoreRenderers, sparkTrafficLightBands, toSparkScoreNumber, toSparkTrendPoints };
+
+//# sourceMappingURL=mintplayer-ng-spark-score-renderers.mjs.map