@forgeroute/ui 0.3.5 → 0.3.7

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,170 +10684,44 @@ 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 {
+var AudioPlayerComponent = class AudioPlayerComponent {
 	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.src = input("", ...ngDevMode ? [{ debugName: "src" }] : /* 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 */ []);
+		this.preload = input("metadata", ...ngDevMode ? [{ debugName: "preload" }] : /* istanbul ignore next */ []);
+		this.playbackError = output();
+		this.failed = signal(false, ...ngDevMode ? [{ debugName: "failed" }] : /* 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;
+			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: BarChartComponent,
+			type: AudioPlayerComponent,
 			deps: [],
 			target: i0.ɵɵFactoryTarget.Component
 		});
 	}
 	static {
 		this.ɵcmp = i0.ɵɵngDeclareComponent({
-			minVersion: "17.2.0",
+			minVersion: "17.0.0",
 			version: "22.2.2",
-			type: BarChartComponent,
+			type: AudioPlayerComponent,
 			isStandalone: true,
-			selector: "ui-bar-chart",
+			selector: "ui-audio-player",
 			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",
+				src: {
+					classPropertyName: "src",
+					publicName: "src",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
@@ -10860,44 +10733,28 @@ var BarChartComponent = class BarChartComponent {
 					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",
+				preload: {
+					classPropertyName: "preload",
+					publicName: "preload",
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
 				}
 			},
-			viewQueries: [{
-				propertyName: "canvas",
-				first: true,
-				predicate: ["canvas"],
-				descendants: true,
-				isSignal: true
-			}],
+			outputs: { playbackError: "playbackError" },
 			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>
+    @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}.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"],
+			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
 		});
 	}
@@ -10906,61 +10763,33 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.2",
 	ngImport: i0,
-	type: BarChartComponent,
+	type: AudioPlayerComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "ui-bar-chart",
+			selector: "ui-audio-player",
 			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>
+    @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}.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"]
+			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: {
-		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: [{
+		src: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "height",
+				alias: "src",
 				required: false
 			}]
 		}],
@@ -10972,33 +10801,17 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
-		showValues: [{
+		preload: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "showValues",
+				alias: "preload",
 				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 }]
+		playbackError: [{
+			type: i0.Output,
+			args: ["playbackError"]
 		}]
 	}
 });
@@ -28356,6 +28169,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, 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