@forgeroute/ui 0.3.6 → 0.3.8

package/fesm2022/forgeroute-ui-charts.mjs

@@ -19,7 +19,7 @@ const VALUE_LABELS = {
 		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);
+			if (typeof value === "number" && Number.isFinite(value) && value !== 0) ctx.fillText(String(value), bar.x, bar.y - 2);
 		});
 		ctx.restore();
 	}

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

@@ -1 +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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"}
+{"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' && Number.isFinite(value) && 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-pdf.mjs

@@ -0,0 +1,582 @@
+import { isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, InjectionToken, Injector, PLATFORM_ID, afterNextRender, computed, effect, inject, input, output, signal, untracked } from "@angular/core";
+const PDF_VIEWER_WORKER_SRC = new InjectionToken("PDF_VIEWER_WORKER_SRC", {
+	providedIn: "root",
+	factory: () => ""
+});
+const DEFAULT_MAX_WIDTH = 700;
+const DEFAULT_FIELD_HEIGHT = 14;
+const MAX_CANVAS_PIXELS = 16e6;
+const MAX_TOTAL_CANVAS_PIXELS = 48e6;
+const WORKER_MISSING = "PDF worker is not configured.";
+var PdfViewerComponent = class PdfViewerComponent {
+	constructor() {
+		this.src = input(null, ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+		this.data = input(null, ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+		this.httpHeaders = input({}, ...ngDevMode ? [{ debugName: "httpHeaders" }] : /* istanbul ignore next */ []);
+		this.withCredentials = input(false, ...ngDevMode ? [{ debugName: "withCredentials" }] : /* istanbul ignore next */ []);
+		this.workerSrc = input("", ...ngDevMode ? [{ debugName: "workerSrc" }] : /* istanbul ignore next */ []);
+		this.maxPageWidth = input(DEFAULT_MAX_WIDTH, ...ngDevMode ? [{ debugName: "maxPageWidth" }] : /* istanbul ignore next */ []);
+		this.pixelRatio = input(null, ...ngDevMode ? [{ debugName: "pixelRatio" }] : /* istanbul ignore next */ []);
+		this.fields = input([], ...ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.loadingText = input("Loading document…", ...ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []);
+		this.errorText = input("Failed to load document.", ...ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []);
+		this.loaded = output();
+		this.loadFailed = output();
+		this.pagesRendered = output();
+		this.status = signal("idle", ...ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []);
+		this.pageSizes = signal([], ...ngDevMode ? [{ debugName: "pageSizes" }] : /* istanbul ignore next */ []);
+		this.containerWidth = signal(0, ...ngDevMode ? [{ debugName: "containerWidth" }] : /* istanbul ignore next */ []);
+		this.customError = signal("", ...ngDevMode ? [{ debugName: "customError" }] : /* istanbul ignore next */ []);
+		this.errorMessage = computed(() => this.customError() || this.errorText(), ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+		this.drawKey = computed(() => this.views().map((v) => v.canvasWidth + "x" + v.canvasHeight).join("|"), ...ngDevMode ? [{ debugName: "drawKey" }] : /* istanbul ignore next */ []);
+		this.effectiveWidth = computed(() => this.widthFor(this.containerWidth()), ...ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []);
+		this.views = computed(() => {
+			const sizes = this.pageSizes();
+			const cssWidth = this.effectiveWidth();
+			const ratio = this.resolvedRatio();
+			const byPage = /* @__PURE__ */ new Map();
+			for (const f of this.fields()) {
+				if (!Number.isInteger(f.page) || f.page < 1 || f.page > sizes.length) continue;
+				const list = byPage.get(f.page) ?? [];
+				list.push(f);
+				byPage.set(f.page, list);
+			}
+			const base = sizes.map((size) => {
+				const scale = cssWidth / size.width;
+				const cssHeight = size.height * scale;
+				return {
+					scale,
+					cssHeight,
+					pageRatio: Math.min(ratio, Math.sqrt(MAX_CANVAS_PIXELS / (cssWidth * cssHeight)))
+				};
+			});
+			let factor = 1;
+			const bitmaps = () => base.map((b) => {
+				const r = Math.max(Math.min(b.pageRatio, 1), b.pageRatio * factor);
+				return {
+					w: Math.floor(cssWidth * r),
+					h: Math.floor(b.cssHeight * r)
+				};
+			});
+			let sized = bitmaps();
+			for (let i = 0; i < 6; i++) {
+				const total = sized.reduce((sum, b) => sum + b.w * b.h, 0);
+				if (total <= MAX_TOTAL_CANVAS_PIXELS) break;
+				factor *= Math.sqrt(MAX_TOTAL_CANVAS_PIXELS / total);
+				sized = bitmaps();
+			}
+			return sizes.map((size, i) => {
+				const { scale, cssHeight } = base[i];
+				const fields = (byPage.get(i + 1) ?? []).map((f) => {
+					const h = f.height ?? DEFAULT_FIELD_HEIGHT;
+					const left = f.x / size.width * 100;
+					return {
+						id: f.id,
+						label: f.label,
+						tone: f.tone ?? "blue",
+						left,
+						top: (size.height - f.y - h) / size.height * 100,
+						width: f.width == null ? null : f.width / size.width * 100,
+						maxWidth: Math.max(0, 100 - left),
+						height: h / size.height * 100,
+						fontPx: Math.max(9, h * scale * .7)
+					};
+				});
+				return {
+					number: i + 1,
+					cssWidth,
+					cssHeight,
+					canvasWidth: sized[i].w,
+					canvasHeight: sized[i].h,
+					fields
+				};
+			});
+		}, ...ngDevMode ? [{ debugName: "views" }] : /* istanbul ignore next */ []);
+		this.host = inject(ElementRef);
+		this.injector = inject(Injector);
+		this.tokenWorkerSrc = inject(PDF_VIEWER_WORKER_SRC);
+		this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+		this.headersKey = computed(() => JSON.stringify(this.httpHeaders()), ...ngDevMode ? [{ debugName: "headersKey" }] : /* istanbul ignore next */ []);
+		this.loadToken = 0;
+		this.drawToken = 0;
+		this.doc = null;
+		this.loadingTask = null;
+		this.pageProxies = [];
+		this.renderTasks = [];
+		this.observer = null;
+		this.frame = 0;
+		this.lastDrawKey = "";
+		effect(() => {
+			this.src();
+			this.data();
+			this.headersKey();
+			this.withCredentials();
+			this.workerSrc();
+			if (!this.isBrowser) return;
+			untracked(() => void this.startLoad());
+		});
+		effect(() => {
+			const key = this.drawKey();
+			untracked(() => {
+				if (this.status() === "ready" && key !== this.lastDrawKey) this.scheduleDraw();
+			});
+		});
+		if (this.isBrowser && typeof ResizeObserver !== "undefined") {
+			this.observer = new ResizeObserver(() => this.onResize());
+			this.observer.observe(this.host.nativeElement);
+		}
+		inject(DestroyRef).onDestroy(() => {
+			this.loadToken++;
+			this.drawToken++;
+			this.observer?.disconnect();
+			if (this.frame && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.frame);
+			this.teardown();
+		});
+	}
+	loadPdfJs() {
+		return import("pdfjs-dist");
+	}
+	resolvedRatio() {
+		const explicit = this.pixelRatio();
+		if (explicit != null && explicit > 0) return explicit;
+		const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+		return Math.min(Math.max(dpr, 1), 3);
+	}
+	widthFor(container) {
+		const max = this.maxPageWidth() > 0 ? this.maxPageWidth() : DEFAULT_MAX_WIDTH;
+		return container > 0 ? Math.min(max, container) : max;
+	}
+	async startLoad() {
+		const token = ++this.loadToken;
+		this.drawToken++;
+		this.teardown();
+		this.pageSizes.set([]);
+		this.customError.set("");
+		const data = this.data();
+		const src = this.src();
+		if (data == null && !src) {
+			this.status.set("idle");
+			return;
+		}
+		this.containerWidth.set(this.host.nativeElement.clientWidth);
+		this.status.set("loading");
+		try {
+			const pdfjs = await this.loadPdfJs();
+			if (token !== this.loadToken) return;
+			const worker = this.workerSrc() || this.tokenWorkerSrc;
+			if (worker) pdfjs.GlobalWorkerOptions.workerSrc = worker;
+			else if (!pdfjs.GlobalWorkerOptions.workerSrc) {
+				this.fail(/* @__PURE__ */ new Error(WORKER_MISSING), WORKER_MISSING);
+				return;
+			}
+			const params = data != null ? { data: data instanceof Uint8Array ? data.slice() : new Uint8Array(data.slice(0)) } : { url: src };
+			if (data == null) {
+				const headers = this.httpHeaders();
+				if (Object.keys(headers).length > 0) params["httpHeaders"] = headers;
+				if (this.withCredentials()) params["withCredentials"] = true;
+			}
+			const task = pdfjs.getDocument(params);
+			this.loadingTask = task;
+			const doc = await task.promise;
+			if (token !== this.loadToken) {
+				this.destroyDoc(doc);
+				return;
+			}
+			this.doc = doc;
+			const proxies = [];
+			const sizes = [];
+			for (let i = 1; i <= doc.numPages; i++) {
+				const page = await doc.getPage(i);
+				if (token !== this.loadToken) return;
+				const vp = page.getViewport({ scale: 1 });
+				if (!(Number.isFinite(vp.width) && Number.isFinite(vp.height) && vp.width > 0 && vp.height > 0)) throw new Error("invalid page size");
+				proxies.push(page);
+				sizes.push({
+					width: vp.width,
+					height: vp.height
+				});
+			}
+			this.pageProxies = proxies;
+			this.containerWidth.set(this.host.nativeElement.clientWidth);
+			this.pageSizes.set(sizes);
+			this.status.set("ready");
+			this.loaded.emit({
+				pageCount: sizes.length,
+				pages: sizes.map((s) => ({ ...s })),
+				document: doc
+			});
+			this.scheduleDraw();
+		} catch (err) {
+			if (token !== this.loadToken) return;
+			this.fail(err);
+		}
+	}
+	fail(err, message = "") {
+		this.loadToken++;
+		this.drawToken++;
+		this.teardown();
+		this.pageSizes.set([]);
+		this.customError.set(message);
+		this.status.set("error");
+		this.loadFailed.emit(err);
+	}
+	scheduleDraw() {
+		const id = ++this.drawToken;
+		this.lastDrawKey = this.drawKey();
+		this.cancelRenders();
+		afterNextRender(() => void this.draw(id), { injector: this.injector });
+	}
+	async draw(id) {
+		const token = this.loadToken;
+		const stale = () => id !== this.drawToken || token !== this.loadToken;
+		this.cancelRenders();
+		const views = this.views();
+		const canvases = Array.from(this.host.nativeElement.querySelectorAll("canvas.pv-canvas"));
+		const sizes = this.pageSizes();
+		const scales = [];
+		try {
+			for (let i = 0; i < views.length; i++) {
+				if (stale()) return;
+				const canvas = canvases[i];
+				const page = this.pageProxies[i];
+				if (!canvas || !page || !canvas.getContext("2d")) throw new Error("canvas unavailable");
+				const cssScale = views[i].cssWidth / sizes[i].width;
+				scales.push(cssScale);
+				const viewport = page.getViewport({ scale: views[i].canvasWidth / sizes[i].width });
+				const task = page.render({
+					canvas,
+					viewport
+				});
+				this.renderTasks.push(task);
+				await task.promise;
+			}
+		} catch (err) {
+			if (stale() || err?.name === "RenderingCancelledException") return;
+			this.fail(err);
+			return;
+		}
+		if (stale()) return;
+		this.pagesRendered.emit({
+			pageCount: views.length,
+			scale: scales[0] ?? 1,
+			pageWidths: views.map((v) => v.cssWidth)
+		});
+	}
+	onResize() {
+		if (this.frame || typeof requestAnimationFrame !== "function") return;
+		this.frame = requestAnimationFrame(() => {
+			this.frame = 0;
+			const before = this.effectiveWidth();
+			this.containerWidth.set(this.host.nativeElement.clientWidth);
+			if (this.effectiveWidth() !== before && this.status() === "ready") this.scheduleDraw();
+		});
+	}
+	cancelRenders() {
+		for (const t of this.renderTasks) try {
+			t.cancel?.();
+		} catch {}
+		this.renderTasks = [];
+	}
+	teardown() {
+		this.cancelRenders();
+		const task = this.loadingTask;
+		this.loadingTask = null;
+		if (task) try {
+			Promise.resolve(task.destroy?.()).catch(() => void 0);
+		} catch {}
+		const doc = this.doc;
+		this.doc = null;
+		this.pageProxies = [];
+		if (doc) this.destroyDoc(doc);
+	}
+	destroyDoc(doc) {
+		try {
+			Promise.resolve(doc.destroy()).catch(() => void 0);
+		} catch {}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: PdfViewerComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: PdfViewerComponent,
+			isStandalone: true,
+			selector: "ui-pdf-viewer",
+			inputs: {
+				src: {
+					classPropertyName: "src",
+					publicName: "src",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				data: {
+					classPropertyName: "data",
+					publicName: "data",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				httpHeaders: {
+					classPropertyName: "httpHeaders",
+					publicName: "httpHeaders",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				withCredentials: {
+					classPropertyName: "withCredentials",
+					publicName: "withCredentials",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				workerSrc: {
+					classPropertyName: "workerSrc",
+					publicName: "workerSrc",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxPageWidth: {
+					classPropertyName: "maxPageWidth",
+					publicName: "maxPageWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				pixelRatio: {
+					classPropertyName: "pixelRatio",
+					publicName: "pixelRatio",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				fields: {
+					classPropertyName: "fields",
+					publicName: "fields",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				loadingText: {
+					classPropertyName: "loadingText",
+					publicName: "loadingText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				errorText: {
+					classPropertyName: "errorText",
+					publicName: "errorText",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				loaded: "loaded",
+				loadFailed: "loadFailed",
+				pagesRendered: "pagesRendered"
+			},
+			ngImport: i0,
+			template: `
+    <div class="pv-root" [attr.role]="ariaLabel() ? 'region' : null" [attr.aria-label]="ariaLabel() || null"
+         [attr.aria-busy]="status() === 'loading'">
+      <div class="pv-live" role="status" aria-live="polite">{{ status() === 'loading' ? loadingText() : '' }}</div>
+      @switch (status()) {
+        @case ('loading') { <div class="pv-state pv-loading" aria-hidden="true">{{ loadingText() }}</div> }
+        @case ('error') { <div class="pv-state pv-error" role="alert">{{ errorMessage() }}</div> }
+        @case ('ready') {
+          <div class="pv-pages">
+            @for (p of views(); track p.number) {
+              <div class="pv-page" [style.width.px]="p.cssWidth">
+                <canvas class="pv-canvas" role="img" [attr.aria-label]="'Page ' + p.number + ' of ' + views().length"
+                        [attr.width]="p.canvasWidth" [attr.height]="p.canvasHeight"></canvas>
+                @for (f of p.fields; track $index) {
+                  <div class="pv-field pv-tone-{{ f.tone }}"
+                       [style.left.%]="f.left" [style.top.%]="f.top" [style.width.%]="f.width" [style.max-width.%]="f.maxWidth"
+                       [style.height.%]="f.height" [style.font-size.px]="f.fontPx">
+                    <span class="pv-field-label">{{ f.label }}</span>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+        }
+      }
+    </div>
+  `,
+			isInline: true,
+			styles: [":host{display:block;width:100%}.pv-root{position:relative}.pv-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pv-state{display:flex;align-items:center;justify-content:center;width:100%;min-height:12rem;padding:0 16px;text-align:center;font-size:.8125rem;line-height:1.4;overflow-wrap:anywhere;box-sizing:border-box}.pv-loading{color:#64748b}.pv-error{color:#dc2626}.pv-pages{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%}.pv-page{position:relative;margin:0 auto;max-width:100%}.pv-canvas{display:block;width:100%;height:auto;background:#fff;border-radius:2px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.pv-field{position:absolute;display:flex;align-items:center;box-sizing:border-box;padding:0 4px;overflow:hidden;pointer-events:none;border:1px solid;border-radius:2px;-webkit-user-select:none;user-select:none}.pv-field-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.pv-tone-blue{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}.pv-tone-green{background:#dcfce7;border-color:#86efac;color:#15803d}.pv-tone-amber{background:#fef3c7;border-color:#fcd34d;color:#92400e}.pv-tone-red{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}.pv-tone-slate{background:#f1f5f9;border-color:#cbd5e1;color:#334155}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PdfViewerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-pdf-viewer",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    <div class="pv-root" [attr.role]="ariaLabel() ? 'region' : null" [attr.aria-label]="ariaLabel() || null"
+         [attr.aria-busy]="status() === 'loading'">
+      <div class="pv-live" role="status" aria-live="polite">{{ status() === 'loading' ? loadingText() : '' }}</div>
+      @switch (status()) {
+        @case ('loading') { <div class="pv-state pv-loading" aria-hidden="true">{{ loadingText() }}</div> }
+        @case ('error') { <div class="pv-state pv-error" role="alert">{{ errorMessage() }}</div> }
+        @case ('ready') {
+          <div class="pv-pages">
+            @for (p of views(); track p.number) {
+              <div class="pv-page" [style.width.px]="p.cssWidth">
+                <canvas class="pv-canvas" role="img" [attr.aria-label]="'Page ' + p.number + ' of ' + views().length"
+                        [attr.width]="p.canvasWidth" [attr.height]="p.canvasHeight"></canvas>
+                @for (f of p.fields; track $index) {
+                  <div class="pv-field pv-tone-{{ f.tone }}"
+                       [style.left.%]="f.left" [style.top.%]="f.top" [style.width.%]="f.width" [style.max-width.%]="f.maxWidth"
+                       [style.height.%]="f.height" [style.font-size.px]="f.fontPx">
+                    <span class="pv-field-label">{{ f.label }}</span>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+        }
+      }
+    </div>
+  `,
+			styles: [":host{display:block;width:100%}.pv-root{position:relative}.pv-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pv-state{display:flex;align-items:center;justify-content:center;width:100%;min-height:12rem;padding:0 16px;text-align:center;font-size:.8125rem;line-height:1.4;overflow-wrap:anywhere;box-sizing:border-box}.pv-loading{color:#64748b}.pv-error{color:#dc2626}.pv-pages{display:flex;flex-direction:column;gap:16px;width:100%;max-width:100%}.pv-page{position:relative;margin:0 auto;max-width:100%}.pv-canvas{display:block;width:100%;height:auto;background:#fff;border-radius:2px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a}.pv-field{position:absolute;display:flex;align-items:center;box-sizing:border-box;padding:0 4px;overflow:hidden;pointer-events:none;border:1px solid;border-radius:2px;-webkit-user-select:none;user-select:none}.pv-field-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.pv-tone-blue{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}.pv-tone-green{background:#dcfce7;border-color:#86efac;color:#15803d}.pv-tone-amber{background:#fef3c7;border-color:#fcd34d;color:#92400e}.pv-tone-red{background:#fee2e2;border-color:#fca5a5;color:#b91c1c}.pv-tone-slate{background:#f1f5f9;border-color:#cbd5e1;color:#334155}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: false
+			}]
+		}],
+		httpHeaders: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "httpHeaders",
+				required: false
+			}]
+		}],
+		withCredentials: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "withCredentials",
+				required: false
+			}]
+		}],
+		workerSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "workerSrc",
+				required: false
+			}]
+		}],
+		maxPageWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxPageWidth",
+				required: false
+			}]
+		}],
+		pixelRatio: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pixelRatio",
+				required: false
+			}]
+		}],
+		fields: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fields",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		loadingText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingText",
+				required: false
+			}]
+		}],
+		errorText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorText",
+				required: false
+			}]
+		}],
+		loaded: [{
+			type: i0.Output,
+			args: ["loaded"]
+		}],
+		loadFailed: [{
+			type: i0.Output,
+			args: ["loadFailed"]
+		}],
+		pagesRendered: [{
+			type: i0.Output,
+			args: ["pagesRendered"]
+		}]
+	}
+});
+export { PDF_VIEWER_WORKER_SRC, PdfViewerComponent };
+
+//# sourceMappingURL=forgeroute-ui-pdf.mjs.map