@forgeroute/ui 0.3.5 → 0.3.6

package/fesm2022/forgeroute-ui-charts.mjs

@@ -0,0 +1,323 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, NgZone, computed, effect, inject, input, viewChild } from "@angular/core";
+import { BarController, BarElement, CategoryScale, Chart, LinearScale, Tooltip } from "chart.js";
+let registered = false;
+function registerChartParts() {
+	if (registered) return;
+	Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip);
+	registered = true;
+}
+const VALUE_LABELS = {
+	id: "uiBarChartValueLabels",
+	afterDatasetsDraw(chart) {
+		if (chart.options.plugins["uiBarChartValueLabels"]?.enabled === false) return;
+		const ctx = chart.ctx;
+		ctx.save();
+		ctx.fillStyle = "#475569";
+		ctx.font = "600 11px sans-serif";
+		ctx.textAlign = "center";
+		ctx.textBaseline = "bottom";
+		chart.getDatasetMeta(0).data.forEach((bar, i) => {
+			const value = chart.data.datasets[0]?.data[i];
+			if (typeof value === "number" && value !== 0) ctx.fillText(String(value), bar.x, bar.y - 2);
+		});
+		ctx.restore();
+	}
+};
+var BarChartComponent = class BarChartComponent {
+	constructor() {
+		this.labels = input([], ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+		this.values = input([], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+		this.color = input("#3b82f6", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+		this.hoverColor = input("#2563eb", ...ngDevMode ? [{ debugName: "hoverColor" }] : /* istanbul ignore next */ []);
+		this.height = input(240, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.showValues = input(true, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
+		this.unitSingular = input("", ...ngDevMode ? [{ debugName: "unitSingular" }] : /* istanbul ignore next */ []);
+		this.unitPlural = input("", ...ngDevMode ? [{ debugName: "unitPlural" }] : /* istanbul ignore next */ []);
+		this.canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
+		this.zone = inject(NgZone);
+		this.chart = null;
+		this.tooltipText = (value) => {
+			const unit = value === 1 ? this.unitSingular() : this.unitPlural();
+			return unit ? `${value} ${unit}` : String(value);
+		};
+		this.series = computed(() => ({
+			labels: this.labels(),
+			data: this.values(),
+			color: this.color(),
+			hoverColor: this.hoverColor(),
+			showValues: this.showValues()
+		}), ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const s = this.series();
+			const canvas = this.canvas().nativeElement;
+			if (!this.chart) {
+				registerChartParts();
+				this.zone.runOutsideAngular(() => {
+					this.chart = new Chart(canvas, {
+						type: "bar",
+						data: {
+							labels: s.labels,
+							datasets: [{
+								data: s.data,
+								backgroundColor: s.color,
+								hoverBackgroundColor: s.hoverColor,
+								borderRadius: 3,
+								borderSkipped: false
+							}]
+						},
+						options: {
+							responsive: true,
+							maintainAspectRatio: false,
+							animation: false,
+							layout: { padding: { top: 20 } },
+							plugins: {
+								legend: { display: false },
+								tooltip: { callbacks: { label: (item) => this.tooltipText(Number(item.raw)) } }
+							},
+							scales: {
+								y: {
+									beginAtZero: true,
+									ticks: {
+										precision: 0,
+										color: "#94a3b8",
+										font: { size: 11 }
+									},
+									grid: { color: "#e2e8f0" },
+									border: { display: false }
+								},
+								x: {
+									grid: { display: false },
+									ticks: {
+										maxRotation: 0,
+										color: "#94a3b8",
+										font: { size: 10 }
+									},
+									border: { display: false }
+								}
+							}
+						},
+						plugins: [VALUE_LABELS]
+					});
+				});
+			}
+			const chart = this.chart;
+			chart.data.labels = s.labels;
+			const ds = chart.data.datasets[0];
+			ds.data = s.data;
+			ds.backgroundColor = s.color;
+			ds.hoverBackgroundColor = s.hoverColor;
+			chart.options.plugins["uiBarChartValueLabels"] = { enabled: s.showValues };
+			chart.update("none");
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.chart?.destroy();
+			this.chart = null;
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: BarChartComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.2.0",
+			version: "22.2.2",
+			type: BarChartComponent,
+			isStandalone: true,
+			selector: "ui-bar-chart",
+			inputs: {
+				labels: {
+					classPropertyName: "labels",
+					publicName: "labels",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				values: {
+					classPropertyName: "values",
+					publicName: "values",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				color: {
+					classPropertyName: "color",
+					publicName: "color",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hoverColor: {
+					classPropertyName: "hoverColor",
+					publicName: "hoverColor",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				height: {
+					classPropertyName: "height",
+					publicName: "height",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				showValues: {
+					classPropertyName: "showValues",
+					publicName: "showValues",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				unitSingular: {
+					classPropertyName: "unitSingular",
+					publicName: "unitSingular",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				unitPlural: {
+					classPropertyName: "unitPlural",
+					publicName: "unitPlural",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			viewQueries: [{
+				propertyName: "canvas",
+				first: true,
+				predicate: ["canvas"],
+				descendants: true,
+				isSignal: true
+			}],
+			ngImport: i0,
+			template: `
+    <div class="bc-wrap" [class.bc-default-height]="height() === 240" [style.height.px]="height()"
+         [attr.role]="ariaLabel() ? 'img' : null" [attr.aria-label]="ariaLabel() || null">
+      <canvas #canvas></canvas>
+    </div>
+  `,
+			isInline: true,
+			styles: [":host{display:block}.bc-wrap{position:relative}@media(max-width:768px){.bc-wrap.bc-default-height{height:200px!important}}@media(max-width:480px){.bc-wrap.bc-default-height{height:160px!important}}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BarChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-bar-chart",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <div class="bc-wrap" [class.bc-default-height]="height() === 240" [style.height.px]="height()"
+         [attr.role]="ariaLabel() ? 'img' : null" [attr.aria-label]="ariaLabel() || null">
+      <canvas #canvas></canvas>
+    </div>
+  `,
+			styles: [":host{display:block}.bc-wrap{position:relative}@media(max-width:768px){.bc-wrap.bc-default-height{height:200px!important}}@media(max-width:480px){.bc-wrap.bc-default-height{height:160px!important}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}],
+		values: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "values",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		hoverColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hoverColor",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		showValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValues",
+				required: false
+			}]
+		}],
+		unitSingular: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "unitSingular",
+				required: false
+			}]
+		}],
+		unitPlural: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "unitPlural",
+				required: false
+			}]
+		}],
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}]
+	}
+});
+export { BarChartComponent };
+
+//# sourceMappingURL=forgeroute-ui-charts.mjs.map

package/fesm2022/forgeroute-ui-charts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"forgeroute-ui-charts.mjs","names":[],"sources":["../../../projects/forgeroute-ui/charts/src/bar-chart/bar-chart.component.ts"],"sourcesContent":["import {\n  Component, ChangeDetectionStrategy, DestroyRef, ElementRef, NgZone, computed, effect, inject, input, viewChild,\n} from '@angular/core';\nimport { BarController, BarElement, CategoryScale, Chart, LinearScale, Tooltip } from 'chart.js';\nimport type { Plugin } from 'chart.js';\n\n// Registered when a chart is first created (not at import time) so apps that never use ui-bar-chart can drop chart.js from their bundle.\nlet registered = false;\nfunction registerChartParts(): void {\n  if (registered) return;\n  Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip);\n  registered = true;\n}\n\n/** Draws each bar's value above it (nothing for a 0 bar). Local to ui-bar-chart so no chart.js plugin package is needed. */\nconst VALUE_LABELS: Plugin<'bar'> = {\n  id: 'uiBarChartValueLabels',\n  afterDatasetsDraw(chart) {\n    const opts = (chart.options.plugins as Record<string, { enabled?: boolean } | undefined>)['uiBarChartValueLabels'];\n    if (opts?.enabled === false) return;\n    const ctx = chart.ctx;\n    ctx.save();\n    ctx.fillStyle = '#475569';\n    ctx.font = '600 11px sans-serif';\n    ctx.textAlign = 'center';\n    ctx.textBaseline = 'bottom';\n    chart.getDatasetMeta(0).data.forEach((bar, i) => {\n      const value = chart.data.datasets[0]?.data[i];\n      if (typeof value === 'number' && value !== 0) ctx.fillText(String(value), bar.x, bar.y - 2);\n    });\n    ctx.restore();\n  },\n};\n\n/**\n * Bar chart of one series (e.g. calls per day). Pass the category `labels` and the matching `values`.\n *\n *   <ui-bar-chart [labels]=\"['8/1', '8/2']\" [values]=\"[3, 0]\" ariaLabel=\"Daily call volume\"\n *                 unitSingular=\"call\" unitPlural=\"calls\" />\n *\n * - Bars show their value above them (`showValues`, a 0 bar shows nothing), the y axis starts at 0 and counts whole numbers.\n * - The tooltip reads \"<value> <unit>\" (`unitSingular` for 1, `unitPlural` otherwise; no unit = just the number).\n * - With an `ariaLabel` the chart is an image for assistive tech (`role=\"img\"` + that label; without a label no role is set, as an\n *   unnamed image is an accessibility error); render the same figures as text next to it\n *   (e.g. a visually hidden list) when the exact values matter.\n * - Height is `height` px (shorter on phones: 200px up to 768px wide, 160px up to 480px wide, when the default 240 is used);\n *   the width follows the container. Needs the optional peer dependency `chart.js` (>= 4).\n */\n@Component({\n  selector: 'ui-bar-chart',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div class=\"bc-wrap\" [class.bc-default-height]=\"height() === 240\" [style.height.px]=\"height()\"\n         [attr.role]=\"ariaLabel() ? 'img' : null\" [attr.aria-label]=\"ariaLabel() || null\">\n      <canvas #canvas></canvas>\n    </div>\n  `,\n  styles: [`\n    :host { display: block; }\n    .bc-wrap { position: relative; }\n    @media (max-width: 768px) { .bc-wrap.bc-default-height { height: 200px !important; } }\n    @media (max-width: 480px) { .bc-wrap.bc-default-height { height: 160px !important; } }\n  `],\n})\nexport class BarChartComponent {\n  /** Category labels, left to right (one per bar). */\n  readonly labels = input<string[]>([]);\n  /** The bar values, in the order of `labels`. */\n  readonly values = input<number[]>([]);\n  /** Bar colour (any CSS colour). */\n  readonly color = input('#3b82f6');\n  /** Bar colour while hovered. */\n  readonly hoverColor = input('#2563eb');\n  /** Chart height in px. */\n  readonly height = input(240);\n  /** Spoken description of the chart. */\n  readonly ariaLabel = input('');\n  /** Show each bar's value above it. */\n  readonly showValues = input(true);\n  /** Tooltip unit for exactly 1 (e.g. \"call\"). */\n  readonly unitSingular = input('');\n  /** Tooltip unit for any other value (e.g. \"calls\"). */\n  readonly unitPlural = input('');\n\n  private readonly canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n  private readonly zone = inject(NgZone);\n  private chart: Chart<'bar'> | null = null;\n\n  private readonly tooltipText = (value: number): string => {\n    const unit = value === 1 ? this.unitSingular() : this.unitPlural();\n    return unit ? `${value} ${unit}` : String(value);\n  };\n\n  protected readonly series = computed(() => ({\n    labels: this.labels(),\n    data: this.values(),\n    color: this.color(),\n    hoverColor: this.hoverColor(),\n    showValues: this.showValues(),\n  }));\n\n  constructor() {\n    effect(() => {\n      const s = this.series();\n      const canvas = this.canvas().nativeElement;\n      if (!this.chart) {\n        registerChartParts();\n        this.zone.runOutsideAngular(() => {\n          this.chart = new Chart(canvas, {\n            type: 'bar',\n            data: { labels: s.labels, datasets: [{ data: s.data, backgroundColor: s.color, hoverBackgroundColor: s.hoverColor, borderRadius: 3, borderSkipped: false }] },\n            options: {\n              responsive: true,\n              maintainAspectRatio: false,\n              animation: false,\n              layout: { padding: { top: 20 } },\n              plugins: {\n                legend: { display: false },\n                tooltip: { callbacks: { label: (item) => this.tooltipText(Number(item.raw)) } },\n              },\n              scales: {\n                y: { beginAtZero: true, ticks: { precision: 0, color: '#94a3b8', font: { size: 11 } }, grid: { color: '#e2e8f0' }, border: { display: false } },\n                x: { grid: { display: false }, ticks: { maxRotation: 0, color: '#94a3b8', font: { size: 10 } }, border: { display: false } },\n              },\n            },\n            plugins: [VALUE_LABELS],\n          });\n        });\n      }\n      const chart = this.chart!;\n      chart.data.labels = s.labels;\n      const ds = chart.data.datasets[0];\n      ds.data = s.data;\n      ds.backgroundColor = s.color;\n      ds.hoverBackgroundColor = s.hoverColor;\n      // the value labels plugin reads this flag at draw time\n      (chart.options.plugins as Record<string, unknown>)['uiBarChartValueLabels'] = { enabled: s.showValues };\n      chart.update('none');\n    });\n    inject(DestroyRef).onDestroy(() => { this.chart?.destroy(); this.chart = null; });\n  }\n}\n"],"mappings":"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"}

package/fesm2022/forgeroute-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, NgZone, Renderer2, afterNextRender, computed, effect, forwardRef, inject, input, linkedSignal, model, output, signal, untracked, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, InjectionToken, Injector, Input, Renderer2, afterNextRender, computed, effect, forwardRef, inject, input, linkedSignal, model, output, signal, untracked, viewChild } from "@angular/core";
 import { HttpClient, HttpErrorResponse, HttpParams } from "@angular/common/http";
 import { takeUntilDestroyed, toObservable } from "@angular/core/rxjs-interop";
 import { catchError, debounceTime, distinctUntilChanged, skip, switchMap } from "rxjs/operators";
@@ -8,7 +8,6 @@ import { DOCUMENT, DatePipe, DecimalPipe, NgTemplateOutlet } from "@angular/comm
 import * as i1 from "@angular/forms";
 import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { NavigationEnd, Router, RouterLink, RouterLinkActive } from "@angular/router";
-import { BarController, BarElement, CategoryScale, Chart, LinearScale, Tooltip } from "chart.js";
 import { DomSanitizer } from "@angular/platform-browser";
 const FORGEROUTE_CONFIG = new InjectionToken("FORGEROUTE_CONFIG");
 const DROPDOWN_GROUP = new InjectionToken("DROPDOWN_GROUP");
@@ -10685,323 +10684,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-let registered = false;
-function registerChartParts() {
-	if (registered) return;
-	Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip);
-	registered = true;
-}
-const VALUE_LABELS = {
-	id: "uiBarChartValueLabels",
-	afterDatasetsDraw(chart) {
-		if (chart.options.plugins["uiBarChartValueLabels"]?.enabled === false) return;
-		const ctx = chart.ctx;
-		ctx.save();
-		ctx.fillStyle = "#475569";
-		ctx.font = "600 11px sans-serif";
-		ctx.textAlign = "center";
-		ctx.textBaseline = "bottom";
-		chart.getDatasetMeta(0).data.forEach((bar, i) => {
-			const value = chart.data.datasets[0]?.data[i];
-			if (typeof value === "number" && value !== 0) ctx.fillText(String(value), bar.x, bar.y - 2);
-		});
-		ctx.restore();
-	}
-};
-var BarChartComponent = class BarChartComponent {
-	constructor() {
-		this.labels = input([], ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
-		this.values = input([], ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
-		this.color = input("#3b82f6", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
-		this.hoverColor = input("#2563eb", ...ngDevMode ? [{ debugName: "hoverColor" }] : /* istanbul ignore next */ []);
-		this.height = input(240, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
-		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
-		this.showValues = input(true, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
-		this.unitSingular = input("", ...ngDevMode ? [{ debugName: "unitSingular" }] : /* istanbul ignore next */ []);
-		this.unitPlural = input("", ...ngDevMode ? [{ debugName: "unitPlural" }] : /* istanbul ignore next */ []);
-		this.canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
-		this.zone = inject(NgZone);
-		this.chart = null;
-		this.tooltipText = (value) => {
-			const unit = value === 1 ? this.unitSingular() : this.unitPlural();
-			return unit ? `${value} ${unit}` : String(value);
-		};
-		this.series = computed(() => ({
-			labels: this.labels(),
-			data: this.values(),
-			color: this.color(),
-			hoverColor: this.hoverColor(),
-			showValues: this.showValues()
-		}), ...ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []);
-		effect(() => {
-			const s = this.series();
-			const canvas = this.canvas().nativeElement;
-			if (!this.chart) {
-				registerChartParts();
-				this.zone.runOutsideAngular(() => {
-					this.chart = new Chart(canvas, {
-						type: "bar",
-						data: {
-							labels: s.labels,
-							datasets: [{
-								data: s.data,
-								backgroundColor: s.color,
-								hoverBackgroundColor: s.hoverColor,
-								borderRadius: 3,
-								borderSkipped: false
-							}]
-						},
-						options: {
-							responsive: true,
-							maintainAspectRatio: false,
-							animation: false,
-							layout: { padding: { top: 20 } },
-							plugins: {
-								legend: { display: false },
-								tooltip: { callbacks: { label: (item) => this.tooltipText(Number(item.raw)) } }
-							},
-							scales: {
-								y: {
-									beginAtZero: true,
-									ticks: {
-										precision: 0,
-										color: "#94a3b8",
-										font: { size: 11 }
-									},
-									grid: { color: "#e2e8f0" },
-									border: { display: false }
-								},
-								x: {
-									grid: { display: false },
-									ticks: {
-										maxRotation: 0,
-										color: "#94a3b8",
-										font: { size: 10 }
-									},
-									border: { display: false }
-								}
-							}
-						},
-						plugins: [VALUE_LABELS]
-					});
-				});
-			}
-			const chart = this.chart;
-			chart.data.labels = s.labels;
-			const ds = chart.data.datasets[0];
-			ds.data = s.data;
-			ds.backgroundColor = s.color;
-			ds.hoverBackgroundColor = s.hoverColor;
-			chart.options.plugins["uiBarChartValueLabels"] = { enabled: s.showValues };
-			chart.update("none");
-		});
-		inject(DestroyRef).onDestroy(() => {
-			this.chart?.destroy();
-			this.chart = null;
-		});
-	}
-	static {
-		this.ɵfac = i0.ɵɵngDeclareFactory({
-			minVersion: "12.0.0",
-			version: "22.2.2",
-			ngImport: i0,
-			type: BarChartComponent,
-			deps: [],
-			target: i0.ɵɵFactoryTarget.Component
-		});
-	}
-	static {
-		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.2.0",
-			version: "22.2.2",
-			type: BarChartComponent,
-			isStandalone: true,
-			selector: "ui-bar-chart",
-			inputs: {
-				labels: {
-					classPropertyName: "labels",
-					publicName: "labels",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				values: {
-					classPropertyName: "values",
-					publicName: "values",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				color: {
-					classPropertyName: "color",
-					publicName: "color",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				hoverColor: {
-					classPropertyName: "hoverColor",
-					publicName: "hoverColor",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				height: {
-					classPropertyName: "height",
-					publicName: "height",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				ariaLabel: {
-					classPropertyName: "ariaLabel",
-					publicName: "ariaLabel",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				showValues: {
-					classPropertyName: "showValues",
-					publicName: "showValues",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				unitSingular: {
-					classPropertyName: "unitSingular",
-					publicName: "unitSingular",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				},
-				unitPlural: {
-					classPropertyName: "unitPlural",
-					publicName: "unitPlural",
-					isSignal: true,
-					isRequired: false,
-					transformFunction: null
-				}
-			},
-			viewQueries: [{
-				propertyName: "canvas",
-				first: true,
-				predicate: ["canvas"],
-				descendants: true,
-				isSignal: true
-			}],
-			ngImport: i0,
-			template: `
-    <div class="bc-wrap" [class.bc-default-height]="height() === 240" [style.height.px]="height()"
-         [attr.role]="ariaLabel() ? 'img' : null" [attr.aria-label]="ariaLabel() || null">
-      <canvas #canvas></canvas>
-    </div>
-  `,
-			isInline: true,
-			styles: [":host{display:block}.bc-wrap{position:relative}@media(max-width:768px){.bc-wrap.bc-default-height{height:200px!important}}@media(max-width:480px){.bc-wrap.bc-default-height{height:160px!important}}\n"],
-			changeDetection: i0.ChangeDetectionStrategy.OnPush
-		});
-	}
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: BarChartComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "ui-bar-chart",
-			standalone: true,
-			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: `
-    <div class="bc-wrap" [class.bc-default-height]="height() === 240" [style.height.px]="height()"
-         [attr.role]="ariaLabel() ? 'img' : null" [attr.aria-label]="ariaLabel() || null">
-      <canvas #canvas></canvas>
-    </div>
-  `,
-			styles: [":host{display:block}.bc-wrap{position:relative}@media(max-width:768px){.bc-wrap.bc-default-height{height:200px!important}}@media(max-width:480px){.bc-wrap.bc-default-height{height:160px!important}}\n"]
-		}]
-	}],
-	ctorParameters: () => [],
-	propDecorators: {
-		labels: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "labels",
-				required: false
-			}]
-		}],
-		values: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "values",
-				required: false
-			}]
-		}],
-		color: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "color",
-				required: false
-			}]
-		}],
-		hoverColor: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "hoverColor",
-				required: false
-			}]
-		}],
-		height: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "height",
-				required: false
-			}]
-		}],
-		ariaLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "ariaLabel",
-				required: false
-			}]
-		}],
-		showValues: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "showValues",
-				required: false
-			}]
-		}],
-		unitSingular: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "unitSingular",
-				required: false
-			}]
-		}],
-		unitPlural: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "unitPlural",
-				required: false
-			}]
-		}],
-		canvas: [{
-			type: i0.ViewChild,
-			args: ["canvas", { isSignal: true }]
-		}]
-	}
-});
 const KEY_STEP = 2;
 const KEY_STEP_BIG = 10;
 const clamp = (n) => Math.min(100, Math.max(0, Math.round(n)));
