@forgeroute/ui 0.3.2 → 0.3.3

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, 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, NgZone, 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";
@@ -7,6 +7,7 @@ import { Subject, catchError as catchError$1, debounceTime as debounceTime$1, fi
 import { DOCUMENT, DatePipe, DecimalPipe, NgTemplateOutlet } from "@angular/common";
 import * as i1 from "@angular/forms";
 import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { BarController, BarElement, CategoryScale, Chart, LinearScale, Tooltip } from "chart.js";
 import { NavigationEnd, Router, RouterLink, RouterLinkActive } from "@angular/router";
 import { DomSanitizer } from "@angular/platform-browser";
 const FORGEROUTE_CONFIG = new InjectionToken("FORGEROUTE_CONFIG");
@@ -10559,6 +10560,315 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+Chart.register(BarController, BarElement, CategoryScale, LinearScale, Tooltip);
+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) 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()"
+         role="img" [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()"
+         role="img" [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)));
@@ -27885,6 +28195,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, 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 };
 
 //# sourceMappingURL=forgeroute-ui.mjs.map