@mintplayer/ng-spark 22.32.0 → 22.34.0

package/fesm2022/mintplayer-ng-spark-dashboards.mjs

@@ -0,0 +1,726 @@
+import { NgComponentOutlet, formatNumber } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, LOCALE_ID, computed, inject, input } from "@angular/core";
+import { Color } from "@mintplayer/ng-bootstrap";
+import { BsProgressBarComponent, BsProgressComponent } from "@mintplayer/ng-bootstrap/progress-bar";
+import { BsTableComponent } from "@mintplayer/ng-bootstrap/table";
+import { SparkIconComponent } from "@mintplayer/ng-spark/icon";
+import { SparkLanguageService } from "@mintplayer/ng-spark/services";
+import { BsCardBodyComponent, BsCardComponent } from "@mintplayer/ng-bootstrap/card";
+import { ShowedOn, hasShowedOnFlag } from "@mintplayer/ng-spark/models";
+import { ResolveTranslationPipe, TranslateKeyPipe } from "@mintplayer/ng-spark/pipes";
+import { SPARK_ATTRIBUTE_RENDERERS, rendererValue, withDeclaredInputs } from "@mintplayer/ng-spark/renderers";
+import { provideSparkDetailLayouts } from "@mintplayer/ng-spark/panels";
+function toSparkNumber(value) {
+	if (typeof value === "number") return Number.isFinite(value) ? value : null;
+	if (typeof value === "string" && value.trim() !== "") {
+		const parsed = Number(value);
+		return Number.isFinite(parsed) ? parsed : null;
+	}
+	return null;
+}
+function formatSparkBytes(bytes, locale = "en") {
+	if (bytes == null || !Number.isFinite(bytes)) return "—";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB",
+		"PB"
+	];
+	let value = bytes;
+	let unit = 0;
+	while (Math.abs(value) >= 1024 && unit < units.length - 1) {
+		value /= 1024;
+		unit++;
+	}
+	return unit === 0 ? `${formatNumber(value, locale, "1.0-0")} B` : `${formatNumber(value, locale, "1.1-1")} ${units[unit]}`;
+}
+function formatSparkDashboardValue(value, format, locale = "en", decimals) {
+	if (value === null || value === void 0 || value === "") return "—";
+	switch (format) {
+		case "bytes": return formatSparkBytes(toSparkNumber(value), locale);
+		case "percent": {
+			const n = toSparkNumber(value);
+			const d = decimals ?? 1;
+			return n === null ? "—" : `${formatNumber(n, locale, `1.${d}-${d}`)}%`;
+		}
+		case "date":
+		case "datetime": {
+			const date = new Date(String(value));
+			if (Number.isNaN(date.getTime())) return String(value);
+			return format === "date" ? date.toLocaleDateString(locale) : date.toLocaleString(locale);
+		}
+		case "text": return String(value);
+		default: {
+			const n = typeof value === "boolean" ? null : toSparkNumber(value);
+			if (n === null) return String(value);
+			const d = decimals ?? 0;
+			return formatNumber(n, locale, `1.${d}-${d}`);
+		}
+	}
+}
+function sparkThresholdColor(value, thresholds) {
+	if (value === null) return null;
+	const past = (limit) => typeof limit === "number" && (thresholds.direction === "below" ? value <= limit : value >= limit);
+	if (past(thresholds.danger)) return "danger";
+	if (past(thresholds.warning)) return "warning";
+	return null;
+}
+var SparkStatComponent = class SparkStatComponent {
+	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(() => this.options() ?? {}, ...ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []);
+	text = computed(() => {
+		const s = this.settings();
+		const text = formatSparkDashboardValue(this.value(), s.format, this.locale, typeof s.decimals === "number" ? s.decimals : void 0);
+		return text === "—" || typeof s.suffix !== "string" ? text : text + s.suffix;
+	}, ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	color = computed(() => sparkThresholdColor(toSparkNumber(this.value()), this.settings()), ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkStatComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: SparkStatComponent,
+		isStandalone: true,
+		selector: "spark-stat",
+		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="spark-stat" [class.text-warning-emphasis]="color() === 'warning'" [class.text-danger]="color() === 'danger'"
+          [class.text-body-secondary]="text() === '—'" [attr.data-threshold]="color()">{{ text() }}</span>
+  `,
+		isInline: true,
+		styles: [":host{display:inline-block}.spark-stat{font-size:var(--spark-stat-font-size, 1.75rem);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkStatComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-stat",
+			template: `
+    <span class="spark-stat" [class.text-warning-emphasis]="color() === 'warning'" [class.text-danger]="color() === 'danger'"
+          [class.text-body-secondary]="text() === '—'" [attr.data-threshold]="color()">{{ text() }}</span>
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host{display:inline-block}.spark-stat{font-size:var(--spark-stat-font-size, 1.75rem);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}]
+	}
+});
+var SparkMeterComponent = class SparkMeterComponent {
+	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(() => this.options() ?? {}, ...ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []);
+	label = computed(() => typeof this.settings().label === "string" ? this.settings().label : "Usage", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	view = computed(() => {
+		const raw = this.value();
+		const s = this.settings();
+		const isPair = raw !== null && typeof raw === "object" && "value" in raw;
+		const value = toSparkNumber(isPair ? raw.value : raw);
+		const max = toSparkNumber(isPair ? raw.max : void 0) ?? toSparkNumber(s.max) ?? (isPair ? null : 100);
+		if (value === null || max === null || max <= 0) return null;
+		const share = Math.round(Math.min(100, Math.max(0, value / max * 100)) * 10) / 10;
+		const threshold = sparkThresholdColor(share, {
+			warning: typeof s.warning === "number" ? s.warning : 75,
+			danger: typeof s.danger === "number" ? s.danger : 90
+		});
+		const format = s.format ?? "number";
+		return {
+			value,
+			max,
+			share,
+			color: threshold === "danger" ? Color.danger : threshold === "warning" ? Color.warning : Color.success,
+			text: `${formatSparkDashboardValue(value, format, this.locale)} / ${formatSparkDashboardValue(max, format, this.locale)} (${formatNumber(share, this.locale, "1.0-1")}%)`
+		};
+	}, ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkMeterComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkMeterComponent,
+		isStandalone: true,
+		selector: "spark-meter",
+		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 flex-column gap-1 spark-meter">
+        <bs-progress [style.height]="'.75rem'">
+          <bs-progress-bar [value]="v.share" [minimum]="0" [maximum]="100" [color]="v.color"
+                           [ariaLabel]="label()" [valueText]="v.text" />
+        </bs-progress>
+        <span class="small text-nowrap" data-meter-text>{{ v.text }}</span>
+      </div>
+    } @else {
+      <span class="text-muted small">—</span>
+    }
+  `,
+		isInline: true,
+		styles: [":host{display:block;min-width:8rem}\n"],
+		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: SparkMeterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-meter",
+			imports: [BsProgressComponent, BsProgressBarComponent],
+			template: `
+    @if (view(); as v) {
+      <div class="d-flex flex-column gap-1 spark-meter">
+        <bs-progress [style.height]="'.75rem'">
+          <bs-progress-bar [value]="v.share" [minimum]="0" [maximum]="100" [color]="v.color"
+                           [ariaLabel]="label()" [valueText]="v.text" />
+        </bs-progress>
+        <span class="small text-nowrap" data-meter-text>{{ v.text }}</span>
+      </div>
+    } @else {
+      <span class="text-muted small">—</span>
+    }
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [":host{display:block;min-width:8rem}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}]
+	}
+});
+var SparkDashboardTableComponent = class SparkDashboardTableComponent {
+	locale = inject(LOCALE_ID);
+	lang = inject(SparkLanguageService);
+	value = input(...ngDevMode ? [void 0, { debugName: "value" }] : /* istanbul ignore next */ []);
+	options = input(...ngDevMode ? [void 0, { debugName: "options" }] : /* istanbul ignore next */ []);
+	settings = computed(() => this.options() ?? {}, ...ngDevMode ? [{ debugName: "settings" }] : /* istanbul ignore next */ []);
+	rows = computed(() => toSparkTableRows(this.value()), ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	columns = computed(() => {
+		const declared = this.settings().columns;
+		if (Array.isArray(declared) && declared.length > 0) return declared.filter((c) => typeof c?.key === "string");
+		const first = this.rows()[0];
+		return first ? Object.keys(first).map((key) => ({ key })) : [];
+	}, ...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+	cells = computed(() => {
+		const columns = this.columns();
+		return this.rows().map((row) => columns.map((column) => this.cell(row[column.key], column)));
+	}, ...ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []);
+	header(column) {
+		return column.label ? this.lang.t(column.label, column.label) : column.key;
+	}
+	isNumeric(column) {
+		return column?.format === "number" || column?.format === "bytes" || column?.format === "percent";
+	}
+	cell(value, column) {
+		if (column.format === "boolean") return {
+			text: value === true ? this.lang.t("dashboards.yes", "yes") : "",
+			check: value === true
+		};
+		if (column.translate && value !== null && value !== void 0 && value !== "") return {
+			text: this.lang.t(column.translate + String(value), String(value)),
+			check: false
+		};
+		return {
+			text: formatSparkDashboardValue(value, column.format, this.locale),
+			check: false
+		};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkDashboardTableComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkDashboardTableComponent,
+		isStandalone: true,
+		selector: "spark-dashboard-table",
+		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 (rows().length > 0) {
+      <bs-table [isResponsive]="true" class="d-block mb-0">
+        <thead>
+          <tr>
+            @for (column of columns(); track column.key) {
+              <th [class.text-end]="isNumeric(column)">{{ header(column) }}</th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of cells(); track $index) {
+            <tr>
+              @for (cell of row; track $index; let i = $index) {
+                <td [class.text-end]="isNumeric(columns()[i])" [class.text-break]="!isNumeric(columns()[i])">
+                  @if (cell.check) { <spark-icon name="check-lg" class="text-success" aria-hidden="true" /><span class="visually-hidden">{{ cell.text }}</span> } @else { {{ cell.text }} }
+                </td>
+              }
+            </tr>
+          }
+        </tbody>
+      </bs-table>
+    } @else {
+      <span class="text-body-secondary small" data-empty>{{ lang.t(settings().empty ?? 'dashboards.empty', '—') }}</span>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: BsTableComponent,
+			selector: "bs-table",
+			inputs: [
+				"isResponsive",
+				"striped",
+				"hover",
+				"border",
+				"ariaRowCount"
+			]
+		}, {
+			kind: "component",
+			type: SparkIconComponent,
+			selector: "spark-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkDashboardTableComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-dashboard-table",
+			imports: [BsTableComponent, SparkIconComponent],
+			template: `
+    @if (rows().length > 0) {
+      <bs-table [isResponsive]="true" class="d-block mb-0">
+        <thead>
+          <tr>
+            @for (column of columns(); track column.key) {
+              <th [class.text-end]="isNumeric(column)">{{ header(column) }}</th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of cells(); track $index) {
+            <tr>
+              @for (cell of row; track $index; let i = $index) {
+                <td [class.text-end]="isNumeric(columns()[i])" [class.text-break]="!isNumeric(columns()[i])">
+                  @if (cell.check) { <spark-icon name="check-lg" class="text-success" aria-hidden="true" /><span class="visually-hidden">{{ cell.text }}</span> } @else { {{ cell.text }} }
+                </td>
+              }
+            </tr>
+          }
+        </tbody>
+      </bs-table>
+    } @else {
+      <span class="text-body-secondary small" data-empty>{{ lang.t(settings().empty ?? 'dashboards.empty', '—') }}</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 toSparkTableRows(value) {
+	if (Array.isArray(value)) return value.filter((r) => r !== null && typeof r === "object" && !Array.isArray(r));
+	if (value !== null && typeof value === "object") return Object.entries(value).map(([key, v]) => ({
+		key,
+		value: v
+	}));
+	if (typeof value === "string" && value.trim().startsWith("[")) try {
+		return toSparkTableRows(JSON.parse(value));
+	} catch {
+		return [];
+	}
+	return [];
+}
+const SPARK_DASHBOARD_METADATA_KEY = "dashboard";
+function isSparkDashboard(item) {
+	const marker = item?.metadata?.[SPARK_DASHBOARD_METADATA_KEY];
+	return marker !== null && typeof marker === "object";
+}
+var SparkDashboardComponent = class SparkDashboardComponent {
+	locale = inject(LOCALE_ID);
+	renderers = inject(SPARK_ATTRIBUTE_RENDERERS);
+	context = input.required(...ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []);
+	sections = computed(() => {
+		const { item, entityType } = this.context();
+		const loaded = new Map(item.attributes.map((a) => [a.name, a]));
+		const formData = {};
+		for (const a of item.attributes) formData[a.name] = rendererValue(a);
+		const tiles = (entityType.attributes ?? []).filter((a) => loaded.has(a.name) && hasShowedOnFlag(loaded.get(a.name)?.showedOn ?? a.showedOn, ShowedOn.PersistentObject)).sort((a, b) => a.order - b.order).map((attribute) => this.tile(attribute, item, formData));
+		const groups = [...entityType.groups ?? []].sort((a, b) => a.order - b.order);
+		const groupIds = new Set(groups.map((g) => g.id));
+		const sections = [];
+		const ungrouped = tiles.filter((t) => !t.attribute.group || !groupIds.has(t.attribute.group));
+		if (ungrouped.length > 0) sections.push({
+			id: "__ungrouped__",
+			name: null,
+			tiles: ungrouped
+		});
+		for (const group of groups) {
+			const grouped = tiles.filter((t) => t.attribute.group === group.id);
+			if (grouped.length > 0) sections.push({
+				id: group.id,
+				name: group.name,
+				label: group.label,
+				tiles: grouped
+			});
+		}
+		return sections;
+	}, ...ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []);
+	generatedAt = computed(() => {
+		const marker = this.context().item.metadata?.[SPARK_DASHBOARD_METADATA_KEY];
+		const at = marker && typeof marker === "object" ? marker["generatedAtUtc"] : null;
+		if (typeof at !== "string") return null;
+		const date = new Date(at);
+		return Number.isNaN(date.getTime()) ? null : date.toLocaleTimeString(this.locale);
+	}, ...ngDevMode ? [{ debugName: "generatedAt" }] : /* istanbul ignore next */ []);
+	tile(attribute, item, formData) {
+		const value = rendererValue(item.attributes.find((a) => a.name === attribute.name));
+		const component = (attribute.renderer ? this.renderers.find((r) => r.name === attribute.renderer) : void 0)?.detailComponent ?? null;
+		const columnSpan = attribute.columnSpan ?? (attribute.renderer === "spark-dashboard-table" ? 3 : 1);
+		return {
+			attribute,
+			span: columnSpan >= 3 ? "row" : columnSpan === 2 ? 2 : 1,
+			component,
+			inputs: component ? withDeclaredInputs(component, {
+				value,
+				attribute,
+				options: attribute.rendererOptions,
+				formData,
+				item
+			}) : {},
+			text: formatSparkDashboardValue(value, void 0, this.locale)
+		};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparkDashboardComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparkDashboardComponent,
+		isStandalone: true,
+		selector: "spark-dashboard",
+		inputs: { context: {
+			classPropertyName: "context",
+			publicName: "context",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: `
+    <div class="spark-dashboard mx-3 my-2">
+      @for (section of sections(); track section.id) {
+        <section class="mb-3" [attr.data-section]="section.name">
+          @if (section.name) {
+            <h3 class="h6 text-body-secondary mb-2">{{ section.label | resolveTranslation:section.name }}</h3>
+          }
+          <div class="spark-dashboard-tiles">
+            @for (tile of section.tiles; track tile.attribute.id) {
+              <bs-card class="d-block h-100" [class.spark-dashboard-span-2]="tile.span === 2"
+                       [class.spark-dashboard-span-row]="tile.span === 'row'" [attr.data-tile]="tile.attribute.name">
+                <bs-card-body>
+                  <div class="small text-body-secondary mb-1">{{ tile.attribute.label | resolveTranslation:tile.attribute.name }}</div>
+                  @if (tile.component) {
+                    <ng-container *ngComponentOutlet="tile.component; inputs: tile.inputs" />
+                  } @else {
+                    <div class="fs-4 fw-semibold text-break">{{ tile.text }}</div>
+                  }
+                </bs-card-body>
+              </bs-card>
+            }
+          </div>
+        </section>
+      }
+      @if (generatedAt(); as at) {
+        <p class="small text-body-secondary mb-0" data-generated>{{ 'dashboards.updated' | t }} {{ at }}</p>
+      }
+    </div>
+  `,
+		isInline: true,
+		styles: [".spark-dashboard-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(12rem,100%),1fr));gap:.75rem}.spark-dashboard-tiles>*{min-width:0}.spark-dashboard-span-row{grid-column:1 / -1}@media(min-width:576px){.spark-dashboard-span-2{grid-column:span 2}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "component",
+				type: BsCardComponent,
+				selector: "bs-card",
+				inputs: ["color", "outline"]
+			},
+			{
+				kind: "component",
+				type: BsCardBodyComponent,
+				selector: "bs-card-body"
+			},
+			{
+				kind: "pipe",
+				type: ResolveTranslationPipe,
+				name: "resolveTranslation"
+			},
+			{
+				kind: "pipe",
+				type: TranslateKeyPipe,
+				name: "t"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparkDashboardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "spark-dashboard",
+			imports: [
+				NgComponentOutlet,
+				BsCardComponent,
+				BsCardBodyComponent,
+				ResolveTranslationPipe,
+				TranslateKeyPipe
+			],
+			template: `
+    <div class="spark-dashboard mx-3 my-2">
+      @for (section of sections(); track section.id) {
+        <section class="mb-3" [attr.data-section]="section.name">
+          @if (section.name) {
+            <h3 class="h6 text-body-secondary mb-2">{{ section.label | resolveTranslation:section.name }}</h3>
+          }
+          <div class="spark-dashboard-tiles">
+            @for (tile of section.tiles; track tile.attribute.id) {
+              <bs-card class="d-block h-100" [class.spark-dashboard-span-2]="tile.span === 2"
+                       [class.spark-dashboard-span-row]="tile.span === 'row'" [attr.data-tile]="tile.attribute.name">
+                <bs-card-body>
+                  <div class="small text-body-secondary mb-1">{{ tile.attribute.label | resolveTranslation:tile.attribute.name }}</div>
+                  @if (tile.component) {
+                    <ng-container *ngComponentOutlet="tile.component; inputs: tile.inputs" />
+                  } @else {
+                    <div class="fs-4 fw-semibold text-break">{{ tile.text }}</div>
+                  }
+                </bs-card-body>
+              </bs-card>
+            }
+          </div>
+        </section>
+      }
+      @if (generatedAt(); as at) {
+        <p class="small text-body-secondary mb-0" data-generated>{{ 'dashboards.updated' | t }} {{ at }}</p>
+      }
+    </div>
+  `,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: [".spark-dashboard-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(12rem,100%),1fr));gap:.75rem}.spark-dashboard-tiles>*{min-width:0}.spark-dashboard-span-row{grid-column:1 / -1}@media(min-width:576px){.spark-dashboard-span-2{grid-column:span 2}}\n"]
+		}]
+	}],
+	propDecorators: { context: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "context",
+			required: true
+		}]
+	}] }
+});
+const sparkDashboardRenderers = [
+	{
+		name: "spark-stat",
+		columnComponent: SparkStatComponent,
+		detailComponent: SparkStatComponent
+	},
+	{
+		name: "spark-meter",
+		columnComponent: SparkMeterComponent,
+		detailComponent: SparkMeterComponent
+	},
+	{
+		name: "spark-dashboard-table",
+		detailComponent: SparkDashboardTableComponent
+	}
+];
+function provideSparkDashboards() {
+	return provideSparkDetailLayouts({
+		id: "spark-dashboard",
+		component: SparkDashboardComponent,
+		matches: (item) => isSparkDashboard(item)
+	});
+}
+export { SPARK_DASHBOARD_METADATA_KEY, SparkDashboardComponent, SparkDashboardTableComponent, SparkMeterComponent, SparkStatComponent, formatSparkBytes, formatSparkDashboardValue, isSparkDashboard, provideSparkDashboards, sparkDashboardRenderers, sparkThresholdColor, toSparkNumber, toSparkTableRows };
+
+//# sourceMappingURL=mintplayer-ng-spark-dashboards.mjs.map