@@ -28356,6 +28038,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AlertComponent, AppShellComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BarChartComponent, BulkMessagePanelComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipGroupComponent, ColumnFilterComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_DOCUMENT_SUBJECT, DOCUMENT_PURPOSE_OPTIONS, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DocumentSendOptionsComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormRowComponent, FormSectionComponent, HintComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, ListItemComponent, MAX_CC, ModalComponent, MoreMenuComponent, MultiSelectComponent, PaginationComponent, PanelInfoListComponent, PillTabsComponent, ProgressBarComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SelectComponent, SendMessagePanelComponent, SidePanelComponent, SkeletonComponent, TableToolbarComponent, TemplatePickerComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, ToastComponent, ToastService, ToggleBadgeComponent, TooltipDirective, US_STATES, UiFieldValidity, VideoPickerComponent, appShellGroupsStorageKey, autoVariant, builtInActionIcon, createFieldReveal, decodeFilterValues, encodeFilterValue, encodeFilterValues, errorContextInterceptor, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, isoKey, issueToErrors, maxLengthIssue, messagePreviewHtml, parseCcList, parseIso, parseTime, pluralize, requiredIssue, resolvePreset, suggestDocumentSubject };
+export { AlertComponent, AppShellComponent, AvatarComponent, BADGE_VARIANT_STYLES, BadgeComponent, BulkMessagePanelComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipGroupComponent, ColumnFilterComponent, ComboboxComponent, ConfirmOutletComponent, ConfirmService, ContactPickerComponent, DEFAULT_DOCUMENT_SUBJECT, DOCUMENT_PURPOSE_OPTIONS, DROPDOWN_GROUP, DataTableComponent, DateInputComponent, DateRangePickerComponent, DatetimeInputComponent, DetailCardComponent, DiscountSelectorComponent, DividerComponent, DocumentSendOptionsComponent, DropdownComponent, EmptyStateComponent, ErrorComponent, ErrorStateComponent, FORGEROUTE_CONFIG, FileInputComponent, FormRowComponent, FormSectionComponent, HintComponent, ImagePreviewComponent, ImageRepositionComponent, ImportExportComponent, KpiCardComponent, ListItemComponent, MAX_CC, ModalComponent, MoreMenuComponent, MultiSelectComponent, PaginationComponent, PanelInfoListComponent, PillTabsComponent, ProgressBarComponent, QrCodeComponent, QuickFilterTabsComponent, RICH_TEXT_OPTIONS, RadioComponent, RadioGroupComponent, RadioMatrixComponent, RichTextEditorComponent, SEMANTIC_BADGE_MAP, SearchInputComponent, SelectComponent, SendMessagePanelComponent, SidePanelComponent, SkeletonComponent, TableToolbarComponent, TemplatePickerComponent, TextInputComponent, TextareaInputComponent, TimeInputComponent, ToastComponent, ToastService, ToggleBadgeComponent, TooltipDirective, US_STATES, UiFieldValidity, VideoPickerComponent, appShellGroupsStorageKey, autoVariant, builtInActionIcon, createFieldReveal, decodeFilterValues, encodeFilterValue, encodeFilterValues, errorContextInterceptor, formatIsoDate, formatIsoDateTime, formatTime, getEligibleIds, getEligibleOptions, getErrorMessage, humanReadableMessage, isoKey, issueToErrors, maxLengthIssue, messagePreviewHtml, parseCcList, parseIso, parseTime, pluralize, requiredIssue, resolvePreset, suggestDocumentSubject };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map