@forgeroute/ui 0.3.6 → 0.3.7

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.mjs

@@ -10684,6 +10684,137 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var AudioPlayerComponent = class AudioPlayerComponent {
+	constructor() {
+		this.src = input("", ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+		this.preload = input("metadata", ...ngDevMode ? [{ debugName: "preload" }] : /* istanbul ignore next */ []);
+		this.playbackError = output();
+		this.failed = signal(false, ...ngDevMode ? [{ debugName: "failed" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			this.src();
+			this.failed.set(false);
+		});
+	}
+	onError() {
+		if (!this.src()) return;
+		this.failed.set(true);
+		this.playbackError.emit();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: AudioPlayerComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: AudioPlayerComponent,
+			isStandalone: true,
+			selector: "ui-audio-player",
+			inputs: {
+				src: {
+					classPropertyName: "src",
+					publicName: "src",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				preload: {
+					classPropertyName: "preload",
+					publicName: "preload",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: { playbackError: "playbackError" },
+			ngImport: i0,
+			template: `
+    @if (failed()) {
+      <p class="ap-error" role="alert">Audio could not be played.</p>
+    } @else {
+      <audio class="ap-audio" controls [attr.preload]="preload()" [src]="src() || null" [attr.aria-label]="ariaLabel() || null"
+             (error)="onError()">
+        Your browser does not support the audio element.
+      </audio>
+    }
+  `,
+			isInline: true,
+			styles: [":host{display:block}.ap-audio{display:block;width:100%;height:40px;border-radius:8px;outline:none;accent-color:#3b82f6}.ap-audio:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ap-error{margin:0;font-size:.8125rem;line-height:1.4;color:#dc2626}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AudioPlayerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-audio-player",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `
+    @if (failed()) {
+      <p class="ap-error" role="alert">Audio could not be played.</p>
+    } @else {
+      <audio class="ap-audio" controls [attr.preload]="preload()" [src]="src() || null" [attr.aria-label]="ariaLabel() || null"
+             (error)="onError()">
+        Your browser does not support the audio element.
+      </audio>
+    }
+  `,
+			styles: [":host{display:block}.ap-audio{display:block;width:100%;height:40px;border-radius:8px;outline:none;accent-color:#3b82f6}.ap-audio:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.ap-error{margin:0;font-size:.8125rem;line-height:1.4;color:#dc2626}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		preload: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "preload",
+				required: false
+			}]
+		}],
+		playbackError: [{
+			type: i0.Output,
+			args: ["playbackError"]
+		}]
+	}
+});
 const KEY_STEP = 2;
 const KEY_STEP_BIG = 10;
 const clamp = (n) => Math.min(100, Math.max(0, Math.round(n)));
@@ -28038,6 +28169,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-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 };
+export { AlertComponent, AppShellComponent, AudioPlayerComponent, 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