@forgeroute/ui 0.3.4 → 0.3.6

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";
@@ -7,7 +7,6 @@ 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");
@@ -2719,6 +2718,8 @@ i0.ɵɵngDeclareClassMetadata({
 var ButtonComponent = class ButtonComponent {
 	constructor() {
 		this.variant = input("primary", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+		this.routerLink = input(null, ...ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []);
+		this.queryParams = input(null, ...ngDevMode ? [{ debugName: "queryParams" }] : /* istanbul ignore next */ []);
 		this.color = input(void 0, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
 		this.active = input(false, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
 		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
@@ -2756,6 +2757,20 @@ var ButtonComponent = class ButtonComponent {
 					isRequired: false,
 					transformFunction: null
 				},
+				routerLink: {
+					classPropertyName: "routerLink",
+					publicName: "routerLink",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				queryParams: {
+					classPropertyName: "queryParams",
+					publicName: "queryParams",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
 				color: {
 					classPropertyName: "color",
 					publicName: "color",
@@ -2850,6 +2865,23 @@ var ButtonComponent = class ButtonComponent {
 			},
 			ngImport: i0,
 			template: `
+    <ng-template #content>
+      @if (loading()) {
+        <span class="spinner"></span>
+      }
+      <ng-content />
+    </ng-template>
+    @if (routerLink() !== null) {
+      <!-- A real link (middle-click, open in new tab, screen readers say "link"): same look as the button of this variant, underlined. -->
+      <a
+        [routerLink]="routerLink()"
+        [queryParams]="queryParams()"
+        [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
+        [class.btn-full]="fullWidth()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-describedby]="ariaDescribedBy() || null"
+      ><ng-container [ngTemplateOutlet]="content" /></a>
+    } @else {
     <button
       [type]="type()"
       [class]="'btn btn-' + variant() + ' btn-' + size()"
@@ -2862,15 +2894,39 @@ var ButtonComponent = class ButtonComponent {
       [attr.aria-describedby]="ariaDescribedBy() || null"
       [style.background]="color() || null"
       [style.border-color]="color() || null"
-    >
-      @if (loading()) {
-        <span class="spinner"></span>
-      }
-      <ng-content />
-    </button>
+    ><ng-container [ngTemplateOutlet]="content" /></button>
+    }
   `,
 			isInline: true,
-			styles: [":host{display:inline-flex}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.btn-full{width:100%}.btn-primary{background:#3b82f6;color:#fff;border:1px solid #3B82F6}.btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:#3b82f6;border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:#60a5fa}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"],
+			styles: [":host{display:inline-flex}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.btn-full{width:100%}.btn-primary{background:#3b82f6;color:#fff;border:1px solid #3B82F6}.btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:#3b82f6;border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:#60a5fa}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}, {
+				kind: "directive",
+				type: RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			}],
 			changeDetection: i0.ChangeDetectionStrategy.OnPush
 		});
 	}
@@ -2885,8 +2941,26 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "ui-button",
 			standalone: true,
+			imports: [NgTemplateOutlet, RouterLink],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: `
+    <ng-template #content>
+      @if (loading()) {
+        <span class="spinner"></span>
+      }
+      <ng-content />
+    </ng-template>
+    @if (routerLink() !== null) {
+      <!-- A real link (middle-click, open in new tab, screen readers say "link"): same look as the button of this variant, underlined. -->
+      <a
+        [routerLink]="routerLink()"
+        [queryParams]="queryParams()"
+        [class]="'btn btn-anchor btn-' + variant() + ' btn-' + size()"
+        [class.btn-full]="fullWidth()"
+        [attr.aria-label]="ariaLabel()"
+        [attr.aria-describedby]="ariaDescribedBy() || null"
+      ><ng-container [ngTemplateOutlet]="content" /></a>
+    } @else {
     <button
       [type]="type()"
       [class]="'btn btn-' + variant() + ' btn-' + size()"
@@ -2899,14 +2973,10 @@ i0.ɵɵngDeclareClassMetadata({
       [attr.aria-describedby]="ariaDescribedBy() || null"
       [style.background]="color() || null"
       [style.border-color]="color() || null"
-    >
-      @if (loading()) {
-        <span class="spinner"></span>
-      }
-      <ng-content />
-    </button>
+    ><ng-container [ngTemplateOutlet]="content" /></button>
+    }
   `,
-			styles: [":host{display:inline-flex}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.btn-full{width:100%}.btn-primary{background:#3b82f6;color:#fff;border:1px solid #3B82F6}.btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:#3b82f6;border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:#60a5fa}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"]
+			styles: [":host{display:inline-flex}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.btn-full{width:100%}.btn-primary{background:#3b82f6;color:#fff;border:1px solid #3B82F6}.btn-primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.btn-secondary{background:#fff;color:#334155;border:1px solid #e2e8f0}.btn-secondary:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1}.btn-ghost{background:transparent;color:#64748b;border:1px solid transparent}.btn-ghost:hover:not(:disabled){background:#f8fafc;color:#334155}.btn-danger{background:#dc2626;color:#fff;border:1px solid #dc2626}.btn-danger:hover:not(:disabled){background:#b91c1c;border-color:#b91c1c}.btn-link{background:none;color:#3b82f6;border:none;padding:0;font-weight:500}.btn-link:hover:not(:disabled){color:#60a5fa}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{padding:0}.btn-anchor{text-decoration:none}.btn-anchor.btn-link{text-decoration:underline;text-underline-offset:2px}.btn-warning{background:#f97316;color:#fff;border:1px solid #f97316}.btn-warning:hover:not(:disabled){background:#ea6c0a;border-color:#ea6c0a}.btn-tab{background:none;color:#64748b;border:none;border-bottom:2px solid transparent;border-radius:0;font-weight:600;font-size:.875rem;transition:all .15s}.btn-tab:hover:not(:disabled){background:none;color:#1e293b}.btn-tab.active{color:#3b82f6;border-bottom-color:#3b82f6}.btn-tab.btn-xs,.btn-tab.btn-sm,.btn-tab.btn-md,.btn-tab.btn-lg{padding:10px 20px;border-radius:0}.btn-icon{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon:hover:not(:disabled){background:#f1f5f9;color:#334155}.btn-icon-danger{width:28px;height:28px;padding:0;border-radius:6px;background:transparent;border:none;color:#94a3b8}.btn-icon-danger:hover:not(:disabled){background:#fee2e2;color:#dc2626}.btn-xs{padding:3px 8px;font-size:.75rem;border-radius:5px;gap:4px}.btn-sm{padding:6px 12px;font-size:.8125rem;border-radius:6px}.btn-md{padding:10px 16px;font-size:.875rem}.btn-lg{padding:14px 20px;font-size:1rem}@media(pointer:coarse),(max-width:480px){.btn-xs,.btn-sm,.btn-md,.btn-lg,.btn-tab{min-height:44px}.btn-link.btn-xs,.btn-link.btn-sm,.btn-link.btn-md,.btn-link.btn-lg{min-height:0}.btn-icon,.btn-icon-danger{position:relative}.btn-icon:after,.btn-icon-danger:after{content:\"\";position:absolute;inset:-8px}}.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -2918,6 +2988,22 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		routerLink: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "routerLink",
+				required: false
+			}]
+		}],
+		queryParams: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "queryParams",
+				required: false
+			}]
+		}],
 		color: [{
 			type: i0.Input,
 			args: [{
@@ -3967,6 +4053,8 @@ var TableToolbarComponent = class TableToolbarComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -4303,6 +4391,30 @@ function decodeFilterValues(raw) {
 	out.push(current);
 	return out.map((v) => v.trim()).filter(Boolean);
 }
+var PlusSafeParamCodec = class {
+	encode(v) {
+		return encodeURIComponent(v).replace(/%40/gi, "@").replace(/%3A/gi, ":").replace(/%24/gi, "$").replace(/%2C/gi, ",").replace(/%3B/gi, ";").replace(/%3D/gi, "=").replace(/%3F/gi, "?").replace(/%2F/gi, "/");
+	}
+	encodeKey(key) {
+		return this.encode(key);
+	}
+	encodeValue(value) {
+		return this.encode(value);
+	}
+	decodeKey(key) {
+		return decodeURIComponent(key);
+	}
+	decodeValue(value) {
+		return decodeURIComponent(value);
+	}
+};
+const CODEC = new PlusSafeParamCodec();
+function tableQueryParams(values = {}) {
+	return new HttpParams({
+		encoder: CODEC,
+		fromObject: values
+	});
+}
 function getEligibleOptions(options, selectedItems, field) {
 	if (selectedItems.length === 0) return options;
 	return options.filter((opt) => !selectedItems.every((item) => String(item[field] ?? "") === opt.value));
@@ -4716,6 +4828,7 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const MIN_VISIBLE_PERCENT = 2;
 var ProgressBarComponent = class ProgressBarComponent {
 	constructor() {
 		this.value = input(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
@@ -4725,7 +4838,10 @@ var ProgressBarComponent = class ProgressBarComponent {
 		this.tooltip = input("", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
 		this.ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.clampedValue = computed(() => Math.min(Math.max(this.value(), 0), this.max()), ...ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []);
-		this.percent = computed(() => this.max() > 0 ? Math.round(this.clampedValue() / this.max() * 100) : 0, ...ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []);
+		this.percent = computed(() => {
+			if (this.max() <= 0 || this.clampedValue() <= 0) return 0;
+			return Math.max(Math.round(this.clampedValue() / this.max() * 100), MIN_VISIBLE_PERCENT);
+		}, ...ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []);
 		this.effectiveVariant = computed(() => {
 			const fixed = this.variant();
 			if (fixed) return fixed;
@@ -5607,7 +5723,7 @@ var ImportExportComponent = class ImportExportComponent {
 		if (this.exporting) return;
 		this.exporting = true;
 		this.cdr.detectChanges();
-		let params = new HttpParams().set("size", "10000");
+		let params = tableQueryParams().set("size", "10000");
 		Object.entries(this.exportParams()).forEach(([k, v]) => {
 			if (v) params = params.set(k, v);
 		});
@@ -6161,6 +6277,8 @@ var ImportExportComponent = class ImportExportComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -6648,6 +6766,8 @@ var ConfirmOutletComponent = class ConfirmOutletComponent {
 				selector: "ui-button",
 				inputs: [
 					"variant",
+					"routerLink",
+					"queryParams",
 					"color",
 					"active",
 					"size",
@@ -6993,6 +7113,8 @@ var ErrorStateComponent = class ErrorStateComponent {
 				selector: "ui-button",
 				inputs: [
 					"variant",
+					"routerLink",
+					"queryParams",
 					"color",
 					"active",
 					"size",
@@ -7747,7 +7869,7 @@ var DataTableComponent = class DataTableComponent {
 			this._searchLoading.set(this._searchPending);
 			this._searchPending = false;
 			this._error.set(null);
-			let params = new HttpParams({ fromObject: this._extraParams() }).set("page", this._page() - 1).set("size", this.pageSize());
+			let params = tableQueryParams(this._extraParams()).set("page", this._page() - 1).set("size", this.pageSize());
 			if (this._search()) {
 				params = params.set("search", this._searchParam());
 				const searchFields = this._searchFields();
@@ -7792,7 +7914,7 @@ var DataTableComponent = class DataTableComponent {
 		if (ep) {
 			const params = this._countParams();
 			this._tabCountsSub?.unsubscribe();
-			this._tabCountsSub = this.http.get(`${this.config.baseUrl}${ep}`, { params }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			this._tabCountsSub = this.http.get(`${this.config.baseUrl}${ep}`, { params: tableQueryParams(params) }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
 				next: (counts) => {
 					const { all: allCount, ...tabCounts } = counts;
 					const total = allCount ?? Object.values(tabCounts).reduce((a, b) => a + b, 0);
@@ -7808,7 +7930,7 @@ var DataTableComponent = class DataTableComponent {
 		if (fep) {
 			const params = this._countParams();
 			this._filterCountsSub?.unsubscribe();
-			this._filterCountsSub = this.http.get(`${this.config.baseUrl}${fep}`, { params }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+			this._filterCountsSub = this.http.get(`${this.config.baseUrl}${fep}`, { params: tableQueryParams(params) }).pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
 				next: (counts) => this._filterCounts.set(counts),
 				error: () => {}
 			});
@@ -9171,6 +9293,8 @@ var DataTableComponent = class DataTableComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -10560,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()"
-         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)));
@@ -16717,6 +16524,8 @@ var SendEmailComponent = class SendEmailComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -17937,6 +17746,8 @@ var SendTextComponent = class SendTextComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -22970,6 +22781,8 @@ var QrCodeComponent = class QrCodeComponent {
 				selector: "ui-button",
 				inputs: [
 					"variant",
+					"routerLink",
+					"queryParams",
 					"color",
 					"active",
 					"size",
@@ -23238,6 +23051,8 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -24989,6 +24804,7 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 		this.activePreset = input("ytd", ...ngDevMode ? [{ debugName: "activePreset" }] : /* istanbul ignore next */ []);
 		this.showPresets = input(true, ...ngDevMode ? [{ debugName: "showPresets" }] : /* istanbul ignore next */ []);
 		this.includeAllTime = input(false, ...ngDevMode ? [{ debugName: "includeAllTime" }] : /* istanbul ignore next */ []);
+		this.ariaLabel = input("Date range", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
 		this.rangeChange = output();
 		this.selectedPreset = linkedSignal(() => this.activePreset(), ...ngDevMode ? [{ debugName: "selectedPreset" }] : /* istanbul ignore next */ []);
 		this.customStart = signal("", ...ngDevMode ? [{ debugName: "customStart" }] : /* istanbul ignore next */ []);
@@ -25061,6 +24877,13 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 					isSignal: true,
 					isRequired: false,
 					transformFunction: null
+				},
+				ariaLabel: {
+					classPropertyName: "ariaLabel",
+					publicName: "ariaLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
 				}
 			},
 			outputs: { rangeChange: "rangeChange" },
@@ -25068,7 +24891,7 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 			template: `
     <div class="date-range-picker">
       @if (showPresets()) {
-        <ui-pill-tabs [tabs]="presetTabs()" [activeKey]="selectedPreset()" (tabChange)="selectPreset($any($event))" />
+        <ui-pill-tabs [tabs]="presetTabs()" [activeKey]="selectedPreset()" [ariaLabel]="ariaLabel()" (tabChange)="selectPreset($any($event))" />
       }
       @if (selectedPreset() === 'custom' || !showPresets()) {
         <div class="custom-range">
@@ -25139,6 +24962,8 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -25179,7 +25004,7 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     <div class="date-range-picker">
       @if (showPresets()) {
-        <ui-pill-tabs [tabs]="presetTabs()" [activeKey]="selectedPreset()" (tabChange)="selectPreset($any($event))" />
+        <ui-pill-tabs [tabs]="presetTabs()" [activeKey]="selectedPreset()" [ariaLabel]="ariaLabel()" (tabChange)="selectPreset($any($event))" />
       }
       @if (selectedPreset() === 'custom' || !showPresets()) {
         <div class="custom-range">
@@ -25219,6 +25044,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
 		rangeChange: [{
 			type: i0.Output,
 			args: ["rangeChange"]
@@ -27936,6 +27769,8 @@ var DetailCardComponent = class DetailCardComponent {
 				selector: "ui-button",
 				inputs: [
 					"variant",
+					"routerLink",
+					"queryParams",
 					"color",
 					"active",
 					"size",
@@ -28203,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