@forgeroute/ui 0.3.4 → 0.3.5

package/fesm2022/forgeroute-ui.mjs

@@ -7,8 +7,8 @@ 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 { 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");
@@ -2719,6 +2719,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 +2758,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 +2866,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 +2895,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 +2942,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 +2974,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 +2989,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 +4054,8 @@ var TableToolbarComponent = class TableToolbarComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -4303,6 +4392,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 +4829,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 +4839,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 +5724,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 +6278,8 @@ var ImportExportComponent = class ImportExportComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -6648,6 +6767,8 @@ var ConfirmOutletComponent = class ConfirmOutletComponent {
 				selector: "ui-button",
 				inputs: [
 					"variant",
+					"routerLink",
+					"queryParams",
 					"color",
 					"active",
 					"size",
@@ -6993,6 +7114,8 @@ var ErrorStateComponent = class ErrorStateComponent {
 				selector: "ui-button",
 				inputs: [
 					"variant",
+					"routerLink",
+					"queryParams",
 					"color",
 					"active",
 					"size",
@@ -7747,7 +7870,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 +7915,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 +7931,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 +9294,8 @@ var DataTableComponent = class DataTableComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -10767,7 +10892,7 @@ var BarChartComponent = class BarChartComponent {
 			ngImport: i0,
 			template: `
     <div class="bc-wrap" [class.bc-default-height]="height() === 240" [style.height.px]="height()"
-         role="img" [attr.aria-label]="ariaLabel() || null">
+         [attr.role]="ariaLabel() ? 'img' : null" [attr.aria-label]="ariaLabel() || null">
       <canvas #canvas></canvas>
     </div>
   `,
@@ -10790,7 +10915,7 @@ i0.ɵɵngDeclareClassMetadata({
 			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">
+         [attr.role]="ariaLabel() ? 'img' : null" [attr.aria-label]="ariaLabel() || null">
       <canvas #canvas></canvas>
     </div>
   `,
@@ -16717,6 +16842,8 @@ var SendEmailComponent = class SendEmailComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -17937,6 +18064,8 @@ var SendTextComponent = class SendTextComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -22970,6 +23099,8 @@ var QrCodeComponent = class QrCodeComponent {
 				selector: "ui-button",
 				inputs: [
 					"variant",
+					"routerLink",
+					"queryParams",
 					"color",
 					"active",
 					"size",
@@ -23238,6 +23369,8 @@ var PanelInfoListComponent = class PanelInfoListComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -24989,6 +25122,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 +25195,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 +25209,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 +25280,8 @@ var DateRangePickerComponent = class DateRangePickerComponent {
 					selector: "ui-button",
 					inputs: [
 						"variant",
+						"routerLink",
+						"queryParams",
 						"color",
 						"active",
 						"size",
@@ -25179,7 +25322,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 +25362,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
 		rangeChange: [{
 			type: i0.Output,
 			args: ["rangeChange"]
@@ -27936,6 +28087,8 @@ var DetailCardComponent = class DetailCardComponent {
 				selector: "ui-button",
 				inputs: [
 					"variant",
+					"routerLink",
+					"queryParams",
 					"color",
 					"active",
 					"size",